Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Dropdown-menu

Anvendes til

Anvend kun dropdown menuer, når det er absolut nødvendigt og kun i tilfælde, hvor brugeren skal vælge mellem 7 til 15 værdier på en begrænset plads.

Anvendes ikke til

  • Lister med færre værdier end 7.
  • Lister med flere værdier end 15. I så tilfælde bør du tilbyde brugeren et felt med auto-forslag, når brugeren begynder at indtaste.

Brug tjekbokse fremfor dropdown menu, hvis brugeren skal vælge mere end 1 værdi.

Brug ikke dropdown-menu til navigering mellem sider, som den ikke er velegnet til.

Vejledning

Dropdown menuer kræver ekstra aftestning på målgruppen pga. de kognitive udfordringer, de kan afføde.

Undgå at lade brugerens valg i én dropdown menu påvirke indholdet i en anden. Det forvirrer mange brugere.

Hvis du ved, at mange brugere vil vælge den samme værdi i en dropdown menu, så marker den med <option selected="selected">Default</option>. Dermed slipper brugerne for at bruge tid på at gennemsøge listen.

Undlad at løsningen reagerer på brugerens direkte valg i dropdownen, så brugeren altid let kan vælge en anden mulighed. Tilføj i stedet en knap, så løsningen først anvender brugerens valg ved klik på knappen.

Sådan (do)

Eksempel på, hvordan en dropdown-menu kan se ud

Sådan: Brug en dropdown-menu, når brugerne skal vælge 1 svar blandt mindst 5 gensidigt udelukkende valgmuligheder (ISO, 2012, afsnit 8.11). Formulér valgmulighederne så kort og konsistent som muligt.

Ikke sådan (don't)

Eksempel på, hvordan en dropdown-menu ikke bør se ud

Ikke sådan: Skjul ikke valgmuligheder i en dropdown-menu, når der kun er nogle få, eller når der er plads til at vise valgmulighederne som radioknapper eller tjekbokse. Dropdown-menuer bør kun bruges, når der ikke er andre muligheder (Wroblewski, 2015) – fx af pladshensyn. Dropdown-menuer er ergonomisk svære at bruge og skjuler brugernes valgmuligheder.

Referencer

Se komponenten i eksempelløsninger

Multiselect og søgning

Vi tilbyder på nuværende tidspunkt ikke en multiselect drop-down komponent med søgefunktion, men hvis man finder eller laver en selv kan det se ud som på billedet nedenfor.

Eksempel på, hvordan en multiselect dropdown kan se ud