This page is not available in English.
Velge en eller flere
Brukerne må ofte velge noe i løsningene våre. Det er ulike måter vi presenterer valgene på, avhengig av om bruker skal velge en eller mange, hvor mange valgmuligheter det er og hvor stor plass vi har.
Hvis bruker kan bare velge en ting
Radioknapper brukes når personen som fyller ut skjemaet kun kan velge ett alternativ. Som hovedregel forhåndsutfyller vi bare hvis vi må ha med spørsmål vi allerede vet svaret på. Vi setter ikke standardvalg (default verdi) på felter hvis vi ikke vet svaret for å sikre at bruker tar stilling til spørsmålet. Forhåndsutfylte verdier kan fungere når valget i et felt påvirker neste steg.
Eksempel: Radioknapper
Eksempel på når et forhåndsutfylt valg påvirker neste steg.
I dette tilfellet er det ingen risiko for at brukeren overser «ja», fordi de må fylle ut et nytt felt før de kan gå videre eller velge «nei».
Bruker skal bekrefte noe
Hvis bruker skal bekrefte noe, som for eksempel at hen har oppgitt riktige opplysninger i skjemaet, kan du bruker Avkrysningsboks.
Eksempel:
Når bruker kan velge flere
Hvis bruker kan velge flere, benyttes avhukingsbokser eller CheckboxGroup.
Eksempel:
Når du har kompakte elementer som er lette å «sortere» kan du plassere dem løpende i form av Chips.
Eksempel:
Bruk nedtrekksmeny hvis du har mindre plass eller veldig mange valg, og du ikke trenger å vise alle valg samtidig. Som hovedregel bør du vurdere andre måter enn avkrysningsbokser hvis du har mer enn 7 valg.
Eksempel:
Vise det bruker har valgt og ikke valgene
Når det er viktigere å vise brukerens valg enn å tilby oversikt over alle valgmuligheter, kan du legge valgene i en Modal.
Eksempel:
Bruker har veldig mange valg eller behov for veiledning
Hvis det er sannsynlig at brukeren vet hva valget er, kan du bruke Textfield (datalist) for å autofullføre innholdet i tekstfelt
Eksempel:
Komplekse situasjoner
I komplekse situasjoner kan du hjelpe brukeren med å finne, forstå og få til ved aktiv bruk av søk, filter, grupperinger og hjelpetekster.
Eksempel: