Knapper

Knapper gir brukerne mulighet for å gjøre ulike typer handlinger i brukergrensesnittet

Bruk av knapper

I SpareBank 1 har vi flere typer knapper og hvilken du skal bruke kommer an på situasjonen, og hvilke andre knapper som ligger i «nærheten». Felles for alle knappene er at de kan brukes i situasjoner der du vil gi brukerne muligheten til å utføre ulike typer handlinger i brukergrensesnittet.

Noen eksempler på scenarioer der knapper kan komme til nytte:

Starte en prosess. F.eks. «Bli kunde», «Sjekk pris», «Meld skade»
Gi en kommando til systemet. F.eks. «Skriv ut», «Last ned», «Betal», «Bestill»
Beslutte noe. F.eks. «Kjøp», «Aksepter», «Overfør»
Navigere i brukergrensesnittet. F.eks. «Neste», «Fortsett», «Søk»
Endre modus eller visning. F.eks. «Redigér» for å gå til redigeringsmodus, «Vis flere» for å ekspandere en liste

Knapper skal brukes der kundene utfører en handling. Der de skal navigere til andre sider og sider utenfor løsningen brukes lenker istedenfor. Når du vil at brukeren skal ta et valg er det best å bruke radioknapper eller checkboxer, for å så bekrefte med en knapp.

Gjør sånn:

Knappen skal brukes til å utføre en handling
Ha informativ og beskrivende tekst, ikon eller begge deler
Bruk verb i imperiativ form (unntak: konvensjoner som «neste»)
Ha så kort tekst som mulig

Ikke sånn:

Ha tekst som går over 2 linjer
Gjem knappen eller sett den som disabled
Ha flere primærknapper på en side
Bruk knapp til å navigere utenfor løsningen (bruk lenke istedenfor)
Bruk knapp til å la bruker ta valg (bruk checkbox/radioknapp istedenfor)

Deaktiverte knapper

I SpareBank 1 bruker vi ikke deaktiverte versjoner av knappene (disabled). Istedenfor en deaktivert knapp, la knappen alltid være synlig og vis gode feilmeldinger hvis brukeren prøver å trykke på knappen før betingelsene for å bruke knappen er innfridd.

Valg av knapp

I SpareBank 1 har vi kommandoknapper som kan brukes til alle typer handlinger, og spesielle knapper som kun skal brukes i spesifikke situasjoner.

For å velge mellom kommandoknappene ActionButton, PrimaryButton, SecondaryButton og TertiaryButton, må du vurdere handlingens prioritet. Prioriteten vurderes kvalitativt basert på viktighet og frekvens:

En handling som gjøres sjelden, men har svært høy viktighet enten for brukeren eller SpareBank 1, bør få høy eller svært høy prioritet. F.eks. knapper for å starte en prosess eller beslutte noe, som "Bli kunde", "Meld skade" og "Kjøp".
En handling som har lav eller middels viktighet, men høy bruksfrekvens vil kunne få høy eller middels prioritet (men aldri svært høy). F.eks. knapper som er del av en prosess, som "Legg til godkjenning" og "Fortsett".
En handling som sjelden brukes og har lav viktighet, men fortsatt må være tilgjengelig, vil som regel få lav prioritet. F.eks. å hente opp et klageskjema.

Valg av kommandoknapp må også vurderes relativt avhengig av hvilke andre knapper som er i umiddelbar nærhet. F.eks. vil kanskje en lagre-knapp gis høy prioritet, mens avbryt-knappen ved siden av gis lav prioritet (selv om den brukes relativt ofte).

Knapp	Bruksområde
	Svært høyt prioriterte handlinger (call to action) som krever en knapp som skiller seg ut fra de andre knappene. Det skal som hovedregel kun være én ActionButton per side/view.
	Høyt prioriterte handlinger.
	Middels prioriterte handlinger. Kan ha ikon.
	Lavt prioriterte handlinger. Kan ha ikon.
	Brukes kun for den spesifikke handlingen å ekspandere/kollapse en seksjon.
	Brukes kun for den spesifikke handlingen å ekspandere/kollapse en seksjon fra en linje med tekst.
	Brukes kun som snarvei for å navigere til et annet sted i løsningen. Alternativ til Lenke.
	Kan brukes som alternativ til en kommandoknapp for handlingen å legge til noe.
	Brukes bare der man vil gå tilbake til forrige steg/side

ActionButton

Brukes for svært høyt prioriterte handlinger (call to action), og der du trenger en knapp som skiller seg ut. Det skal som hovedregel kun være en ActionButton per side/view.

PrimaryButton

For høyt prioriterte handlinger, som det også kan finnes flere av på en side/view.

SecondaryButton

Kan brukes der du har middels prioriterte handlinger, eller i kombinasjon med andre knapper, for eksempel som en «avbryt»-knapp ved siden av en ActionButton. SecondaryButtons kan ha ikon.

TertiaryButton

For lavt prioriterte handlinger, eller i situasjoner der du trenger å «linke» til innhold på samme side. For eksempel «anchors» som leder deg til et avsnitt i en artikkel.

ExpandButton

Brukes i spesifikke situasjoner der du vil ekspandere/kollapse en seksjon.

InlineExpandButton

Samme som ExpandButton, bortsett fra at denne brukes når du vil ekspandere/kollapse en seksjon fra en linje med tekst.

BackButton

Brukes der du vil gi brukerne muligheten til å navigere tilbake dit de var.

ShortcutButton

Et alternativ til lenke der du ønsker å tilby en snarvei til et annet sted i løsningen.

TaskButton

Kan brukes som et alternativ til en kommandoknapp i scenarioer der man ønsker å legge til noe.

ButtonGroup

ButtonGroup hjelper deg med å samle alle knappene å få de på en rad. På mindre skjermer vil knappene vises under hverandre.

thin

Der knappene går over flere linjer, vil «thin» gjøre avstanden mellom radene mindre.

inline

Inline endrer ButtonGroup fra «display: flex» til inline, som betyr at gruppen kun vil ta opp plassen den trenger og ikke 100% av bredden som ButtonGroup gjør. Brukes i situasjoner der du har annet innhold som skal ligge rundt eller på samme linje som knappene.