Brugervenlig hjemmeside: 12 principper og en test

Indhold

Hvad er brugervenlighed?
12 principper for en brugervenlig hjemmeside
Sådan tester I jeres egen hjemmeside
Tjekliste
Kilder

En brugervenlig hjemmeside er en side, hvor jeres besøgende kan gøre det, de kom for, uden at lede, gætte eller give op: finde ud af, hvad I laver, finde prisen, ringe eller sende en forespørgsel. Brugervenlighed er ikke et spørgsmål om smag. Den internationale standard ISO 9241-11 definerer det som, hvor godt bestemte brugere kan nå bestemte mål effektivt, nemt og med tilfredshed i en bestemt brugssituation. Det kan testes, og det kan I gøre selv for næsten ingen penge.

Her er definitionen i almindelige ord, 12 principper for en virksomheds hjemmeside, og sådan tester I jeres egen side med fem brugere og de tal, I allerede har. Hvad siden skal indeholde, står under hvad skal en hjemmeside indeholde. Denne artikel handler om, hvordan den skal virke.

Hvad er brugervenlighed?

ISO 9241-11 beskriver brugervenlighed (usability) som det omfang, et produkt kan bruges af bestemte brugere til at nå bestemte mål effektivt, nemt og med tilfredshed i en bestemt brugssituation. På engelsk hedder de tre led effectiveness, efficiency og satisfaction. Oversat til en hjemmeside er det tre spørgsmål:

Effektivitet (effectiveness): Kan de løse opgaven? Finder de prisen, sender de formularen, får de svar på det, de ledte efter?
Nemhed (efficiency): Hvor meget tid og besvær koster det dem? Antal klik, tid, forkerte veje og felter, der skal udfyldes igen.
Tilfredshed (satisfaction): Hvordan havde de det bagefter? Følte de sig sikre, eller var det besværligt?

Det sidste led, brugssituationen, er det, flest glemmer. En håndværkers kunde står måske på en byggeplads med telefonen i hånden og solen i skærmen; en indkøber sidder ved en stor skærm og sammenligner tre leverandører. Samme side kan være brugervenlig for den ene og ubrugelig for den anden. UX på web starter derfor med at vide, hvem jeres besøgende er, og hvad de vil.

Diagram over ISO 9241-11: effektivitet, produktivitet og tilfredshed inden for en brugssituation med hvem, mål, udstyr og omgivelser, med et eksempel under hver og en pil mod brugervenlig hjemmeside. — Brugervenlighed er tre spørgsmål: kan de løse opgaven, hvad koster det dem, og hvordan havde de det. Altid for bestemte brugere i en bestemt situation. Illustration i fuld størrelse.

Tilgængelighed, at alle kan bruge siden, også med nedsat syn eller motorik, overlapper meget med brugervenlighed. Kravene står under webtilgængelighed.

12 principper for en brugervenlig hjemmeside

Principperne bygger på Jakob Nielsens 10 heuristikker for brugervenligt design, de officielle retningslinjer i WCAG 2.2 og forskning fra Nielsen Norman Group og Baymard Institute.

1. Sig, hvad I laver, i almindelige ord

Besøgende går, når forsiden ikke tydeligt forklarer, hvad virksomheden tilbyder, og hvad man kan gøre der. Det er en af de første grunde, Nielsen Norman Group nævner. Skriv “Revisor for små virksomheder i Aarhus”, ikke “Vi skaber værdi for dig”. Brug kundernes ord, ikke jeres interne betegnelser.

2. Navigation, man kan forudsige

Menuen skal stå i toppen, have korte og konkrete punkter og se ens ud på alle sider. WCAG kræver, at gentagne menuer står i samme rækkefølge på alle sider. Gem ikke menuen bag et hamburgerikon på computer: I en undersøgelse fra Nielsen Norman Group brugte deltagerne på computer en skjult menu i 27 % af tilfældene mod 48 % for en synlig. På mobil var forskellen også stor. Har I fire eller færre hovedpunkter, så vis dem. Har I flere, er en hamburgermenu et rimeligt kompromis, men læg de vigtigste links synligt på siden også. Markér den side, man er på.

3. Tekst, der kan skimmes

