5 råd om god brugervenlighed

I Visma har vi udviklet et værktøj vi bruger til at lave en evaluering af den overordnede brugervenlighed på et website. Her gennemgås sitet med en tjekliste på over 300 punkter, som alle relaterer sig til brugervenlighed, og resultatet er en rapport, hvor man kan se hvilke problemområder ens website har.

Vi har lavet rigtig mange af disse evalueringer, og vi kan se et mønster, hvor næsten alle websites har de samme brugermæssige udfordringer. Vi har derfor samlet 5 gode råd til hvordan du, med få tiltag, kan øge brugervenligheden på netop jeres site.

 

Nikolaj Jensen Brugervenlighedsekspert

Nikolaj Jensen
Brugervenlighedsekspert
nikolaj.jensen@visma.com
41 91 44 45

1. Sørg for gode kontraster

Dårlig kontrast mellem baggrunds- og forgrundsfarve er noget vi ser på næsten alle websites. Det er ofte et symptom på, at når man har designet løsningen, har man siddet på en stor lækker skærm, som er indstillet korrekt, og så ser det hele rigtig lækkert ud. Det resulterer dog ofte i, at for rigtig mange brugere, bliver tekster, knapper og andet grafik svært eller helt umuligt at se – noget som gør, at brugerne skal koncentrere sig unødig meget og bliver frustrerede.

Man skal huske på at op mod 10% har en eller anden form for synshandikap, og disse mennesker risikerer man at tabe som brugere/kunder. Her hører vi ofte argumenter som, det er jo bare 10%, eller de er ikke i vores målgruppe. Så hvis du ikke mener at 10% af brugerne er relevante bør du overveje det næste.

Vi ved ikke i dag med hvilken skærm, skærmopløsning, type af enhed og så videre, en bruger browser rundt på nettet med. Derudover er det de færreste, der ved hvordan man i det hele taget kalibrerer en skærm, og oftest vil de være indstillet forkert. Derudover kan brugeren sidde i et miljø, som gør at der fx er sollys, der kommer ind på skærmen, hvilket yderligere nedsætter kontraster. Denne gruppe af brugere, som vi antager er en ret anseelig andel, vil opleve de samme udfordringer som folk med et synshandikap.

At sørge for at farvekontraster på ens website er ordentlige, er et meget lille indgreb, der vil have en meget stor effekt. En ordentlig farvekontrast løfter brugervenligheden betydeligt, fordi brugerne nemt kan se sitet, læse tekster og se knapper, menupunkter mv.

Vi anbefaler altid at ens farvekontraster lever op til minimum en ’AA’ rating i regler om tilgængelighed (WCAG 2.0), som kræver en farvekontrast på 4.5:1.

