Websites zijn een belangrijke informatiebron voor bezoekers. Daarnaast moeten deze ook mogelijk goed converteren, want je wilt natuurlijk de meeste conversies behalen met jouw website. Bij het ontwerpen van de lay-out van jouw website, denk je dan ook na over hoe de bezoekers jouw website mogelijk lezen en interpreteren. Een handige “leidraad” wat jou hierbij kan helpen is het F-patroon. Heb jij hier al weleens wat over gehoord?
Wat is het F-patroon?
In 2006 is er door Nielsen Norman Group uitgebreid onderzoek gedaan over eyetracking. Dat is tot nu toe het meest relevante onderzoek over dit onderwerp. Tijdens het onderzoek, onderzochten zij hoe ruim 200 gebruikers duizenden verschillende webpagina’s bekeken. Uiteindelijk concludeerde zij dat het leesgedrag over websites consistent gebeurde in een F-patroon.
Het F-patroon is de manier waarop onze ogen bewegen wanneer we online inhoud lezen. Binnen een paar seconden scannen onze ogen een pagina. Dit gebeurt volgens het onderzoek van Nielsen Norman Group in de volgende volgorde:
- Eerst worden er bovenaan de pagina belangrijke koppen gelezen. Deze zullen in horizontale beweging van links naar rechts gelezen worden.
- Vervolgens, zal er aan de linkerkant van de pagina nog een horizontale beweging plaatsvinden, deze zal korter dan de 1e beweging zijn om zo de tekst te lezen.
- Als laatst, zal de laatste scan in een verticale beweging plaatsvinden, die dan het linker gedeelte van de inhoud leest. Hier kun je dus denken aan koppen etc.
Snap je nu waar de letter F vandaan komt? Eerst worden de horizontale lijnen gelezen, van boven naar onder. Als laatste de verticale lijn. Het F-patroon is dus een algemene benaming over hoe een pagina geïnterpreteerd wordt door een bezoeker. Het kan dus handig zijn, om tijdens het ontwerpen van jouw pagina hier rekening mee te houden.
Echter is het ook mogelijk dat bezoekers van een pagina deze in een andere volgorde lezen. Het kan zijn dat diegene ietwat ongeduldig is en dus snel de behoefte aan informatie heeft. Indien dit niet snel gebeurd, zal deze bezoeker ook weer snel vertrokken zijn. Hier wordt in dit patroon geen rekening mee gehouden. Daarnaast zullen er bezoekers zijn die slechts één horizontale lijn lezen, waardoor het patroon eruitziet als een L. Ook zullen er ook weer bezoekers zijn die net wat meer dan een F lezen, dan zal het meer lijken op een E. Hier kun je op in spelen, om op die plaatsen ook wel weer relevante content te hebben staan.
Waarom zou ik het F-patroon gebruiken?
Het F-patroon helpt jou om jouw website zo te maken, dat het een goede hiërarchie heeft. Daardoor kunnen bezoekers jouw website makkelijker scannen en zullen zij sneller geneigd zijn langer op jouw pagina te blijven.
Hoe moet ik de pagina inrichten volgens het F-patroon?
Het F-patroon geeft een designer of een web beheerder een soort leidraad over hoe een pagina het beste in te richten volgens het F-patroon principe. Ik zal je een aantal tips geven waar je op kunt letten als je hiermee bezig wilt gaan.
Geef prioriteit aan alle content
Voordat je een pagina gaat bewerken of aanmaken, is het belangrijk om alle content op relevantie te sorteren. Wat is nu het meest en minst belangrijkste? Stel jezelf de vraag wat (potentiële) bezoekers het liefste willen zien. Als je hierop antwoord hebt, kun je voor jezelf gaan prioriteren. Als je bijvoorbeeld de tool Hotjar gebruikt, kun je hier eenvoudig uit op maken wat er nu echt relevant is.
Stel verwachtingen in
De eerste twee alinea’s zijn het belangrijkste. Daarin moet je de bezoeker activeren om op jouw pagina te blijven. Daarom is het belangrijk om de relevantste inhoud zo dicht mogelijk bij de bovenkant van de pagina te plaatsen. Daar zou ik het doel van de site neerzetten of iets dergelijks. De bezoeker leest meestal horizontaal over de kop, dus hier kun je bijvoorbeeld jouw menubalk plaatsen. Dan weet de bezoeker wat er allemaal te vinden is op jouw website.
Richt in om te scannen, niet om te lezen
Belangrijk is om jouw pagina zo in te richten, dat het makkelijk scannend te lezen is. Dit kun je het beste doen door:
- Alinea’s te beginnen met belangrijke zoekwoorden.
- Mensen zullen eerst letten op opvallende content. Denk hierbij aan tekst dat gehighlight, cursief of onderstreept is. Ook kun je zoekwoorden markeren en bepaalde buttons en knoppen op laten vallen met verschillende kleuren.
- Licht per paragraaf maar een idee of onderwerp uit. Gebruik daarbij het liefst zoveel mogelijk opsommingstekens, dat maakt het overzichtelijk.
- Plaats de belangrijkste inhoud, zoals een Call to Action of visual etc. aan de linker- of rechterkant waar de gebruiker zijn scan begint en/of eindigt (F).
Gebruik de zijbalk
Met een zijbalk (sidebar) kun je de bezoeker op verschillende manieren betrekken. Een zijbalk is een balk dat je meestal aan de rechte kant van een website ziet. Je kunt dit op de volgende manieren inrichten:
- Laat alles zien wat je gebruiker graag wilt zien. Dat kan iets zijn wat normaal gesproken niet in de normale tekst weergegeven kan worden. Denk hierbij aan gerelateerde artikelen, deelbuttons etc.
- Gebruik dit als een tool om gebruikers doelgerichte content te laten vinden. Dit hebben wij ook gedaan bij onze blogpagina. Daar vind je een zoekbalk waarop je kan zoeken na een desbetreffend onderwerp, alle categorieën die wij hebben waarover onze blogs gaan, de tags die met de blogartikelen te maken hebben en tot slot het archief. Hier kun je per maand selecteren welke blogartikelen je graag wilt zien.
Vermijdt saaie layouts
Een groot nadeel van zo’n F-patroon, is dat alle pagina’s er waarschijnlijk eentonig uit gaan zien. Hierdoor verveel jij mogelijk de bezoekers. Daarom kan het handig zijn om een “raar” element toe te voegen aan de site om zo de bezoeker toch betrokken te houden. Dat kan je bijvoorbeeld doen door een visual toe te voegen die de inhoudt versterkt; een goede visual zegt meer dan 1000 woorden zei een wijs man ooit.
Iets voor mijn website?
Het F-patroon kan zeker een aanvulling zijn op jouw website. Het is uit bovengenoemd onderzoek gebleken dat dit de manier is om het meeste uit jouw site te halen. Daarmee haal je waarschijnlijk meer conversies vergeleken met dat je dit niet zou raadplegen. Je zou het is in kunnen zetten met een A/B test of een andere test. Ik ben van mening dat het zeker de moeite waard is om jezelf hire eens in te verdiepen en zo je site beter te optimaliseren of realiseren.