Den väsentliga UX-checklistan: granska din webbplats genom kundernas ögon

Din webbplats har precis byggts om. Den ser fantastisk ut på den stora skärmen i mötesrummet; alla känner till erbjudandet och kan genomföra en beställning med förbundna ögon. Men en kund kommer in via mobilen, vet ingenting om företaget och lämnar vid första tecknet på förvirring. Därför räcker det inte att kontrollera om en webbplats ser snygg ut.

Vi använde den ursprungliga versionen av den här checklistan som en bred lista för webbplatser och nätbutiker. Med tiden samlades verktyg och enskilda regler som inte var universella. Den här versionen återgår till grunderna: vad en person ska kunna göra, vad du behöver verifiera och hur du upptäcker ett problem innan du börjar lägga pengar på trafik.

Identifiera först de tre viktigaste användarresorna

En UX-granskning av en hel webbplats kan lätt mynna ut i hundra kommentarer. Innan jag öppnar analysverktygen väljer jag därför de tre resor som betyder mest för verksamheten. Vanligtvis:

en ny besökare förstår erbjudandet och skickar en förfrågan,
en kund hittar en produkt, lägger den i varukorgen och betalar,
en befintlig kund hittar support, ett dokument eller kontaktuppgifter.

För varje resa skriver du ner startpunkt, förväntat slut och största hinder. Då fyller du inte i checklistan mekaniskt. Du kontrollerar om webbplatsen stödjer ett specifikt beslut.

1. Erbjudandet måste vara tydligt för någon som inte var med på mötet

Är det uppenbart redan på första skärmen vad du erbjuder och för vem?
Beskriver huvudrubriken ett resultat eller problem snarare än företagets slogan?
Är nästa steg synligt utan att besökaren behöver leta i menyn?
Kan besökare skilja mellan olika tjänster eller alternativ?
Anger du de villkor och begränsningar som faktiskt påverkar beslutet?

Testa med någon som inte känner till företaget. Ge personen några sekunder, stäng sidan och fråga vad företaget gör och vad personen skulle göra härnäst. Det är ingen vetenskaplig studie, men den avslöjar snabbt språk som bara förstås av personer inom företaget.

2. Navigeringen måste fungera utan eftertanke och utan mus

Stämmer benämningarna på menyalternativen med det besökarna letar efter?
Fungerar länkarna, logotypen och återgången till föregående steg?
Är mobilmenyn läsbar och möjlig att stänga, utan att viktigt innehåll täcks över?
Är det tydligt var personen befinner sig i en längre struktur?
Kan varje viktig kontroll nås med Tab-tangenten?
När du använder tangentbordet, är fokus synligt och undviker användaren att fastna?

Tillgänglighet är inte ett specialläge för några få personer. Tillräcklig kontrast hjälper också på en mobil i solljus, och ett tydligt formulär hjälper den som har bråttom. För en snabb kontroll kan du använda Easy Checks från W3C. Det här är en första kontroll, inte en bekräftelse på full WCAG-överensstämmelse.

3. Innehållet måste vägleda både ögat och beslutet

Finns det en huvudrubrik och en logisk struktur med ytterligare rubriker?
Är styckena lättlästa och viktig information enkel att hitta vid skumläsning?
Beskriver länkar och knappar resultatet av att klicka på dem?
Beror betydelsen enbart på färg, en bild eller en hovringseffekt?
Har informativa bilder meningsfull alternativtext?
Kan animationer distrahera från erbjudandet, och kan användarnas inställningar för minskad rörelse följas?

En stark färg skapar inte ensam en konverteringsknapp. Först måste det vara tydligt vad som händer efter klicket. ”Skicka” är en teknisk beskrivning. ”Boka ett introduktionssamtal” minskar osäkerheten.

4. Ett formulär bör bara fråga efter sådant företaget faktiskt kommer att använda

Har varje fält en synlig, programmässigt kopplad etikett?
Är det tydligt vilka uppgifter som krävs och varför de behövs?
Kan användaren fylla i formuläret på mobilen och med tangentbord?
Förklarar ett felmeddelande både problemet och hur det ska åtgärdas?
Finns korrekt ifyllda uppgifter kvar efter ett fel?
Får användaren efter inskickandet en tydlig bekräftelse och information om vad som händer härnäst?

