Trekk opp rullegardinmenyene – for godt!

Fra British Airways.

Når forskere for omkring 40 år siden lagde de første grensesnittene for databehandling, ble det utviklet et stort sett med forskjellige grensesnittelementer som skulle dekke de fleste bruksområder.

Ett av elementene som har blitt standard i HTML og dermed alle nettlesere, er den såkalte “combobox”-en, eller
select-elementet i HTML. På norsk kalles denne kontrollen ofte for rullegardinmeny.

For webutviklere finnes det et begrenset sett av skjemaelementer å velge mellom (som er bygd inn som standard i HTML), og de er veldig enkle og ofte dårlige – da spesielt rullegardinmenyer.

Fordelen med rullegardinmenyer er at mye informasjon kan presses inn på lite plass. Den store svakheten er at viktig informasjon skjules fullstendig for langt de fleste brukerne.

En rullegardinmeny ser ut som et tekstfelt, men med en knapp på (den høyre) siden. Man trykker på denne knappen for å få servert en liste med flere valg under tekstfeltet.

I HTML-skjemaer er “tekstfeltet” låst, slik at man ikke kan skrive i det, men tvinges til å velge fra rullegardinmenyer.

Fordeler:

• Mye data kan vises på ett sted, noe som gjør at skjemaene ser mindre ut.

Ulemper:

• Valgene har svært liten synlighet for brukerne, og de fleste vil aldri se over hvilke valgmuligheter de har – simpelthen fordi de færreste har tid og tålmodighet til å bla gjennom hele listen. Dette betyr også en stor feilrate for valgene. Ett eksempel er når jeg skulle legge inn CV i en jobbsøkerdatabase, og skulle velge industri – men måtte velge mellom teknologi eller IT. Siden jeg så teknologi først, så ble dette valgt fremfor IT fordi jeg ikke leste gjennom hele listen.
• Standard-rullegardinmenyen i nettleserene er alt for basisk. Den tilbyr ikke søk, og som oftest kan man kun se ca. 8-10 valg om gangen.
• De er ofte vanskelige å navigere, fordi rullefeltene/scrollbars blir svært små, og vanskelig å treffe med musen, jamfør Fitts lov. Hvis man bruker piltastene på tastaturet er det ofte veldig tidskrevende å finne det riktige valget.
• Standard-kontrollen tillater kun at man velger ett spesifikt valg. Man kan ikke velge (krysse av) flere valg i listen.
• Mange internettprogrammerere bruker teksten “Velg her” som standardvalg. Siden brukere skanner og ikke leser nettsider tvinges de til å lese merkelappen/teksten som tilhører rullegardinmenyen, samt klikke på listen for å se valgene. Dette tar tid og er et irritasjonsmoment.
• Det er ikke mulig å sortere listen. Sorteringen er kun slik den er satt av utvikleren av siden.
• Brukerne er ofte trent i å overse skjemaelementer hvis de ikke er ute etter å utføre noe spesifikt. Dermed må man være veldig forsiktig med å bruke dem til navigasjon.

Her følger noen eksempler fra forskjellige nettsider:

Eksempel 1 – fødselsdato:

Først starter jeg med et eksempel hvor rullegardinmenyer kan fungere greit, nemlig det å velge en dato. De fleste brukere kjenner til dette oppsettet, men det blir en del klikking i lange lister, og det er veldig trangt om plassen. Hos nav.no (eksemplet over) må du klikke minst 6 ganger for å velge din fødselsdato.

Et eksempel på en bedre måte å vise dette kan være å samle alle listene i en nedtrekksmeny, og gi hver meny mer plass – se eksempel under. Dette kan gi mer oversikt og færre klikk.

Eksempel 2 – SAS-reklame:

På dn.no har SAS og Telenor kjøpt reklameplass, begge i form av rullegardinmenyer.

