Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Trinindikator
Trinindikator fører brugeren igennem en kendt sekvens af trin i en løsning.
Retningslinjer
Anvendes til
Trinindikator anvendes til struktureret at føre brugeren igennem en kendt sekvens af spørgsmål.
Anvendes ikke til
Trinindikator skal ikke anvendes som primær eller sekundær navigationselement.
Vejledning
Forsøg med ændret opsætning af dit indhold, type og antallet af spørgsmål før du vælger en trinindikator til din løsning.
Vælg den trinindikator variant, der passer til dine brugeres behov.
Undgå at lave en horisontal trinindikator.
Anvend trin der virker naturlige og logiske for brugerne.
Gør det synligt hvilket trin brugeren er kommet til.
Det sidste trin skal være “Opsummering” eller “Tjek dine svar”.
Tilstræb så få trin som muligt.
Når indberetningen er foretaget skal brugeren have en kvittering, denne skal ikke vises i trinindikatoren.
Sådan (do)
Sådan: Brug evt. en trinindikator til formularer, der er delt op over flere sider, hvis den har faste trin (Jarrett & Gaffney, 2009, s. 106) – især hvis formularen er lang (Silver, 2018, s. 115). Gør det synligt, hvilket trin ud af hvor mange brugeren er kommet til (Enders, 2016, s. 210).
Ikke sådan (don't)
Ikke sådan: Undgå horisontale trinindikatorer, der optager meget plads og er svære at få til at fungere på små skærme (Jarrett, 2016). En enkelt test fra Gov.uk indikerer, at trinindikatorer ikke bliver bemærket, så meget som man kunne forvente, men flere undersøgelser er nødvendige for at kunne sige noget endeligt om komponenten (Enders, 2016, s. 210).
Se komponenten i eksempelløsninger
Referencer
- Caroline Jarrett & Gerry Gaffney: Forms that Work: Designing Web Forms for Usability (2009)
- Adam Silver: Form Design Patterns (2018)
- Jessica Enders: Designing UX: Forms (2016)
- Caroline Jarrett: Design patterns in government (2016)
Varianter
Alle trin synlige
Responsiv
Denne komponent er responsiv, og vil derfor ændre udseende, når man ændrer skærmstørrelse.
Låst
Ekstra information
Trinindikator med fejl
Ved brug af trinindikator kan der i nogle tilfælde være behov for at indikere overfor brugeren, at et eller flere trin mangler information og/eller har fejl, efter brugeren er gået videre til næste trin.
Anvendes til
Trinindikator med fejl anvendes til at gøre brugeren opmærksom på eventuelle fejl i de trin i formularen, der i øjeblikket ikke er valgt og hvor der efter validering er registreret en fejl, men som ikke blokerer brugeren i at gå videre til næste trin.
Vejledning
Fejl vises, hvis der er fejl i det indtastede data eller obligatoriske felter ikke er udfyldt.
Fejl angives med et fejl-ikon ud for trinnet med fejl samt med en baggrundsfarve. Ikonet kan fjernes igen ved indtastning af korrekt data i det pågældende trin.
Vis kun fejl i trinindikatoren, når det er muligt for brugeren at fortsætte til næste trin på trods af fejl.
Opsummeringsside
Eventuelle fejl vises på opsummeringssiden i form af fejlopsummering med henvisning til de specifikke trin som link i fejlopsummeringen.
Se et eksempel på opsummeringssiden med fejl i trinindikatoren.