I sin guide till tillgängliga formulär rekommenderar W3C att man bara frågar efter uppgifter som behövs för att slutföra processen. Varje extra fält kostar uppmärksamhet och ökar arbetet med datahantering. Om verksamheten inte kommer att använda informationen, ta bort fältet.

5. En nätbutik måste hantera hela köpet, inte bara en vacker produktsida

Kategorier och sökning

Stämmer filtren med hur människor väljer, och kan de enkelt rensas?
Är läget utan resultat användbart och erbjuder det en annan väg vidare?
Innehåller ett produktkort namn, pris, tillgänglighet och en tydlig bild?
Är sortering och filtrering fortfarande användbara på mobilen?

Produktdetalj

Förklaras alternativ, pris, moms, tillgänglighet och leverans innan produkten läggs i varukorgen?
Visar fotografierna det kunden behöver bedöma?
Är knappen för att lägga i varukorgen synlig utan att skymma innehållet?
Erbjuder en slut i lager- eller utgången produkt ett alternativ och en rimlig väg tillbaka?

Varukorg och beställning

Kan produkt, alternativ och antal ändras utan att andra uppgifter försvinner?
Är slutpriset, inklusive leverans och avgifter, känt i tid?
Undviker du att kräva registrering utan affärsmässiga skäl?
Återförs personen efter en misslyckad betalning till ett begripligt läge?
Är orderbekräftelsen entydig och förhindrar den ett oavsiktligt upprepat köp?

Regeln ”det får inte finnas någon navigering i varukorgen” är inte alltid giltig. Vid ett enkelt köp kan minskade distraktioner hjälpa. Vid ett komplext erbjudande behöver kunden däremot kunna hitta villkor eller produktdetaljer. Testa beteendet, inte en tumregel.

6. En webbplats måste klara mobil, långsamt nätverk och fel

Laddas huvudinnehållet snabbt utan stora layoutförskjutningar?
Svarar sidan på klick och skrivande utan märkbar fördröjning?
Har bilderna rätt dimensioner och laddas de bara med den kvalitet som behövs?
Kan ett felaktigt externt skript blockera en beställning eller ett formulär?
Fungerar viktiga användarresor i aktuella vanliga webbläsare och på riktiga mobiler?
Övervakar du tillgänglighet och fel i viktiga steg?

Ett labbresultat är vägledning, inte ett affärsresultat. Följ också riktiga användare och den viktigaste resan. En annonspixel får inte vara viktigare än köpknappen.

7. Verifiera mätningen med ett test, inte genom att kontrollera att koden finns

Gör en testförfrågan eller testbeställning för varje viktig resa. Kontrollera att händelsen skickas en gång, med rätt namn, värde, valuta och transaktionsidentifierare. Verifiera sedan att målsystemet ser den och att den stämmer med den riktiga beställningen.

Skickas ett köp bara genom att en tack-URL öppnas?
Dupliceras händelsen när sidan uppdateras?
Respekterar taggarna samtyckesstatus?
Innehåller datalagret personuppgifter som inte hör hemma där?
Innehåller containern bara tjänster som företaget använder?
Finns det en ansvarig för mätningen och dokumentation av den senaste kontrollen?

För implementeringen, se Så konfigurerar du Google Tag Manager korrekt; för händelsernas betydelse, se guiden Google Analytics 4. Sessionsinspelningar eller värmekartor kan avslöja blinda fläckar, men använd dem med ett tydligt syfte, med känsliga fält maskerade och i enlighet med samtyckesreglerna. Att spela in allt ”för säkerhets skull” är ingen undersökningsplan.

Så använder du checklistan utan en månatlig workshop

Välj den viktigaste resan och gå igenom den på mobilen.
Gör samma sak med enbart tangentbordet.
Låt någon utanför företaget genomföra uppgiften utan att vägleda personen.
Anteckna var personen tvekade, inte din föreslagna lösning.
Verifiera problemet i analysverktyg, support eller ytterligare tester.
Åtgärda ett hinder och gå igenom hela resan igen, inklusive mätningen.

Försök inte hävda att webbplatsens UX är färdig efter en enda omgång. Erbjudandet, enheterna och människors förväntningar förändras. Checklistans syfte är att regelbundet hitta den dyraste friktionen och besluta vad som ska åtgärdas först.

Om du vill granska webbplatsen i ett bredare affärssammanhang kan du också använda checklistan för onlinemarknadsföring. Om du behöver prioritera UX, mätning och kundanskaffning kan du beskriva din viktigaste resa via kontaktsidan.