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

Radioknap (Radio button)

Eksempel på radioknapper
Liste med radioknapper

Retningslinjer

Anvendes til

Radioknapper giver brugeren mulighed for at vælge en enkelt værdi ud fra en synlig liste.

Når brugeren skal have overblik over sine mulige valg.

Når listen over mulige valg kan være på en mobilvisning.

Anvendes ikke til

Når brugeren skal kunne vælge mere end én værdi ud fra en synlig liste. Her skal du i stedet bruge tjekbokse.

Du bør overveje at anvende en dropdown, hvis antallet af mulige værdier er for mange til en mobilvisning.

Når brugeren skal kunne undlade at vælge en værdi.

Vejledning

Brugeren skal kunne tappe eller klikke på radioknappen eller dens label for at vælge dens værdi. Den fravælges, når en anden radioknap vælges.

Du bør opstille lister med radioknapper i lodret linje af hensyn til brugerens læseretning.

Sørg for at der er tilstrækkelig luft omkring den enkelte radioknap, så den er brugbar på touchskærme.

Vær forsigtig med at angive et standard valg, da det kan have en modsatrettet effekt: Brugeren kan føle sig manipuleret eller foretager ikke et bevidst valg.

Der bør være en overordnet label for hele listen af radioknapper.

Radioknapper bør altid kræve, at brugeren foretager et valg. I stedet for at lade brugeren skippe radioknapperne, så giv dem en neutral valgmulighed, der eventuelt er valgt som standard.

Radioknapper do's and don'ts

Sådan (do)

Eksempel på, hvordan radioknapper kan se ud

Sådan: Brug radioknapper, når der skal vælges 1 svar blandt 2-5 gensidigt udelukkende svarmuligheder (ISO, 2012, afsnit 8.6). Sæt som hovedregel altid én svarmulighed som default (Pernice, 2014).

Ikke sådan (don't)

Eksempel på, hvordan radioknapper ikke bør se ud

Ikke sådan: Brug ikke radioknapper, når der kan vælges flere svar i samme liste. Undgå at bryde konventioner og visuelle standardvisninger (Nielsen, 2004).

Fejlmeddelelse

Læs mere om korrekt brug af fejlmeddelelser og deres formuleringer.

Når der vises en fejlmeddelelse, vis da også fejlopsummering.

Eksempel på radioknapper med fejlmeddelelse
Sagen handler om Fejl: Vælg hvad sagen handler om

Se komponenten i eksempelløsninger

Referencer

Varianter

Hjælpetekst

Eksempel på radioknapper med hjælpetekst
Radioknapper med hjælpetekst
Dette er en hjælpetekst
Dette er en hjælpetekst

Lille radioknap

Eksempel på små radioknapper
Lille radioknap

Skjult indhold (Collapse)

Eksempel på radioknapper med skjult indhold
Vælg en radioknap

Anvendes til

Anvendes til at vise et ekstra felt relevant for brugerens valg, fx kan du vise et e-mailfelt, når brugeren vælger at ville kontaktes pr. e-mail.

Anvendes ikke til

Anvendes ikke til at vise ekstra beskrivende/oplysende tekst, da skærmlæsere ikke kan læse det.

Vejledning

Hold det enkelt. Hvis du har behov for at eksponere større mængder af ekstra funktionalitet, bør du overveje, at fordele det ud over flere sider i stedet.

Radioknap med skjul/vis do's and don'ts
Sådan (do)
Eksempel på, hvordan en skjul og vis kan se ud

Sådan: Brug skjul og vis-funktionen i tilfælde, hvor brugerne skal vælge mellem at udfylde alternative felter, fx forskellige slags kontaktoplysninger.

Ikke sådan (don't)
Eksempel på, hvordan en skjul og vis ikke bør se ud

Ikke sådan: Brug ikke skjul og vis-funktionen, når det er obligatorisk at udfylde flere felter i gruppen. Det giver brugerne en ekstra interaktionsomkostning (Budiu, 2013) at skulle åbne de forskellige felter.

Referencer

Raluca Budiu: Interaction Cost (2013)