Notater fra «Don’t Make Me Think»

Denne bloggposten er en oppsummering av boka «Don’t Make Me Think«, hvor temaet er godt webdesign. Den er skrevet av Steve Krug, en «brukervennlighetskonsulent». Vedkommende burde derfor vite hva han snakker om. (Noe jeg tror er tilfellet.)

Jeg har lest denne boka tidligere, men bestemte meg for å lese den på nytt og ta litt notater. Det er ei knakende god bok, med mange visuelle eksempler som gjør det klart hva forfatteren mener.

«Ikke få meg til å tenke!»

Etter eget utsagn er dette hans viktigste råd (eller "lov"). Fordi godt webdesign først og fremst handler om å designe en nettsted så godt, at den jevne bruker slipper å tenke når nettstedet skal brukes. Brukeren skal umiddelbart forstå, selv om det er første gangen vedkommende besøker siden. Dette krever et intuitivt og lettforståelig design.

At dette sier seg selv er forsåvidt sant, men likevel er dårlig design ofte tilfellet for mange nettsteder. Til og med offentlige sider hvor eier burde vite bedre. (Dette er min egen erfaring, ikke noe Steve Krug påstår.)

Scanning & prøving-og-feiling

Når man surfer på World Wide Web har man ofte hastverk. Man titter raskt igjennom sider og klikker på lenker i hytt og pine. Stadig på jakt etter noe.

Å grovt skumlese en nettside kalles scanning; man scanner nettsiden etter bestemte ord eller uttrykk. Samme utålmodighet gjelder navigasjon; man trykker på første og beste lenke man finner. Av den grunn er tilbakeknappen mest brukt i nettleseren. Det er først når man har funnet det man leter etter, at man leser bolker av tekst og studerer bilder.

Prøving og feiling, slik som beskrevet over, må man tilrettelegge for når nettstedet designes. Hvis ikke kan brukeren få vansker med å finne frem og lett bli frustrert.

Mitt eget råd her: Se for deg at brukeren er ekstremt pissetrengt, men trenger å finne noe øyeblikkelig! Spørr deg selv om nettstedet du designer er brukervennlig nok, så brukeren klarer dette uten å pisse i buksa .. 😀

Denne formen for design kan man godt kalle scannerdesign. (I mangel på bedre beskrivelse.) Det ligner designet som gjelder store reklametavler langs veien. Hvor leser må forstå innholdet øyeblikkelig, fordi tiden er knapp.

Design for scanning

For å få et design som muliggjør scanning, må man aktivt legge til rette for det. Og det betyr et design hvor bruker automatisk skjønner hvordan ting fungerer. Forhåpentligvis uten altfor mye klikking. (Men så lenge all klikking er tankeløs, vil ikke bruker bli frustrert, dette er Krugs andre "lov".)

Konkret språk

Unngå vagt språk som kaster bort tiden til leseren. Skriv heller konkret og kort. Dette betyr også korte setninger. Hvis muligheten byr seg bør man også bryte opp tekst i punktlister.

Og dropp superlykkelige velkomsttekster, rosenrøde introduksjoner, skrytetekster, lange instruksjoner og uinteressante avhandlinger om bedriftens filosofi .. Sannheten er at bruker gir blanke f*en i alt dette. Han/hun er mer opptatt av hva nettstedet kan gjøre for han/henne.

Konvensjoner og standarder

Man bør i stor grad gjenbruke allerede vedtatte og velprøvde løsninger. Da brukeren allerede vil være godt kjent med disse. Man skal kun finne opp hjulet på nytt, hvis det man lager faktisk blir (mye) bedre enn alternativet.

Trafikkskilt er et godt eksempel. Uansett hvor man ferdes i verden er trafikkskiltene som regel ganske like. Og det til tross for forskjellige språk og kulturer. Dette er ikke tilfeldig. Det er lagt ned en betydelig innsats i å få lettforståelige trafikkskilt som flest mulig vil forstå. Riktignok finnes det noen få forskjellige skiltkonvensjoner, men skiltene er likevel ganske like. Fordi mange av de samme fargene og motivene gjenbrukes.

Samme gjelder kjøretøy. Biler, motorsykler, osv. er forholdsvis like å operere. Har man lært å kjøre en bestemt type doning, kan man kjøre de fleste som ligner i fremtiden. Det krever knapt tilvenningstid.

Et tankeeksperiment: Se for deg at du kommer til et land hvor du skal leie bil, men hvor både trafikkskiltene og kjøretøyene er funnet opp på nytt og ikke lenger følger vanlige konvensjoner eller standarder .. At dette vil skape mye tenking, tvil, frustrasjon og trafikkulykker er garantert.

Overført til webdesign betyr dette at tekst, ikoner, knapper og lenker bør gis vanlig fasong og et typisk utseende. Hver viktige del av en nettside (logo/sidetittel, søkeboks, navigasjon, osv.) bør plasseres der bruker vil forvente å finne den. Hvordan nettstedet og hver nettside fungerer, bør være forutsigbart. Eksempelvis har de fleste nettbutikker en handlekurv og ei kasse, slik som butikker i den fysiske verden.

Velger man å fravike det kjente og lage noe nytt, må man være sikker på at brukeren fortsatt vil henge med uten måtte tenke for mye. Dette "nye" må da takle brukers forventninger til hvordan noe vanligvis fungerer ..

Visuelt hierarki

