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

Knapper (Buttons)

Retningslinjer

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)

Eksempel på, hvordan knapper kan se ud

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)

Eksempel på, hvordan knapper ikke bør se ud

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

Se komponenten i eksempelløsninger

Referencer

Varianter

Primærknap

Eksempel på primærknap

Sekundærknapper

Eksempel på sekundærknap

Tertiærknapper

Eksempel på tertiær knap

Tilbage-knap

Eksempel på tilbageknap

Knap med ikon

Eksempel på 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.