Sidan är byggd, texten är korrekturläst och knappen sitter där den ska. Ändå är den sista genomgången innan publicering svår att göra systematiskt, särskilt när sidan är någon annans leverans och du ska säga ja eller nej till den. Tolv punkter räcker långt, och du kan pricka av samtliga på en färdig sida utan att ha en enda besökare.
Listan nedan går igenom budskapet överst, knappen, formuläret, laddtiden, kontrasten och trovärdigheten. Varje punkt vilar på publicerad användbarhetsforskning från Nielsen Norman Group eller Baymard Institute, länkad vid punkten, så att du kan gå till underlaget när någon invänder mot en anmärkning.
Så arbetar du igenom listan
Ta punkterna i tur och ordning. De tre första gäller budskapet och kostar oftast bara en textändring, medan de sista kan kräva att någon rör temat, bilderna eller skripten. Ha sidan öppen både på datorn och i mobilen samtidigt, eftersom flera av punkterna hänger på skärmbredden.
Listan letar fel. Vad byggstenarna gör och varför de sitter där går vår guide om landningssidor som konverterar igenom.
Budskapet: punkt ett till tre
-
Sidan svarar på det som lockade hit besökaren. Rubriken överst ska upprepa löftet i annonsen, nyhetsbrevet eller länken som ledde hit, helst med samma ord. En länk är ett löfte, och målsidan ska låta besökaren omedelbart bekräfta att hon hamnat rätt. Kontrollera genom att läsa länktexten och sidans rubrik efter varandra utan att tänka på kampanjen bakom.
-
Erbjudandet syns utan att läsaren scrollar. Det som ligger direkt i vy får väsentligt mer uppmärksamhet än det som kräver ett svep nedåt. Dra ihop webbläsarfönstret till en låg laptopskärm och titta sedan i mobilen: framgår det vad som erbjuds och vad som händer om man klickar, utan att du rör hjulet?
-
Texten går att skumma. I Nielsen Norman Groups läsundersökning skummade 79 procent av testdeltagarna varje ny sida och bara 16 procent läste ord för ord. Läs därför bara rubrikerna, de fetade orden och knapptexten. Om de tre sakerna tillsammans inte berättar vad du erbjuder är brödtexten skriven för fel läsare.
Knappen: punkt fyra och fem
-
Knapptexten säger vad som händer efter klicket. ”Kom igång” och ”Skicka” lovar ingenting, och en generisk uppmaning gör att besökaren klickar utan att veta vad hon tackar ja till. Nielsen Norman Groups användartester visade att just ”Get Started” fastnade folk i flöden de inte var beredda på, och de rekommenderar att knappen i stället säger precis vad läsaren kan förvänta sig. Täck över resten av sidan och läs enbart knappen.
-
Knappen ser klickbar ut, också för den som tabbar sig fram. Ett aktivt knappläge behöver hög kontrast mot resten av designen, och fokusmarkeringen ska ritas med kontur i stället för att bara byta färg. Klicka i adressfältet och tryck tabb hela vägen ner till knappen. Syns det var du är?
Formuläret: punkt sex till nio
-
Formuläret ber bara om det du behöver just nu. Att rensa bort onödiga fält tar tid men lönar sig i färdigställda formulär, och det står först bland tio rekommendationer för webbformulär. Baymard Institute landar i samma sak och sätter minimera antalet fält som visas som förval överst bland sina rekommendationer för inmatningsfält. Gå igenom fält för fält och fråga vad som går förlorat om det tas bort. Telefonnumret brukar vara det som ligger kvar av gammal vana.
-
Varje fält har en etikett utanför själva fältet. Text inuti fältet försvinner så fort någon börjar skriva, vilket tvingar besökaren att hålla instruktionen i huvudet och gör det svårt att hitta felet när formuläret inte går igenom. Etiketten ska vara synlig och ligga utanför fältet, och texten inuti bör på sin höjd bära kompletterande upplysningar. Fyll i hela formuläret och läs det sedan uppifrån och ner: går det att se vad varje ifyllt värde svarar på?
-
I mobilen ligger etiketten ovanför fältet, inte till vänster om det. Med etiketten till vänster blir fältet så smalt att besökaren inte ser hela det hon skrivit, och då går felet inte att hitta när formuläret studsar tillbaka. Baymards mobiltester landar därför i etikett ovanför, med reservation för riktigt korta formulär där hela formuläret ändå syns på en gång. Öppna sidan i mobilen och fyll i en lång e-postadress: syns hela adressen i fältet?
-
Felmeddelandena står vid felet och säger vad som ska rättas. Meddelandet ska ligga nära källan till felet, vara skrivet på begriplig svenska, föreslå en åtgärd och inte lägga skulden på besökaren. Larma inte heller innan användaren hunnit skriva klart. Skicka formuläret tomt, och skicka det sedan med en e-postadress utan snabel-a.
Tekniken och intrycket: punkt tio till tolv
-
Sidan laddar inom ramen för läsarens tålamod. Jakob Nielsens tre gränser för svarstid gäller fortfarande: en sekund är gränsen för att tankeflödet ska hållas obrutet, och tio sekunder gränsen för att över huvud taget behålla uppmärksamheten. Mät på en telefon över mobilnätet med tömd cache, inte på kontorets wifi.
-
Texten har tillräcklig kontrast mot bakgrunden. Ljusgrått på vitt ser stramt ut i designverktyget och försvinner i solljus på en buss. Lågkontrastdesign är fel väg dit, eftersom prominens går att styra på sätt som inte kostar läsbarhet. Kör rubrik, brödtext och knapptext genom ett kontrastverktyg. WCAG:s miniminivå är 4,5:1 för vanlig text och 3:1 för stor text.
-
Det framgår vem som står bakom erbjudandet. Trovärdighet byggs av att sidan är öppen med allt som rör affären och att den hänger ihop med resten av webben, två av de fyra klassiska trovärdighetsfaktorerna. Läs sidan som någon som aldrig hört talas om företaget: går det att se vem som säljer, vad det kostar totalt och vad som händer efter klicket?
Efter lanseringen tar mätningen över
Listan tar bort kända användbarhetsfel. Den kan inte tala om vilken rubrik eller vilket upplägg som säljer mest hos just din publik, för det beror på erbjudandet och besökarna. Kör två versioner mot varandra som ett A/B-test och kontrollera i vår A/B-testkalkylator att skillnaden är statistiskt säkerställd innan du utser en vinnare. Räkna samtidigt om sidans konverteringsgrad före och efter, så att du ser om rättningarna gav utslag i det som mäts.
Vanliga frågor
Gäller punkterna även för en landningssida utan formulär?
Åtta av de tolv gör det. Punkterna sex till nio hoppar du över när handlingen är ett telefonsamtal, en nedladdning eller ett klick vidare till en produktsida. Knapptexten och laddtiden väger då tyngre än annars, eftersom de blir det enda som står mellan besökaren och nästa steg.
Bör menyn tas bort från landningssidan?
Det avgörs bäst på din egen sida i stället för på förhand. En sida som bara ska bära ett enda erbjudande har mindre nytta av en full meny än en sida som också ska hittas i sök och leda vidare. Lägg upp den med och utan meny som två varianter och låt mätningen svara.
Räcker det att gå igenom listan en gång?
Kör om den när sidan får ny rubrik, nytt formulär eller ny bild, och alltid när en testvariant vunnit och blivit den nya standardversionen. Punkt tio och elva är de som glider iväg tyst: ett extra skript kan förlänga laddtiden och ett temabyte kan ändra textfärgen utan att någon rört själva sidan.