Hvis vi går tilbage til de tidlige udgivelsesdage, får vi udtrykket “above the fold” som en betegnelse for indhold, der blev vist på den øverste halvdel af forsiden af en avis. Indholdet over folden fremstod for læserne som det mest synlige, med fængende overskrifter og levende billeder, der almindeligvis blev brugt til at tiltrække læsernes opmærksomhed i håb om, at det, når de gik forbi kiosken, ville overbevise dem om at købe en avis.
Nu spoler vi hurtigt frem til overgangen fra aper til digital, da de samme udgivere flyttede deres forretninger fra print til online. I takt med at webdesignet har udviklet sig siden begyndelsen af 1990’erne, blev udtrykket ved med at holde sig fast. Så hvad betyder “above the fold” for din hjemmeside? Og betyder det stadig noget i 2019?
Hvorfor er Above The Fold vigtigt for mit websted?
I den digitale markedsførings tidsalder henviser folden ikke længere til en egentlig fold i en avis, men i stedet til det indhold, der indlæses først, når du besøger et websted, og som fanger din opmærksomhed og trækker dig ind.
I en verden af webdesign, hvor du er bekymret for indholdslayout og -placering, fordi indhold, der vises over folden, er det, der først er synligt, når den besøgende på webstedet indlæser siden. Dette indhold er den primære ejendom, der får størstedelen af de besøgendes opmærksomhed på dit websted, og brugeroplevelsen bør afspejle dette. Jakob Nielsen anslår, at “…webbrugere bruger 80 % af deres tid på at kigge på oplysninger over sidens fold. Selv om brugerne scroller mere i dag, bruger de stadig kun 20 % af deres opmærksomhed under folden.”
Først skal du spørge dig selv, hvad der er det vigtigste indhold for at hjælpe mig med at nå mine forretningsmål.
Når du har besvaret det spørgsmål, ved du, hvad du skal placere i det område med høj synlighed. Indholdet skal straks fange brugerens opmærksomhed og præsentere dem for det indhold, de leder efter, så de ikke hopper af og besøger et andet websted.
Snappe tips til at øge konverteringsraten
- Hero Image: Du må ikke blive for æterisk her. Hvordan ser dine glade kunder ud? Hvad oplever de? Vis et billede, der fremkalder en positiv aspiration.
- Header Copy: Du må ikke miste klarhed for at være klog. Hvis du forvirrer, taber du. Hold dig til et enkelt budskab, der viser præcis, hvad du gør, eller som giver indlevelse i den centrale udfordring, som de står over for.
- Call to action (CTA): Din primære CTA skal være indlysende og placeret i øverste højre hjørne af navigationen OG i helteafsnittet.
- Tagline: Din primære CTA skal være indlysende og placeret i øverste højre hjørne af navigationen OG i helteafsnittet.
- Du kan kombinere den klare overskrift med en linje på en eller to sætninger, der positionerer dit brand til at hjælpe med at løse kundens problem.
- Navigation: Mindre er mere. Godt webstedsdesign guider brugeren præcis derhen, hvor du ønsker, at han/hun skal hen. For mange muligheder kan resultere i beslutningstræthed.
- Ladehastighed: Din hjemmesides indlæsningstid kan være årsag til, at besøgende hopper af!
Placering af annoncer over folden forbedrer deres synlighed og genererer flere annonceindtægter end annoncer, der er placeret mindre synlige steder.
Hvordan måler man “The Fold” i webdesign?
Kort sagt er det umuligt at definere præcis, hvor foldet er placeret på dit website. Den nøjagtige placering varierer på grund af de mange forskellige skærmstørrelser (stationære og bærbare computere), skærmopløsninger, browserplugins og størrelser på forskellige mobiltelefoner og tablets.
Som tommelfingerregel er de fleste webdesignere enige om, at foldlinjen er ca. 1000 pixel bred og 600 pixel høj. Dette er det bedste skøn ud fra den mest almindelige skærm/browser-kombination på 1024×768 pixels, hvor browservinduet er maksimeret, og der ikke er installeret værktøjslinjer i toppen, som skubber indholdet nedad.
Hvis du er nysgerrig efter at vide mere, kan du tjekke dit websteds analyseprogram (hvis du ikke har et, er Google Analytics et godt sted at starte), som burde kunne fortælle dig, hvilke skærmdimensioner der er de mest almindelige for dine besøgende. Mens den almindelige skærmstørrelse 1024×768 traditionelt har været den rigtige størrelse, er nye dimensioner ved at vinde popularitet, såsom 320×568 og 360×640, alt sammen på grund af den stigende udbredelse af mobilvisning af websteder.
Mobil visning og responsivt design
I løbet af de sidste par år er brugen af mobile enheder til webbrowsing steget kraftigt, og det komplicerer yderligere konceptet med at optimere webdesign til indhold over folden.
En udfordring er, at mobile enheder tilbyder en stor variation af skærmstørrelser samt, at brugere på mobile enheder for det meste surfer i stående tilstand frem for i liggende tilstand. Igen påvirker det den størrelse, som en designer har til at vise vigtigt indhold.
Optimizely siger: “Med så mange mennesker, der får adgang til websider på så mange forskellige enheder, indebærer den nuværende praksis for webdesign, at man bruger responsivt design: at man gør brug af fleksible layouts, billeder og cascading style sheets. Ved responsivt design er der ikke noget fast layout for en side, og indholdet flyder tilbage til en skærm af enhver størrelse. Responsive websider reagerer eller “reagerer” på det miljø, hvor de forbruges eller gennemses.”
Selv om det vigtige indhold stadig skal ligge højere på siden, bør siderne i dag være designet til at lokke brugerne til at scrolle, så de ikke går glip af vigtigt indhold.
Foldet vil altid eksistere som et koncept, men det er en regel, der kan ændres eller modificeres, især over tid. Da der er så mange forskellige enheder og skærmopløsninger til at gennemse websteder, varierer folden alt for meget fra bruger til bruger til, at man kan stole på den regelmæssigt. Men ved at sørge for kun at placere de vigtigste elementer og det vigtigste indhold over folden kan du finde en god balance mellem brugervenlighed på dit websted og servering af det rigtige indhold “Above The Fold.”
For flere tips om bedste praksis for hjemmesider eller hvordan du forbedrer din hjemmesides hastighed, kan du tjekke disse blogs!
- 5 Homepage Best Practices
- 13 Ways to Increase Website Speed
Fra landingssider til hjemmesider har vi hjulpet virksomheder som din med at opbygge brugeroplevelser, der fører leads til et salg. Planlæg en tid til en snak.