Nielsen på godt norsk – 10 heuristikker for UI-design

I 1994 skjedde det mye spennende! OL på Lillehammer, Skrik ble stjålet fra Nasjonalmuseet og Nielsen publiserte sin endelig versjon av sine 10 heuristikker for brukergrensesnitt. 

I løpet av de siste 29 årene har heuristikkene forblitt de samme som i 1994, men Nielsen og Norman publiserte i 2020 en oppdatert forklaring av heuristikkene med utfyllende beskrivelser og eksempler. 

Det er grunn til å tro at noe som har overlevd tidens tann i vår hurtig endrende bransje kommer til å være gjeldende en god stund til. Du kan kanskje disse punktene ut og inn, men i så fall skal man ikke kimse av litt repetisjon, og om du ikke har hørt om disse før så håper jeg du lærer noe nytt! 

Nok pjatt – her kommer et fornorsket og forenklet sammendrag av Nielsen og Norman sine 10 heuristikker for design 🥁

1. Vis systemets status 🦺
2. Sammenheng mellom system og virkelighet 🌍+💻=💛
3. Brukerkontroll og brukerfrihet 🗽
4. Standarder og konsistent design 🔄 ✅
5. Forebygge feil 🆘
6. Gjenkjenning fremfor å huske 🤔
7. Fleksibilitet og effektivitet ved bruk 🤸🏼‍♀️🚀
8. Estetisk og minimalistisk design 👌🏼
9. Hjelp brukerne å gjenkjenne, diagnostisere og fikse feil selv 🧠
10. Hjelp og dokumentasjon 💁🏼‍♀️

1. Vis systemets status 🦺

Er endringen lagret? Er jeg innlogget? Er det noe som mangler i skjemaet? Gikk bestillingen gjennom? Har kontaktskjemaet sendt e-posten? Er jeg påmeldt nyhetsbrevet?

Om du har lurt på noe av dette før, så har du lurt på hva systemets status er 🧐

Jevnlig kommunikasjon av systemstatusen gjør at brukerne føler at de sitter på kontrollen, og det hjelper dem å ta riktige valg for å kunne fullføre målene sine. Gjennom passende feedback til rett tid kan vi sørge for å holde dem informert om hva som foregår i produktet de bruker. Det er viktig at feedbacken de får servert er konsekvent og forutsigbar for å opprettholde tilliten til produktet ditt.

Hvis brukeren din alltid vet hva som er nåværende systemstatus vil de raskt lære resultatet av de handlingene de gjør, og kan dermed lettere bestemme sine neste steg for å utføre oppgaven sin. Hvis vi sørger for å forsyne brukerne med forutsigbar feedback vil det skape tillit og trygghet til produktet og merkevaren. 

Et eksempel som Nielsen bruker er indikatoren på kart som viser hvor du er, denne gir direkte feedback og hjelper deg til også å forstå hvor du skal gå videre📍🗺

Tips:

• Ingen handlinger med konsekvenser for brukeren skal gjennomføres uten at det blir informert om. 
  Eksempel: “Er du sikker på at du vil slette denne brukeren?”
