In april schreef ik over het belang van duidelijke dropdown menu’s in formulieren. Eén van de vijf tips die ik gaf was het vermijden van de multiple dropdown. Multiple select dropdowns geef niet duidelijk aan dat er meerdere opties geselecteerd kunnen worden en slechts weinig gebruikers weten dat dit kan (control of command toets + klik).

Sinds ik de MultipleSelect MooTools plugin ken moet ik deze tip echter weer intrekken. De MultiSelect combineert de beste eigenschappen van de dropdown en de checkbox formulier elementen. Het is direct duidelijk dat er meerdere opties geselecteerd kunnen worden en tegelijkertijd is het (bij het presenteren van veel opties) een stuk duidelijker dan een rij checkboxes.

Weer een fantastisch voorbeeld van hoe JavaScript frameworks zoals MooTools het web blijven verbeteren. Dagelijks op de hoogte blijven? Volg dan het fantastische blog van David Walsh.

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).

Lees de andere 4 tips!