Dropdown-alternativer til bedre (mobile) former

Brug af dropdown-menuer i formular kan virke som en no-brainer: de tager ikke meget plads på UI, de validerer automatisk input, alle browsere og platforme understøtter dem, de er lette og billige at implementere, og brugerne kender dem godt nok.

Men på samme tid er dropdown-menuerne (eller udvalgte) menuer et af de hyppigt misbrugte formmønstre, og "skal være UI til sidste udvej", ifølge Luke Wroblewski og mange andre.

Lad os se på nogle af begrænsningerne og bekymringerne:

  • I en dropdown er de tilgængelige indstillinger ikke synlige, før du klikker på eller trykker på for at åbne den. Længden af ​​listen er også skjult ved første øjekast, det vil sige, brugere kan ikke forudsige, om en dropdown-menu indeholder 2 eller 50 elementer.
  • Valg af en indstilling fra en dropdown-liste (især på mobil) er en flertrinsproces: du skal trykke på dropdown for at åbne listen med indstillinger, derefter rulle og scanne gennem elementerne for at vælge en, og luk derefter dropdown.
  • Dropdown-menuer kan gøre designere doven: Det er super let at bare tilføje alle mulige indstillinger til en dropdown-liste uden nogen prioritering (hvilket gør det virkelig ligner hamburger-menuen, forresten).
  • Længere dropdowns, som f.eks. En landevælger, kan være et mareridt at scanne igennem, især på mobil, hvor tastatursøgning normalt ikke er tilgængelig.
  • Rulning gennem indstillingerne kan være smertefuldt på nogle mobilskærme, hvor det synlige og rullbare område på listen er lille:
På iOS kan antallet af synlige indstillinger være overraskende lavt ved første øjekast

Den gode nyhed er, at der er masser af alternative input-kontroller, der vil fungere bedre for dig i mange tilfælde.

Overvej antallet af muligheder

Ved binære (til / fra) beslutninger er dropdown-menuen et rigtig dårligt valg. Det, du har brug for, er et afkrydsningsfelt eller en afbryder.

Hvis din dropdown kun indeholder Ja / Nej eller Til / Fra-indstillinger, skal du bruge en enklere switch i stedet

For et lille antal indbyrdes eksklusive muligheder anbefales radioknapper eller segmenterede kontroller, så alle tilgængelige indstillinger er synlige på én gang uden at skulle åbne listen.

Segmenterede kontroller viser de valgte og de alternative indstillinger på en gangAntallet af synlige indstillinger afhænger af skærmbredden og længden på indstillingsetiketterne, men det anbefales ikke at have mere end 5 elementer

Når brugerne ved nøjagtigt, hvad de leder efter, skal du overveje en "startindtastning ..." -løsning for et stort antal veldefinerede indstillinger, hvor listen over filtrerede indstillinger vises efter den første eller to bogstaver.

I stedet for at rulle gennem listen, lad brugerne begynde at skrive og kun vise de filtrerede indstillinger

For store og forskellige lister, prøv at bruge eksisterende brugerdata til at prioritere indstillingerne og list kun de første par mest populære valg for brugeren. På denne måde er der en chance for, at 90% af brugerne med det samme finder deres præference, og at kun 10% er nødt til at vælge Andet og derefter specificere det i det næste spørgsmål.

Selvom

Overvej det forventede input

En af fordelene ved en rulleliste er, at brugere ikke behøver at skrive meget. Hvis den forventede input imidlertid ikke er for lang og ofte stilles (f.eks. Personlige data), er det normalt lettere at indtaste i stedet for at vælge det fra en liste:

Det er lettere at indtaste et fødselsår på en mobil enhed med et numerisk tastatur end ved at rulle gennem en lang liste

Generelt er det normalt mere effektivt at indtaste en numerisk værdi på en mobiltelefon med en taltastatur.

Selvom sorteringsrækkefølgen for en numerisk dropdown er klar, kan det stadig være lettere at skrive end rulle

Hvis det er vigtigt at validere brugerens input, kan fremgangsmåden "start skrivning ..." være nyttig, hvor inputfeltet bruges til at filtrere de tilgængelige indstillinger.

Når du angiver USAs stater, skriver du kun et bogstav filtrerer listen godt

Muligheden for at søge på listen over indstillinger er især nyttig, når elementernes sorteringsrækkefølge ikke er klar.

Sorteringsordren for valutaer kan være uklar for brugerne, så sørg for, at de også kan søge i navn og valutakode

Den samme teknik skal anvendes på listen over gode gamle lande: I stedet for at liste over 200 varer, skal brugerne begynde at skrive og filtrere resultaterne så hurtigt som muligt.

For diskrete værdier, der repræsenterer mængde (såsom antallet af passagerer eller antallet af varer i en indkøbsvogn), giver en stepper brugerne mulighed for hurtigt at øge eller formindske antallet med et enkelt klik eller trykke på.

For ikke-diskrete værdier eller værdier, der er placeret i en skala, skal du overveje at bruge en skyder.

Visning af minimums- og maksimalværdien af ​​skalaen kan muligvis hjælpe med at forstå konteksten

At vælge en dato med flere udvalgte menuer kan være en virkelig smertefuld oplevelse, så når du indtaster datoer i nærheden, skal du altid bruge en datavælger. (Men brug aldrig det til at indtaste fødselsdato!)

Overvej at designe smartere dropdowns

Det siger sig selv, at dropdown-menuer ikke altid bør undgås. Du kan finde tilfælde, hvor en udvalgt menu er den mest passende indgangskontrol, og det er fint, bare prøv at gøre det så brugervenligt som muligt.

  • Brug en meningsfuld etiket: menuetiketten eller beskrivelsen skal være klar og tilgængelig, selv når listen er åben. Brug en beskrivende etiket, der fortæller brugerne, hvad de vælger (dvs. "Vælg type" i stedet for "Vælg venligst") i menuen Vælg.
  • Sorter emner på en fornuftig måde: baseret på brugerdata, prøv at placere de mest populære valg øverst på listen. Eller vælg endda den mest populære som standard.
  • Brug smarte standardindstillinger: telefoner og browsere kender brugerens placering, dato og mange andre oplysninger. Brug disse data til at forudvælge den mest sandsynlige mulighed for hver bruger.
  • Reducer antallet af felter, og lad computeren udføre arbejdet: Hvis en bruger indtaster et postnummer, kunne computeren allerede kende byen og staten - ikke nødvendigt at spørge. Hvis en bruger indtaster et kreditkortnummer, kunne computeren allerede vide, at det er et MasterCard - ikke nødvendigt at spørge.
  • Overvej at bruge API'er: tilmelding med en Facebook Connect-knap er lettere end at udfylde en registreringsformular. Det er lettere at betale med Paypal end at skulle indtaste dine kreditkortdata.

Hvis du vil lære mere om design af dropdowns, kan du tjekke den strålende SXSW Keynote af Golden Krishna og Eric Campbell:

Hvis du nød denne historie, så tjek også alternativerne til Hamburger-menuen. Eller mine Instant UX tip. Feedback er velkommen på Twitter, og jeg er glad for at oprette forbindelse på LinkedIn. Synspunkter og meninger er helt mine egne.