Den essentielle UX-tjekliste: Gennemgå dit website med kundernes øjne

Dit website er netop blevet redesignet. Det ser godt ud på den store skærm i mødelokalet; alle kender tilbuddet og kan gennemføre en bestilling med bind for øjnene. Men en kunde kommer ind fra en telefon, ved intet om virksomheden og forlader siden ved den første forvirring. Derfor er det ikke nok at kontrollere, om et website ser pænt ud.

Vi brugte den oprindelige version af denne tjekliste som en bred liste til websites og webshops. Med tiden blev der tilføjet værktøjer og individuelle regler, som ikke var universelle. Denne version vender tilbage til det grundlæggende: Hvad skal en person kunne gøre, hvad skal du kontrollere, og hvordan opdager du et problem, før du begynder at bruge penge på trafik?

Identificér først de tre vigtigste brugerrejser

En UX-audit af et helt website kan nemt ende med hundrede kommentarer. Før jeg åbner analytics, vælger jeg derfor de tre brugerrejser, der betyder mest for virksomheden. Typisk:

• en ny besøgende forstår tilbuddet og sender en forespørgsel,
• en kunde finder et produkt, lægger det i kurven og betaler,
• en eksisterende kunde finder support, et dokument eller kontaktoplysninger.

Skriv startpunktet, det forventede slutpunkt og den største forhindring ned for hver rejse. Så udfylder du ikke tjeklisten mekanisk. Du kontrollerer, om websitet understøtter en konkret beslutning.

1. Tilbuddet skal være tydeligt for en person, der ikke deltog i mødet

• Er det tydeligt fra det første skærmbillede, hvad du tilbyder, og hvem det er til?
• Beskriver hovedoverskriften et resultat eller et problem i stedet for et virksomhedsslogan?
• Er det næste skridt synligt uden at skulle lede gennem menuen?
• Kan besøgende skelne mellem de enkelte tjenester eller muligheder?
• Oplyser du om de betingelser og begrænsninger, der reelt påvirker beslutningen?

Test det med en person, der ikke kender virksomheden. Giv personen nogle få sekunder, luk siden, og spørg, hvad virksomheden laver, og hvad personen ville gøre som det næste. Det er ikke en videnskabelig undersøgelse, men det afslører hurtigt sprog, som kun forstås af folk internt i virksomheden.

2. Navigationen skal fungere uden at skulle tænke over det og uden mus

• Matcher menupunkternes navne det, besøgende leder efter?
• Virker links, logoet og tilbagefunktionen til det forrige trin?
• Er mobilmenuen læsbar og nem at lukke, uden at vigtigt indhold bliver dækket?
• Er det tydeligt, hvor personen befinder sig i en længere struktur?
• Kan alle vigtige kontroller nås med Tab-tasten?
• Er fokus synligt ved brug af tastatur, og undgår brugeren at blive fanget?

Tilgængelighed er ikke en særlig tilstand for få mennesker. Tilstrækkelig kontrast hjælper også på en telefon i sollys, og en tydelig formular hjælper en person, der har travlt. Til et hurtigt tjek kan du bruge Easy Checks fra W3C. Det er et første tjek, ikke en bekræftelse af fuld WCAG-overensstemmelse.

3. Indholdet skal lede både øjet og beslutningen

• Er der én hovedoverskrift og en logisk struktur af de efterfølgende overskrifter?
• Er afsnittene læsbare, og er vigtig information nem at finde ved at skimme siden?
• Beskriver links og knapper resultatet af det, der sker, når man klikker på dem?
• Afhænger betydningen udelukkende af farve, et billede eller en hover-effekt?
• Har informative billeder meningsfuld alternativ tekst?
• Forstyrrer animationer tilbuddet, og kan brugere respektere indstillinger for reduceret bevægelse?

En stærk farve alene skaber ikke en konverteringsknap. Først skal det være tydeligt, hvad der sker efter klikket. »Indsend« er en teknisk beskrivelse. »Book en indledende samtale« reducerer usikkerheden.

4. En formular bør kun spørge om det, virksomheden faktisk vil bruge

• Har hvert felt en synlig label, der er koblet til feltet programmatisk?
• Er det tydeligt, hvilke oplysninger der er obligatoriske, og hvorfor de er nødvendige?
• Kan brugeren udfylde formularen på en telefon og med et tastatur?
• Forklarer en fejlmeddelelse både problemet og, hvordan det løses?
• Bevares korrekt indtastede oplysninger efter en fejl?
• Modtager brugeren efter indsendelse en tydelig bekræftelse og information om, hvad der sker nu?

