Button groups

Om knappehierarki og struktur

I Origos og Oslo kommunes lÞsninger generelt skal knapper i grupper plasseres pÄ lignende mÄte for Ä skape konsekvent og forventet flyt for brukeren.

Generelt sett skal knappene, nĂ„r det er mulig, plasseres til hĂžyre pĂ„ skjermen/lĂžsningen. Dersom det er nĂždvendig Ă„ plassere knappene pĂ„ venstre side av skjermen, er det spesialregler, les mer om dette under “Forskjellige plasseringer”.

NÄr knappene brukes i grupper har de to ulike behov vi gÄr ut i fra:

  • Avbryt/Lagre (send inn, godkjenn osv.)
  • Forrige/Neste
  • Annet oppsett

Det er selvfĂžlgelig mulig at det er andre behov i spesifikke lĂžsninger, ta utgangspunkt i oppsettet slik det er beskrevet her, men tilpass det til din lĂžsning.

NÄr du bruker knapper i en lÞsning, husk at den viktigste knappen skal stÄ tydeligst frem, sÄ prÞv Ä holde deg til kun én primÊrknapp.

Varianter

To knapper som stĂ„r tett sammen skal plasseres pĂ„ hĂžyre side av skjermen/lĂžsningen. I dette eksempelet er “Lagre” og “Send inn” den endelige handlingen. Å trykke “Slett” eller “Avbryt” tar deg til en annen side:

Hvis Ăžnskelig kan man ta i bruk en annen farge pĂ„ det “endelige” steget i en flyt eller knapperekke, men gjĂžr dette med omhu og husk at primĂŠrknappene aller helst bĂžr vĂŠre brand-blue.

NĂ„r du har steg og skal vise “Tilbake” og “Neste” skal knappene plasseres pĂ„ hver sin side (tilbake er link som tar bruker til forrige side, neste er knapp som lagrer informasjon og tar bruker til neste steg). I siste steg vil knappen pĂ„ hĂžyre side endre tekst til “Send inn” eller lignende.

Forskjellige plasseringer

Dersom innholdet i teksten din er venstrestilt og du kun har Ă©n primĂŠrknapp kan det noen ganger vĂŠre nĂždvendig Ă„ plassere knappene til venstre:

NÄr du setter det opp pÄ denne mÄten er det mest brukervennlig Ä plassere primÊrknappen (hovedhandlingen) helt til venstre.

Husk at det er viktig at du er konsekvent med plasseringen av knapper gjennom hele lĂžsningen og at brukeren ikke trenger Ă„ “bytte” hvor de trykker i en sammenhengende flyt.

Overflow og mobilvisning

I de aller fleste tilfeller burde knapper inneholde sÄpass korte og konsise tekster slik at de kan settes opp likt som pÄ desktop.

Men, nÄr den horisontale plassen er begrenset, kan knappegrupper stables vertikalt i fullbredde. Knappene stables etter viktigheten av handlingen, med den mest kritiske eller primÊre handlingen Þverst. Det kan vÊre en god idé Ä plassere knappene nÊrmere bunnen av mobilen for Ä vÊre lettere Ä trykke pÄ for brukeren.