Velg riktig element når brukerne får flere valg

Hvordan gjør du det?

  • Bruk radioknapper når du vil at brukerne skal velge ett blant få alternativer, for eksempel mellom ulike betalingsmåter eller ja/nei-spørsmål.
  • Bruk avkrysningsbokser når brukerne skal kunne velge flere alternativer blant et relativt begrenset antall alternativ.
  • Hvis du har mer enn en håndfull alternativer og brukerne kun skal velge ett, er nedtrekksliste det mest fornuftige valget.

Husk at det er lurt å begrense antall valg ved å gjenbruke den informasjonen du allerede har om brukeren.

Hvorfor er dette lurt?

  • Å følge konvensjonene for hvordan vi presenterer ulike valg, er avgjørende for en god brukeropplevelse.
  • Det er krevende for alle å lese lange lister, ikke minst på mobil eller andre små skjermer. Derfor bør vi bruke den formen som passer best til det antallet alternativer vi vil presentere.
  • Lange og omfattende lister fungerer ekstra dårlig for svaksynte brukere som er avhengige av forstørrelsesprogramvare.

Gjør det enkelt å bruke nedtrekksmenyen

Hvordan gjør du det?

  • Skriv de mest sannsynlige alternativene først.
  • Unngå å gi så mange alternativer at brukerne må skrolle.
  • La alltid nedtrekksmenyen ha et blankt valg.
  • Ikke bruk nedtrekksmeny hvis det går fortere å skrive inn i et felt. Det gjelder for eksempel fødselsdato og land.

Hvorfor er dette lurt?

For at brukerne skal oppleve nedtrekksmenyen som en god løsning, må de kjapt finne det alternativet som passer dem.

Nedtrekksmenyer kan oppleves som frustrerende for brukere med dårlig motorikk eller konsentrasjon. Valgene i en nedtrekksmeny forsvinner ofte hvis brukerne beveger musen eller trykker utenfor menyen. Det kan gjøre at brukerne må begynne på nytt, kanskje til og med flere ganger. Det kan derfor ta mer tid å bruke en nedtrekksmeny enn å skrive inn informasjonen selv.

Lenkeblokk Icon Retningslinje 3.4 Valgfelt i Elmer 3.0 fra Brønnøysundregistrene Lenkeblokk Icon «Dropdowns: Design Guidelines» av Nielsen Norman Group (engelsk)

Bruk du-form i ledetekst, og jeg-form i alternativer

Hvordan gjør du det?

Tenk på teksten som en samtale slik at ledeteksten, spørsmål og informasjon til brukeren blir i du-form.

La brukerens svar få jeg-form i

  • alternativene i nedtrekksmenyen
  • felt eller eksempler på svar

Eksempler

Eksempel på dårlig tekst i grensesnitt. Ledeteksten bruker «Hvor vil jeg jobbe i perioden?», og nedtrekksmenyen bruker «Velg mitt arbeidsstedt».

Her snakker ikke ledeteksten til brukeren på en naturlig måte.

Eksempel på god tekst i grensesnitt. Ledeteksten er «Hvor ønsker du å jobbe?» over nedtrekksmenyen med teksten «Velg arbeidssted» før alternativene.

Her snakker ledeteksten til brukeren, og alternativene i nedtrekkslisten er formulert som brukerens svar tilbake.

Hvorfor er dette lurt?

Å forme teksten som en samtale gjør interaksjonen mellom brukerne og systemet mer intuitivt:

  • Alternativer og eksempler på svar får en form brukeren opplever som logisk.
  • Brukerne opplever innholdet som mer relevant når vi henvender oss direkte til dem.
  • Det blir enklere for alle å forstå hvem som gjør hva.
Lenkeblokk Icon «Eight Principles of Conversational Design» av Maya Hampton (engelsk) Lenkeblokk Icon «Plain Language for UX Writing» av Rachael Renk (engelsk)

Bruk etablerte formuleringer, spørsmål eller en oppfordring for å få fram hva brukerne skal svare på

Hvordan gjør du det?

Både et spørsmål og en kortere formulering kan fungere godt for å få fram hva brukerne skal gjøre, men de to alternativene egner seg i litt ulike situasjoner:

  • Bruk etablerte formuleringer der det finnes enkle, standardiserte svar som brukerne kjenner godt, for eksempel Navn, Sivilstatus, Adresse. Korte formuleringer egner seg også hvis kategoriene er kjent og tjenestene enkle, for eksempel Tidspunkt for henting eller Velg tidspunkt.
  • Vurder alltid spørsmål eller en beskrivende oppfordring når tema og svaralternativer er mindre kjent for brukerne.

