Vijf tips voor succesvolle dropdown menu's

Dropdown menu’s zijn op text inputs na mijn favoriete elementen in een formulier. Ze nemen weinig schermruimte in maar kunnen ontzettend veel gegevens bevatten. Bovendien zijn ze behoorlijk gebruikersvriendelijk door handige kenmerken zoals het snel selecteren van een optie door de beginletter in te toetsen, zelfs op mobiele apparaten. Helaas worden dropdown menu’s niet altijd even goed gebruikt. Vijf tips voor een gebruiksvriendelijker formulier:

1) Bewaar functionaliteit

Dropdown menu’s hebben de onhebbelijkheid dat ze lastig zijn te stylen. Veel webdevelopers hebben dit ‘opgelost’ door gebruik te maken van Javascript of Flash. Vaak werkt de basis functionaliteit dan prima (een lijst met opties en de mogelijkheid om deze te selecteren) maar handige opties zoals scrollen, het snel naar de juiste keuze springen door de eerste letter in te toetsen of het form element te selecteren met de ‘tab’ toetst werken dan niet meer. Zorg dat deze functionaliteit bewaard blijft. Dankzij conventies als deze kunnen we het web bruikbaar houden.

Usability fail: Ovi Maps

Een mooi voorbeeld van hoe het niet moet is de Nokia Ovi Maps header (in Flash). Allereerst werkt het scrollwheel niet, daarnaast kan er alleen gescrolled worden door op de scrollbar te klikken (en dus niet door in het lege gedeelte onder de scrollbar te klikken). Tot slot is het ook niet mogelijk om snel naar de gewenste optie te springen door de beginletter in te toetsen (had overigens ook in HTML niet goed gewerkt, aangezien voor elk model ‘Nokia’ is toegevoegd).

2) Denk non-lineair

Dropdown menu’s worden vaak gebruikt in grotere formulieren met afhankelijkheden. Bijvoorbeeld door een landkeuze te bieden waarna de inhoud van het provincie-dropdown menu wordt aangepast. Denk goed na over deze afhankelijkheden. Je gebruikers zullen lang niet altijd lineair door je formulier heenlopen. Er is een goede kans dat ze later terugkeren naar een eerdere optie. Zorg dat dit ook goed kan in je formulier. Toen ik bij het uitpakken van mijn Blackberry Bold 9700 de tekstinvoer taal op ‘Nederlands’ zette (tweede dropdown menu in het formulier) en daarna terug ging naar de eerste dropdown om de interface taal op ‘US’ te zetten werd mijn tekstinvoer ook weer op ‘Engels’ gezet. Onthoud welke dropdown menu’s al zijn aangeraakt door de gebruiker.

3) Zorg voor een logische sortering

Dropdown menu’s worden veel gebruikt voor een land- of tijdzone keuze. Vaak zoek ik me een ongeluk naar de optie waarmee ik ons kikkerlandje selecteer. Nog los van het feit dat het varieert van ‘Netherlands, The’, ‘Netherlands’ en ‘Holland’ is de plaats ook verschillend. De ene keer bovenaan (omdat de site de herkomst van de bezoeker uitleest), een andere keer ingedeeld naar continent en weer een andere keer op alfabetische volgorde. Zorg voor een logische sortering en maak gebruik van groepen in de optie set om gebruikers te helpen sneller de gewenste keuze in een lange lijst terug te vinden.

4) Vermijd ‘multiple’ dropdown menu’s

In multiple dropdown menu’s kan de gebruiker tegelijkertijd meerdere opties selecteren. Klinkt handig, is het niet. Het is voor veel gebruikers onduidelijk dat ze meerdere opties kunnen selecteren. Bovendien weten ze vaak niet hoe dit moet (ctrl+klik in Windows, command+klik in Mac OSX). Daarnaast is het technisch niet mogelijk om de volgorde van selecteren uit te lezen, waardoor het nut hiervan beperkt wordt. Gebruik liever meerdere dropdown menu’s of checkboxes. Als je er echt niet omheen kan, leg dan goed uit aan je gebruikers hoe de multi-select dropdown werkt.

5) Verplaats je in de gebruiker

Een dropdown menu met de opties ‘ja’ en ‘nee’ is weinig zinnig. In dat geval zijn radio buttons een veel logischer keuze. Zorg ervoor dat je dropdown menu’s alleen toepast wanneer je voldoende opties hebt om uit te kiezen. Voorkom ook onnodig klikken. Wanneer je gebruik maakt van een afhankelijkheid en uit een eerdere keuze blijft slechts één optie over selecteer die dan ook direct. Nog maar een voorbeeld van hoe het niet moet (BelBios.nl).

Conclusie

Zoals altijd komt het neer op goed nadenken. Stel jezelf de vraag wat je als gebruiker zou doen. Voer usability tests uit. Daar is niet direct een enorm budget voor nodig. Online tools zoals ClickTale bieden uitgebreide inzichten in het formulier-gebruik van je gebruikers. Dropdown menu’s zijn ontzettend handig, mits goed geïmplementeerd.

NB: Als voetnoot nog even het volgende: dropdown menu’s zijn heel nuttig, maar voor ‘snelle’ formulieren waarschijnlijk niet ideaal. Formulieren waar alles om conversie draait moeten zo snel mogelijk ingevuld worden. Dropdown menu’s zijn dan te traag in het gebruik. Probeer in dergelijke formulieren alleen gebruik te maken van text inputs.