Knapper

Knapper har en viktig funksjon og er direkte knyttet til en handling (action). Oslo kommune benytter flere typer knapper med ulike farger, størrelser og funksjoner.

Denne siden ble sist oppdatert 07.03.2017. Vi jobber hele tiden med å gjøre designguiden bedre, og ønsker tilbakemeldinger. Har du kommentarer, finner feil eller er uenig i noe, ta kontakt. Du kan sende en e-post til web@uke.oslo.kommune.no eller bruke “Fant du det du leter etter” nederst på siden. Husk å legge ved e-postadresse hvis du ønsker svar.

Design og størrelser

Bilde av knappetypene standard, CTA, positive og negative. Knappestørrelsene standard, kort, lang i to ulike høyder.
Knappetypene standard, CTA, positive og negative. Knappestørrelsene standard, kort, lang i to ulike høyder. Bilde: Oslo kommune

Knapper brukt i veiledet dialog/skjema

Bilde av knapper brukt i veiledet dialog/skjema (forrige, neste, avbryt, send)
De vanligste knappene brukt i veiledet dialog/skjema. Bilde: Oslo kommune

Prinsipper for bruk av knapper

  • Det er viktig å skille mellom knapper og tekstlenker
    • "Call to action"-knapper skiller seg fra lenker ved at de påvirker/endrer dataene på siden (har en action) ved for eksempel å trigge en pop up eller sende inn et skjema.
  • I hovedsak skal det kun være én hovedknapp på én side eller innenfor et visst handlingsforløp
  • Knappen for innsending av skjema skal alltid være aktiv
  • Valg av farge på knapp skal gjenspeile knappehierarkiet (se design)
  • Knapper der det kan oppstå lengre responstid, bør ha en spinner (f.eks. lagre eller avbryt)

Tekst på knapp

  • Knappeteksten skal være presis
  • Knappeteksten gjenspeile brukerens handling og ikke systemets
    • Med andre ord skal den ikke forklare den tekniske endringen, men forklare endringen for brukeren
  • Knappeteksten skal helst være kort (forrige, neste, ja, nei)
  • Knapper kan ha både verb og subjekt for å understreke at det er en action

Eksempel på tekst på knapp

  • Send søknaden
  • Velg barnehager
  • Endre tiltakshaver
  • Bestill kart

Designprinsipper

Fargene har egne unike funksjon, og innen hver farge finnes heldekkende og transparent. Begge variantene har en ramme på to pixler. Knapper som er helt transparent inneholder også ramme, selv om denne ikke er visuelt synlig.

Nivåene er: Heldekkende: Viktigste handling. Ramme er alternativ valg i forhold til den dekkende. Helt transparent knapp skal benyttes som det alternativet man ikke vil at publikum skal velge, men som allikevel er påkrevd.

Grå

Primærknappen er grå og er den knappen man skal velge i første omgang og på sider med mange knapper tett på hverandre.

Blå

Blå knapp er sekundær og skal benyttes til å bevege deg fra et steg til et annet i et lengre handlingsforløp (veiledende dialog). I en veiledende dialog er denne knappen viktigst, og understøttende knapper skal være transparente med ramme eller helt transparente.

Grønn

Grønn knapp skal kun benyttes da dette er det aller viktisgste og avgjørende handling på en side. For eksempel SEND SKJEMA. Grønn blir benyttet der handlingen oppfattes som positiv.

Rød

Rød knapp skal ikke benyttes, men om så er skal den benyttes der handlingen oppfattes negativ.

Tekstknapper

Tekstknapper skal kunne benyttes i tillegg til de andre knappene, men kan stå alene hvis det er behov for for eksempel “last opp”, “forstørre”, og opptrer midt i en kontekst eller hvor det er flere alternativer på samme nivå.

Noen knapper har ikke synlig bakgrunn og ramme og må ikke forveksles med rene tekstlenker.

Eksempler

Neste (Heldekkende blå)

Forrige (Ramme blå)

Slett innhold (Helt transparent)

Paginering: Forrige (Ramme blå) 1, 2, 3, 4…. (Usynlig) Neste (heldekkende)

Teknisk

Det finnes tre inputtyper for knapper:

  • Standard <input type="button">
  • Innsending <input type="submit">
  • Reset <input type="reset">

Difi anbefaler

“Unngå at knapper er erstattet med lenker som visuelt ser ut som knapper. Dette bryter mot WCAG 1.3.1 om at innhold skal være kodet som det de ser ut som, og gjør at brukere med hjelpemiddel kan få problemer med å få sendt inn skjemaet fordi de ikke finner knappen i sin liste over skjemaobjekt.”

Hentet fra Direktoratet for Forvaltning og IKT (tilsyn for universell utforming og IKT)

“Knappen for innsending eller bekreftelse bør alltid være aktiv. Ikke bruk fortløpende validering til å la denne knappen være deaktivert inntil utfyllingen er fullverdig. Enkelte brukere kan ha problemer med å forstå hva som er påkrevd, og blir forvirret av at de ikke får til å sende inn/bekrefte skjemaet”

Hentet fra Direktoratet for Forvaltning og IKT (tilsyn for universell utforming og IKT)

Universell utforming og tilgjengelighet

Les om overordnede prinsipper og krav for universell utforming

WCAG 2.0 krav

WCAG 1.3.1 Informasjon og relasjoner (Nivå A) "Ting skal være kodet som det ser ut som" (Difi)

Relatert

Lenker