Visuele hierarchie: waar je oog als eerste heen gaat
Zet vier knoppen naast elkaar in dezelfde kleur en dezelfde grootte. Vraag daarna aan iemand welke hij zou aanklikken. Hij weet het niet, want je hebt hem niets verteld. Alles even belangrijk maken betekent dat niets belangrijk is.
Dat gebeurt vaker dan je denkt, en meestal met de beste bedoelingen. Iedereen binnen het bedrijf wil zijn onderdeel prominent.
Het gevolg is een pagina waarop je oog nergens houvast vindt. Je bezoeker scant, ziet geen richting en scrolt door.
Kiezen is dus geen luxe. Het is de kern van een pagina die werkt.
De volgorde waarin je oog over een pagina reist.
Wat is visuele hierarchie?
Visuele hierarchie is de rangorde in beeld, dus de volgorde waarin onderdelen opvallen. Je stuurt er het oog mee.
Wat groter, donkerder of vrijer staat, wordt eerder gezien. Dat is geen mening maar hoe kijken werkt.
Waarom het ertoe doet
Omdat niemand je pagina leest zoals een boek. Mensen scannen eerst en lezen pas als iets hun aandacht trekt.
Jij bepaalt wat dat is. Doe je dat niet, dan bepaalt het toeval het, zie UI.
Waarmee je stuurt
Vijf middelen
Formaat: groter wordt eerder gezien.
Kleur: contrast trekt aandacht, niet felheid.
Ruimte: iets dat losstaat, valt op.
Positie: bovenaan en linksboven eerst.
Herhaling: een terugkerende vorm wordt herkend.
Die derde is de meest onderschatte. witruimte is geen lege plek maar een middel.
Ruimte doet het werk
Een knop met veel lucht eromheen valt meer op dan een grotere knop tussen andere elementen.
Dat kost niets en het werkt beter dan een felle kleur. Meer daarover lees je bij call-to-action.
Waarom alles benadrukken niet werkt
Nadruk is relatief. Iets valt alleen op ten opzichte van iets anders.
Zet je hele alinea vet, dan valt er niets meer op. Bij het nadruk leggen moet je dus iets anders rustig laten.
Wat ik in de praktijk zie
Drie knoppen boven elkaar in dezelfde kleur. Vier kopjes in hetzelfde formaat.
Of een pagina waarop elke alinea een vetgedrukt woord bevat. Dan is je oog na twee seconden moe.
Bepalen wat voorgaat
Stel per pagina een vraag: wat moet iemand hier doen? Er is een antwoord en niet drie.
Dat wordt je belangrijkste element. De rest ondersteunt, zie typografie.
De tweede vraag
Wat moet iemand weten voordat hij dat doet? Die informatie komt op de tweede plek.
Alles daarna is aanvulling en mag rustig kleiner. Leg die niveaus vast, zie design system.
Hoe je het test
Knijp je ogen half dicht en kijk naar je scherm. Wat je dan nog ziet, is je hierarchie.
Is dat je logo en niet je boodschap, dan klopt er iets niet. Dat is een test van vijf seconden.
Het verschil met je koppenstructuur
Je koppen bepalen de betekenis voor machines. Je vormgeving bepaalt de leesvolgorde voor mensen.
Die twee horen samen te vallen. Kies een kopniveau dus nooit op grootte alleen, zie accessibility.
De drie-secondentest
Laat iemand drie seconden naar je pagina kijken en vraag daarna wat hij zag. Noemt hij niet wat jij het belangrijkst vindt, dan stuurt je pagina de verkeerde kant op.
Doe die test met iemand die je site niet kent. Jij weet al waar je moet kijken en dat maakt je oordeel waardeloos.
Kiezen is het lastigste deel
Het is zelden een ontwerpprobleem. Meestal wil iedereen binnen het bedrijf zijn onderdeel prominent.
Het gevolg is een pagina waarop je oog nergens houvast vindt. Je bezoeker scant, ziet geen richting en scrolt door.
Contrast is niet hetzelfde als fel
Een felgele knop op een witte achtergrond valt minder op dan een donkerblauwe. Het gaat om het verschil, niet om de kleur.
Dat scheelt bovendien in je leesbaarheid. Meer daarover lees je bij frontend.
Meer vragen over Visuele hierarchie
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is visuele hierarchie?
Hoe bepaal je wat het meest moet opvallen?
Welke middelen gebruik je voor nadruk?
Waarom werkt alles vetgedrukt niet?
Hoe test je of je hierarchie klopt?
Wat is het verschil met een koppenstructuur?
Wat is visuele hierarchie?
Stel per pagina een vraag: wat moet iemand hier doen? Er is een antwoord en niet drie.
Dat wordt je belangrijkste element. De rest ondersteunt.
De tweede vraag is: wat moet iemand weten voordat hij dat doet? Die informatie komt op de tweede plek.
Alles daarna is aanvulling en mag rustig kleiner.
Dat kiezen is het lastigste deel, en het is zelden een ontwerpprobleem. Meestal wil iedereen binnen het bedrijf zijn onderdeel prominent, en dan wint niemand.
Stel twee vragen per pagina. Wat moet iemand hier doen, en wat moet hij daarvoor weten?
Dat eerste wordt je grootste element en dat tweede komt eronder. Alles daarna mag rustig kleiner.
Dat kiezen is lastiger dan het klinkt, want iedereen wil zijn onderdeel prominent. Niemand leest je pagina zoals een boek. Mensen scannen eerst en lezen pas als iets hun aandacht trekt. Jij bepaalt wat dat is. Zonder die keuze wint niemand en scrolt je bezoeker door.
Hoe bepaal je wat het meest moet opvallen?
Visuele hierarchie is de volgorde waarin onderdelen van een pagina opvallen. Je stuurt er het oog van je bezoeker mee.
Wat groter, donkerder of vrijer staat, wordt eerder gezien. Dat is geen mening maar hoe kijken werkt.
Het doet ertoe omdat niemand je pagina leest zoals een boek. Mensen scannen eerst en lezen pas als iets hun aandacht trekt.
Jij bepaalt wat dat is. Doe je dat niet, dan bepaalt het toeval het.
Zet vier knoppen naast elkaar in dezelfde kleur en dezelfde grootte, en niemand weet welke hij moet hebben. Alles even belangrijk maken betekent dat niets belangrijk is.
Bepaal per pagina wat het belangrijkste element is. Er is een antwoord en niet drie.
Doe je dat niet, dan bepaalt het toeval waar je bezoeker naar kijkt. En dat is zelden waar jij hem wilt hebben. Wat groter, donkerder of vrijer staat, wordt eerder gezien. Dat is geen mening maar hoe kijken werkt.
Welke middelen gebruik je voor nadruk?
Vijf, en ze werken het best in combinatie.
Formaat: groter wordt eerder gezien. Kleur: contrast trekt aandacht, niet felheid. Ruimte: iets dat losstaat, valt op.
Positie: bovenaan en linksboven eerst. En herhaling: een terugkerende vorm wordt herkend.
Die derde is de meest onderschatte. Witruimte is geen lege plek maar een middel.
Een knop met veel lucht eromheen valt meer op dan een grotere knop tussen andere elementen. Dat kost niets en het werkt beter dan een felle kleur.
Gebruik witruimte voordat je naar een felle kleur grijpt. Een knop met lucht eromheen valt meer op dan een grotere knop.
Contrast is bovendien iets anders dan felheid. Een donkerblauwe knop op wit werkt beter dan een felgele.
Dat scheelt ook in je leesbaarheid. Positie telt ook mee: bovenaan en linksboven wordt als eerste gezien. Net als herhaling, want een terugkerende vorm wordt herkend. Ruimte kost je bovendien niets, in tegenstelling tot een extra kleur.
Waarom werkt alles vetgedrukt niet?
Omdat nadruk relatief is. Iets valt alleen op ten opzichte van iets anders.
Zet je hele alinea vet, dan valt er niets meer op. Je hebt dan alleen een donkerder blok tekst.
Om iets te benadrukken moet je dus iets anders rustig laten. Dat is de hele truc.
In de praktijk zie ik drie knoppen boven elkaar in dezelfde kleur, of vier kopjes in hetzelfde formaat.
Of een pagina waarop elke alinea een vetgedrukt woord bevat. Dan is je oog na twee seconden moe en heeft het niets onthouden.
Kies bewust wat je rustig laat. Zonder rust is er geen nadruk mogelijk.
Zet dus niet elke alinea een vetgedrukt woord. Na twee seconden is je oog moe en heeft het niets onthouden.
Benadruk hooguit een of twee dingen per scherm. Nadruk is relatief. Iets valt alleen op ten opzichte van iets anders, en dus moet er ook rust op je pagina staan.
Hoe test je of je hierarchie klopt?
Knijp je ogen half dicht en kijk naar je scherm. Wat je dan nog ziet, is je hierarchie.
Is dat je logo en niet je boodschap, dan klopt er iets niet. Dat is een test van vijf seconden.
Een tweede test: laat iemand drie seconden naar je pagina kijken en vraag daarna wat hij zag.
Noemt hij niet wat jij het belangrijkst vindt, dan stuurt je pagina de verkeerde kant op.
Doe die test met iemand die je site niet kent. Jij weet al waar je moet kijken, en dat maakt je oordeel waardeloos.
Knijp je ogen half dicht en kijk naar je scherm. Wat je dan nog ziet, is je hierarchie.
Zie je je logo en niet je boodschap, dan klopt er iets niet. Dat is een test van vijf seconden die je zelf kunt doen. Laat daarnaast iemand drie seconden kijken en vraag wat hij zag. Noemt hij niet wat jij belangrijk vindt, dan stuurt je pagina de verkeerde kant op.
Valt op jouw pagina niet op wat het belangrijkst is? Stuur me de link via het formulier hieronder. Ik kijk waar het oog naartoe gaat en wat er nodig is om dat te sturen. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Beeldhierarchie, rangorde, leesvolgorde
