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.
Sådan bruges komponenten
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).
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.
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)
Installation
HTML Struktur
Hvis man gør brug af en trinindikator i forbindelse med en overflow menu, så se dokumentationen for implementering for overflow menu.
Aktivt og overstået trin i trinindikator
- Det aktive menupunkt skal have klasserne
activeogcurrent(der skal anvendes to forskellige klasser grundet overlap med stylingen i venstremenuen). - For at indikere et overstået trin, kan der indsættes et ikon med klassen
sidenav-icon. Dette ikon er sat til højre i trinet.
Nedenstående varianter implementeres i et grid på samme måde som venstremenu, således at komponenten vises i en kolonne til venstre for indholdet.
Alle trin synlige
<nav aria-label="Trinindikator">
<ol class="sidemenu">
<li>
<a class="nav-step" href="javascript:void(0);">
<div>
<span class="sidenav-number">1.</span>
<div>
<span class="sidenav-maininfo">
<span class="sidenav-title">Trin 1</span><span
class="sidenav-icon"><svg class="icon-svg" aria-label="Gennemført" focusable="false"><use xlink:href="#done"></use></svg></span></span>
<span></span>
</div>
</div>
</a>
</li>
<li class="active current " aria-current="step">
<a class="nav-step" href="javascript:void(0);">
<div>
<span class="sidenav-number">2.</span>
<div>
<span class="sidenav-maininfo">
<span class="sidenav-title">Trin 2</span></span>
<span></span>
</div>
</div>
</a>
</li>
<li>
<a class="nav-step" href="javascript:void(0);">
<div>
<span class="sidenav-number">3.</span>
<div>
<span class="sidenav-maininfo">
<span class="sidenav-title">Trin 3</span></span>
<span></span>
</div>
</div>
</a>
</li>
</ol>
</nav>Responsiv
Låst
<nav aria-label="Trinindikator">
<ol class="sidemenu">
<li class="disabled ">
<a class="nav-step">
<div>
<span class="sidenav-number">1.</span>
<div>
<span class="sidenav-maininfo">
<span class="sidenav-title">Trin 1</span><span
class="sidenav-icon"><svg class="icon-svg" aria-label="Gennemført" focusable="false"><use xlink:href="#done"></use></svg></span></span>
<span></span>
</div>
</div>
</a>
</li>
<li class="disabled active current " aria-current="step">
<a class="nav-step">
<div>
<span class="sidenav-number">2.</span>
<div>
<span class="sidenav-maininfo">
<span class="sidenav-title">Trin 2</span></span>
<span></span>
</div>
</div>
</a>
</li>
<li class="disabled ">
<a class="nav-step">
<div>
<span class="sidenav-number">3.</span>
<div>
<span class="sidenav-maininfo">
<span class="sidenav-title">Trin 3</span></span>
<span></span>
</div>
</div>
</a>
</li>
</ol>
</nav>Ekstra information
<nav aria-label="Trinindikator">
<ol class="sidemenu">
<li>
<a class="nav-step" href="javascript:void(0);">
<div>
<span class="sidenav-number">1.</span>
<div>
<span class="sidenav-maininfo">
<span class="sidenav-title">Trin 1</span><span
class="sidenav-icon"><svg class="icon-svg" aria-label="Gennemført" focusable="false"><use xlink:href="#done"></use></svg></span></span>
<span><span class="sidenav-information">Informationstekst for trin
1</span></span>
</div>
</div>
</a>
</li>
<li class="active current " aria-current="step">
<a class="nav-step" href="javascript:void(0);">
<div>
<span class="sidenav-number">2.</span>
<div>
<span class="sidenav-maininfo">
<span class="sidenav-title">Trin 2</span></span>
<span><span class="sidenav-information">Informationstekst for trin
2</span></span>
</div>
</div>
</a>
</li>
<li>
<a class="nav-step" href="javascript:void(0);">
<div>
<span class="sidenav-number">3.</span>
<div>
<span class="sidenav-maininfo">
<span class="sidenav-title">Trin 3</span></span>
<span><span class="sidenav-information">Informationstekst for trin
3</span></span>
</div>
</div>
</a>
</li>
</ol>
</nav>Trinindikator med fejl
Tilføj klassen sidenav-error til de liste-elementer, der er fejl i og anvend ikonet highlight-off med en passende aria-label.
<div class="overflow-menu overflow-menu--open-right overflow-menu--lg-no-responsive ">
<button class="button-overflow-menu js-dropdown" data-js-target="trinindikator-error"
aria-expanded="false" aria-controls="trinindikator-error">
Trin 3 af 4
<svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#arrow-drop-down"></use></svg>
</button>
<div class="overflow-menu-inner" id="trinindikator-error" aria-hidden="true">
<nav aria-label="Trinindikator">
<ol class="sidemenu">
<li class="sidenav-error">
<a class="nav-step" href="javascript:void(0);">
<div>
<span class="sidenav-number">1.</span>
<div>
<span class="sidenav-maininfo">
<span class="sidenav-title">Trin 1</span><span
class="sidenav-icon"><svg class="icon-svg" aria-label="Fejl" focusable="false"><use xlink:href="#highlight-off"></use></svg></span></span>
<span></span>
</div>
</div>
</a>
</li>
<li>
<a class="nav-step" href="javascript:void(0);">
<div>
<span class="sidenav-number">2.</span>
<div>
<span class="sidenav-maininfo">
<span class="sidenav-title">Trin 2</span><span
class="sidenav-icon"><svg class="icon-svg" aria-label="Gennemført" focusable="false"><use xlink:href="#done"></use></svg></span></span>
<span></span>
</div>
</div>
</a>
</li>
<li class="active current " aria-current="step">
<a class="nav-step" href="javascript:void(0);">
<div>
<span class="sidenav-number">3.</span>
<div>
<span class="sidenav-maininfo">
<span class="sidenav-title">Trin 3</span></span>
<span></span>
</div>
</div>
</a>
</li>
<li>
<a class="nav-step" href="javascript:void(0);">
<div>
<span class="sidenav-number">4.</span>
<div>
<span class="sidenav-maininfo">
<span class="sidenav-title">Trin 4</span></span>
<span></span>
</div>
</div>
</a>
</li>
</ol>
</nav>
</div>
</div>