Hvorfor er dette lurt?

  • Mange brukere foretrekker at teksten er kort, ikke minst når de er stresset og travle eller leser på liten skjerm. Det hjelper likevel lite at formuleringen er kort hvis brukeren ikke klarer å se sammenhengen mellom teksten og sin egen situasjon. Derfor må vi alltid vurdere hvilket alternativ som er best.
  • En spørsmålsformulering blir en spisset oppgaveformulering som gjør det enkelt for brukerne å forstå hva de skal svare på. Spørsmål fører ofte til at brukerne svarer ganske kort. Ønsker vi en lengre redegjørelse, kan det være bedre å bruke en oppfordring, f.eks. Beskriv hva du trenger hjelp til i løpet av en dag.
  • Spørsmål bidrar ofte til at tjenesten får en samtaleform og et språk målgruppen kjenner seg igjen i. Tonen blir også mer imøtekommende når vi stiller spørsmål enn om vi bare bruker oppfordringer (imperativ) eller stikkord.

Sørg for logisk sammenheng mellom ledetekst og svaralternativ

Hvordan gjør du det?

Ledeteksten (label) og svaralternativene skal henge logisk sammen uansett om ledeteksten er et spørsmål, en oppfordring eller et enkeltord:

  • Velg den formen som gjør at hvert alternativ kan leses som en logisk respons på ledeteksten.
  • Sørg for at alle alternativer har samme språklige form – enten fullstendige setninger eller bare ett eller flere ord.

Eksempler

Eksempel på dårlig tekst i grensesnitt. Spørsmålet er «Er det mindre enn 2 meter mellom bygget og nabotomten?». Nedtrekksmenyen har alternativene «Mindre enn 2 meter», «Mellom 2–4 meter» og «Mer enn 4 meter».

Her henger ikke svaralternativene sammen med spørsmålet brukerne skal svare på. Det kan gjøre at de blir usikre og bruker lang tid på å svare.

Eksempel på god tekst i grensesnitt. Spørsmålet er «Hvor mange meter er det mellom bygget og nabotomten?». Nedtrekksmenyen har alternativene «Mindre enn 2 meter», «Mellom 2–4 meter» og «Mer enn 4 meter».

Her henger spørsmålet sammen med alternativene brukerne skal svare på.

Hvorfor er dette lurt?

Det tar mer tid for brukerne å lese og forstå valget de skal ta, hvis svarene ikke henger logisk sammen med innledningsspørsmålet eller -setningen. Vi vil at løsningen skal være effektiv å bruke og lite krevende for alle som bruker den.

Start hvert alternativ med stor forbokstav

Hvordan gjør du det?

Bruk stor forbokstav uansett om alternativene er fullstendige setninger, ett ord eller noe midt imellom.

Hvorfor er dette lurt?

  • Det har blitt en konvensjon at alternativer har stor forbokstav uavhengig av formen på alternativene. Følger vi konvensjonene, gjør vi det enklere å bruke løsningen.
  • Konvensjonen om stor forbokstav gjør at vi ikke bør bruke de norske skrivereglene for punktoppstillinger på nedtrekksmenyer og avkrysningslister. (Norske skriveregler sier stor forbokstav bare ved fullstendige setninger, ellers liten forbokstav.)

Gi all relevant informasjon før brukerne skal svare

Hvordan gjør du det?

All nyttig informasjon bør stå enten over eller til venstre for der brukerne skal utføre selve handlingen. Det gjelder for eksempel:

  • ledetekst (label)
  • instrukser
  • mulighet for hjelpetekst, veiledning eller mer informasjon

Eksempler

Eksempel på dårlig tekst i brukergrensesnitt. Viktig informasjon er plassert under valget.

Her kommer viktig og relevant informasjon etter valget, som er lite synlig for brukerne. Det bryter den logiske rekkefølgen og kan gjøre at brukerne velger feil.

Eksempel på god tekst i grensesnitt. Ledeteksten er «Hvor ønsker du å jobbe?» over nedtrekksmenyen med teksten «Velg arbeidssted» før alternativene.

Her får brukeren all viktig og relevant informasjon før valget. Det følger den logiske rekkefølgen og gjør at brukeren tryggere på at de velger riktig.

Hvorfor er dette lurt?

  • Brukerne skal slippe å prøve og feile, derfor bør de få all relevant informasjon før de skal velge et alternativ eller fylle ut et felt. Det gir dem bedre sjanse til å velge riktig på første forsøk.
  • Plasserer vi informasjonen over feltet, legger vi til rette for at brukerne enkelt kan skanne teksten når de leser ovenfra og ned, fra venstre mot høyre (F-mønster).
Lenkeblokk Icon «Website Forms Usability: Top 10 Recommendation» av Nielsen Norman Group (engelsk)