Den lydløse konverteringsdræber.

Desktop-kunden sidder stille med en mus, en stor skærm og tålmodighed. Mobilkunden står i en bus, holder telefonen med én hånd og bruger tommelfingeren. Alt, hvad der sker inden for den cirkel, er fysik: hvor langt der er til knappen, hvor hurtigt den svarer, og om den stadig er der, når fingeren lander.

Det er derfor, mobilkonvertering ikke kan læses som en mindre udgave af desktopkonvertering. Det er en anden opgave, og de fejl, der ødelægger den, er sjældent dem, der står i fejl-loggen.

Cumulative Layout Shift måler, hvor meget synligt indhold der flytter sig under indlæsning. Bag tallet ligger en meget konkret oplevelse: kunden beslutter sig, fører fingeren mod “Læg i kurv”, og i det øjeblik fingeren lander, er knappen skubbet 80 pixels ned, fordi der lige blev indlæst et banner, en cookie-dialog eller et billede uden fast højde.

De typiske kilder

• Billeder og video uden angivet bredde og højde, så pladsen ikke er reserveret.
• Bannere og kampagnebjælker, der injiceres øverst i dokumentet efter første paint.
• Fonts, der skifter fra fallback til webfont og ændrer linjehøjder midt i læsningen.
• Tredjeparts-widgets, chat, anmeldelser, lagerstatus, der monteres asynkront uden pladsreservation.

Fælles for dem er, at ingen af dem er et “layoutproblem” i traditionel forstand. De er beslutninger om rækkefølge: hvad der må indlæses efter skærmen er vist, og hvad der skal have reserveret plads på forhånd.

Anbefalingen er mindst 44-48 pixels og luft nok mellem målene til, at en tommelfinger ikke rammer ved siden af. Alligevel bygges variantvælgere som små checkboks-ikoner, farveprikker på ti pixels og stykpris-links, der ligger tæt op ad “køb”. Hvert af dem er et sted, hvor et næsten-klik bliver et forkert klik.

De tre steder, hvor mobilflows typisk fejler

1. Variantvælgeren: valgte størrelser, der nulstilles, og farver der vises uden lagerstatus.
2. Købsknappen: placeret så den konkurrerer med “ønskeliste”, “del” og “sammenlign” om samme tommelfingerzone.
3. Formularfelter: for små felter, forkert tastaturtype og validering, der først kører ved submit.

Ingen af delene kræver ny teknologi at rette. De kræver, at man behandler mobilen som det primære designmål og ikke som en eftertanke, der nedarves fra desktop.

Formularer hører til i samme kategori. Et felt, der åbner det forkerte tastatur, en validering der først svarer efter submit, eller et element, der skjules bag tastaturet, er samme slags friktion i en anden form. På mobil er hver ekstra interaktion også en ekstra chance for, at kunden forlader siden, og tastaturet, der dækker halvdelen af skærmen, er en af de mest oversete årsager til, at en formular aldrig bliver sendt.

Interaktion til næste paint, INP, er den metric, kunderne faktisk mærker. Den måles i millisekunder fra et tryk til skærmen har svaret, og den forværres af alt, der optager main thread: tunge event handlers, scripts der lytter på scroll uden at være passive, og databehandling der kører synkront i stedet for asynkront.

Sådan måles det på rigtige enheder

• Optag sessioner på mobil og se efter tryk, der ikke får et synligt svar.
• Mål INP opdelt på enhedsklasse og forbindelsestype, ikke som et globalt gennemsnit.
• Test på en tre år gammel Android-telefon, ikke kun på en ny iPhone.
• Sæt et budget for main thread-arbejde, og behandl enhver ny funktion som en udgift imod det.

Mobiloplevelsen bliver kun stabil, hvis den bygges som sit eget system: server-rendered HTML, der står færdigt ved første paint, plads reserveret for alt, der kommer senere, komponenter dimensioneret efter tommelfingeren frem for musen, og tredjeparts-kode isoleret fra den kritiske sti. Dertil et performancebudget pr. sidetype, der bliver håndhævet i samme øjeblik en ny funktion skal ind, ikke bagefter, når konverteringsraten allerede er faldet.

Det er ikke et spørgsmål om at gøre mobilen hurtigere til sidst. Det er et spørgsmål om at bygge den rigtigt fra begyndelsen, fordi det er den, flertallet af kunderne møder dig på.