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

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)

Eksempel på, hvordan en trinindikator kan se ud

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)

Eksempel på, hvordan en trinindikator ikke bør se ud

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

Installation

HTML Struktur

Kodeeksempel
<div class="overflow-menu overflow-menu--open-right">
    <button class="button-overflow-menu js-dropdown" data-js-target="trinindikator-overflow"
        aria-expanded="false" aria-controls="trinindikator-overflow">
        Trin 2 af 3
        <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-overflow" aria-hidden="true">
        <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">Lorem ipsum</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">Dolor sit amet</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">Consectetur adipiscing
                                        elit</span></span>
                                <span></span>
                            </div>
                        </div>
                    </a>
                </li>
            </ol>
        </nav>
    </div>
</div>

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 active og current (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

Kodeeksempel
<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

Kodeeksempel
<div class="overflow-menu overflow-menu--open-right overflow-menu--lg-no-responsive ">
    <button class="button-overflow-menu js-dropdown" data-js-target="trinindikator-responsiv"
        aria-expanded="false" aria-controls="trinindikator-responsiv">
        Trin 2 af 3
        <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-responsiv" aria-hidden="true">
        <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>
    </div>
</div>

Låst

Kodeeksempel
<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

Kodeeksempel
<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.

Kodeeksempel
<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>