Del opp en nettside så det blir synlig hva som hører sammen. Hver overordnede del (hode, kropp, navigasjon, fot, osv.) bør klart separeres fra hverandre.

Øverst har man gjerne sidetittel/logo. Også en konsis, men catchy, sidebeskrivelse. Dette er omtrent det første brukeren vil se. Og det styrer i stor grad hvordan nettstedet vil brukes videre. Noen ganger er en sidebeskrivelse imidlertid ikke nødvendig. Kjente nettsteder som Google, Amazon, osv. klarer seg fint uten.

Bruk overskrifter og tomrom i forskjellige størrelser, for å gruppere ting sammen og for å vise hva som er viktig og hva som er mindre viktig.

Når det gjelder lenker bør disse skille seg ut fra vanlig tekst. De skal være lette å få øye på. Og det skal være opplagt at de kan trykkes på. Vanligvis betyr dette at lenker må være understreket, fordi dette er blitt normen. Unntaket gjelder lenker som er del av nettstedets navigasjon, for da skal det være opplagt at man kan trykke på de. Allerede besøkte lenker bør gis en annen farge enn lenker som fortsatt er uutforsket.

Alt dette muliggjør direkte for mer effektiv scanning og dermed lavere frustrasjonsnivå for bruker.

En siste ting: Unngå støy som leder oppmerksomheten til bruker vekk fra sidens visuelle hierarki. Blinkende reklame kan være nok. Dette skaper lett frustrasjon (les: irritasjon) for bruker og vedkommende kan finne på å forlate nettstedet tvert.

Navigasjon

Uansett hvor man befinner seg på et nettsted, bør navigasjonen gjenspeile krystallklart hvor man er. Pluss hvor langt unna det er til rotsiden. Hvis ikke vil bruker raskt kunne føle at han/hun har rotet seg bort. Dette løses med å lage et intuitivt og responsivt menysystem, som stadig representerer hvor man befinner seg hen i sidehierarkiet til nettstedet.

Eksempel på enkel navigasjonsmeny:
https://www.w3schools.com/css/css_navbar.asp

Eksempel på enkel «brødsmule»-navigasjon:
https://www.w3schools.com/howto/howto_css_breadcrumbs.asp

Navigasjonskomponent som viser hvor man befinner seg, er viktigere enn noensinne. Fordi moderne søkemotorer indekserer nettsteder og sender idag brukere direkte til en underside, i stedet for rotsiden.

Skjemaer

Ofte kan skjemaer på nettsider inneholde veldig mye informasjon og veldig mange valgmuligheter. Da må man gjøre sitt beste for å ikke forvirre og frustrere bruker.

Husk: I utgangspunktet skal bruker slippe å tenke. Ting skal gå på autopilot. Dette betyr krav om enkle valg, få valgmuligheter og kun relevant informasjon i forklaringsteksten til ethvert skjemaelement.

Å fylle ut et skjema skal gå smidig, raskt og smertefritt!

Rotsiden

En rotside (www.eksempel.no, www.eksempel.no/index.html, etc.) skal raskest mulig forklare nettstedets eksistens, hvilken nytte som gis bruker og hvordan bruker kommer i gang med å bruke nettstedet. Alt annet er underordnet.

Her kommer nettstedets sidetittel/logo og sidebeskrivelse inn i bildet. Og om dette ikke er nok kan man også ha en velkomsttekst med mer informasjon, gjerne også illustrative bilder.

Siden rotsiden faktisk er roten har den lett for å bli overlesset. Man ønsker jo å forteller bruker om alt nettstedet har å tilby. Men dette gjør at det som er viktig vil drukne i mengden. Man må derfor velge med omhu hva som skal gis plass (øverst) på rotsiden. Alt som ikke er superviktig kan flyttes lenger ned på siden.

Testing

I stedet for å stole blindt på personlige preferanser og antagelser om hva en bruker vil like, bør man kjøre testing ..

Man må få vanlige brukere til å teste nettstedet man har designet. Og ikke bare for å høre hva de mener, men også for å se hva de faktisk gjør: Hvordan navigerer brukeren? Hva trykker han/hun på? Er det elementer som skaper usikkerhet eller frustrasjon hos bruker? Hva syns bruker om <ditt> og <datt>?

Brukervennlighetstesting er IKKE det samme som å gjøre fokusgruppeundersøkelser! Sistnevnte benyttes gjerne når man bedriver markedsføring og man ønsker innblikk i hva kunden syns om produktet eller tjenesten man tilbyr. Her høster man følelser og meninger. Man tester ikke kundens evne til å benytte seg av et nettsted.

Før man kjører testing kan man også sjekke en god del ting selv:

  1. Hvor lett kan de med nedsatt syn og/eller hørsel bruke siden?
  2. Er forskjellige nettlesere, forskjellige zoom-nivåer og dark mode-tillegg støttet?
  3. Vises nettstedet med alle undersider fint på mobile enheter?

Hvis vilkårene over er oppfylt betyr det at man er godt på veg med WCAG.

Godvilje

Enhver bruker som besøker et nettsted har en bestemt mengde godvilje, eller tålmodighet om du vil. Hvis denne blir oppbrukt vil bruker kanskje forlate nettstedet og ikke komme tilbake.

Man må derfor gjøre sitt beste for å ikke skape frustrerte/irriterte/sure brukere. Her kommer godt design inn i bildet, for å oppsummere; enhver nettside må la seg scanne raskt. Man må enkelt kunne navigere nettstedet og finne det man er på jakt etter!

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *