Utvärdering av en byrås webbplats

Har ni tänkte på att frisörer ofta inte är så snygga i håret? Det samma gäller tydligen fler branscher.

Den här interaktiva byrån, som jag inte kommer att nämna vid namn, har fått flera utmärkelser och hör till landets främsta inom sin bransch. Framför allt är de kända för reklam, men kommunicerar också att de är en av de allra bästa interaktiva byråerna. Jag bestämde mig för att utvärdera hur bra deras egen webbplats är.

Webbplats ”Byråwebb”

  • Ett grid med 256 rektangulära boxar som var och en har ett färgat foto. Det går inte att se vad bilderna på boxarna föreställer och de har ingen förklarande text, utan boxarna är i detta läge mest dekorativa.  Det är verkligen snyggt.
  • Vid mouse-over över en box så fylls en textruta mitt på sidan i med titeln på boxen/projektet.
  • Mitt bland boxarna ligger en stor textruta som från början är tom.  En förstoringsglas-ikon antyder att det är en sökruta. Börjar man skriva något i sökrutan så väljs de boxar ut som matchar det man skriver tills det bara är en eller ett par kvar, så boxarna är både innehållsförteckning och sökresultat/filter. Vill man se titeln på de boxar som är kvar efter filtreringen måste man göra mouse-over på dem. Då skrivs deras titel ut i sökrutan istället för sökresultatet.
  • Klickar man på en box, kommer man till en fördjupningssida där man kan läsa mer:  vissa boxar mostvarar en kampanj som byrån gjort, andra innehåller info om byrån.
  • För att navigera tillbaka till startsidan så måste man klicka på SÖK uppe till höger på sidan.
  • Överst på startsidan finns några menyalternativ: Nyheter, Kunder osv. Den första, Kunder, leder till ett helt nytt webbläsarfönster och till en sajt i vanlig html. På denna nya sida måste man klicka på Till byrån för att komma tillbaka till Start/sök, och då öppnas ytterligare ett nytt fönster.  Övriga menyval på Start/sök öppnas som boxar inom ramen för den vanliga sajten.

Det som är bra

  • Innovativ och drastisk approach till sök som navigation, ett navigeringsbeteende som finns och växer i betydelse
  • För den som vet exakt vad han letar efter

Det som kunde vara bättre

  • Hela sajten är i flash. Med dagens teknik skulle inte någon del behöva vara gjord i flash, och definitivt inte hela sajten,  inklusive texter och foton.
  • Fallbackversionen suger. Kommer jag in med en flashlös iPad möts jag av ett meddelande om att jag behöver installera flash för att få ”bästa upplevelsen”. Det går att klicka sig till en ”förenklad version”,  som är alla 256 boxar under varandra, fortfarande utan titel och utan nån chans att ta reda på vad de innehåller annat än att klicka på dem. Mouse-over funkar ju inte på pekskärmar. Toppmenyn har man åtminstone här lagt in som html: ”Nyheter” leder ju som bekant till en riktig webbsida i html, och även om den ser mycket liten ut på iOS så går den åtminstone att läsa. Övriga menylänkar leder till html-versioner av boxsidan:  färgglada boxar som den flashlösa användaren inte har en aning om vad de innehåller. Det är rena julafton!
  • Sökfunktionen räcker bara halvvägs. Även om man använder sökrutan eller toppmenyn för att filtrera ned antalet boxar till mer hanterliga 10 st, så måste man fortfarande använda musen och föra muspekaren över var och en av boxarna för att få veta vilken av träffarna som är relevant. Bilderna är inte till mycket hjälp. Istället för att ge användaren en lista på träffar, som tar nån sekund att scanna igenom med blicken, så tvingar man honom att köra mouse-over på varenda box, men namnet på boxen syns bara så länge som muspekaren är kvar ovanpå. Alla som spelat memory nån gång vet hur svårt det kan vara att minnas var ett visst kort låg. Mousear man över ett antal träffar är risken stor att man glömmer bort var den man ville ha låg någonstans.
  • Ordningen på länkarna ändras hela tiden. Om jag klickar på ”Om” flera gånger så ligger boxarna i olika ordning varje gång. Samma om jag söker på något: en slumpgenerator verkar kicka igång och kasta om sökresultaten.
  • Att backa hjälper inte. Sökfunktionen sätter webbläsarens backa-funktion ur spel. Du kan alltså inte gå tillbaka ett steg i webbläsarens historik om du börjat skriva en sökning eller klickat dig vidare till en snävare filtrering av boxar. Däremot verkar det funka hyggligt att backa från en fördjupningssida till sökresultatsidan.
  • Går inte att fatta hur man kommer tillbaka till startsidan.  Jag har sökt mig ända ned till en kundpresentation och har några få boxar i bild och kundens namn står i sökrutan. Nu vill jag  gå tillbaka till byråns startsida. Först letar jag efter en länkstig eller backaknapp, lite som iTunes eller ett vanligt windowsfönster. Finns inte. Backa i webbläsaren går inte. Det finns inget ”Start” i toppmenyn och heller inte nån logotyp uppe till vänster man kan klicka på. Istället ligger funktionen för att gå till startsidan under ett klick på Förstoringsglaset i sökrutan. Då ”rensas” formuläret och man tas till startläget. Det här måste vara den enda webbplats i världen där ett klick på förstoringsglaset i en sökruta inte betyder ”Sök” utan ”Avbryt sökning och gå tillbaka till startsidan”.  Tillägg: till sist hittar jag också en logotyp längst ner till höger, under hela webbplatsen. Ett klick på den tar mig också tillbaka till start.
  • Tangentbordkommandon fungerar dåligt.  Tabbordningen från sökrutan är helt bananas: tabbar man framåt flyttas man vilt mellan alla boxar. Det går inte att flytta pekaren bort från sökrutan med piltangenterna, men däremot funkar piltangenterna om man redan tabbat sig till en box. Ska man utan mus gå från sökrutan till toppmenyn får man alltså först tabba, sen pila sig dit upp mellan boxarna.
  • Ctrl-C, Ctrl-V och Ctrl-A fungerar inte för att markera och klistra in text i sökrutan.
  • Man vet inte vad man får. Inget skiljer en textlänk från en videolänk.

