Web Design Critique # 88 SeaWorld

Varje vecka tittar vi på en ny webbplats och analyserar designen. Vi pekar på båda områdena som görs bra förutom de som kan använda lite arbete. Slutligen avslutar vi genom att be dig att ge din egen feedback.

Idag har vi en fantastisk klient som jag är säker på att vi alla älskar: SeaWorld! Hur coolt är inte det? Låt oss hoppa in och se vad vi tycker om deras webbplats.

Om du vill skicka din webbplats till en framtida designkritik tar det bara några minuter. Vi tar ut $ 49 för att kritisera din design - betydligt mindre än du skulle betala för en konsult för att kolla på din webbplats! Du kan läsa mer här.

Om SeaWorld

SeaWorld behöver ingen introduktion. Det är en av de coolaste temaparkens kedjor som finns. Delfiner, mördarevalar, mantor och mer blandade med spännande åkattraktioner och andra stora attraktioner. Det är helt enkelt en magisk plats.

Självklart vet Sea World-folket allt det finns att veta om att ge människor en oslagbar temaparkupplevelse, men hur är deras webb-UX? Låt oss ta en titt.

Här är en skärmdump av SeaWorld Parks hemsida:

Startsidan

Sidan ovan är helt enkelt en gateway som tar dig till en av tre SeaWorld-platser: San Diego, San Antonio eller Orlando. Vi gräver djupare på en viss park webbplats lite senare men låt oss börja med en diskussion på den här sidan.

Vad är målen?

Eftersom denna sida är så enkel är det ganska lätt att analysera dess effektivitet. En snabb titt säger oss att det finns tre primära saker som konstruktörerna försöker uppnå med den här sidan. Det första och viktigaste målet är att ta dig till en av de dedikerade SeaWorld parkerna. Utan detta syfte skulle denna sida inte ens existera så jag skulle kalla det primära syftet.

? Det första och viktigaste målet är att ta dig till en av de dedikerade SeaWorld parkerna. Utan detta syfte skulle denna sida inte ens existera.?

Hand i hand med det syftet är varumärkeskommunikation. Ja, du har kommit till rätt ställe. Vi är SeaWorld och här är en liten smak av vad du kan förvänta dig att se på våra parker. Den sista delen av syftet ligger i den lilla sekundära navigeringen högst upp på sidan. Bara om du kom till fel ställe, här är några länkar för att få dig där du behöver vara.

Var är fokuset?

Med de ovan angivna målen, låt oss utvärdera framgången med denna design. Om hela syftet med sidans existens är att fungera som en gateway till de andra tre parkerna, är det uppenbart att en bra del av sidan ska vara avsedd för denna uppgift. Men vad vi ser istället är att en ganska liten del av sidan är tillägnad någon form av interaktion alls.

Låt oss skriva ut det här så att vi kan utvärdera objektets rymdrelationer:

Som du kan se är all interaktivitet kastad i ett litet område högst upp på sidan. Det tar alla baksätet till den stora Atlantis-rittet, som vi diskuterar senare. Det är kul att visa upp en tur och få folk upphetsad, men som jag nämnde ovan tror jag att det här är faktiskt det sekundära målet för sidan. I sin nuvarande form är det faktiskt mer av en distraktion.

När jag landar på den här sidan drar den grafiken mig direkt, men tar mig inte någonstans. Det är inte en länk, det pekar inte på någonting, det är bara en bild. Därifrån har mina ögon inte instinktivt en nästa destination. De är tvungna att flyta runt sidan för att ta reda på vad hecken pågår.

? Om detta verkligen bara är en övergångs sida, då behöver du få användare där de vill gå så fort som möjligt.?

Jag föreslår att du tänker om hela kommunikationsflödet på den här sidan. Om detta verkligen bara är en övergångs sida, måste du få användare där de vill gå så fort som möjligt. Odds är, du har bara en minut av sin tid till att börja med och du har bara slösat bort det och tvingar dem att räkna ut den här sidan. Föreställ dig att vi skiftade sidan till något mer så här:

Detta sätter sidans främsta mål fram och i ditt ansikte. Här tar de tre temaparkens val på centrum. Så fort sidan laddas förstår du vad som händer och klickar på parken som du är intresserad av att besöka.

Målet med denna layout är att minska den tid som spenderas på gateway-sidan, så att användaren kan vara mer produktiv. De tre stora lådorna tjänar dubbeltjänst. De får användare där de vill gå och ger dig lite utrymme för varumärkesbilder. Snarare än att visa en attraktion på den här sidan kan du markera tre unika egenskaper, en från varje sida.

Estetik

Den estetiska känslan på sidan är ett havslandskap med lite vattenlevande liv och din stereotypa amerikanska kärnfamilj som har kul på en resa. Konceptuellt träffar detta alla viktiga punkter. Det är vått, vildt, roligt och riktar sig till vad som är sannolikt SeaWorlds primära kundbas (välklädda, övre medelklassfamiljer med disponibel inkomst).