Folk læser ikke hjemmesider, de skimmer dem. Jakob Nielsen anslår, at besøgende på en gennemsnitlig side højst har tid til at læse 28 % af ordene, og sandsynligvis kun omkring 20 %. Øjnene går efter de første linjer og de første ord i hver linje, så skriv det vigtigste først, og start overskrifterne med de ord, der bærer meningen. Hvordan overskrifterne skal opbygges teknisk, står under semantisk HTML.

4. Kontrast og tekst, der kan læses

Lysegrå tekst på hvid baggrund er ulæselig i sollys. WCAG kræver en kontrast på mindst 4,5:1 for almindelig tekst og 3:1 for stor tekst. Vi anbefaler brødtekst på mindst 16 pixels og linjer, der ikke er bredere end omkring 75 tegn. Siden skal også kunne betjenes med tastatur, så man kan se, hvor man er, når man trykker på tabulatortasten.

5. Mobil og trykflader, man kan ramme

Knapper og links skal kunne rammes med en tommelfinger. WCAG 2.2 kræver på niveau AA, at trykflader er mindst 24 × 24 CSS-pixels eller har afstand nok til naboerne, og det strengeste niveau, AAA, kræver 44 × 44. Sigt efter 44 × 44 på de vigtigste knapper. Telefonnumre skal kunne trykkes på, og intet må kræve, at man holder musen over noget.

6. Hastighed

En langsom side er ikke brugervenlig. Google bruger tre tal fra rigtige besøg, og de er beskrevet under hurtig hjemmeside og Core Web Vitals.

7. Knapper og links, der siger, hvad der sker

“Få et tilbud”, “Book et møde” og “Se priser” fortæller, hvad der sker. “Læs mere”, “Klik her” og “Send” gør ikke. Knapper skal ligne knapper, og hellere én primær knap end fire lige store.

8. Korte formularer med synlige felttitler

Spørg kun om det, I har brug for. Baymard Institute fandt, at de fleste webshops kun har brug for 8 felter i kassen, men i 2024 i gennemsnit brugte 11,3. Og blandt amerikanske onlinekøbere, der har forladt et køb i kassen, siger 17 %, at kassen var for lang eller kompliceret. Sæt felttitlen over feltet, ikke som grå tekst inde i det: Pladsholdertekst i stedet for felttitler skader brugervenligheden, fordi den forsvinder, når man begynder at skrive. Mere om formularer under kontaktformularer, der konverterer.

9. Fejlbeskeder, der hjælper

Når noget går galt, skal siden sige, hvilket felt der er fejl i, og hvad fejlen er, i tekst. Det er et krav i WCAG, ikke kun god skik. Nielsen Norman Groups retningslinjer for fejlbeskeder siger: Placér beskeden ved feltet, brug ikke kun farve, skriv i almindelige ord, sig hvordan man retter det, og behold det, brugeren allerede har skrevet. “Telefonnummeret skal have 8 cifre” slår “Ugyldigt input”. Når formularen er sendt, så sig det, og sig, hvornår I svarer.

10. Konsistens

Samme ting skal se ens ud og hedde det samme overalt. “Ydelser” i menuen skal ikke hedde “Løsninger” i footeren. Heuristikken hedder “konsistens og standarder”, og standarderne er de andre hjemmesider, jeres besøgende bruger hver dag: logo øverst til venstre med link til forsiden, kurv øverst til højre, kontakt i footeren.

11. Kontaktoplysninger, man kan finde

Telefonnummer og mail skal stå samme sted på hver side, typisk i toppen og i footeren. WCAG 2.2 har et nyt krav om, at kontaktmuligheder, der gentages på flere sider, står i samme rækkefølge på alle siderne. Hvorfor navn, adresse og ansigter også tæller, står under tillid på hjemmesiden.

12. Søgning, hvor der er meget at finde

Ti undersider kræver en god menu, ikke søgning. En webshop eller en B2B-side med hundredvis af produkter kræver søgning. Søgefeltet skal være et synligt felt, ikke kun et ikon, det skal tåle stavefejl og synonymer, og en søgning uden resultater skal foreslå noget i stedet for en tom side.

Sådan tester I jeres egen hjemmeside

De største problemer kræver hverken laboratorium eller bureau. Kun fem personer, nogle opgaver og en eftermiddag til selve sessionerne. Med planlægning og analyse er det to til tre arbejdsdage. Hele fremgangsmåden, fra rekruttering til prioritering af fundene, står under brugertest af hjemmesiden.