I sin vejledning til tilgængelige formularer anbefaler W3C kun at spørge efter de oplysninger, der er nødvendige for at gennemføre processen. Hvert ekstra felt koster opmærksomhed og øger arbejdet med datahåndtering. Hvis virksomheden ikke vil bruge oplysningerne, skal du fjerne feltet.

5. En webshop skal håndtere hele købet, ikke kun en flot produktside

Kategorier og søgning

• Matcher filtrene den måde, folk vælger på, og kan de nemt nulstilles?
• Er en tilstand uden resultater nyttig, og tilbyder den en anden vej videre?
• Indeholder et produktkort navn, pris, tilgængelighed og et læsbart billede?
• Er sortering og filtrering stadig brugbare på en telefon?

Produktdetaljer

• Er muligheder, pris, moms, tilgængelighed og levering forklaret, før varen lægges i kurven?
• Viser fotografierne det, kunden har brug for at vurdere?
• Er knappen til at lægge varen i kurven synlig uden at dække indholdet?
• Tilbyder et udsolgt eller udgået produkt et alternativ og en fornuftig vej tilbage?

Kurv og bestilling

• Kan varen, valgmuligheden og antallet ændres uden at miste andre oplysninger?
• Er den endelige pris, inklusive levering og gebyrer, kendt i god tid?
• Undgår du at kræve registrering uden en forretningsmæssig grund?
• Føres personen tilbage til en forståelig tilstand efter en mislykket betaling?
• Er ordrebekræftelsen entydig, og forhindrer den et utilsigtet gentaget køb?

Reglen »der må ikke være navigation i kurven« er ikke altid gyldig. Ved et enkelt køb kan færre forstyrrelser være en hjælp. Ved et komplekst tilbud har kunden derimod brug for at finde betingelser eller produktdetaljer. Test adfærden, ikke tommelfingerreglen.

6. Et website skal kunne klare mobil, et langsomt netværk og en fejl

• Indlæses hovedindholdet hurtigt uden store layoutforskydninger?
• Reagerer siden på klik og indtastning uden mærkbar forsinkelse?
• Har billederne de rigtige dimensioner og indlæses de kun i den nødvendige kvalitet?
• Kan et defekt eksternt script blokere en bestilling eller formular?
• Virker de vigtigste brugerrejser i aktuelle mainstream-browsere og på rigtige telefoner?
• Overvåger du tilgængelighed og fejl i vigtige trin?

En laboratoriescore er vejledning, ikke et forretningsresultat. Hold også øje med rigtige brugere og den vigtigste brugerrejse. En annoncepixel må ikke være vigtigere end Køb-knappen.

7. Kontrollér målingen med en test, ikke ved at tjekke, om koden findes

Lav en testforespørgsel eller testbestilling for hver vigtig brugerrejse. Kontrollér, at hændelsen sendes én gang med korrekt navn, værdi, valuta og transaktions-id. Kontrollér derefter, at målsystemet registrerer den, og at den stemmer overens med den virkelige bestilling.

• Sendes et køb blot ved at åbne en takkeside-URL?
• Dubleres hændelsen, når siden genindlæses?
• Respekterer tags samtykkestatus?
• Indeholder datalaget personoplysninger, som ikke hører hjemme der?
• Indeholder containeren kun tjenester, som virksomheden bruger?
• Er der en ansvarlig for målingen og en registrering af den seneste kontrol?

Se Sådan opsætter du Google Tag Manager korrekt for implementeringen; se Google Analytics 4-vejledningen for en forklaring af hændelser. Sessionsoptagelser eller heatmaps kan afsløre blinde vinkler, men brug dem målrettet, med følsomme felter maskeret og i overensstemmelse med samtykkereglerne. At optage alt »for en sikkerheds skyld« er ikke en analyseplan.

Sådan bruger du tjeklisten uden en månedlig workshop

1. Vælg den vigtigste brugerrejse, og gennemgå den på en telefon.
2. Gør det samme udelukkende med et tastatur.
3. Lad en person udefra gennemføre opgaven, og hjælp ikke personen på vej.
4. Notér, hvor personen tøvede, ikke din foreslåede løsning.
5. Bekræft problemet i analytics, support eller yderligere tests.
6. Fjern én forhindring, og gennemgå hele brugerrejsen igen, inklusive målingen.

Forsøg ikke at erklære et website »UX-færdigt« efter én gennemgang. Tilbuddet, enhederne og menneskers forventninger ændrer sig. Formålet med tjeklisten er regelmæssigt at finde den dyreste friktion og beslutte, hvad der skal løses først.

Hvis du vil gennemgå websitet i en bredere forretningsmæssig sammenhæng, kan du også bruge tjeklisten til online marketing. Hvis du har brug for at prioritere UX, måling og kundetiltrækning, kan du beskrive din vigtigste brugerrejse via kontaktsiden.