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 brukersnittet.
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
Ett alternativ til lenke der du ønsker å tilby en snarvei til ett annet sted i løsningen.
TaskButton
Kan brukes som ett 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.