Det er ikke uvanlig at alt fra bestillinger av produkter og tjenester til registrering av profiler blir delt opp i flere steg.  I tillegg til å la brukerne komme videre til neste steg, kan man la dem nullstille skjemaet, gå tilbake til forrige steg eller avbryte hele prosessen. Hvilke navigasjonselementer bør tas med? Det holder med én. Den viktigste knappen lar brukerne komme videre, og det er alt de trenger.

“Nullstill” er krise

Det går heldigvis lenge mellom hver gang jeg ser et skjema med nullstill-knapp, men de finnes dessverre fremdeles. Det største problemet med en nullstill-knapp er at brukeren trykker feil og mister alt arbeidet han har gjort. Tilfellene der brukeren har lyst til å begynne helt på nytt er ikke mange, og da er det lettere å endre informasjonen i feltene som allerede er utfylt.

nullstill

“Tilbake” er overflødig

Er det én ting som sitter i ryggmargen til nettsurfere, så er det at tilbake-knappen i nettleseren fører til forrige side. En egen tilbake-knapp i skjemaet gir derfor ingen verdi så lenge tilbake-knappen i browseren fungerer som forventet. Og som Luke W skriver om bruk av tilbake og neste: Brukere er mest interessert i å bli ferdige med skjemautfylligen og de går i begrenset omfang tilbake til forrige steg.

nsb

“Avbryt” er unødvendig

Hvis du bestiller flybilletter på nettet, vet du at du må komme deg gjennom alle stegene før bestillingen er i boks. Folk forstår at de må komme seg gjennom alle stegene før de får det som venter i andre enden. En egen avbryt-knapp er derfor unødvendig. Vil folk avbryte det de holder på å bestille så går de enten til en annen side eller lukker nettleseren. Unntaket er når brukeren har gitt fra seg sensitive opplysninger eller det kan oppleves av brukeren at han har forpliktet seg til noe.

skandiabanken

“Fortsett” er den eneste knappen skjemaet trenger

Hvorfor bare én knapp?

  • Flere knapper betyr at brukerne kan trykke feil. Hvis primærhandlingen designmessig skiller seg fra de øvrige knappene, så er dette trolig ikke et stort problem. Men hvorfor ikke gjøre det umulig for brukerne å gjøre feil?
  • Flere knapper betyr et mer rotete grensesnitt, uansett hvor tydelig knappen for å komme videre er. Flere valg betyr mer tenking. I stedet for å la brukerne kaste bort tid på å tenke på hvilken knapp som er riktig, er det bedre om de bruker tiden på å fylle ut neste steg.

blogger

Hvor skal den plasseres?

I Luke Wroblweskis bok om skjemadesign kommer det frem at oppsettet som fungerer best, er når primærhandlingen er plassert nederst til venstre. I skjemaer som ikke er venstrejusterte kan andre plasseringer være fornuftige, men det er viktig at plasseringen er konsistent gjennom stegene. Brukerne kommer seg videre selv om knappen plasseres andre steder, men nede til venstre er den hurtigste og mest effektive plasseringen.

lukew

Boken tar for seg skjemaer med kun én side, men Luke W har i etterkant skrevet et blogginnlegg om bruk av tilbake- og nesteknapp i flerstegsprosesser.

Les hva Jakob Nielsen skriver om bruk av nullstill- og avbrytknappen.

Lik dette innlegget 4 personer liker dette innlegget
Loading ... Loading ...

19 kommentarer


Sebastian Steinmann
18. november 2009
kl. 18:15

Vil nå si at grunnen til at det var såpass stort fokus på “Submit” knappen i bildet over kan ha noe med at det er en standard “Call to action” knapp, den er stylet på en måte som tilsier at det er her man bør trykke for å komme seg videre.

Tror i mange tilfeller og ha en neste knapp nederst til høyre også kan fungere veldig bra, da den peker i riktig retning.


George Gooding
18. november 2009
kl. 18:16

Vet ikke hvor mange ganger jeg har anbefalt akkurat dette til kunder, og likevel blitt bedt om å legge inn de ekstra knappene. Campaign Monitor og andre har fulgt dette prinsippet fullt ut i deres GUI, og det fungerer bra bortsett fra at de ikke lar deg hoppe til ønsket steg i prosessen selv om de viser en stegliste.