Hvor mange tror du klikker på “Velkommen til SAS Norge” og leser gjennom listen og velger Prisoversikt? Jeg vil anta at de som ser etter veldig spesifikke ting ikke kikker på denne menyen fordi de vet hvor de finner det allerede. Resten gidder ikke å utforske denne menyen – siden valgene er skjult før man har klikket på menyen og den ikke innbyr til klikking. Dessuten er de fleste brukere trent til å overse skjemaelementer når de ikke skal utføre noe spesifikt, som å søke.

Her er en omdesignet versjon, med mer synlighet. Ved å tilby færre valg så har man større sjanse for å nå kunder. Ved å ha et lite skjema for å få tilbud i epost vil langt flere oppdage denne muligheten. Den grafiske profilen er endret slik at man tydeligere ser sammenhengen mellom valgene. “Velkommen”-tekst er alltid unødvendig og er fjernet.

Eksempel 3 – søk på QXL:

Her er listen som QXL tilbyr brukerne som skal søke på siden. Hvor mange brukere vet at de skal finne “Alt det andre” i listen dersom de ikke finner det de leter etter? Hvor finner man treningsklær – under klær, sport og fritid eller helse?
De færreste brukere har tålmodighet til å sitte og tenke gjennom hvilken kategori de skal velge og lese gjennom hele listen.

GWT-Ext har et sett med nedtrekkslister der man kan legge grafikk ved valgene, og samtidig søke i listen. Men hvis man ikke har skrevet inn noe tekst, vil man bli tilbudt alle valgene. Da vil man enkelt finne kategorien ved å starte å skrive “klær” for å finne kategorien treningsklær.

Eksempel 4 – ekstremt mange valg:

Disse eksempelene er fra nova100.dk og nettby.no. Her skal man velge studieprogrammet/bostedet sitt. Studiene/stedene har ofte litt forskjellige navn eller skrivemåte, og noen har type studie (f.eks. master) eller fylke fremfor tittelen/stedet. En ide er å skille studielengde og type/fylke og sted i to forskjellige valg, og la brukerne søke gjennom listen sånn som i forrige eksempel. Å søke seg frem til “Other” i den første listen er svært tidskrevende og krever at man leser gjennom absolutt hele listen, noe et fåtall brukere vil gjøre. Kanskje kan man bruke et kart for å velge sted?

Eksempel 5 – monster.no:

De fleste brukere forventer at det kommer til å ta lang tid å fullføre dette skjermbildet. Brukeren blir ikke forberedt på hva som finnes i valgene, og de fleste forventer at de skal bruke lang tid på å lese i listene. Siden det er relativt få valg kan man sette et standard-valg i boksen (f.eks. 2 års erfaring), og sette size=”X” (hvor x er antall synlige rader) på SELECT-elementet for å gjøre valgene synlige med en gang man åpner siden. Siden vil da se slik ut:

Eller: man kan bruke alternative kontroller som f.eks. en slider-kontroll for å velge antall år, noe som gir en tilsvarende synlighet på valgene man har å velge mellom.

Det siste eksemplet er fra Terras nettbank-system. De tilbyr valgene for hver konto i en rullegardinmeny. Her bør man rett og slett bruke knapper eller lenker istedet, sånn at valgene (som tross alt er veldig viktige) ikke ligger skjult i menyen.

Til slutt en liten huskeliste når man skal designe et valgelement:

• Er valgene kuttet ned så mye som overhodet mulig? Har det noen verdi å ha mange valg? Er det å ha mange valg en potensiell feilkilde?
• Kan noen av valgene overlappe hverandre? I såfall bør de slås sammen eller brukeren bør kunne søke i boksen.
• Det mest vanlige valget kan kanskje være valgt som standard, slik at man forbereder brukeren i en viss grad hva som finnes av valg i boksen.
• Kan antall klikk kuttes ned, og kan man putte mer “luft” inn i grensesnittet?
• La rullegardinmenyer være den siste utvei når du skal velge grensesnitt for valg i skjema. Det er svært sjelden det beste alternativet.