Fem brugere ad gangen

Jakob Nielsens beregning viser, at fem testpersoner fra samme målgruppe i gennemsnit finder omkring 85 % af problemerne. Har I flere meget forskellige målgrupper, så brug 3–4 personer fra hver. Hans råd er at teste med fem, rette det, I fandt, og teste igen, frem for at teste med femten på én gang. Find personer, der ligner jeres kunder, ikke kolleger. Bed dem om at tænke højt, mens de løser opgaverne. Metoden er billig og robust, og I skal bare lytte og tage noter. Hjælp ikke. Hver gang I får lyst, har I fundet et problem.

Et testmanuskript med opgaver

Skriv opgaver, der ligner det, jeres kunder faktisk kommer for. Opgaverne skal være realistiske, få personen til at handle på siden og ikke afsløre ordene i menuen eller på knapperne. Eksempler for en installatør:

“Du skal have skiftet tavle i et hus fra 1970. Find ud af, om de kan hjælpe, og cirka hvad det koster.”
“Du har et akut problem en lørdag. Find ud af, hvordan du får fat i dem.”
“Bed om et tilbud på opladning til elbil.”
“Find ud af, om de arbejder i Silkeborg.”

Skriv for hver opgave ned: Lykkedes det? Hvor lang tid tog det? Hvor gik de forkert? Det er ISO-definitionen i praksis. Test på mobil, hvis de fleste besøgende kommer derfra.

Sessionsoptagelser og heatmaps, med samtykke

Optagelser af besøg og heatmaps viser det, I ikke selv har tænkt på: ting, folk prøver at trykke på, som ikke er knapper, og felter, hvor mange stopper. De indsamler data om de besøgende, og besøgsstatistik kræver samtykke, så de skal ligge bag cookiebanneret. Optagelser kan også fange personoplysninger, så slå skjuling af formularfelter og tekst til, og hav en databehandleraftale med leverandøren.

Signaler i Search Console og GA4

Tallene, I allerede har, viser ikke hvorfor, men de viser hvor:

Signal	Hvor I finder det	Hvad det kan betyde
Lav engagementsrate på vigtige sider	GA4, landingssider (tilføj engagementsrate)	Siden svarer ikke på det, folk kom for
Mange form_start, få form_submit	GA4, udvidet tracking	Formularen er for lang eller fejler. Tjek det med en hændelse på takkesiden, for form_submit er ikke altid pålidelig
Søgninger på jeres egen side	GA4, view_search_results	Det, folk ikke kan finde i menuen
Sider med dårlige Core Web Vitals	Search Console	Langsom, træg eller hoppende side på mobil

En session er engageret i GA4, hvis den varer over 10 sekunder, har en nøglehandling eller mindst to sidevisninger. GA4 kan selv spore søgninger på siden og formularinteraktioner, når udvidet tracking er slået til. Core Web Vitals-rapporten i Search Console bygger på data fra rigtige besøg og viser mobil og computer hver for sig. Brug tallene til at vælge, hvad I tester først. Se også brugeradfærd.

Tjekliste

Forsiden siger i almindelige ord, hvad I laver, og for hvem.
Menuen står i toppen, er synlig på computer og ens på alle sider.
Det vigtigste står først; overskrifter giver mening alene.
Brødtekst har kontrast på mindst 4,5:1 og er mindst 16 pixels.
Knapper og links kan rammes på mobil; telefonnumre kan trykkes på.
Siden består Core Web Vitals på mobil.
Knapper siger, hvad der sker, og der er én primær handling pr. side.
Formularer har få felter og synlige felttitler over felterne.
Fejlbeskeder siger hvilket felt, hvad der er galt, og hvordan det rettes.
Samme ting hedder og ser ens ud overalt.
Telefon og mail står samme sted på alle sider.
Søgning, hvis der er meget indhold.
Testet med fem brugere, rettet og testet igen.

Brugervenlighed er det, der får besøgende til at blive til henvendelser, og det er derfor, vi tester med opgaver og rigtige brugere, før en side går live, ikke bagefter. Se, hvordan vi arbejder med webdesign og UX/UI. Vil I gå videre med tal og test, er næste skridt CRO-tjeklisten.