• Gi brukeren feedback umiddelbart etter at de har utført en handling.
  Eksempel: “Brukeren er slettet.” (Tips: Husk angreknapp. Se heuristikk #3)
• Skap tillit til produktet ved å ha løpende kommunikasjon mellom systemet og brukeren.
  Eksempel: “Nedlastning fullført!”, “24 bilder er slettet” eller “Meldingen ble ikke sendt, prøv igjen”.
• Sørg for at feedbacken oppfattes som trygg og forutsigbar.
  Eksempel: Hvis du informerer bruker om at noe er lagret et sted, så burde de få samme melding om de lagrer noe et annet sted også.

UI feedback:

• Fargeskift
• Progresjon-bar
• Informasjonsmeldinger som toasts, snackbars og varsler
• Lyd
• Lys
• Vibrasjon
• Animasjon

2. Sammenheng mellom system og virkelighet 🌍+💻=💛

Vi trenger ikke finne opp hjulet på ny for hvert produkt – faktisk burde vi ikke gjøre det 😬 Hjulet fungerer ypperlig, og vi fikser som kjent ikke noe som fungerer. Her kan vi helt klart dra paralleller mellom den virkelige og den digitale verden. 

Bruk ✨etablerte konvensjoner ✨

Helt enkelt betyr det en anerkjent retningslinje eller norm som vi følger fordi det er “sånn alle gjør det”. Fordi, hvis alle gjør det samme blir det mye lettere for brukerne å lære nye systemer raskt! For eksempel plasserer vi alltid logoen oppe i venstre hjørne – da finner brukeren enkelt tilbake til forsiden. 

Å bruke etablerte konvensjoner som finnes i brukernes hverdag er helt konge; de kan enkelt og intuitivt forstås uten for mye tenking ⌛️ Et godt eksempel er handlekurv-ikonet som brukes i nettbutikker 🛒 I fysiske butikker er brukerne vant til å samle produkter de vil kjøpe i en handlekurv, og klarer derfor å overføre dette direkte til et lignende scenario på digitale flater.

Mentale modeller

Vi har alle ulike mentale modeller som blir påvirket av tidligere erfaringer, temperament, kultur og vår antagelse om hvordan verden fungerer. Dette utgjør et slags personlig filter for hvordan du reagerer og navigerer i livet. Når vi kartlegger en mental modell så forsøker vi å forstå om dette filteret stemmer overens med vårt produkt. 

Sørg for at informasjonen du serverer blir presentert på en logisk måte som samsvarer med brukerens mentale modell av liknende informasjon. Hold språket enkelt, kall en spade for en spade og sørg for at du ikke bruker stammespråk eller masse tekniske ord. Tilpass begreper, ikoner, konsepter og bilder til din brukergruppe – det som er åpenbart for deg kan være totalt gresk for brukerne dine 🇬🇷 For eksempel ikke skriv: "Ettergivelse av kontrollsanksjon", skriv heller "Du trenger ikke betale parkeringsboten."

Når et design samsvarer med konvensjoner og resultater i den virkelige verden, er det lettere å lære nye brukergrensesnitt. Ved å tenke på denne måten kan vi skape intuitive brukeropplevelser uten behov for masse opplæring.

Tips

• Brukerne bør forstå betydningen av et ord uten å ty til Google. 
• Ikke anta at din forståelse og oppfatning er den samme som brukernes.
• Gjør brukerstudier for å finne ut om brukeren forstår ditt produkt.
• Prøv å dra paralleller mellom ditt digitale produkt og liknende ting som brukerne gjør i sitt virkelige liv.

3. Brukerkontroll og brukerfrihet 🗽

Brukerne dine kommer til å gjøre feil eller endre mening, de vil trykke seg inn på helt andre steder enn det som var tiltenkt eller utføre handlinger som fører til feil resultat. Derfor er det essensielt at de også enkelt finner en vei ut av det de har rotet seg inn i – en nødutgang rett og slett 🚪🏃🏽

Dette kan være så enkelt som en lenke direkte tilbake til start, å kunne krysse ut et vindu, gå tilbake til forrige systemstatus, eller muligheten til å cmd+Z-e seg ut av en handling som førte til noe heeelt annet enn du ville. Det viktigste er at muligheten til å rette opp i feil, eller gjøre om på valg en har tatt, er super-duper-tilgjengelig!

Ved å gi brukeren friheten til å komme seg ut av feil løp eller angre på egen hånd vil de få følelsen av å ha kontroll. Det gir dem frihet og selvsikkerhet når de navigerer seg rundt i systemet. Sjansen for at de blir frustrerte er betydelig mindre når de enkelt kan komme seg ut av den uønskede situasjonen, og da vil det ikke bety så mye at de gjorde feil i første omgang. På denne måten sørger vi for å minimere at brukeren setter seg fast eller får et tech-rage anfall.

UI-elementer som lar brukeren gå tilbake til forrige systemstatus:

• "Tilbake": Knapp som leder til forrige side eller skjerm.
• "Avbryt": Knapp som lar bruker avslutte prosessen de er i.
• "Lukk": Knapp som lukker det brukeren har åpnet.
• "Angre" (og "Utfør likevel"): Lar bruker gjøre om på et UI-element de har endret på.

Tips:

• Sørg for at systemet støtter "Angre" og "Utfør likevel" (aka cmd+z og cmd+y/cmd+shift+z)
• Vis tydelig hvordan brukeren kan komme seg ut av løpet de befinner seg i – for eksempel en "Avbryt"-knapp (men pass på å ikke blande "Avbryt" og "Lukk"!).

4. Standarder og konsistent design 🔄 ✅

Når vi snakker om konsistent design så bør vi overholde både intern og ekstern konsistens for å sørge for at systemet er lett å lære og bruke. Det bør følge det samme mønsteret gjennom hele systemet og i tillegg følge etablerte nett-, plattform- og domenespesifikke konvensjoner.

La oss forresten adressere elefanten med en gang – noen ganger kommer det norske språket til kort og da må vi ta til takke med ord som “konsistens” 🙈(i stedet for “consistency”). Så, håper konsistensen på de neste punktene er etter din smak:

Intern konsistens 

Kan for eksempel være å passe på at du ikke bruker samme farge på statiske og aktive elementer. Hvis brukeren er vant til at knapper og lenker er rosa og du så bruker den samme rosafargen på en statisk tekst, vil det bryte den interne konsistensen, som fører til at brukeren ikke lenger kan stole på at rosa betyr at det er klikkbart.

Ekstern konsistens 

Det handler om å passe på at vi bruker etablerte konvensjoner i løsningene våre, for eksempel handlevognen i nettbutikker som nevnt tidligere 🛒 Brukeren forventer at handlevognen skal se lik ut, oppføre seg likt og befinne seg oppe i høyre hjørne av skjermen, bryter vi med dette så blir brukeren fort forvirret og mister tilliten til løsningen din. Jakob's law kan hjelpe oss å forstå viktigheten av ekstern standardisering.

Jakob's law 

Sier at folk bruker mesteparten av tiden sin på andre digitale produkter enn ditt. For å sørge for best mulig brukeropplevelse må vi derfor legge til rette for at de digitale løsningene vi lager stemmer overens med andre lignende løsninger. 

På den måten slipper brukerne å sløse bort unødig tid og energi på å lære seg nye ting. De vil uansett ubevisst overføre de erfaringene og forventningene de har fra liknende løsninger, og det kan vi utnytte for å lage sømløse brukeropplevelser. Hva er vel bedre enn å anvende designelementer som allerede er grundig brukertestet og etablert? 

Ved å bruke disse etablerte konvensjonene og allerede kartlagte mentale modellene kan vi frigjøre mye av brukerens energi, sånn at de heller kan fokusere på å løse hovedoppgaven på best mulig måte 💪🏼

Tips

Sett deg inn i bransjens etablerte konvensjoner for å sørge for ekstern konsistens (det går an følge disse uten å kvele kreative løsninger 👩🏼‍🎨).

Designsystemer er supert for å hjelpe med intern konsistens som gir fordel for brukeren og fordel for deg.

Overhold både ekstern og intern konsistens for å minimere tiden brukerne trenger for å lære et helt nytt brukergrensesnitt.

5. Forebygge feil 🆘 

Som du kan lese mer om i punkt 9, som handler om å hjelpe brukere til å gjenkjenne, diagnostisere og fikse feil selv, så er det viktig med gode, beskrivende feilmeldinger. Men, det aller beste er likevel å utforme design som forhindrer at feil og problemer oppstår i første omgang. 

Enten kan vi fjerne forhold i systemet som er utsatt for feil og problemer, eller sørge for at brukeren får en mulighet til å bekrefte at de ønsker å utføre handlingen – før de forplikter seg. Ifølge Nielsen er det to typer feil: slips og mistakes, men la oss bare kalle det glipper og feiltakelser 🤷🏼‍♀️

Glipper 

Dette er når brukeren ikke følger skikkelig med eller glemmer informasjon slik at feilen skjer ubevisst. For eksempel skriveleifer, at en krydrer med sukker i stedet for salt eller lukker feil nettleser. Denne type feil skjer typisk når brukerne er i autopilot-modus og utfører en handling de har gjort tusen ganger før. For å forhindre brukeren fra å gjøre slike glipper kan vi sørge for å sette opp passende begrensninger i systemet, og sørge for at standardoppsettet til systemet hjelper bruker til å unngå feil. 

Eksempler på dette kan være å fjerne muligheten for å bestille flybillett til en dato som var forrige uke. I stedet kan vi vise tidligere datoer som inaktive, og sette opp dagens dato med retur om en uke som standard. Da forhindrer vi feilkjøp, gir brukeren en mal som kan spare dem for arbeid og samtidig kommuniserer vi hvordan resultatet skal se ut.

Feiltakelser

Ved feiltakelser gjør brukeren en bevisst handling, men feilen skjer fordi deres mentale modell ikke stemmer overens med designet. For eksempel hvis en får varsel om at bilen har lite spylervæske, men blander ikonet med lavt lufttrykk i dekkene og kjører derfor for å fylle på mer luft i stedet for spylervæske. For å unngå gapet mellom brukeren og designeren sin mentale modell kan vi gjennom grundige brukerstudier tidlig i prosjektet finne ut hvor ulikhetene ligger for å unngå eventuelle feiltakelser. 

Senere kan vi brukerteste for å validere at vi har forstått brukerens mentale modell og iterere etter behov. Andre ting som kan forebygge feiltakelser er å bruke etablerte konvensjoner, visuelle virkemidler som indikerer hvordan systemet skal brukes og vise forhåndsvisning av resultatet.

Tips:

• Prioriter å forebygge feil som skader mye, for så å ta mindre frustrasjoner etterhvert.
• Unngå glipper ved å sette begrensninger og gode standardoppsett for brukerne
• Forebygg feiltakelser ved å fjerne behovet for å bruke hukommelsen, støtte angrefunksjon og ved å advare brukerne før de tar et valg med store konsekvenser.

6. Gjenkjenning fremfor å huske 🤔

Gjenkjennelse skjer intuitivt og umiddelbart, mens hukommelse tar lengre tid og krever at du “kobler på” hjernen for å overveie og tenke logisk om det du prøver å huske. Sjekk ut Daniel Kahnemans bok “Tenke, fort og langsomt” om dette 🤓

Det er lettere å huske navnet på en person når du kan se ansiktet deres. Ved gjenkjennelsen blir navnet trigget i hjernen og vi klarer stort sett å tilbakekalle navnet fra hukommelsen vår – det samme gjelder for digitale elementer. 

Korttidshukommelsen vår er begrenset. I tillegg nå som all informasjon er tilgjengelig ved kun noen tastetrykk så er vi enda mer utålmodige hvis vi er nødt til å huske noe for å utføre en oppgave. For å minimere kognitivt bryderi for brukeren bør vi lage brukergrensesnitt som baserer seg på gjenkjennelse fremfor hukommelse.

Sørg for at elementer, interaksjoner og valgmuligheter er tydelige i designet, brukeren skal ikke være avhengig av å huske informasjon fra én del av brukergrensesnittet til en annen. All informasjon som brukeren trenger for å kunne bruke systemet (som for eksempel labels på input felter eller menyelementer) bør være synlig og enkelt å finne igjen når de trenger det.

Et av Nielsens eksempler er hvordan det er mye enklere å gjenkjenne hovedsteder enn det er å huske dem, så om jeg stiller deg spørsmålet "Hva er hovedstaden i Australia?" vil det være vanskeligere å svare på enn om jeg spør "Er Canberra hovedstaden i Australia?" 🦘🇦🇺

Tips:

• Et alternativ til lange onboardinger fullstappet med informasjon kan være å servere informasjonen underveis i porsjoner og i rett kontekst.
• Vurder hva slags informasjon som er hensiktsmessig at de husker og ikke.
• Vis eller indiker historikk på tidligere besøkt innhold, for eksempel i en nettbutikk eller ved googlesøk, for å gjøre det lettere å finne tilbake til brukeroppgaver de ikke har fullført.

7. Fleksibilitet og effektivitet ved bruk 🤸🏼‍♀️🚀

Måten systemet blir brukt på varierer veldig på nivået til brukerne. De som er nye eller mindre teknologisk bevandret tar gjerne en mer omstendelig og kronglete vei til målet. Mens "ekspertene" finner raskt snarveier og er mer effektive i å oppnå samme resultat.

"Ekspertene" er ofte mindre tålmodige og blir glade når de finner snarveier, derfor kan det være hensiktsmessig å inkludere disse når vi designer et system. Snarveiene kan gjerne være "skjult" for uerfarne brukere for å minimere støy. På denne måten kan "ekspertene" bruke systemet på en skikkelig effektiv måte. Dermed har vi tilrettelagt for både erfarne og uerfarne brukere 🥳.

Ta for eksempel programmer for videoredigering. Her har du ofte et vidt spenn på nivået til brukerne;

• Helt nybegynnere
• Folk som har brukt redigeringsprogrammet en del men som ikke utforsker utover standardoppsett 
• Ekspertene som har skreddersydd dashbordet ned til den minste detalj.

Her legger vi opp til at uerfarne kan bruke de viktigste og mest sentrale funksjonene uten å måtte endre på oppsett eller innstillinger for å løse oppgavene. Samtidig får de erfarne brukere mulighet til å tilpasse innstillinger og forme dashbordet akkurat slik de ønsker. 

Tips:

• La brukerne få skreddersy måten de bruker de vanligste funksjonene.
• Ha fleksible prosesser og metoder slik at de selv kan velge den fremgangsmåten som funker best for dem.
• Inkluder og tilrettelegg for tastatursnarveier

8. Estetisk og minimalistisk design 👌🏼

Minimalisme

Handler om å redusere mengden visuelle former og virkemidler helt ned til det mest fundamentale slik at det aller viktigste får stå i fokus. Det hjelper ikke om designet ser fabelaktig ut dersom det inneholder en haug med unødvendige elementer som distraherer brukeren fra hovedfunksjoner og oppgaver. All tekst, visuelle virkemidler eller animasjoner må ha en reell funksjon i designet og bistå brukeren i å fullføre oppgaven sin.

Men, vi kan jo ikke bare ha minimalistisk design. Det hadde vært grusomt kjedelig, og enda viktigere – det går utover brukeropplevelsen!

Estetisk design

Det visuelle er det første brukerne ser av produktet ditt og etter kun 50 millisekunder har de opprettet en mening om det estetiske ved et produkt. Det er omtrent 10 ganger raskere enn å lese noe av innholdet 🥵. Brukere er til og med mer tolerante i møte med lav brukervennlighet dersom de synes at designet er pent! I tillegg vil en sterk visuell identitet sørge for tillit og kredibilitet til en merkevare dersom det blir brukt konsekvent gjennom produktet. 

Bilder av grønne landskap med innsjøer, baby-aktig ansiktstrekk, planter, avrundede former, livlige og klare farger, konfetti og fyrverkeri er noe folk flest oppfatter som vakkert og estetisk, uavhengig av kultur. 

Ifølge Nielsen er fellesnevneren for alle disse tingene et løfte om å oppfylle menneskelige behov som mat, vann, husly, sikkerhet, varme, selskap og samhold. Disse iboende assosiasjonene kan vi utnytte i designet vårt for å forsterke følelsene og effekten vi ønsker å oppnå med produktet, og kan være en stor del av den gjennomgående brukeropplevelsen. For eksempel kan vi feire at brukeren har fullført en oppgave med animert konfetti 🎊

Målet er derfor å lage et estetisk, minimalistisk design hvor funksjonene er superstjernen og de visuelle virkemidlene er forsterkende og veiledende for å gjete brukeren i riktig retning. Lett som en plett altså 😅

Tips:

• Fokuser på at innhold og visuelle virkemidler skal være essensielle for brukeroppgavene
• Ikke legg til ekstra stæsj som distraherer fra den viktige informasjonen som brukeren trenger. Kort oppsummert: funksjon uten fjas! (Tar du referansen? Se forsiden på okse.no 🤩)
• Prioriter innhold og funksjoner slik at de samsvarer med toppoppgavene
• Bruk elementer som er allment kjent som vakkert og harmonisk for å forsterke ønsket følelse av produktet

9. Hjelp brukerne å gjenkjenne, diagnostisere og fikse feil selv 🧠

Det viktigste av alt: Alle feilmeldinger bør være forståelige og behjelpelige for alle! 🖤

Vi har nok alle vært offer for automatisk genererte, kryptiske og rare feilmeldinger som vi ikke forstår noen ting av. Å undervurdere viktigheten av forklarende, tydelige og forståelige feilmeldinger, for eksempel med å tro at de ikke vil bli vist til noen, er som å gå hjemmefra uten paraply i Bergen - det kan godt være at det ikke regner, men sjansen er likevel relativ stor for at det skjer uansett. I en ideell verden så trenger vi ikke feilmeldinger, men sånn er jo ikke virkeligheten 🤷🏼‍♀️

En feilmelding skal formuleres i et forståelig og ujålete språk, les: Unngå "kodespråk". Det skal presist forklare problemet og samtidig foreslå en løsning. Meldingen bør støttes opp med visuelle elementer og farger slik at brukerne legger merke til at noe har skjedd og gjenkjenner problemet basert på plassering, ikoner og farge i tillegg til teksten. Bruk ✨etablerte konvensjoner ✨

Wix har laget en stilig struktur for hvordan vi kan bygge gode feilmeldinger, kort oppsummert er det dette du må gjøre:

• Fortell hva som har skjedd
  Eksempel: “Kunne ikke koble til konto.”
• Fortell hvorfor det skjedde
  Eksempel: “Vi kunne ikke koble til kontoen din på grunn av tekniske problemer fra vår side.”
• Gjør de beroliget
  Eksempel: “Endringene dine har blitt lagret.”
• Gi de en vei ut av problemet
  Eksempel: “Hvis dette problemet oppstår igjen, kontakt Kundeservice.”
• Hjelp de å fikse problemet selv
  Eksempel: “Vennligst prøv igjen.”

Tips:

• Bruk tradisjonelle visuelle virkemidler for å signalisere viktigheten av meldingen, for eksempel en varseltrekant ⚠️
• Fortell brukeren hva som gikk galt på en måte de vil forstå, uten tekniske fraser og ord.
• Tilby en utvei, en måte å fikse opp i feilen – både ved å fortelle hva de kan gjøre og ved å gi de en snarvei som kan løse problemet umiddelbart.

10. Hjelp og dokumentasjon 💁🏼‍♀️

Eeegentlig burde vi la greiene vi lager forklare seg selv, men selv om det er målet så funker det ikke alltid sånn i den virkelige verden. Ofte er det nødvendig å gi brukeren dokumentasjon for å veilede dem gjennom brukerreisen, og noen ganger er det spesielle forhold som må informeres om uansett. Kom til poenget med en gang og gi konkrete steg brukeren kan gjøre for å løse problemet. Det viktigste er at brukeren får rett info til rett tid, og vi skiller det gjerne i proaktiv hjelp og reaktiv hjelp. 

Proaktiv hjelp

Som i ordets betydning handler proaktiv hjelp om å forsyne brukeren med informasjonen de trenger før de trenger den (eller samtidig). Ofte for å gjøre brukeren kjent med grensesnittet.

Slik kan vi gi nødvendig informasjon i rett kontekst, som er helt essensielt for å forstå sammenhengen. Her skal de altså ikke trenge å lete etter en FAQ eller ta kontakt med kundeservice for noe som vi enkelt kan informere om underveis i brukerreisen. 

Reaktiv hjelp

På den andre siden har vi reaktiv hjelp som er en respons på et brukerproblem eller behov. 

Hensikten er å svare på spørsmål, la brukerne løse problemene på egen hånd og servere ekstra detaljert dokumentasjon for alle som vil bli skikkelige nørds. Formatet for reaktiv hjelp er gjerne FAQ, teknisk dokumentasjon, bruksanvisninger, fremgangsmåter, monteringsvideoer og så videre.

Tips:

• Det må være enkelt å søke seg frem til rett informasjon 
• Kom til poenget med en gang og gi de konkrete steg som løser problemet deres, nummererte lister eller kulepunkter er helt konge her.
• Gi bruker rett informasjon, til rett tid og i rett kontekst