Ibland kan någonting vara begreppsmässigt död på, men hamnar inte så bra i verkställighet, och jag tror det är vad som händer här. Grafiken på sidan har alla en slags kullerstenshop tillsammans Photoshop hatchet jobb slags utseende.

? Ibland kan någonting vara begreppsmässigt död, men slutar inte så bra i verkställande, och jag tror det är vad som händer här.?

Stänket till exempel är uppenbart dras från ett litet skott. Det är troligt att stänket kommer från ett lagerfoto av något som en bit frukt som tappas i lite vatten. Detta har den udda effekten av att folket verkar nästan miniatyr. Kasta bakgrunden i mixen och plötsligt ser allting alltför stort ut. Storleken på allt här är bara lite wonky.

Odds är, de flesta människor kommer inte märka alla dessa saker.Med detta sagt tror jag att kvaliteten på den visuella upplevelsen här är ganska låg. Att veta hur designteam arbetar, det är utan tvekan helt enkelt de varumärkesresurser som webbdesignteamet måste arbeta med. Jag tycker personligen att en stor, hög kvalitet, verklig Ett foto av människor som har roligt på resan skulle ha en större, mer trovärdig inverkan.

Park Hemsida

Vi har länge kritiserat en mycket liten del av webbplatsen men med tanke på att det är det första folk ser, är det värt att ta sig tid att få det rätt. Låt oss nu gå vidare och titta på en av de dedikerade parkerna.

Första intrycket

Här har vi en sida med mycket mer på gång. Mittpartiet är inte en statisk bild längre, det är ett bildspel som cyklar genom olika spännande attraktioner med massor av leende, glada familjer och simma varelser. För att vara ärlig, transporteras många av de estetiska problem som vi såg förut här.

Jag är inte särskilt imponerad av utseendet på webbplatsen som helhet. The? SeaWorld varumärke? kommer ut som lite rörig och upptagen. Bilderna är ett lapptäcke av olika idéer, alla slagna tillsammans och besvärligt integrerade på havsbakgrunden. De presenteras också med en mycket låg upplösning med massor av ful JPG artifacting.

? Bilderna är ett lapptäcke av olika idéer, alla slagna tillsammans och obehagligt integrerade på havets bakgrund.?

Om bakgrunden är det som snubblar upp designteamet, tappa det. Du kan använda ett helviddsfoto i rubriken utan att ta upp hela webbplatsens bakgrund. Jag tycker att webbplatsen nedan gör det här ganska bra:

Denna sida är underbar och det finns mycket att vi kan lära av det. Lägg märke till hur bildspelet består av superkvalitetsfotografier, inte snabba och smutsiga Photoshop-kompileringar. Det händer mycket men det är allt snyggt ordnat och förenklat så att du inte har för mycket att skrika för din uppmärksamhet på en gång.

Nu är visuella alla fel för SeaWorld? Självklart. De behöver fortfarande driva de spännande familjebilderna, men det borde ske på ett sätt som är mer som webbplatsen ovan. Ge mig kul, men offra inte kvaliteten på den visuella upplevelsen för att komma dit.

? Ge mig kul, men ge inte upp kvaliteten på den visuella upplevelsen för att komma dit.?

Jag kan inte föreställa mig att SeaWorld på alla ställen inte har en lagerhög med fantastiskt bild av både beast och man, bara väntar på att integreras i en vacker plats.

Vad är målen?

Målen för denna sida är väldigt mer komplicerade än den sida som vi såg tidigare. Till att börja med, låt oss överväga varför jag som användare skulle besöka SeaWorld-webbplatsen. Här är en lista över saker som jag kommit fram till, i ingen särskild ordning:

  • Utbildning: Vad är SeaWorld som? Vad ska vi göra?
  • Köp biljetter
  • Planera min resa (hotell, flyg, etc.)
  • Park timmar
  • Körbeskrivning
  • Försäljning och speciella evenemang

Prestanda mot mål

För det mesta utför webbplatsen ganska bra mot min korta lista över möjliga mål. Jag älskar att en av de första sakerna jag ser på webbplatsen är den här lilla widgeten:

Det här är häftigt. Omedelbart kan jag se parkens timmar och väderförhållanden. Det här är två stora orsaker till webbplatsbesök och utan ett enda klick har jag redan hittat mitt svar.

Utforska vidare, det finns en trevlig liten biljett inköpsområde, körriktningar är ett klick bort under? Park information? länk, det finns flera turplaneringslänkar och massor av utbildning om hur parken är och vad som händer.

Sammantaget tror jag att om jag har ett specifikt mål i åtanke när jag kommer till webbplatsen, borde jag kunna göra det ganska enkelt. Omvänt, om jag bara vill utforska, finns det gott om innehåll för att få mig upphetsad över parken.

