Hoe scannen van de ogen de visuele hiërarchie beïnvloedt in UX Design
Hoewel millennia van kunst, van Griekse vazen tot Italiaanse kapellen, ons begrip hebben gevormd van wat schoonheid is, voegt de relatief recente technologie achter eye-tracking een nieuwe dynamiek toe aan hoe we de wereld visueel waarnemen. Meer nog, deze opwindende nieuwe wetenschap helpt ons om websites die zowel effectief als esthetisch zijn beter te begrijpen - en beter te ontwerpen.
Webdesign (als een visuele kunst) volgt veel van dezelfde regels als meer traditionele kunstvormen. In dit artikel zullen we kort het belang van visuele organisatie schetsen en vervolgens uitleggen hoe de bevindingen van eye-tracking de lay-out van webinterfaces kunnen verbeteren.
Visuele organisatie creëren
Het is geen verrassing dat de manier waarop een website eruit ziet, invloed heeft op het succes, maar het is belangrijk om de redenen waarom te achterhalen. In zijn krant Communiceren met visuele hiërarchie , Luke Wroblewski, auteur en Senior Principal of Product Design bij Yahoo !, legt uit dat de visuele presentatie van een webinterface essentieel is voor:
De begeleiding
Een goed gemaakte interface kan gebruikers van de ene actie naar de volgende leiden zonder aanmatigend te zijn. Ongeacht wat u van hun zakelijke praktijken vindt, dat lijdt geen twijfel Uber is een voorbeeld van een ongelooflijk soepele maar gestructureerde website. Waardeproposities staan bovenaan de scroll, gevolgd door een leuke schuifregelaar om meer te weten te komen over verschillende auto-opties, en eindigen met de logische volgende stap om ritten te vinden in je stad.
Communicatie
Door anderszins afwijkende stukjes informatie aan te passen, kan de UI links in de geest van de gebruiker vormen, berichten communiceren zonder iets te zeggen. Kijk naar de populaire ontwerpwebsite Abduzeedo : de brede categorieën staan bovenaan, bevatten inhoud in het midden en gedetailleerde categorieën in de voettekst.
Emotionele impact creëren
Maak niet de fout om te denken dat uw website gewoon een gemechaniseerd hulpmiddel is. Websites hebben de potentie om emotionele connecties te leggen, en als die van jou dat niet doen, dan is dat van je concurrenten het geval. In feite kunnen mensen meer geneigd zijn om de tekortkomingen van uw interface te vergeven als u een positief resultaat oplevert emotioneel antwoord . MailChimp is een perfect voorbeeld van een site met een interface die bruikbaar, luchtig en eigenlijk leuk om te gebruiken is.
Het voorspelbare menselijke oog
Soms lijkt het erop dat je ogen een eigen mening hebben. Jaren van evolutie hebben ons de instincten gegeven om voorwerpen en bewegingen te vinden die we belangrijk achten, of iemand sexy over straat loopt, of een knuffelige cartoon beer met reclamehoning. Hoewel het relatieve gewicht dat we plaatsen op wat belangrijk is, van persoon tot persoon kan verschillen, zijn de enige constante de mechanismen waarop ze zich gedragen. Op grote schaal volgen de meeste mensen dezelfde trends bij het bekijken van een webpagina.
Van deze trends zijn er twee die we in detail zullen bespreken. In een artikel over visuele principes , Alex Bigman, Design Writer voor 99Designs, laat zien hoe, voor culturen die van links naar rechts lezen, deze twee patronen de meest voorkomende - en meest bruikbare - zijn bij het ontwerpen van de lay-out van een website.
Het eerste, het F-patroon, wordt meestal gebruikt voor tekst (maar kan voor andere doeleinden worden aangepast). De tweede, het Z-patroon, kan voor elke visuele lay-out worden gebruikt. Hieronder zullen we de verschillende voor- en nadelen uitleggen.
F-Pattern
Het F-patroon is de vista-trend die verschijnt op pagina's die zwaar beladen zijn met tekst, meestal blogs, nieuwsbronnen, artikelen, enz.
Wanneer een lezer geconfronteerd wordt met een woordenblok, scannen de meeste lezers eerst een verticale lijn langs de linkerkant van de tekst, meestal op zoek naar sleutelwoorden of interessante punten in de eerste zinnen van de alinea. Uiteindelijk vindt de lezer iets dat ze leuk vinden, en beginnen ze normaal te lezen, en vormen ze horizontale lijnen. Het eindresultaat is iets dat lijkt op de letters F of E.
Jakob Nielson van de Nielson Norman Group heeft een leesbaarheidsonderzoek uitgevoerd op basis van 232 gebruikers die duizenden websites hebben gescand. Uit zijn onderzoek heeft hij opgenomen wat hij gelooft de praktische implicaties van het F-patroon:
- Gebruikers zullen zelden elk woord van uw tekst lezen.
- De eerste twee alinea's zijn het belangrijkst en zouden je haak moeten bevatten.
- Begin alinea's, subkoppen en opsommingstekens met verleidelijke zoekwoorden.
Zoals altijd is de linkerbovenhoek het belangrijkst, omdat alle leesculturen van links naar rechts beginnen. De gebruiker leest meestal horizontaal over de kop, dus hier is een goede plek voor een navigatiebalk en / of een call-to-action. Vervolgens scant de gebruiker verticaal naar links, totdat deze inhoud tegenkomt die hen interesseert. Uiteindelijk eindigt de gebruiker aan de rechterkant van de pagina, een geweldige plek met een call-to-action of advertentie. Laat de zijbalk niet de inhoud overweldigen.
Maar het F-patroon is geen sjabloon - het is geen exacte praktijk, maar meer een losse gids samengesteld uit de trends van de meerderheid van de gebruikers. Houd dit in gedachten, omdat het F-patroon verliest zijn effectiviteit na de bovenste rijen van de F.
Kickstarter gebruikt een kaartlayout om functieprojecten te laten zien en na de eerste 500 pixels niet visueel saai te worden.
Aan de andere kant, iZettle neemt een meer conventionele benadering van het F-patroon op hun homepage. Ze slagen er echter in om een sjablonering te voorkomen door de primaire kopie ("Uw bedrijf laten groeien met iZettle") en call-to-action op een grote achtergrondafbeelding te overlappen. We beschouwen dit als het absolute minimum om dit leespatroon aan te passen aan uw interface-indeling.
Z-Pattern
Bovendien is het Z-patroon het eenvoudigste en meest universele patroon, dat in de volksmond wordt gebruikt op elke webpagina die is gebaseerd op tekst. De lezer scant eerst horizontaal over de bovenkant, daalt naar beneden en weer terug naar de linkerkant en scant vervolgens weer horizontaal over de bodem.
Het is belangrijk om te begrijpen het veelzijdige Z-patroon , omdat het voldoet aan de belangrijkste websitevereisten zoals hiërarchie, branding en calls-to-action. Zijn schoonheid is in zijn eenvoud en een ideale lay-out voor sites die zijn gericht op een call-to-action. Voor meer complexe of excessieve inhoud kan het Z-patroon echter te simpel zijn.
Denkt u dat het Z-patroon geschikt is voor uw pagina? Hier zijn een paar praktische tips om de voordelen te optimaliseren:
- Achtergrond - Houd de achtergrond waar deze hoort: op de achtergrond. Je wilt je lezer niet afleiden.
- Punt # - Als uitgangspunt is dit meestal waar u uw logo wilt plaatsen.
- Punt # 2 - Terwijl de belangrijkste call-to-action later zou moeten komen, is hier een goede plek voor een secundaire call-to-action, die een horizontale navigatiebalk onderstreept. (Een leuke grafische of afbeeldingschuifregelaar helpt de boven- en onderkant van de pagina te scheiden, waardoor de lezer wordt aangemoedigd om op het voorspelbare pad van het Z-patroon te blijven.)
- Punt # 3 - Dit is een leuke plek om aandacht te trekken voor andere links, of als alternatief om het zicht van de gebruiker naar het einddoel te leiden: Punt # 4.
- Punt # 4 - Als de "finishlijn" is dit de perfecte plaats voor uw belangrijkste call-to-action.
Het eerste dat u wilt doen is prioriteit geven aan de elementen op uw pagina, zodat u de meest en minst belangrijke elementen kent. Vanaf daar is het gewoon een kwestie van toewijzen aan de juiste 'hotspots'.
Bovendien kan het Z-patroon over de gehele pagina worden herhaald en uitgebreid. Kijk maar hoe Evernote zigzagt naar beneden door calls-to-action en verkooppunten.
DropBox maakt een visueel eenvoudiger benadering van dit zigzagpatroon door alle achtergrondafbeeldingen weg te doen. In plaats daarvan is er meer functionaliteit ingebouwd in de lay-out, aangezien een call-to-action van 'Meer informatie' helpt om elk deel van het kronkelpatroon aan te sluiten terwijl uw oog de pagina afloopt. Dit helpt ook bij geïnformeerde lezers om naar de volgende relevante pagina te gaan zonder eerst de hele kopie te moeten lezen.
Zie vooruit
Een geweldig interfaceontwerp zou moeten zijn als een onzichtbare hand die lezers met een snelheid van denken begeleidt. De belangrijke afhaalbaarheid van de F-patroon en Z-patroon trends is dat je je belangrijkste inhoud kunt plaatsen waar de lezer het op natuurlijke wijze zal "struikelen", in tegenstelling tot te proberen hen te dwingen om ernaar te kijken.
Subtletie is een groot voordeel voor elke paginalay-out en deze patronen kunnen het verschil maken tussen iets aan de lezer suggereren of het in hun keel schuiven.
Uitgelichte afbeelding, gebruik menselijk oogbeeld via Shutterstock.