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
En trinindikator fører brugeren igennem en kendt sekvens af trin i en løsning.
Sådan bruges komponenten
Anvendes til
Trinindikatoren anvendes til struktureret at føre brugeren igennem en kendt sekvens af spørgsmål.
Anvendes ikke til
Trinindikatoren skal ikke anvendes som erstatning for en venstremenu.
Vejledning
Vælg den type trinindikator, der passer bedst til dine brugeres behov. Vær opmærksom på, at trinindikatorer tit er unødvendige, bl.a. fordi de kan blive overset og tager meget plads på skærmen (GOV.UK). Overvej derfor, om din løsning fungerer bedre uden en trinindikator, se fx eksempelløsningen Formular til kontaktoplysninger, eller med en simpel trinindikator.
Opdel løsningens trin, så de virker naturlige og logiske for brugerne.
En bruger kan altid klikke sig tilbage til tidligere trin i en selvbetjening. Allerede gennemførte trin forbliver klikbare, når en bruger har navigeret tilbage i løsningen.
Det sidste trin skal være “Opsummering” eller “Tjek dine svar”.
Hvis det ikke er muligt at fortsætte til næste trin grundet fejl, skal brugeren tydeligt informeres på selve trinnet om, hvilke fejl der skal rettes, før man kan komme videre, ved hjælp af en fejlopsummering og fejlmeddelelser.
Når indberetningen er foretaget, skal brugeren have en kvittering. Denne skal ikke vises i trinindikatoren.
På mobil (breakpoint lavere end 768px) ændres trinindikatoren til et panel, der glider op fra bunden af skærmen (bottom sheet), når brugeren trykker på en trinindikator-knap øverst på deres skærm. Panelet viser et overblik over trinene.
Ikke sådan (don't)
Ikke sådan: Venstremenu og trinindikator skal ikke bruges på samme tid. Hold i stedet navigationen simpel, tydelig og fokuseret omkring én type navigation ad gangen.
Ikke sådan (don't)
Ikke sådan: Undgå også at opdele trinindikatoren i undertrin, da dette gør brugeroplevelsen kompleks og uoverskuelig.
Varianter
Alle trin klikbare
Du kan benytte denne variant af trinindikatoren, hvor alle trin er klikbare for brugeren. Som udgangspunkt er kun gennemførte trin klikbare, men denne variant giver brugerne mulighed for frit at navigere mellem alle trin.
Ekstra information
Trinindikator med fejl
Hvis du anvender en trinindikator, hvor alle trin er klikbare, så kan der forekomme fejl på tidligere trin i løsningen.
Fejl vises med et fejl-ikon ud for trinnet samt med en baggrundsfarve. Fejl-ikonet fjernes igen ved indtastning af korrekt data i det pågældende trin.
Fejl skal ikke udelukkende markeres i trinindikatoren. Siden, hvor fejlen findes, skal også indeholde en fejlopsummering samt en eller flere Fejlmeddelelser.
Eventuelle fejl vises også på opsummeringssiden i form af fejlopsummering med links til de specifikke trin. Se et eksempel på opsummeringssiden med fejl i tidligere trin.
Simpel trinindikator
En simpel trinindikator viser blot brugerens aktuelle position i formularen som en subheading lige over trinindikatorens H1, eksempelvis “Trin 2 af 3”. Denne variant anvendes typisk i korte eller enkle formularer, hvor det ikke er nødvendigt eller ønskeligt at lade brugeren navigere frit mellem trinene. Den simple variant er velegnet til korte flows, hvor fokus er på hurtig og enkel gennemførelse. Se eksempelløsningen Trinformular til ansøgning.
Trin 2 af 3
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)
- GOV.UK: Question Pages - Using Progress Indicators
- Jessica Enders: Designing UX: Forms (2016)
- Caroline Jarrett: Design patterns in government (2016)
Installation
HTML Struktur
<nav aria-label="Trinindikator" class="d-none d-md-block">
<ol class="step-indicator">
<li>
<a class="step" href="javascript:void(0);">
<span class="step-icon">
<svg class="icon-svg" aria-label="Trin 1 gennemført" focusable="false"><use href="#check"></use></svg></span>
<div>
<span class="step-title">Trin 1</span>
</div>
</a>
</li>
<li class="current ">
<a class="step" href="javascript:void(0);" aria-current="step">
<span class="step-number"><span>2</span></span>
<div>
<span class="step-title">Trin 2</span>
</div>
</a>
</li>
<li class="disabled ">
<div class="step">
<span class="step-number"><span>3</span></span>
<div>
<span class="step-title">Trin 3</span>
</div>
</div>
</li>
</ol>
</nav>
<div>
<button class="step-indicator-button d-md-none" aria-haspopup="dialog" type="button"
data-module="modal"
data-target="modal-step-indicator-default"><span>Trin<strong> 2 </strong>af
3</span></button>
</div>
<!-- Modal til trinindikatoren skal placeres i en "fds-modal-container" ligesom almindelige modaler. -->
<div class="fds-modal modal-step-indicator" id="modal-step-indicator-default"
aria-hidden="true" role="dialog" aria-modal="true"
aria-labelledby="modal-step-indicator-default-heading">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="modal-step-indicator-default-heading">
Trin 2 af 3
</h2>
<button class="modal-close function-link"
data-modal-close><svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#close"></use></svg>Luk</button>
</div>
<div class="modal-body">
<nav aria-label='Trinindikator'>
<ol class="step-indicator">
<li>
<a class="step" href="javascript:void(0);">
<span class="step-icon">
<svg class="icon-svg" aria-label="Trin 1 gennemført" focusable="false"><use href="#check"></use></svg></span>
<div>
<span class="step-title">Trin 1</span>
</div>
</a>
</li>
<li class="current ">
<a class="step" href="javascript:void(0);" aria-current="step">
<span class="step-number"><span>2</span></span>
<div>
<span class="step-title">Trin 2</span>
</div>
</a>
</li>
<li class="disabled ">
<div class="step">
<span class="step-number"><span>3</span></span>
<div>
<span class="step-title">Trin 3</span>
</div>
</div>
</li>
</ol>
</nav>
</div>
</div>
</div>Anvend klassen modal-step-indicator til den modal, der indeholder trinindikatoren.
Parent-element til step-indicator-button kan afhænge af konteksten på siden og vil derfor ikke altid være <div>.
Alle trin klikbare
<nav aria-label="Trinindikator med alle trin klikbare" class="d-none d-md-block">
<ol class="step-indicator">
<li>
<a class="step" href="javascript:void(0);">
<span class="step-icon">
<svg class="icon-svg" aria-label="Trin 1 gennemført" focusable="false"><use href="#check"></use></svg></span>
<div>
<span class="step-title">Trin 1</span>
</div>
</a>
</li>
<li class="current ">
<a class="step" href="javascript:void(0);" aria-current="step">
<span class="step-number"><span>2</span></span>
<div>
<span class="step-title">Trin 2</span>
</div>
</a>
</li>
<li>
<a class="step" href="javascript:void(0);">
<span class="step-number"><span>3</span></span>
<div>
<span class="step-title">Trin 3</span>
</div>
</a>
</li>
</ol>
</nav>
<div>
<button class="step-indicator-button d-md-none" aria-haspopup="dialog" type="button"
data-module="modal"
data-target="modal-step-indicator-clickable"><span>Trin<strong> 2 </strong>af
3</span></button>
</div>
<!-- Modal til trinindikatoren skal placeres i en "fds-modal-container" ligesom almindelige modaler. -->
<div class="fds-modal modal-step-indicator" id="modal-step-indicator-clickable"
aria-hidden="true" role="dialog" aria-modal="true"
aria-labelledby="modal-step-indicator-clickable-heading">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="modal-step-indicator-clickable-heading">
Trin 2 af 3
</h2>
<button class="modal-close function-link"
data-modal-close><svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#close"></use></svg>Luk</button>
</div>
<div class="modal-body">
<nav aria-label='Trinindikator med alle trin klikbare'>
<ol class="step-indicator">
<li>
<a class="step" href="javascript:void(0);">
<span class="step-icon">
<svg class="icon-svg" aria-label="Trin 1 gennemført" focusable="false"><use href="#check"></use></svg></span>
<div>
<span class="step-title">Trin 1</span>
</div>
</a>
</li>
<li class="current ">
<a class="step" href="javascript:void(0);" aria-current="step">
<span class="step-number"><span>2</span></span>
<div>
<span class="step-title">Trin 2</span>
</div>
</a>
</li>
<li>
<a class="step" href="javascript:void(0);">
<span class="step-number"><span>3</span></span>
<div>
<span class="step-title">Trin 3</span>
</div>
</a>
</li>
</ol>
</nav>
</div>
</div>
</div>Ekstra information
<nav aria-label="Trinindikator med ekstra information" class="d-none d-md-block">
<ol class="step-indicator">
<li>
<a class="step" href="javascript:void(0);">
<span class="step-icon">
<svg class="icon-svg" aria-label="Trin 1 gennemført" focusable="false"><use href="#check"></use></svg></span>
<div>
<span class="step-title">Trin 1</span>
<span class="step-information">Informationstekst for trin 1</span>
</div>
</a>
</li>
<li class="current ">
<a class="step" href="javascript:void(0);" aria-current="step">
<span class="step-number"><span>2</span></span>
<div>
<span class="step-title">Trin 2</span>
<span class="step-information">Informationstekst for trin 2</span>
</div>
</a>
</li>
<li class="disabled ">
<div class="step">
<span class="step-number"><span>3</span></span>
<div>
<span class="step-title">Trin 3</span>
<span class="step-information">Informationstekst for trin 3</span>
</div>
</div>
</li>
</ol>
</nav>
<div>
<button class="step-indicator-button d-md-none" aria-haspopup="dialog" type="button"
data-module="modal"
data-target="modal-step-indicator-helptext"><span>Trin<strong> 2 </strong>af
3</span></button>
</div>
<!-- Modal til trinindikatoren skal placeres i en "fds-modal-container" ligesom almindelige modaler. -->
<div class="fds-modal modal-step-indicator" id="modal-step-indicator-helptext"
aria-hidden="true" role="dialog" aria-modal="true"
aria-labelledby="modal-step-indicator-helptext-heading">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="modal-step-indicator-helptext-heading">
Trin 2 af 3
</h2>
<button class="modal-close function-link"
data-modal-close><svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#close"></use></svg>Luk</button>
</div>
<div class="modal-body">
<nav aria-label='Trinindikator med ekstra information'>
<ol class="step-indicator">
<li>
<a class="step" href="javascript:void(0);">
<span class="step-icon">
<svg class="icon-svg" aria-label="Trin 1 gennemført" focusable="false"><use href="#check"></use></svg></span>
<div>
<span class="step-title">Trin 1</span>
<span class="step-information">Informationstekst for trin
1</span>
</div>
</a>
</li>
<li class="current ">
<a class="step" href="javascript:void(0);" aria-current="step">
<span class="step-number"><span>2</span></span>
<div>
<span class="step-title">Trin 2</span>
<span class="step-information">Informationstekst for trin
2</span>
</div>
</a>
</li>
<li class="disabled ">
<div class="step">
<span class="step-number"><span>3</span></span>
<div>
<span class="step-title">Trin 3</span>
<span class="step-information">Informationstekst for trin
3</span>
</div>
</div>
</li>
</ol>
</nav>
</div>
</div>
</div>Trinindikator med fejl
Tilføj klassen sidenav-error til de liste-elementer, der er fejl i og anvend ikonet error med en passende aria-label.
<nav aria-label="Trinindikator med fejl" class="d-none d-md-block">
<ol class="step-indicator">
<li class="error">
<a class="step" href="javascript:void(0);">
<span class="step-icon">
<svg class="icon-svg" aria-label="Fejl i trin 1" focusable="false"><use href="#error"></use></svg></span>
<div>
<span class="step-title">Trin 1</span>
</div>
</a>
</li>
<li class="current ">
<a class="step" href="javascript:void(0);" aria-current="step">
<span class="step-number"><span>2</span></span>
<div>
<span class="step-title">Trin 2</span>
</div>
</a>
</li>
<li class="disabled ">
<div class="step">
<span class="step-number"><span>3</span></span>
<div>
<span class="step-title">Trin 3</span>
</div>
</div>
</li>
</ol>
</nav>
<div>
<button class="step-indicator-button d-md-none" aria-haspopup="dialog" type="button"
data-module="modal"
data-target="modal-step-indicator-error"><span>Trin<strong> 2 </strong>af
3</span></button>
</div>
<!-- Modal til trinindikatoren skal placeres i en "fds-modal-container" ligesom almindelige modaler. -->
<div class="fds-modal modal-step-indicator" id="modal-step-indicator-error" aria-hidden="true"
role="dialog" aria-modal="true" aria-labelledby="modal-step-indicator-error-heading">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="modal-step-indicator-error-heading">
Trin 2 af 3
</h2>
<button class="modal-close function-link"
data-modal-close><svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#close"></use></svg>Luk</button>
</div>
<div class="modal-body">
<nav aria-label='Trinindikator med fejl'>
<ol class="step-indicator">
<li class="error">
<a class="step" href="javascript:void(0);">
<span class="step-icon">
<svg class="icon-svg" aria-label="Fejl i trin 1" focusable="false"><use href="#error"></use></svg></span>
<div>
<span class="step-title">Trin 1</span>
</div>
</a>
</li>
<li class="current ">
<a class="step" href="javascript:void(0);" aria-current="step">
<span class="step-number"><span>2</span></span>
<div>
<span class="step-title">Trin 2</span>
</div>
</a>
</li>
<li class="disabled ">
<div class="step">
<span class="step-number"><span>3</span></span>
<div>
<span class="step-title">Trin 3</span>
</div>
</div>
</li>
</ol>
</nav>
</div>
</div>
</div>Simpel trinindikator
<p class="step-subheading">Trin 2 af 3</p>