Du kan selv teste om jeres farver er i orden ved bruge WEBAIM’s color contrast checker [http://webaim.org/resources/contrastchecker/]. Her taster du ganske enkelt forgrunds- og baggrundsfarve ind, og du kan med det samme se om du lever op til kravene.

2. Hav en god søgefunktionen

Rigtig mange af de websites vi har kigget på har en søgefunktion, der en gang er blevet implementeret, uden at man har gjort videre ved den. Det resulterer ofte i en søgefunktion, som ikke finder det relevante, og søgeresultater som er uoverskuelige.

  • Sørg for at de mest relevante resultater bliver præsenteret først
  • Vis overskrift for siden i søgeresultaterne, men også mindst 3 linjer tekst af indholdet, så man kan vurdere om det er det rigtige resultat
  • Fremhæv de søgte ord i resultaterne, både i overskrift og i tekst
  • Hvis (kun) relevant meta-data i søgeresultaterne
  • Sørg for at søgefunktionen gør brug af type-ahead

En god søgefunktion kan blive et rigtig stærkt værktøj for brugerne, som hjælper dem til hurtigt og nemt at finde lige præcis den information de leder efter.

3. Skab en god mobil oplevelse

Rigtige mange har efterhånden fundet ud af vigtigheden af at deres website er responsivt. Vi oplever dog, alt for ofte, at den måde det responsive framework er sat op, ikke skaber en god oplevelse på mobilen. Vores opfattelse er, at det er blevet besluttet at sitet skal være responsivt, og i et forsøg på at gøre det billigt, har man klemt et desktop site ned på mobilen. Det resulterer i en oplevelse på mobilen hvor brugerne bliver efterladt med et dårligt indtryk.

At skabe et godt responsivt site, handler i høj grad om, at man er bevidst om, og tænker på, hvordan tingene fungerer og tager sig ud på mindre enheder. Her tænker jeg især på om man har forsøgt at undgå, det der kaldes ’fat-finder-problem’, hvor brugerne har svært ved at klikke på links eller knapper, simpelthen fordi de er for små. Men der tænkes også på om navigationen er forståelig og det er nemt at finde rundt på sitet.

Vi oplever desuden også, at der ofte er en hel masse små bugs, dårlig ombrydning af tekster m.m. rundt omkring på sitet.

Vores anbefaling er, at man regelmæssigt går sit site igennem med forskellige typer af mobiler, med forskellige skærmstørrelser, for at sikre, at sitet i det mindste ikke er fyldt med fejl. Derudover anbefaler vi, at man arbejder med, og fokuserer på at sikre en god oplevelse på tværs af alle enheder.

4. Sørg for at formularer er nemme og behagelige at udfylde

Vi ser desværre alt for ofte formularer, som er mere besværlige at udfylde end de behøver at være. Her tænkes der på helt almindelige gældende principper for god brugervenlighed i formularer, og vi har derfor samlet et udpluk af nogen af dem som man forholdsvist nemt kan rette:

  • Sørg for at inputfelter altid opfører sig som brugerne forventer. E.g. et almindeligt tekstfelt bliver ikke lige pludselig til en dropdown når brugeren trykker på den
  • Lav altid felterne i en størrelse, som også virker på mobilen, vores anbefaling er at man som udgangspunkt har felter der er over 35 px i højden
  • Hav tydelige ’active-states’ på felterne
  • Sørg for at labels gør det klart for brugeren hvad, der skal indtastes/vælges, og have labels placeret oven over feltet
  • Brug radio buttons i stedet for dropdowns hvis der kun er få valg
  • Fejlmeddelelser bør være placeret i relation til det felt der er fejl i, og ikke i toppen af formularen
  • Fejlmeddelelser skal altid være skrevet i et sprog, der ikke skyder skylden på brugeren
  • Vigtigst af alt: sørg altid for, at der er så få felter som overhovedet muligt

Ofte er formularer det sidste brugerne oplever inden de forlader et site, for eksempel indmeldelsesformularer, check-out m.v. Hvis formularen er en dårlig oplevelse vil det være en negativ følelse brugerne sidder med til sidst. Man kan med fordel sørge for at formularer er så nemme og behagelige at udfylde som muligt, så brugerne forlader sitet med en god oplevelse.

5. Gør navigation tydelig og ensartet

Én af de ting vi også ofte ser når vi evaluerer løsninger, men især når vi afholder brugertests, er at brugerne har svært ved at finde ud af, hvilke ting de rent faktisk kan klikke på. Ofte er der ikke nogen konsistens i, hvordan interagérbare elementer ser ud, og vi ser tit at infobokse og klikbare indgange ser éns ud rent visuelt. Når navigationen på et site ikke er klart og ikke adskiller sig tydeligt fra andre grafiske elementer, bliver brugerne usikre. De skal hele tiden prøve at gætte sig frem til, hvordan man bevæger sig rundt på sitet. Den følelse er ikke en positiv én af slagsen, og vi anbefaler i stedet, at man sørger for at navigationselementer, og andre interagérbare elementer, altid har samme udseende og adskiller sig visuelt fra resten af indholdet. På den måde sikrer man at det bliver nemt og intuitivt for brugerne at bruge sitet og de kan koncentrere sig om sitets indhold.

Skal vi også evaluere jeres site?

Vi brænder for god brugervenlighed, og vi elsker at dele ud af vores erfaringer og viden. Hvis du vil have en  evaluering af jeres site, er du mere end velkommen til at tage kontakt til os.

Læs mere om evalueringer og bestil en her

Vi hjælper desuden også rigtig mange af vores kunder med rådgivning, brugertests, designforslag m.m., og vi kommer også gerne ud til jer for at inspirere, hjælpe og vejlede eller løse konkrete opgaver.

Nikolaj Jensen Brugervenlighedsekspert

Nikolaj Jensen
Brugervenlighedsekspert
nikolaj.jensen@visma.com
41 91 44 45

"Ved du hvordan kunderne oplever dine produkter og services?"

Mikala Albæk Pedersen, servicedesigner

Esben Emborg
Head of User Experience
esben.emborg@visma.com
31 58 80 33