Zo maak je UI designs consistent

Door naar het volgende begrip van deze blog: consistentie. Bij consistentie houd je je aan de regels van de huisstijl en bekende user patterns (gebruikspatronen). Wanneer iemand voor het eerst jouw merk tegenkomt wil je natuurlijk het liefst dat ze gelijk weten met wie ze te maken hebben. Het zou handig zijn als dit bezoekje visueel gelijk is met de volgende keren dat deze gebruiker in aanraking komt met jouw merk. Consistente interfaces worden namelijk beschouwd als professioneler, bruikbaarder en uiteraard mooier.

Hup, tijd om iets meer de diepte in te gaan want we zijn nog lang niet klaar met het begrip consistentie. Er zijn namelijk vier verschillende types: visuele consistentie, functionele consistentie en interne en externe consistentie. Voor nu focussen we ons op het eerste type: visuele consistentie. Waarom? Omdat daar heel makkelijk en snel winst te behalen valt voor de meeste bedrijven. En laten we eerlijk zijn: dat wil natuurlijk iedereen.

Lettertypes, formaten, knoppen en labels moeten in het hele product consistent zijn om de visuele consistentie te behouden. Klinkt simpel, maar er worden in de praktijk nog behoorlijk wat fouten gemaakt. Naast dat het mijn taak is om producten, websites en apps nog mooier te ontwerpen is het ook fijn dat gebruikers het als prettig ervaren om te interacteren met de ontwerpen. Hoewel consistentie misschien een lastig begrip is om te begrijpen, wordt het na enige oefening ook voor jou appeltje eitje. En je weet wat ze zeggen: oefening baart kunst.

Gebruikers zijn gewend om door talloze websites heen te navigeren. De meeste websites maken gebruik van gebruikspatronen met bijvoorbeeld duidelijke iconen. Hierbij kun je denken aan iconen voor het menu of voor het opnemen van contact. Deze iconen worden vaak gekopieerd en geplakt vanuit andere websites. Zonde en een gemiste kans! Je kunt er namelijk heel makkelijk voor zorgen dat je iconen aansluiten bij jouw merk en huisstijl.

Gebruik iconen met gelijke stroke width! Stroke width? Dit heeft te maken met de dikte van de lijnen van een icoon. Een veelvoorkomend probleem is dat er geen custom iconen meer gemaakt worden of dat er niet nagedacht wordt over het gebruik van een icon family (meerdere iconen in dezelfde stijl). Mijn tip is om op zoek te gaan naar editable stroke width iconen. Zo kun je de iconen naar wens aanpassen en dezelfde dikte meegeven. Dit straalt professionaliteit en rust uit.

Als je een element gaat afronden, zorg er dan ook voor dat je de andere elementen meeneemt. Denk eraan dat de corner radius (de grootte van de (afgeronde) hoeken) niet percentage gebaseerd zijn maar pixel-based. Gebruik daarom niet overal dezelfde corner radius, dit ziet er uiteindelijk minder netjes uit.

Gebruik niet te veel felle kleuren als dat niet nodig is. Gebruik alleen kleuren als deze een functie hebben of ervoor zorgen dat jouw huisstijl doorgevoerd wordt. Houd er rekening mee dat kleuren ook een betekenis hebben. Iedereen weet wat je moet doen bij een rood stoplicht (tenminste, de meeste mensen). Zorg daarom dat de kleur overeenkomt met hetgeen wat je duidelijk wilt maken.

Gebruik standaard (common) patronen. Ontwerp je voor mobiel, kijk dan naar veelgebruikte/standaard patronen voor op mobiel. Wees voorzichtig met het bedenken van een nieuwe navigatiestructuur, want mensen weten nu eenmaal hoe een hamburgermenu werkt. Ga dus niet het wiel zelf proberen uit te vinden. Je kunt als designer wel weten hoe het werkt, maar dat zegt nog niets over de eindgebruiker.

Bend consistency, don’t break it! Be consistent, not boring! Leer de (basis)regels voordat je zogezegd probeert te ‘buigen’. Creëer consistentie om de bruikbaarheid te verbeteren en ongewenste verrassingen voor de gebruiker te verminderen. Dit verlaagt de “cognitive load” en verhoogt daarmee de “usability” van een product.

Nog wat afsluitende tips voor consistentie en professionelere designs:

• Houd het simpel, maar verfijnd (let op details!)
• Maak consistente keuzes, gebruik bekende UI elementen en zet deze in jouw huisstijl
• Denk goed na over hoe jij de bezoeker over de pagina wilt leiden en baseer hier het design op

Ben je nog steeds aandachtig aan het lezen? Super! Mocht je niet alles onthouden hebben, vergeet dan niet om jouw werk altijd te controleren op consistentie. Denk daarbij dan vooral aan kleurgebruik, typografie en iconografie. Hier kun je uiteindelijk de meeste winst mee behalen.