Telt above the fold nog steeds?

De fold verschoof, de vraag bleef dezelfde

Er is niet langer één fold. Een laptop van 1440 bij 900 laat ongeveer 750 pixels van je pagina zien zodra de browser zijn deel heeft opgeëist. Een iPhone in Safari komt rond de 650 uit, en minder als de adresbalk onderin staat. Elke bezoeker ziet dus een ander stukje van wat above the fold staat. Wat ze van dat stukje willen, is niet veranderd. Zit ik hier goed, en is dit nog een scroll waard?

Mensen scrollen wel, ze beslissen alleen snel

Iedereen die sinds 2010 een telefoon gebruikt, scrolt zonder erbij na te denken. De duim beweegt voordat het hoofd de zin af heeft. De oude angst dat niemand onder de fold leest, is dus achterhaald. Mensen vertrekken nog steeds snel. Iemand klikt op je advertentie, leest de kop, vindt niet terug wat die advertentie beloofde en is binnen seconden weg. Scrollen kost de lezer niets. Zijn aandacht is het schaarse deel.

Meet je fold voordat je hem ontwerpt

Open je pagina op de drie apparaten die je statistieken echt laten zien. Bij de meeste van mijn klanten zijn dat een iPhone, een 13 inch MacBook en een externe 1080p-monitor. Maak op elk apparaat een screenshot van de bovenkant, zonder te scrollen. De telefoon toont meestal een kop en een halve knop. De grote monitor toont meestal een kop die zweeft in 400 pixels leegte. Ontwerp voor allebei, apart.

Waar die ruimte meestal aan opgaat

Drie dingen vreten je eerste scherm op en geven niets terug. Draaiende carrousels verliezen mensen al bij slide één, dus slide twee en drie ziet niemand. Abstracte koppen als 'Groei, opnieuw uitgevonden' passen net zo goed op elke andere site in elke andere branche. Te grote hero-afbeeldingen duwen de knop van het telefoonscherm af. Check die laatste op een echt toestel, want de canvas van Framer is ruimhartig op een manier die telefoons niet zijn.

Wat een plek above the fold verdient

Vijf dingen, ruwweg op volgorde van belang. De naam van het product en de categorie waar het in valt. Het resultaat dat de koper krijgt, in zijn eigen woorden. Eén stuk bewijs, zoals een rij logo's of één getal dat je kunt verdedigen. Een hoofdknop met een werkwoord erop. En een beeld van het echte product of het echte werk, in plaats van een stockfoto van een lachend team.

Geef de scroll ergens om naartoe te gaan

De onderrand van je eerste scherm hoort er expres afgesneden uit te zien. Begin een sectie net boven de foldlijn. Laat een halve rij logo's zien. Laat een kop van onderen omhoog piepen. Een harde rand en een brede witruimte op precies die lijn vertellen het oog dat de pagina klaar is. Op lange pagina's houd ik de hero op ongeveer 80 procent van de schermhoogte, zodat er altijd een streepje van de volgende sectie zichtbaar blijft.

Zo check je die van jou in tien minuten

Laat de bovenkant van je pagina vijf seconden zien aan iemand van buiten je bedrijf. Haal hem weg en vraag wat het bedrijf verkoopt en voor wie het is. Kan diegene dat niet zeggen, dan is je fold gezakt, en geen enkele animatie redt dat nog. Kijk na de launch naar een scroll map. Haalt een groot deel van de sessies de tweede sectie nooit, dan zit het probleem in die eerste 650 pixels.