Knapper (Buttons)

Sådan bruges komponenten

Anvendes til

Du kan bruge de forskellige typer af knapper til at kommunikere centrale og vigtige funktioner til brugerne, såsom “næste” trin i en selvbetjeningsløsning, eller ”Gem”, ”Rediger”, ”Log ind”, ”Log af” m.fl.

Anvendes ikke til

Brug ikke knapper til at navigere mellem sidevisninger. Der skal du i stedet anvende link.

Vejledning

Der er kun én primærknap pr. side.

Generelt skal du anvende primære knapper til handlinger, der bringer brugeren videre i sin udfyldelse/indberetning i selvbetjeningsløsningen. Sekundære og tertiære knapper bruges til handlinger, der foregår på det aktuelle trin.

Brug også sekundære og tertiære knapper til at vægte vigtigheden af andre tilbudte funktioner.

Undgå for mange knapbaserede funktioner på samme side.

Funktioner af mindre vigtighed bør du style som et funktionslink.

Brug stort forbogstav og små bogstaver for resten af teksten på knappen.

Skriv kort og præcist.

Skriv i aktiv form: I stedet for at skrive ”Fejlindmelding” bør du skrive ”Indmeld en fejl”.

I nogle tilfælde kan det være meningsunderstøttende at indlejre et svg-ikon i knappen for at signalere bestemte handlinger.

Disabled tilstand

Brug helst ikke “disabled” state på knapper eller i det hele taget, da ikke alle brugere forstår, at det som er “disabled” ikke kan anvendes.

Brug ikke “disabled” tilstand på “næste” knapper (knapper der bringer brugeren videre i løsningen), da brugeren ved tryk på sådanne knapper skal have at vide, hvor i formularen, der mangler udfyldelse og dermed hjælpes til gennemførelse af selvbetjeningsløsningen.

Der kan være tilfælde, hvor det giver mening for brugeren at du anvender “disabled” tilstanden, men så skal det være en aktiv del af en umiddelbar og kontekstuel kommunikation på siden; fx ved at en knap først bliver aktiv, når brugeren har godkendt nogle betingelser ved fx at sætte et flueben. I sådanne tilfælde er det vigtigt at knap og betingelse, står i umiddelbar nærhed, så brugerne bliver opmærksomme på forskellen, og så brugere der anvender zoom også kan se ændringen ske inden for deres zoom.

Knapper do's and don'ts

Sådan (do)

Sådan: Placér knapper i venstre side under formularens felter. Øjet følger som oftest en ”skannelinje” til venstre i formularer (Wroblewski, 2008, s. 93-97). Når alle elementer står på én linje, skal brugerne kun bevæge øjet vertikalt – ikke både vertikalt og horisontalt.

Ikke sådan (don't)

Ikke sådan: Undlad at placere den afsluttende knap i formularer til højre. Brugerne kan let overse højrestillede knapper, da øjet mest fokuserer til venstre, og kun kan se skarpt i en diameter på 2-4 cm ved en computerskærm (Johnson, 2014, s. 54).

Varianter

Primærknap

Sekundærknapper

Tertiærknapper

Tilbage-knap

Knap med ikon

Klikbart ikon

Klikbare ikoner bør kun anvendes i tilfælde, hvor ikonet er bredt kendt, og hvor der ikke er plads til supplerende tekstlabel i brugergrænsefladen. Det kan f.eks. være tilfældet med sorteringsikoner i tabeller eller skraldespandsikoner på mobil, hvor pladsen er begrænset.

Ikoner fungerer altid bedst i kombination med tekst. Anvend derfor altid funktionslink i stedet for klikbare ikoner, når det er muligt.

Se komponenten i eksempelløsninger

• Formular til kontaktoplysninger: Kvittering
• Trinformular til registrering: Vælg personer
• Trinformular til ansøgning: Oplysninger om ansøger
• Trinformular til ansøgning: Tilføj dokumentation
• Trinformular til ansøgning: Kvittering
• Sagsoversigt: Sagsnr. 123456789

Referencer

• Luke Wroblewski: Web Form Design: Filling in the Blanks (2008)
• Jeff Johnson: Designing with the Mind in Mind, Second Edition (2014)
• Hvornår skal du bruge en knap eller et link

Installation

HTML Struktur

<button class="button button-primary">
    Gem
</button>

Undgå at anvende div eller img tags til at konstruere en knap, da skærmlæsere i givet fald ikke automatisk kan afkode knappens funktionalitet.

Primær

Defineres med klassen button-primary.

Bemærk særlige retningslinjer for primærknap.

Sekundær

Defineres med klassen button-secondary.

Tertiær

Defineres med klassen button-tertiary.

Tilbage-knap

Defineres med klassen button-quaternary.

Knap med ikon

<button class="button button-primary">
    <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#refresh"></use></svg>
    Refresh
</button>

Klikbart ikon

<button class="button button-unstyled">
    <svg class="icon-svg mr-0 mt-0" focusable="false" aria-hidden="true"><use xlink:href="#trash-can"></use></svg>
    <span class="sr-only">Slet</span>
</button>

button-unstyled bruges i de tilfælde, hvor knappen kun indeholder et ikon. For at gøre knappen tilgængelig husk da at tilføje tekst til skærmlæsere. Fx <span class="sr-only">Slet</span>.