Vil tro at dette prinsippet brukt i en bestillingsprosess på en nettbutikk vil føre til en liten økning i salg, siden man på en måte dytter brukeren videre ved å bare ha videre-knapp.

Hadde dog vært flott med en vitenskapelig test for å se hva slags holdninger brukere har til dette prinsippet, eller om det er bare IT-kyndige som bruker tilbake-knappen i nettleseren flittig.


Andreas Schjønhaug
18. november 2009
kl. 19:00

@Sebastian Steinmann: I løsninger med flere knapper har vi gode erfaringer med av å la fortsett/neste/videre være stor og tydelig klikkbar, mens tilbake og avbryt er vanlige tekstlenker. I eksemplene til Luke W er skjemaene venstrejusterte, og det er nok grunnen til at de hurtigste resultatene kommer fra å la submit-knappen stå rett under siste input-felt. Høyrestilt knapp for å komme videre fungerer også fint, selv om blikket i mange tilfeller må flytte seg litt lenger.

@George Gooding: Boken til Luke W tar bare for seg énsiders registreringsskjemaer, så det hadde absolutt vært interessant å se om man får annerledes resultater i flerstegsprosesser.


Haarball
18. november 2009
kl. 19:18

Luke Wroblewskis bok er skjemaporno. Vanvittig flink fyr. Presentasjonene hans anbefales på det varmeste.


Hans F. Nordhaug
18. november 2009
kl. 19:22

Jakob Nielsen skrev dette allerede i 2002, men det må gjerne gjentaes. At vi ikke trenger en knapp for nullstilling er vel de fleste enig om, men min erfaring er at avbryt-knappen ofte er ønsket av brukerne. Hver gang jeg viser folk redigering i Drupal får jeg (fortvilte) spørsmål om hvordan de skal avbryte …


Stig Morten Myre
18. november 2009
kl. 19:58

Bra innlegg. Er helt enig i at énsidersskjema ofte bare trenger én knapp, men er som @EirikHafver ikke så sikker når prosessen har flere steg.

Vet for min egen del at jeg ofte er litt redd for å røre tilbakeknappen i nettleseren midt i en prosess, fordi jeg har brukt så mange løsninger som håndterer dette dårlig. Da har jeg større tillit til en tilbakeknapp i skjemaet, selv om begge deler selvfølgelig bør fungere.

Det stemmer at Web Form Design ikke omfatter flerstegsprosesser, men Luke Wroblewski har skrevet om det på uie.com. Ingen av versjonene der utelater tilbakeknappen, men det gis forskjellige eksempler på mer og mindre tydelige utforminger.

Det siste eksemplet er omtrent identisk med den vi har byttet til i Campaign Monitor, som George nevner. Neste steg gis klart mest vekt, men tilbake er også lett tilgjengelig. Dave skrev litt om dette da vi forandret knappene.


Andreas Schjønhaug
18. november 2009
kl. 20:06

@Hans F. Nordhaug: Har nå lenket til Jakob Nielsens alertbox. Jeg tror redigering skiller seg fra et registrerings- eller kjøpsprosess. Konsekvensene av å lagre en endring du egentlig ikke ville beholde oppleves som større enn å la være å fullføre en registrerings- eller kjøpsprosess. En avbryt-knapp gir deg som bruker trygghet om at endringene ikke blir lagret, så det kan være fornuftig.


Andreas Schjønhaug
18. november 2009
kl. 20:34

@Stig Morten Myre: Takk skal du ha. Jeg har dessverre opplevd det samme ved bruk av tilbakeknappen i nettleseren. Ingenting er kjipere enn å miste arbeidet man allerede har gjort med å fylle ut en rekke felter. Men jeg mener fortsatt at hvis nettsiden oppfører som den skal i det man klikker tilbakeknappen i nettleseren, så er en egen tilbakeknapp overflødig. Takk for tipset om Luke W og flerstegsprosesser, jeg har oppdatert innlegget mitt med noen poenger derfra.


Stig Morten Myre
18. november 2009
kl. 20:48

Det er jeg enig i – jeg foretrekker vanligvis å bruke tilbakeknappen i nettleseren. Problemet er at man ikke vet om det fungerer før man prøver. Ikke fordi nettleseren ikke oppfører seg som den skal, men fordi nettløsningen ikke er utviklet for å ta høyde for tilbakeknappen.

