Nieuwsbrief

Schrijf je nu in voor onze nieuwsbrief en blijf op de hoogte van de laatste artikelen!

tips

Visuele hiërarchie in webdesign en UI

logo
logo
red pattern

De behoefte aan structuur is iets heel menselijks. Of het nu gaat om je bestekla of de schappen in een supermarkt, dankzij de structuur vind je sneller wat je nodig hebt. Dit gaat ook op voor digitale producten. Wanneer UI-elementen slim en intuïtief gestructureerd zijn, kunnen bezoekers je website gemakkelijker gebruiken. Ze vinden sneller de informatie waar ze behoefte aan hebben en de gebruikerservaring zal positiever zijn.

Een van de technieken die een designer hiervoor tot zijn beschikking heeft, is visuele hiërarchie. Dit kan over veel elementen gaan: kleur, contrast, afstand en nabijheid, negatieve ruimte, noem het maar op.

In dit artikel vertel ik je alles over het effectief indelen van content voor een optimale gebruikservaring, oftewel hoe een effectief design een boodschap niet alleen mooier maakt, maar juist versterkt.

Wat is visuele hiërarchie precies?

Een hiërarchie is een manier om onderdelen (personen, objecten of gegevens) te ordenen. Het is hierbij duidelijk wat de onderlinge relatie is. Is iets belangrijker of minder belangrijk ten opzichte van een ander onderdeel. Of hoort het juist bij soortgelijke onderdelen in een groep?

Visuele hiërarchie helpt een designer om alle onderdelen in een webdesign overzichtelijk en harmonieus te ordenen, zodat het duidelijk informatie overbrengt. Het is voor een groot deel gebaseerd op de Gestalt theorie, die stelt dat mensen geneigd zijn om visuele elementen te groeperen op basis van overeenkomstige eigenschappen.

Visuele hiërarchie toepassen met typografie

De basis van veel designs staat of valt bij het gebruik van de juiste typografie. Ook wat betreft UI heeft typografie een grote rol. We delen teksten in op basis van formaat, kleur, uitlijning en fontsoort, zodat de inhoud zo goed mogelijk georganiseerd is. Denk hierbij aan het verschil tussen kopregels, sub-koppen en paragraaftekst, maar ook teksten in panels, call-to-actions en knoppen.

Teksten in een website zijn essentieel om informatie over te brengen en hebben daarom een centrale rol in de UI. Om een lezer niet te overspoelen met informatie wordt tekst gesegmenteerd en gegroepeerd. Zo kunnen lezers gemakkelijk de inhoud in zich opnemen en beslissen wanneer ze verder willen lezen.

Niveau 1

Dit was wat je het meest laat opvallen. Vaak zijn dit kopteksten. Het doel is om de aandacht van een lezer te grijpen en de belangrijkste informatie over te brengen.

Niveau 2

Veel bezoekers scannen een webpagina eerst voor ze eventueel verder lezen. Ze scrollen snel door de pagina om te kijken of ze op de goede pagina zitten. Sub-kopjes en onderschriften vertellen waar de pagina of sub-secties binnen de pagina over gaan. Zo ziet een lezer snel waar de pagina over gaat. De voordelen of USP’s komen duidelijk terug in korte opsommingen met bullet points of andere opsommingstekens. Allemaal gemakkelijk te scannen door een lezer met weinig tijd.

Niveau 3

Hier bevindt zich hoofdzakelijk paragraaftekst. Het lettertype is relatief klein, maar uiteraard groot genoeg om goed leesbaar te zijn. Hier vind je alle informatie in detail terug. De snelle lezer zal hier geen tijd voor hebben. Deze teksten zijn waardevol voor lezers die op zoek zijn naar gedetailleerde informatie. Denk hierbij bijvoorbeeld aan een antwoord op een specifieke vraag of probleem.

Andere manieren om visuele hiërarchie toe te passen

