Häromdagen skulle jag köpa en flygbiljett mellan London och Stockholm, jag hade bestämt mig att flyga med British Airways.

Jag knackar in ba.com på tangentbordet och kommer in på den svenskspråkiga delen av sajten (då jag sitter med ett svenskt IP-nummer). På ba.com finns ett vanligt FRÅN/TILL-formulär, där man börjar med att ange land och stad man vill resa ifrån.

London, ligger i Storbritannien så jag letar upp länder på S i listan. BA är ett stort flygbolag så det är rätt många länder de flyger ifrån vilket gör att det är en lång lista att välja ifrån. Jag märker att listan är på engelska och letar istället upp G i listan. För Storbritannien heter väl Great Britain på engelska? Det stod väl GB på alla bilar när jag var liten och var på bilsemester i Europa (?). Men jag kommer på att GB inte innefattar Nordirland och letar upp U i listan och hittar tillslut United Kingdom. Resten av bokningen går okej, men varken mer eller mindre.

Det här fick mig att tänka på hur ofta det här händer egentligen. Det är rätt dumt av British Airways att använda en engelsk lista på länder när mina preferenser är svenska. Storbritannien är inte det enda landet med denna problematik/förvirring. Holland och Nederländerna har samma problem. För på engelska heter det just “The Netherlands” och inte “Holland” eller “Netherlands”. Eller som i Schweiz där man pratar fyra olika språk och det är JÄTTELÄTT att stava fel till Schweiz – ni fattar. Listan med länder där det kan bli konstigt kan göras lång.

Lärdom #1: matcha sajtens gränssnitt med användarens preferenser – bryt inte konventioner i onödan.

Lärdom #2: Använd inte långa dropdowns (<select>). De är nästan alltid jobbiga att navigera i.

Baymard Institute gjorde 2010 en studie på just detta och visade på att vid färre än 7 val och vid fler än 15 val bidrar dropdowns bara till dålig användbarhet. Vid färre än 7 val ska du förslagsvis använda radioknappar. Men om du har en lång lista på länder – vad ska du göra då?

Gör så här istället:

1. Be inte om information från användaren om du inte MÅSTE ha den.

Man kan börja med att fråga sig om man verkligen behöver information om var användaren befinner sig. Om inte ta bort fältet.

2. Gör det lätt istället för svårt

Fler anledningar till varför select-fält bidrar till dålig användbarhet:

Enligt Wikipedia så består världen av 206 länder (190 suveräna stater och 16 stater med oklar suveränitet/statskick). Tittar man däremot på ISO-3166-standarden (varför man nu skulle vilja göra det) ser man klart och tydligt att världen består av 249 länder.

Oavsett om det är 206 eller 249 länder så blir det en (onödigt) lång lista. Man får ingen överblick och dålig användbarhet leder ofta till inövade beteenden från användarnas sida. Exempel: När du vill hitta Sweden, så knappar du in bokstaven T och scrollar sedan upp istället för att börja på S och scrolla ned. Och den manövern blir extra jobbig på en mobil/tablet-sajt.

En ytterligare nackdel med dropdown-fält är att de ofta bryter användningsflödet. Man har ofta input-fält där man förväntas använda tangentbordet för att skriva in saker och plötsligt kommer ett element som uppmanar till klick med musen. Det blir som att köra på en gropig väg.

Exempel på när select-fält som innehåller länder är extra dåliga:

• Sajten är på svenska men listan är på engelska

• Populäraste/vanligaste landet/länderna längst upp och inte i alfabetisk ordning

  • Det kan vara ok, om man har dessa länder både i toppen och i själva listan.

• Sorterade efter världsdel – Hur tänker man då?

• Sorterade efter toppdomän – WTF?!

Adobe – Don’t make me think

Ett bättre alternativ

Det måste alltså vara något som ligger nära vad användaren är van vid att använda, som löser alla ovan nämnda problem och som dessutom fungerar för både desktop, mobil och tablet.

Baymard Institute har löst det på ett enkelt men genialt sätt (det gjorde dom redan för ett par år sedan).

Sverige matchas med Sweden

Great Britain matchas med United Kindom

Rutan förstår både Sverige, Sweden och SE. Det finns möjlighet att lägga in egna matchningar och/eller matchningar för vanliga felstavningar.

• Koden är släppt under MIT-licens, vilket gör att du kan använda den på din egen sajt (utan några licenskostnader).

• Koden är väldokumenterat vilket gör att du lätt kan modifiera den efter din sajts behov

• Lösningen är kompatibel med IE8+

  • Den har även legacy support med “den vanlig selectrutan” för IE7 och IE6

Testa själv

Finns två ytterligare javascript-plugins för att göra val lättare (men inte riktigt lika bra som det ovan):

jQuery Mobile Autocomplete Widget

Chosen av Harvest