Knäckfrågor

  • Vi vet att en del föredrar att använda en sökruta när de egentligen vill navigera, för att det är enklare än att hålla på och klicka i menyer. Men om vi ersätter all navigation med enbart en sökruta, kan vi då sägas tillgodose en majoritet av användningsfallen?
  • Vilka krav ställer lösningen på sökmotorn? Retorisk fråga: räcker en nyckelordslista?
  • Om man på det här sättet tar bort hela upptäcktsdelen av besöket, vad kostar det? Vad är byråns affär jämfört med Googles, för att hårdra lite?

Tyvärr tycks formen ha fått gå före funktionen. Idén med sökrutan som filtrerar medan man skriver i den är förstås god (annars skulle inte jättar som Google använda sig av något liknande). Men den från början goda idén har slarvats bort genom att alla boxar ser likadana ut och saknar övrig metadata. Hela sajten är ett klassiskt exempel på Mystery Meat Navigation (begreppet förklaras också i Wikipedia).

What’s the fuzz?

Spelar det då nån roll på vilket sätt potentiella kunder får se en byrås portfolio på webben? Om byrån är ett berömt arkitektkontor som Wingårdhs så spelar det förstås ingen roll för kvaliteten på arkitekturen i stort att deras webbplats är kackig (däremot skulle det vara illa för dem om deras fysiska kontor såg fult ut). För arkitekter, filmare, fotografer och många andra typer av är webben ”bara” ett skyltfönster.

Men den interaktiva byrån är en annan femma.  För dem är webben både deras skyltfönster och deras produkt. Den interaktiva byråns kunder är företag som står i begrepp att göra om sin egen webbplats och som förmodligen är redo för Det Allra Senaste.  Om de kunderna hittar byrån jag har utvärderat i det här inlägget, så hittar de ju en byrå som vunnit många pris,  är bäst på interaktivitet  – och som själva har en vacker men oändligt krånglig flashwebbplats med mystery-meat-navigation. Och så säger de potentiella kunderna till varandra: – Kanske är det vackra men obegripliga helt sökbaserade flashwebbplatser som är Det Allra Senaste? I värsta fall får världen som ett resultat av det fler webbplatser som är svåra att använda.

Rekommendationer för att ändra ”Byråwebb”

  1. Ta bort all flash som inte är nödvändig  (viss video kanske bara finns sparad  i flash etc)
  2. Lägg loggan längst upp till vänster och lägg dessutom till ”Startsida” i toppmenyn
  3. Låt användaren välja mellan gridvy och en mer konventionell och sorteringsbar listvy, med betydligt mer metadata i listvyn
  4. Använd listvyn som standard för mindre skärmar (ie mobiler)
  5. Vid sökning/filtrering, komplettera varje box med utskriven titel
  6. Skippa slumpgeneratorn, låt ordningen i menyer etc alltid vara den samma
  7. Om en länk startar en video, ska det synas redan på länken (ikon eller liknande)
  8. Klick på Förstoringsglaset utför sökningen. Om en  ”Rensa”-funktion behövs, lägg den bredvid
  9. Webbläsarfunktioner som ctrl-klick och backa ska fungera
  10. Lägg in en ”Sök mer”-funktion som faktiskt använder en riktig sökmotor för den som är på jakt efter mer än bara nyckelorden.

Mer läsning

http://leonpaternoster.com/2010/08/when-is-mystery-meat-navigation-acceptable/

http://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples/ 

About these ads

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s