I tillegg er muligheten for å gå både frem og tilbake viktig i endel prosesser. Da synes jeg det gir mening å gi mulighet for dette i same grensesnitt.


Alf Tore Meling
18. november 2009
kl. 21:09

Heisann og takk for bra innlegg. Som jeg stort sett er helt enig i. Bortsett fra tilbakeknappen :)

Har ikke noen undersøkelser å vise til. Tenker heller ikke på små skjema som påmelding for nyhetsbrev, ol. I slike skjema trenger vi bare “fast forward”.

Men. Straks vi snakker om større ting, feks nettbank, leiebil, kjøp av reise – etc. – trenker jeg annerledes. Her opplever jeg det risikabelt å bruke browserens tilbakeknapp. Worst case er at jeg kastes ut. Alternativt mister all info. Dette har skjedd for ofte til at jeg vil føle meg komfortabel med større skjema uten tilbakeknapp. Om denne heter “rediger”, om den er en tekstlink – helt greit for meg. Tror på stor forover kombinert med liten, men tydelig, bakover.


Alf Tore Meling
18. november 2009
kl. 21:43

Med utgangspunkt i din visualisering ville jeg nok bedt deg om å teste følgende alternativ http://twitpic.com/q0ihs – med orange hover på tilbakeknappen.


Oppgitt
18. november 2009
kl. 22:15

Jo flere knapper, desto bedre sier nå jeg. Liker ikke at andre velger for meg:(


KP
20. november 2009
kl. 18:04

Bra innlegg med fin oversikt. Kan du si noe om deres erfaring med knapper som plutselig dukker opp? I et prosjekt jeg jobber på har noen valgt at “Order now” knappen ikke vises för folk har godkjent vilkårene. Jeg er ingen tilhenger av knapper som dukker opp, men jeg skulle gjerne hatt litt data å vise til. Har dere i Netlife noe?


Andreas Schjønhaug
24. november 2009
kl. 08:40

@alftore: Tror designet du foreslår hadde fungert helt fint :-)
@KP: Mangel på knapp kan føre til at ikke er like tydelig hva man skal gjøre for å komme videre. Jeg tror det er bedre å la folk trykke på “Order now” og heller få en beskjed om at de må godkjenne vilkårene. Det virker for meg tydeligere. Men vi har ikke gjort noen grundig undersøkelse på dette.


Anonym
26. november 2009
kl. 08:42

Interessant innlegg og diskusjon. Ser at fleire etterlyser data, og som ein meir generell kommentar meiner eg at mykje av UX-arbeidet (dessverre) lir av for lite dokumentert kunnskap. Det bør rett og slett forskast meir på dette området. Kanskje det er gjort undersøkingar støttar påstandane dine? Jakob Nielsen pleier ofte å visa til forsøk i sine kommentarar, men det er ikkje forsking i tradisjonell forstand, dvs. opne, etterprøvbare og fagfellevurderte resultat.

Til slutt ein kommentar til Avbryt-knappen, som eg også kommenterte i Marthas liknande skjema-innlegg. ELMER har til no brukt Avbryt som einaste lagrings-alternativ. Akkurat det treng me kanskje ikkje forska på for å slå fast at det ikkje er spesielt lurt..


Svein Ølnes
26. november 2009
kl. 08:43

Innlegget over om meir forsking innan UX var ikkje meint å vera anonymt :-)

Svein


Thormod
5. januar 2010
kl. 10:26

ELMER2 er en offentlig standard for elektroniske skjemaer i offentlig forvaltning. Den er veldig bra og tar for seg disse tingene som er diskuter over på en veldig bra måte. http://www.elmer.no

[...] og gjer deg artikler om brukervennlegheit. Blant anna kan du lese at i eit nettskjema er det nok med berre ein knapp for å lede brukaren gjennom. Om det ikkje er interessant nok, kan du jo alltids få råd frå [...]
[...] This post was mentioned on Twitter by NetLifeResearch, Andreas Schjønhaug. Andreas Schjønhaug said: Én knapp er nok: http://www.iallenkelhet.no/en-knapp-er-nok [...]

Gi oss din kommentar

eller