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:
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.
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.
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:
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 |
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.
For høyt prioriterte handlinger, som det også kan finnes flere av på en side/view.
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.
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.
Brukes i spesifikke situasjoner der du vil ekspandere/kollapse en seksjon.
Samme som ExpandButton, bortsett fra at denne brukes når du vil ekspandere/kollapse en seksjon fra en linje med tekst.
Brukes der du vil gi brukerne muligheten til å navigere tilbake dit de var.
Et alternativ til lenke der du ønsker å tilby en snarvei til et annet sted i løsningen.
Kan brukes som et alternativ til en kommandoknapp i scenarioer der man ønsker å legge til noe.
ButtonGroup hjelper deg med å samle alle knappene å få de på en rad. På mindre skjermer vil knappene vises under hverandre.
Der knappene går over flere linjer, vil «thin» gjøre avstanden mellom radene mindre.
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.