Helder webdesign volgens deze 10 vuistregels
Een mooi webdesign is niet automatisch het meest efficiënte of gebruikersvriendelijke design, noch persé wat de klant nodig heeft. Hoe wil je je lay-out, welke interactie met welke templates wil je weerspiegeld zien, en hoe komt het ontwerp het best tot zijn recht op verschillende toestellen?
Het bos door de bomen zien is soms een opdracht op zich, daarom: 10 vuistregels van Hazel voor webdesigners om in het achterhoofd te houden.
1. Weet wat je maakt
Het is niet slecht om alvorens aan de slag te gaan met het webdesign, even stil te staan bij enkele vragen die het design mee zullen bepalen. Wat is het doel van de website? Welke boodschap moet er worden overgebracht ? Wie is de doelgroep? Wat is de tone of voice? Goed begonnen is wel degelijk half gewonnen.
2. Hou het simpel
Waarom ingewikkelde algoritmes om de gebruiker te overdonderen? Een gebruiker wil eenvoud. Recht naar het doel, en dit zeer gevoelsmatig. De beste webpagina is er dus een die voor zichzelf spreekt, duidelijk is, en de gebruiker niet voor vraagtekens stelt. Dit werkt het beste als de navigatie en site architecture intuïtief zijn. Een heldere structuur, met mate gebruik van visuele kapstokjes en herkenbare links die het pad naar het doel verlichten.
3. Hou het herkenbaar
In deze zelfde elan, hou het eenvoudig door de herkenbaarheid in het webdesign. Laat de bezoeker weten waar hij juist kan klikken en welke interactie dan mogelijk zal zijn. Gebruik vertrouwde visuele kenmerken zoals een tekstkleur, woorden in het vet of herkenbare, terugkomende knoppen. Er is niets mis met een envelop icoontje waar bezoekers kunnen op kunnen klikken om contact op te nemen via email.
4. Eyes on the prize
Bezoekers scrollen. Ongeacht of het design het toelaat of niet, uit onderzoek blijkt dat gebruikers anno 2018 intuïtief zullen gaan scrollen. Dit heeft als gevolg dat je niet langer al je content terug hoeft te gaan brengen tot ‘above the fold’.
Wat je daarentegen wel moet doen, is rekening houden met het scanpatroon van gebruikers. Via eyetracking weten we dat bezoekers een website zullen scannen via ofwel een F-patroon, of een Z-patroon. Webpagina’s met veel content, worden in een F-patroon gescand naar relevante informatie, terwijl bijvoorbeeld landingspagina’s eerder met een Z-patroon bekeken worden. Key is hier om belangrijke informatie op de juiste plaatsen te implementeren, op ‘ooghoogte’ dus.
5. Test vroeg en veelvuldig
Dit voelt misschien als een tegennatuurlijke zet, om je onafgewerkte en niet geperfectioneerde baby aan de buitenwereld te laten zien, maar het is wel de beste. Voor jou als ontwerper is de lay-out of webdesign namelijk glashelder en kei duidelijk, maar hoe ervaart iemand anders het? Hoe ervaart de gebruiker het? Aarzel dus niet om relatief vroeg iemand het project te laten testen, en bij voorkeur meerdere personen. Best zelfs vanuit verschillende achtergronden. Denk aan de specifieke vereisten, het doelpubliek, de stakeholders, het budget,…
Eens je deze opmerkingen al vroeg in het afwerkingsproces kan invoegen, spaart je dat tijd en onnodig gevloek nadien. Het ligt niet aan jou, je zit er gewoon te dicht met je neus op.
6. Don’t cut the copy cost
Onderschat de kracht van een goede copy niet. Zeker bij moeilijkere of complexe content is het cruciaal om de inhoud op een gebruiksvriendelijke manier te presenteren. Droge teksten en saaie leuzes? Het zegt onnoemelijk veel over een website, de branding van het merk, het product of dienst, en hoe hoog ze op lopen met hun lezerspubliek. Een echte klik zal er pas zijn wanneer de gebruiker op dezelfde golflengte zit en deze merkwaarden als dezijne ervaart.
7. Viva de visuals
Nog een goede tool om complexe content hapklaar en verstaanbaar te krijgen : visuals. Moeilijke informatie organiseer je hier best in de interface met de juiste visuele hiërarchie. Goed gekozen en geplaatste visuals kunnen je content dan ook kracht bijzetten en je lezer weten vast te houden. Meer dan gewoon opleukertjes, moet je ze behandelen als een integraal onderdeel van het geheel, als ondersteunende pilaar en context voor je concept.
8. Schrik niet terug voor animatie
Een gehele stop-motion is misschien wat overdreven, maar ook animatie kan zoveel meer zijn dan een leuk extraatje. Als ze doelgericht ingezet worden, zijn ze een absolute meerwaarde die een interactie kunnen aanduiden, nadruk leggen of juist verbergen. Animatie zorgt hier voor een andere, meer totaalervaring, welke de juiste snaar kan raken als het bijdraagt tot de merkidentiteit.
9. Wees niet bang van de witruimte
Nog iets dat tegennatuurlijk aanvoelt, maar precies daarom net werkt : witruimte. Werken met ademruimtes tussen verschillende elementen zal helpen om de nadruk te leggen op dat wat belangrijk is. Je hoeft dus niet perse de grote essentie in capslock te zetten, maar creëer er juist ruimte omheen. Een misschien moeilijke maar lonende queeste om het perfecte huwelijk te vinden tussen witruimte, content en visuals.
10. Realistische prototypes
Het gebruik van fantasie is niet iedereen gegeven, en soms is het gewoon ook moeilijk om door wireframes heen te kijken. Waarom moeilijk als het ook makkelijk kan? Wanneer je een prototype wil voorleggen aan developers of eindgebruikers, zijn realistische prototypes your best bet. Gelukkig zijn er een hoop tools op de markt die dit mogelijk maken voor apps en websites zoals Adobe XD, Webflow, Framer, Flinto, Invision en Principle. Op deze manier hoeven front-end developers nog niet al hun kaarten te verspelen en krijgen eindgebruikers al een goed zicht op uiteindelijke interacties en een realistische beeld van het eindproject. Win-win!
