UX som ger dig vingar

Boris Kehr

Jag är långt ifrån en van flygresenär. Jag flyger typ aldrig. Däremot håller jag på med datorer och digitala gränssnitt hela dagarna. Med den grundkunskapen borde det inte vara så svårt att lösa in en digital biljett. Eller? Hur svårt kan det vara? 

Boven i dramat var den här biljetten:

Så här tolkade jag den: Jag förväntas kontrollera att all information stämmer och sen klicka på en av de gröna knapparna. Men när jag visade upp mitt “Travel document” vid incheckningen tog det stopp.

– Du måste ha en QR-kod, sa vakten.

Jag kollade på de två knapparna på skärmen. Jag ville definitivt inte ändra eller avboka så jag klickade på den andra knappen som ledde till en sida som inte fanns. Fem minuter kvar till avgång. Jag började gripas av panik. Räddningen blev min kollega som sms:ade mig rätt QR-kod. Det visade sig att jag skulle klickat på mitt namn under rubriken Hent Mobilbillett. Ganska självklart så här i efterhand. Men när jag stod där med svettig panna, panik i blicken och tunnelseende var det allt annat än uppenbart.

Jag hade velat ha biljetten så här:

Jag har medvetet gjort så få grafiska ändringar som möjligt. Jag kunde ha gjort min skiss mycket snyggare men det är inte bristen på skönhet som är originalets stora svaghet. Väldigt små, enkla och billiga ändringar kan ge stor effekt och betydligt bättre upplevelse. I min skiss är informationen tydligt grupperad och ordnad med det viktigaste överst och minst viktiga längst ned. Rubriker talar om att detta är ett kvitto, inte en biljett. Jag ser direkt vad jag kan och förväntas klicka på. Jag ser också status på mina kollegor, att de redan checkat in och väntar på mig. 

Destruktiv knapp

Den viktigaste åtgärden ”Hämta flygbiljett” syns tydligt och jag förstår att det är min egen biljett eftersom knappen är placerad bredvid mitt namn. Knappen är grön och leder vidare i processen. Den andra åtgärden ”Ändra/avboka" är också viktig, men sekundär. Det är osannolikt att jag kommer att trycka på den så den borde var mindre framträdande. Den är också ”destruktiv” så den röda färgen funkar som en varning. Stödinformation finns längst ner i sidfoten och avviker visuellt från resten. Lätt att hitta utan att störa eller röra till det men ska erbjuda en hjälpande hand om något går fel. 

Stress försvårar

Med den här designen skulle jag inte ha några som helst problem att hitta rätt. Jag ser tydligt vad jag förväntas göra och vad jag ska undvika. Hur informationen presenteras och grupperas är lika viktigt (eller viktigare) än själva informationen. "The information hierarchy is the message” som man brukar säga. Eller som jag precis hittat på. 😉 

Det jag fått med mig från upplevelsen är insikten hur dåligt man läser allt som står. Speciell när man är under stress, på språng och ovan användare/resenär.

I framtiden vill jag självklart ha smarta digitala biljetter som likt en privat reseledare visar mig vägen på flygplatsen, håller koll på tiden för avgångar och förseningar samt ser till att jag alltid känner mig trygg och vet vad mitt nästa steg är. Fram tills dess kan jag nöja mig med små förbättringar som till exempel en väl utformad biljett. 

Lämna en kommentar