Navigationsmenyer

Trots det faktum att det inte är för svårt för mig att hitta det jag söker, tycker jag fortfarande att det finns gott om utrymme för förbättring. Det viktigaste som får mig att skaka mitt huvud just nu är navigeringsmenyn? eller snarare menyer.

Det finns minst fyra olika horisontella linjer med länkar i detta lilla utrymme. Dessutom finns det stora rullgardinsmenyer på svävaren. Vi har undermenyer för våra undermenyer. Designers är alltid olika om huruvida det är bra att ha massor av navigering som gör varje sida ett klick bort från hemsidan. Det finns uppenbarligen både fördelar och nackdelar med mega navigering taktik, men en sak är säkert: de är lätta att skruva upp.

Oavsett hur långt du vill ta det, anser jag att en viss förenkling här är avgörande. Det är bara för mycket navigering och det gör det mycket svårt att sikta igenom. Detta problem är extremt vanligt på stora webbplatser med mycket innehåll och det är inte alltid ett enkelt svar. Nedan ser du att Disney kämpar med samma navigeringsöverbelastning.

Slutsatser

Det är lätt att stå tillbaka och döma stora organisationer för sina designproblem. Argumentet går alltid samma sak: de har så mycket pengar och så många resurser, varför kan de inte dra av den bästa hemsidan i världen?

Situationens verklighet är att detta är en ganska naiv position som endast tas av dem som aldrig har arbetat som en del av en stor organisation. Du kanske ser freelancer som arbetar på sin egen personliga webbplats som underdog, men i verkligheten har han fördelen av ett designperspektiv. Han kan göra vad han vill ha. Använd experimentell webbteknologi, övervaka hela designen och se till att det finns en konsekvent, toppklassig upplevelse. allt kommer rätt ut ur hans huvud och det finns ingen att utmana det.

? De arbetar hårt och betyder bra, men i slutändan finns det många stora hinder som står mellan dem och en stellar design.?

Kontrastera det här med hur företags webbdesignprojekt normalt går. Det finns massor av händer och huvuden som måste samarbeta på ett enda projekt. Stränga och ofta konkurrerande varumärkesriktlinjer, krav på webbläsarkompatibilitet, subparent designresurser (skräp i, skräp), långa möten och kontorspolitik är vad som definierar den dagliga malningen för dessa människor. De arbetar hårt och betyder bra, men i slutändan finns det många stora hinder som står mellan dem och en stellar design.

Rekommendationer för framtiden

Det finns gott om inkrementella förbättringar här som kan göras, men låt oss tänka på den stora omkonstruktionen som oundvikligen kommer att hända en dag. Även om det är år i framtiden är det värt att diskutera.

Min rekommendation är att riva ner det hela och börja från början. Två stora skift måste hända. För det första måste SeaWorlds varumärkeslag bestämma hur de vill se på webben. Den nuvarande estetiken skärs inte och de behöver en ny riktning som visar en bättre balans mellan bilder som är spännande och högkvalitativa.

? Webbarnas killar behöver bygga några wireframes och fokusera på användbarhet förutom estetik.?

Medan det händer måste webkillar bygga några trådramar och fokusera på användbarhet förutom estetik. Namnet på spelet är förenkling. Skär röran och ta reda på vad som är viktigast. Som vi såg på gateway-sidan måste de viktiga bitarna göras mer framträdande och lättare att använda. Studera det enkla flödet på Kiawah Island webbplats ovan och ta anteckningar. Hitta andra webbplatser som kommer att fungera som bra inspirationskällor och ta reda på vad de gör rätt.

Medan du är på det, gör mobilen en prioritet. Jag hade inte tid eller utrymme här för att täcka mobilen, men det är dåligt. Nästa webbplats ska vara mottaglig och inte straffa mobila användare med en subpar-upplevelse.

? Nästa webbplats ska vara mottaglig och inte straffa mobila användare med en subpar-upplevelse. ?

Redesignprojektet kommer att bli en enorm, svår och frustrerande utmaning som alltför lätt hoppar av banan och blir en katastrof. Sådan är webbdesignerns situation. Vi älskar alla det för att trots alla utmaningar kan fantastiska resultat faktiskt nås. Jag är övertygad om att SeaWorld-laget har talang för att uppnå en fantastisk och mycket användbar design om de verkligen ägnar sig åt de två målen.

Din tur!

Nu när du har läst mina kommentarer lägger du in och hjälper till med att ge designern ytterligare råd. Låt oss veta vad du tycker är bra om designen och vad du tycker kan vara starkare. Som alltid ber vi att du också respekterar webbplatsens designer och erbjuder tydliga konstruktiva råd, utan att det blir några svåra förolämpningar.