Behalve typografie zijn er veel meer elementen en technieken die een designer kan toepassen om structuur aan te brengen met visuele hiërarchie. Dit heeft veelal te maken met groeperingen volgens de Gestalt principes, een onderwerp dat zo groot (en leuk!) is dat ik er een apart artikel aan ga wijden.

Contrast

Behalve typografie zijn er veel meer elementen en technieken die een designer kan toepassen om structuur aan te brengen met visuele hiërarchie. Dit heeft veelal te maken met groeperingen volgens de Gestalt principes, een onderwerp dat zo groot (en leuk!) is dat ik er een apart artikel aan ga wijden.

Formaat

Mensen zijn gefascineerd door formaat. Wie vangt de grootste vis? Welke pompoen uit de moestuin overschaduwt alle anderen? Wie rijdt de grootste auto? Wie heeft de grootste… (vul zelf maar in). Size matters! Daardoor lijkt het nogal voor de hand te liggen: hoe groter iets is, hoe belangrijker het zal zijn. Andersom is het voor een designer dus ook waar. Is iets belangrijk, maak het dan groot. Binnen het redelijke uiteraard. Elke designer heeft nachtmerries van klanten die met de vraag: “kan het logo misschien nóg groter?”

Kleur

Het gebruik van kleuren is zeer belangrijk voor een designer. Met behulp van handige tools, intuïtie, beproefde technieken of inspiratie uit onverwachte hoek vinden we de juiste combinatie. Dit is belangrijk voor de harmonie, maar ook voor het sturen van aandacht. Felle en opvallende kleuren trekken de aandacht en zijn perfect voor het gebruik van knoppen of andere interactieve elementen in de website. Lichte en zachte kleuren werken op hun beurt beter als achtergrond. Zo breng je met kleurgebruik een visuele hiërarchie toe: ‘Beste bezoeker, ook al is de achtergrond vele malen groter, de kleine felgekleurde knop verdient jouw aandacht.’

Negatieve ruimte

Ook wel witruimte genoemd. Negatieve ruimte is niks meer en niks minder dan de ruimte die je overlaat tussen je (visuele of typografische) elementen in het design. Te weinig witruimte en alles lijkt volgepropt. Het design moet meer ‘ademen’, roep ik wel eens. Teveel witruimte en het design voelt te leeg. Maar op een slimme manier gebruik maken van witruimte zorgt voor meer dan alleen balans. Het kan de vormgeving versterken en de aandacht sturen. Een adempauze in het design door meer witruimte kan een element meer laten opvallen.

Herhaling

Iets vaak herhalen maakt iets niet per se belangrijker, maar wat het wél doet is dat lezers een patroon gaan herkennen. Door kleur of vorm te herhalen schep je een verwachtingspatroon en is het duidelijker wat men kan verwachten van een stuk tekst of een knop. Wanneer alles er het zelfde uitziet is dit verwachtingspatroon een stuk minder duidelijk

Bonusronde: zo moet het dus niet!

Designers hebben een belangrijke taak bij het overbrengen van informatie. Een goed design is niet op de voorgrond aanwezig maar laat juist de inhoud schitteren. In het slechtste geval kan het namelijk afleiden van de inhoud.

Een simpele aanpassing kan een boodschap versterken, verzwakken, of zelfs volledig verdraaien

Dit geweldige artikel gaat over hoe een designer zijn collega aan het lijntje houdt. Deze internetklassieker is natuurlijk bedoeld als grap, maar er zitten een aantal voorbeelden in die goed illustreren wat de rol van design is. Hoe je een boodschap kan versterken, verzwakken, of zelfs volledig kan verdraaien met een aantal simpele aanpassingen. Het is een longread, maar hij is het waard.

Missing Missy

Wil jij ook jouw boodschap versterken met effectief design?

Visuele hiërarchie is slechts één van de vele technieken in het arsenaal van onze designers om een website aantrekkelijk én effectief te maken. Dat doen we ook graag voor jou. Benieuwd naar de designmogelijkheden voor jouw site? Neem dan contact met ons op, dan bespreken we samen wat we allemaal voor je kunnen doen.