15/10/2024
Rullemenuer, ofte kendt som 'dropdowns' eller 'select'-menuer, er en fast bestanddel af digitale formularer og interaktionsdesign. De har længe været en foretrukken løsning for udviklere og designere på grund af deres pladsbesparende natur og den automatiske validering af input. Men på trods af deres udbredelse og tilsyneladende enkelhed, er rullemenuer også et af de mest misbrugte elementer i brugergrænseflader, især når det kommer til mobile enheder. Er de virkelig den bedste løsning for brugeren, eller er der bedre måder at præsentere valgmuligheder på?
Ved første øjekast virker rullemenuer som en no-brainer. De optager ikke meget plads på brugergrænsefladen, de validerer automatisk input, de understøttes af alle browsere og platforme, de er nemme og billige at implementere, og brugerne kender dem godt nok. Alligevel argumenterer mange eksperter inden for brugeroplevelse, herunder Luke Wroblewski, for at rullemenuer "bør være sidste udvej for brugergrænsefladen". Lad os dykke ned i, hvorfor dette er tilfældet, og udforske de mange begrænsninger og potentielle problemer, de medfører.
Selvom rullemenuer kan virke praktiske, gemmer de på en række ulemper, der kan forringe brugeroplevelsen markant. Især på mobile enheder, hvor skærmplads og interaktionstyper er begrænsede, kan disse ulemper blive forstærket.
Mangel på Synlighed og Gennemsigtighed
En af de primære begrænsninger ved en rullemenu er, at de tilgængelige valgmuligheder ikke er synlige, før brugeren klikker eller trykker for at åbne den. Dette betyder, at brugeren ikke umiddelbart kan overskue sine valg. Længden af listen er også skjult ved første øjekast; brugerne kan ikke forudsige, om en rullemenu indeholder 2 eller 50 elementer, hvilket kan føre til frustration, hvis listen viser sig at være uventet lang.
En Besværlig Proces
At vælge en mulighed fra en rulleliste, især på mobil, er en proces i flere trin. Brugeren skal først trykke på rullemenuen for at åbne listen over valgmuligheder, derefter rulle og scanne gennem elementerne for at vælge et, og til sidst lukke rullemenuen. Dette flertrinsforløb er mere tidskrævende og kræver mere opmærksomhed end at vælge en synlig mulighed, hvilket reducerer den samlede effektivitet og flydende brugeroplevelse.
Designernes "Dovenskab"
Rullemenuer kan desværre gøre designere dovne. Det er supernemt at tilføje alle mulige valgmuligheder til en rulleliste uden nogen form for prioritering. Dette ligner meget hamburger-menuen, hvor alt gemmes væk bag et enkelt ikon, hvilket ofte fører til et dårligt informationshierarki. Når valgmuligheder ikke er prioriteret, skal brugeren arbejde hårdere for at finde det, de leder efter.
Mareridt for Lange Lister
Længere rullemenuer, som for eksempel en landevælger med 200+ lande, kan være et mareridt at scanne igennem, især på mobil, hvor tastatursøgning normalt ikke er tilgængelig. At skulle rulle gennem et endeløst antal lande for at finde 'Danmark' er en frustrerende og tidskrævende opgave. På nogle mobile skærme kan det synlige og scrollbare område af listen være overraskende lille, hvilket gør scrolling endnu mere besværlig. På iOS kan antallet af synlige valgmuligheder være bemærkelsesværdigt lavt ved første øjekast.
Et ofte stillet spørgsmål er, hvorfor en browser viser en rullemenu anderledes på en mobil enhed. Dette skyldes primært den måde, operativsystemer (OS) håndterer sådanne inputkontroller på. Hvis du oplever, at en rullemenu opfører sig mærkeligt i din desktop-browsers mobile visning (f.eks. med mærkelige bredder), er det sandsynligvis kun en begrænsning af den simulerede visning. I virkelige enheder forårsager dette normalt ikke problemer, og bredden justeres i henhold til enhedens skærmbredde.
Derudover åbner valgmulighederne for en `select`-liste sig forskelligt afhængigt af operativsystemet. På Android-enheder åbnes de typisk som en standard rulleliste, der udfyldes fra bunden eller midten af skærmen. På iOS-enheder åbner de ofte som en 'pop-over'-dialog eller et 'picker wheel' fra bunden af skærmen, hvilket giver en mere indbygget og intuitiv oplevelse for iOS-brugere. Det er vigtigt at teste dine formularer på virkelige enheder og ikke kun i en desktop-browsers mobile visning for at få et nøjagtigt billede af brugeroplevelsen.
Den gode nyhed er, at der findes et væld af alternative inputkontroller, der i mange tilfælde vil fungere bedre end en rullemenu. Valget af den bedste løsning afhænger ofte af antallet af valgmuligheder og den forventede inputtype.
Overvej Antallet af Valgmuligheder
For binære beslutninger (Ja/Nej, Til/Fra): En rullemenu er et yderst dårligt valg. Hvad du har brug for, er et afkrydsningsfelt eller en skiftekontakt (toggle switch). Disse er øjebeblikkeligt synlige og kræver kun ét tryk.
Eksempel: I stedet for en rullemenu med "Ja" og "Nej" til "Ønsker du at modtage nyhedsbreve?", brug et afkrydsningsfelt.
For et lille antal gensidigt udelukkende valgmuligheder (typisk 2-5): Radioknapper eller segmenterede kontroller anbefales, så alle tilgængelige valgmuligheder er synlige på én gang, uden at skulle åbne listen. Antallet af synlige valgmuligheder afhænger af skærmbredden og længden af valgmulighedernes etiketter, men det anbefales sjældent at have mere end 5 elementer.
Eksempel: Valg af køn (Mand/Kvinde/Andet) eller betalingsmetode (Kreditkort/MobilePay/Faktura).
For et stort antal veldefinerede valgmuligheder, hvor brugere ved, hvad de leder efter: Overvej en "begynd at skrive..."-løsning, hvor listen over filtrerede valgmuligheder vises efter de første par bogstaver. Dette kaldes ofte autoudfyldning eller søgbar rullemenu.
Let’s look at some of the limitations and concerns: In a dropdown, the available options are not visible until you click or tap to open it. Also, the length of the list is hidden at first sight, that is, users can’t predict if a dropdown menu would contain 2 or 50 elements. Eksempel: Valg af by eller stat i en lang liste. Brugere kan begynde at skrive "Køben" for at finde "København".
For store og diverse lister: Prøv at bruge eksisterende brugerdata til at prioritere valgmulighederne og kun liste de første par mest populære valg til brugeren. På denne måde er der en chance for, at 90% af brugerne finder deres præference øjeblikkeligt, og kun 10% skal vælge "Andet" og derefter specificere det i det næste spørgsmål. Selvom "Andet" ikke er en elegant løsning, kan en sådan prioritering forbedre brugeroplevelsen for flertallet af brugerne.
Eksempel: Valg af branche, hvor de mest almindelige er synlige, og en "Anden" mulighed fører til et fritekstfelt.
Overvej den Forventede Inputtype
Når forventet input ikke er for langt og ofte efterspørges (f.eks. personlige data): Det er ofte lettere at indtaste direkte i et tekstfelt end at vælge det fra en liste. Indtastning af et fødselsår på en mobil enhed er f.eks. nemmere med et numerisk tastatur end ved at rulle gennem en lang liste.
Eksempel: Fødselsdato, telefonnummer, postnummer.
Numeriske værdier: Generelt er det mere effektivt at indtaste en numerisk værdi på mobil med et numerisk tastatur. Selvom sorteringsrækkefølgen for en numerisk rullemenu er klar, kan det stadig være lettere at skrive end at rulle.
Eksempel: Antal varer, alder, mængde.
Validering af input: Hvis det er vigtigt at validere brugerens input, kan "begynd at skrive..."-tilgangen være nyttig, hvor inputfeltet bruges til at filtrere de tilgængelige valgmuligheder. Denne evne til at søge i listen over valgmuligheder er især nyttig, når elementernes sorteringsrækkefølge ikke er klar (f.eks. valutaer, hvor brugeren måske vil søge på navn eller kode).
Eksempel: Valg af valuta, hvor man kan søge på "DKK" eller "Danske kroner".
Diskret mængde (f.eks. antal passagerer): En "stepper" giver brugerne mulighed for hurtigt at øge eller mindske antallet med et enkelt klik eller tryk.
Eksempel: Antal billetter til en begivenhed.
Ikke-diskrete værdier eller værdier på en skala: Overvej at bruge en skyder (slider). Visning af minimums- og maksimumværdien på skalaen kan hjælpe med at forstå konteksten.
Eksempel: Prisinterval, lydstyrke.
Datoer (især nærtliggende): At vælge en dato med flere rullemenuer kan være en virkelig smertefuld oplevelse. Brug derfor altid en datovælger (date picker) til at indtaste nærtliggende datoer. Dog bør du aldrig bruge den til at indtaste fødselsdatoer, da det kan være en lang proces at rulle mange år tilbage; her er et simpelt tekstfelt med numerisk tastatur ofte bedre.
This is normal. When you view the browser's moblie mode, there is a mechanism that clearly shows your selection and drop-down menu. These sections look different when you open them with a real mobile device. There is another way you can manage this. Eksempel: Valg af leveringsdato, reservationsdato.
Det siger sig selv, at rullemenuer ikke altid skal undgås. Du vil finde tilfælde, hvor en `select`-menu er den mest passende inputkontrol, og det er helt fint. I disse tilfælde skal du blot forsøge at gøre den så brugervenlig som muligt.
Brug en meningsfuld etiket: Menueetiketten eller beskrivelsen skal være klar og tilgængelig, selv når listen er åben. Inde i `select`-menuen skal du bruge en beskrivende etiket, der fortæller brugerne, hvad de vælger (f.eks. "Vælg type" i stedet for "Vælg venligst").
Sorter elementer på en fornuftig måde: Baseret på brugerdata skal du forsøge at placere de mest populære valg øverst på listen. Eller endnu bedre, forudvælg den mest populære som standard.
Brug smarte standardværdier: Telefoner og browsere kender brugerens placering, dato og masser af andre oplysninger. Brug disse data til at forudvælge den mest sandsynlige mulighed for hver bruger.
Reducer antallet af felter og lad computeren gøre arbejdet: Hvis en bruger indtaster et postnummer, kan computeren allerede kende byen og staten – ingen grund til at spørge. Hvis en bruger indtaster et kreditkortnummer, kan computeren allerede vide, at det er et MasterCard – ingen grund til at spørge.
Overvej at bruge API'er: At tilmelde sig med en Facebook Connect-knap er lettere end at udfylde en registreringsformular. At betale med PayPal er lettere end at skulle indtaste dine kreditkortdata manuelt.
Sammenligning af Inputkontroller
| Antal Valgmuligheder / Forventet Input | Rullemenu Anbefales? | Alternativ Løsning | Fordele ved Alternativ |
|---|---|---|---|
| Binære valg (Ja/Nej, Til/Fra) | Nej | Afkrydsningsfelt / Skiftekontakt | Øjeblikkelig synlighed, færre trin |
| Få gensidigt udelukkende valg (2-5) | Nej | Radioknapper / Segmenterede kontroller | Alle muligheder synlige på én gang |
| Stort antal specificerede valg | Nej | "Begynd at skrive..." (Autoudfyldning) | Hurtig søgning, effektiv filtrering |
| Personlige data (f.eks. fødselsår) | Nej | Numerisk indtastningsfelt | Hurtigere indtastning, især på mobil |
| Datoer (nære fremtid) | Nej | Datovælger | Brugervenlig visuel udvælgelse |
| Mængde (diskret, f.eks. antal) | Nej | Stepper | Nem forøgelse/formindskelse med ét tryk |
| Værdier på en skala | Nej | Skyder (Slider) | Visuel repræsentation, nem justering |
| Valg, hvor sortering er uklar (valuta, lande) | Nej (medmindre søgbar) | Søgbart indtastningsfelt / Prioriteret liste | Tillader søgning, reducerer scrolling |
Ikke altid. Rullemenuer bør ofte ses som et "sidste udvej"-element i formularer. Selvom de er pladsbesparende og nemme at implementere, kan de skabe en dårlig brugeroplevelse ved at skjule valgmuligheder og kræve flere trin for at vælge en mulighed. Overvej altid alternativer som radioknapper, afkrydsningsfelter, søgbare felter eller tekstinput, afhængigt af antallet af valgmuligheder og den forventede inputtype.
Dette skyldes forskelle i, hvordan mobile operativsystemer (som Android og iOS) gengiver rullemenuer. På Android åbner de typisk som en standard liste, mens de på iOS ofte vises som et "picker wheel" eller en popover-dialog fra bunden af skærmen. Hvis du tester i en desktop-browsers "mobilvisning", kan adfærden også være unøjagtig, da den kun simulerer en mobil enhed. For at få det mest præcise billede af brugeroplevelsen bør du altid teste på en ægte mobil enhed.
Rullemenuer har flere begrænsninger: valgmulighederne er skjulte, indtil de åbnes; det er svært at forudsige listens længde; valgprocessen er flertrins (åbn, rul, vælg, luk); de kan føre til dovent design uden prioritering; og de er særligt besværlige for lange lister (f.eks. lande), især på mobil uden søgefunktion. Dette kan forringe brugerens flow og skabe frustration.
En rullemenu kan være et passende valg, når:
- Der er et moderat antal valgmuligheder (f.eks. 6-15), som ikke alle kan vises samtidigt uden at optage for meget plads.
- Brugeren sandsynligvis allerede ved, hvad de leder efter, og listen er sorteret logisk (f.eks. alfabetisk eller numerisk).
- Pladsbesparelse på skærmen er afgørende, og der ikke er et mere intuitivt alternativ, der opfylder behovet.
Selv i disse tilfælde bør du stræbe efter at designe rullemenuen så smart som muligt med klare etiketter, smarte standardværdier og eventuelt sortering baseret på popularitet.
Der findes mange effektive alternativer, afhængigt af konteksten:
- Afkrydsningsfelter / Skiftekontakter: Til binære valg (Ja/Nej).
- Radioknapper / Segmenterede kontroller: Til få gensidigt udelukkende valg.
- Tekstfelter med autoudfyldning/søgning: Til lange lister eller når brugeren kender sit input.
- Steppere: Til diskrete mængder.
- Skydere (Sliders): Til værdier på en skala.
- Datovælgere: Til valg af datoer (men sjældent fødselsdatoer).
- Simple tekstinputfelter: Til kort, personlig data, især når det er lettere at skrive end at vælge.
Valget af det rette alternativ kan markant forbedre brugervenligheden af dine formularer.
Konklusion
Rullemenuer er ikke en universal løsning for alle formål i formulardesign. Selvom de har deres fordele i form af pladsbesparelse og nem implementering, opvejes disse ofte af begrænsninger, der kan føre til en frustrerende brugeroplevelse, især på mobile enheder. Ved at forstå disse begrænsninger og aktivt overveje de mange tilgængelige alternativer, kan designere og udviklere skabe langt mere intuitive, effektive og brugervenlige formularer. Prioriter altid brugerens behov og konteksten for inputtet frem for at vælge den nemmeste løsning for designeren. En gennemtænkt tilgang til inputkontroller vil i sidste ende føre til bedre digitale produkter og en mere tilfreds brugerbase.
Hvis du vil læse andre artikler, der ligner Rullemenuer på Mobil: Fordele, Ulemper og Alternativer, kan du besøge kategorien Mobil.