UI-consistentie beheersen: zo creëer je een naadloze gebruikerservaring
Heb je ooit de frustratie gevoeld wanneer je door een website of app navigeert en niet begrijpt hoe deze werkt? Natuurlijk wel.
De reden achter je frustratie is waarschijnlijk een slecht ontworpen interface waarmee je niet intuïtief kunt navigeren. In plaats daarvan moet je stoppen en elk element analyseren om te begrijpen hoe het werkt en waarvoor het dient.
Een van de meest voorkomende fouten die tot slecht productontwerp leiden, is inconsistentie in de gebruikersinterface.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Naast het feit dat dit een van de meest voorkomende fouten is, is het ook een fout die heel eenvoudig te herstellen of helemaal te voorkomen is. Laten we daarom begrijpen wat inconsistentie in de gebruikersinterface inhoudt en hoe je ervoor kunt zorgen dat je gebruikers hiermee niet te maken krijgen.
Consistentie in de gebruikersinterface begrijpen
Zoals de naam al aangeeft, draait consistentie in de gebruikersinterface om het gebruik van identieke UI-elementen, atomair ontwerp en een algemene gebruikerservaring voor hetzelfde type actie of entiteit binnen je product.
Als je op meerdere plaatsen in je interface primaire knoppen hebt, moeten ze er allemaal hetzelfde uitzien (UI) en hetzelfde werken (UX). Als je bijvoorbeeld inlogt op je Dropbox-account en de verschillende secties daar bekijkt, zul je merken dat alle knoppen voor primaire acties identiek zijn.
Als je beter kijkt, zie je dat niet alleen de primaire actieknoppen er in Dropbox consistent uitzien, maar eigenlijk vrijwel alle elementen.
Er zijn verschillende belangrijke redenen waarom ontwerpteams veel aandacht besteden aan een consistent ontwerp van de gebruikersinterface. Namelijk:
- Het ziet er verzorgd en rustig uit voor het oog. Diversiteit is niet het beste wat je in gebruikersinterfaces kunt hebben. Te veel visuele varianten voor elementen maken de interface zwaar en belemmeren de leesbaarheid.
- Het ziet er professioneel uit. Een verzorgde gebruikersinterface wekt een indruk van professionaliteit en deskundigheid. Gebruikers vertrouwen merken eerder als hun websites of producten goed ontworpen zijn.
- Het verbetert de gebruikerservaring. Als je ergens op Dropbox een zwarte knop ziet en deze herkent als hun primaire actie, weet je telkens wanneer je een knop ziet die er hetzelfde uitziet dat dit ook een primaire actie is. Je hoeft dus niet elke keer dat je zo'n knop tegenkomt na te denken over wat deze hoort te doen.
Tot slot is er ook de factor van het ontwikkelen van deze interface. Als je overal in je product consistente UI-elementen hebt, hoeft het frontendteam niet elk nieuw element vanaf nul te ontwikkelen. In plaats daarvan maken ze één element en hergebruiken ze dit in de nieuwe schermen die ze moeten ontwikkelen. Zo verkort je de tijd die nodig is om nieuwe interfaces en functionaliteit te creëren drastisch.
Ondanks het belang en de impact ervan op de gebruikerservaring is consistent ontwerp niet overal aanwezig. Zelfs grote technologieproducten maken zich aan dit probleem schuldig. Het instellingenmenu van Android is mijn favoriete voorbeeld.
Bekijk de verschillende elementen in deze lijst eens en vertel me welke aanklikbaar zijn (knoppen) en welke alleen informatieve tekst zijn. De kans is groot dat je dat niet kunt zeggen, tenzij je hetzelfde menu op je telefoon opent en op alles begint te tikken.
Zelfs als je het goed had geraden (het zijn "Google-accountgegevens" en "Foto's en video's"), kostte het je enige cognitieve verwerking om daarachter te komen.
Zo hoort UX niet te werken. De beroemde uitspraak van UX-goeroe Steve Krug luidt immers:
Laat me niet nadenken.
Overigens raad ik je ten zeerste aan zijn boek te lezen, samen met de “bijbel” voor UX van Don Norman - Het ontwerp van alledaagse dingen.
Het algemene idee hierachter is dat je gebruikers elementen in je UI automatisch kunnen herkennen zonder te hoeven nadenken over wat het is en op het niveau van “spiergeheugen” door je app kunnen navigeren.
De basisprincipes van UI-ontwerp
Voordat we verdergaan met begrijpen hoe je je ontwerp consistent houdt, bekijken we eerst opnieuw de fundamentele ontwerpprincipes die gebruiksvriendelijke UI en consistentie überhaupt mogelijk maken.
Duidelijkheid en eenvoud
De dagen van websites met knipperende gifjes en alle kleuren van de regenboog in de UI zijn voorbij (millennials, herinneren jullie je die nog?).
Toen steeds meer mensen internet gingen gebruiken, besteedden UI- en UX-ontwerpers meer aandacht aan de manier waarop mensen gebruikersinterfaces waarnemen en ermee omgaan.
Wat ze al snel ontdekten, was dat te veel kleuren en visuele elementen gebruikers belemmeren bij het uitvoeren van de taken die ze wilden uitvoeren. Het enige wat ze overhouden aan het bekijken van zulke UI's is vermoeide ogen.
Daarom gingen we natuurlijk meer richting minimalisme en eenvoud. Consistentie in de UI is in feite een andere manier om je interface eenvoudiger te maken.
Visuele hiërarchie
Wanneer je veel elementen op je scherm hebt, wordt het lastig om de relatie ertussen te begrijpen. Hoe weet je bijvoorbeeld of een bepaald stuk tekst de kop van een artikel is of gewoon deel uitmaakt van de tekst?
Je helpt je gebruikers deze relaties te begrijpen met visuele hiërarchie. Door elementen bovenaan te plaatsen, ze groter, kleurrijk en vet te maken en andere trucs toe te passen, kun je gebruikers eenvoudig laten zien dat deze elementen belangrijker zijn dan andere elementen op het scherm. Zo zullen gebruikers intuïtief eerst naar dat element kijken voordat ze doorgaan naar het tweede.
Er is een bekende meme die de magie van visuele hiërarchie laat zien.
Je glimlachte toen je de tekst hier las, nietwaar? Dat klopt: net als ieder ander mens is je zicht erop ingesteld om ook de visuele hiërarchie te volgen.
Terugkoppeling
Telkens wanneer je gebruiker een actie uitvoert in je product, verwacht die te begrijpen of die actie heeft plaatsgevonden.
Als je op de verwijderknop klikt en er daarna niets gebeurt, raak je misschien in de war. Is de verwijdering uitgevoerd of was er een fout? Om gebruikers hierbij te helpen, moet je hen visuele (of audio- en zelfs haptische) feedback geven die hen vertelt wat het resultaat van de actie is.
Als je systeem het verwijderverzoek succesvol heeft verwerkt, laat je weten dat het item is verwijderd. Als je daarentegen een fout tegenkomt, vertel je hun ook daarover. Zo weten ze dat hun item niet is verwijderd en dat ze het opnieuw moeten proberen of contact met je moeten opnemen voor ondersteuning.
Beste werkwijzen voor het bereiken van UI-consistentie
Op het eerste gezicht is UI-consistentie heel eenvoudig en zou elke ontwerper dit moeten kunnen bereiken. Dat klopt, ervan uitgaande dat je de enige persoon bent die aan het product werkt en dat het product zelf klein en eenvoudig is.
Zodra je deel gaat uitmaken van een groter team (waarbij elke ontwerper een eigen stijl heeft) en werkt aan een product dat uit tientallen pagina's en functies bestaat, wordt het een echte uitdaging om elementen consistent te houden.
Je kunt je simpelweg niet fysiek herinneren hoe elk afzonderlijk element in het hele product eruitziet en dit vervolgens reproduceren in de nieuwe functie waaraan je werkt.
Gelukkig zijn er veel processen en raamwerken waarmee je het risico op inconsistenties in je ontwerp kunt beperken. Dit zijn de drie die als industriestandaard worden beschouwd.
Stijlgidsen: Dit is een document waarin de ontwerpstandaarden voor je product worden beschreven en dat je merkidentiteit vertegenwoordigt. Het bevat de typografie (oftewel lettertypen, de grootte ervan, plaatsing enzovoort) voor verschillende soorten tekst (bijvoorbeeld koppen, hoofdtekst, opmerkingen enzovoort), iconografie, je kleurenpalet en andere essentiële ontwerpelementen.
Met een stijlgids zorg je ervoor dat het hele ontwerpteam volgens dezelfde algemene standaarden werkt en dat je inhoud, kleuren en pictogrammen in het hele product consistent blijven.
Apple is waarschijnlijk het beste voorbeeld van het overal toepassen van de eigen stijlgids, ook bij de bedrijven die apps voor zijn producten ontwikkelen.
Het voorbeeld hier is de stijlgids voor de knop die je op je website kunt plaatsen om gebruikers je app uit de App Store te laten downloaden. Zoals je kunt zien, is Apple heel duidelijk over de manier waarop je deze knop kunt gebruiken.
Patroonbibliotheken: Dit is een ander leidend document dat zich richt op het beschrijven van de details op laag niveau van je ontwerpstandaard, in tegenstelling tot het vorige document, dat je de essentiële ontwerpelementen op hoog niveau biedt. Ontwerppatroonbibliotheken zijn een veelvoorkomend resultaat wanneer je team atomair ontwerp toepast.
Het concept van atomair ontwerp is dat je duidelijk gedefinieerde kleine UI-elementen hebt die samen complexere elementen vormen. De veelvoorkomende categorieën elementen en hun combinaties binnen dit raamwerk zijn onder andere:
- Atomen (vandaar de naam): Basiselementen zoals formulieren, knoppen, pictogrammen en andere elementen. Dit zijn elementen die je niet verder kunt opsplitsen.
- Moleculen: Combinaties van atomen die een specifiek doel dienen. Voorbeelden zijn paginering voor je lijsten, broodkruimelnavigatie voor navigatie, enzovoort.
- Organismen: Complexere interface-elementen die uit meerdere atomen en moleculen bestaan en entiteiten vertegenwoordigen. Dit zijn kaarten, zoekbalken en andere elementen.
- Sjablonen: Combinaties van herbruikbare organismen die je aan je pagina's kunt toevoegen. Dit kunnen lijsten met zoekresultaten, secties met productbeschrijvingen enzovoort zijn.
- Pagina: Het eindresultaat van je ontwerp en de plek waar de gebruiker ermee interactie heeft. Zoals de naam al aangeeft, zijn dit de verschillende pagina's van je product, zoals je startpagina.
Een patroonbibliotheek is een verzameling gestandaardiseerde moleculen en organismen die je in je ontwerp kunt gebruiken. Je zorgt voor consistentie door altijd dezelfde elementen in verschillende delen van je product opnieuw te gebruiken, omdat gebruikers het element meteen herkennen zodra ze een specifieke pagina openen.
Ontwerpsysteem: Dit is de overkoepelende combinatie van stijlgidsen op hoog niveau, lettertypen, kleurenschema's en beschrijvingen van kleine UI-elementen, evenals een verzameling kant-en-klare UI-componenten die je zowel in je ontwerp als bij de ontwikkeling van het product kunt gebruiken.
Bijna alle grote technologiebedrijven ontwikkelen hun eigen ontwerpsysteem om visuele consistentie te waarborgen. Google heeft Material, Shopify heeft Polaris en Apple heeft Human Interface. Er zijn ook zelfstandige opensourcesystemen die je eenvoudig in je product kunt integreren en gratis kunt gebruiken. Mijn favoriete systeem daarvan is ant.design.
Net als andere ontwerpsystemen bevat het zowel een ontwerpbibliotheek die je kunt gebruiken in Figma of andere populaire tools als een componentbibliotheek die vooraf is gecodeerd in populaire frameworks (bijvoorbeeld React) en die je ontwikkelaars in hun code kunnen gebruiken.
Tools voor het behouden van UI-consistentie
Om je ontwerp consistent te houden binnen al je teams en onderdelen van je product, moet je je richtlijnen documenteren en ervoor zorgen dat je hele team eraan samenwerkt.
Voor het documenteren en toepassen van je ontwerpnormen op je dagelijkse functie- en schermontwerpen kun je gebruikmaken van de gespecialiseerde functies van veel moderne ontwerptools.
Met Figma kun je bijvoorbeeld schaalbare componenten maken die je in je ontwerpsysteembestand kunt opslaan en door iedereen binnen je bedrijf kunt laten gebruiken.
Het ondersteunt ook UI-kits: kant-en-klare bibliotheken met ontwerprichtlijnen en regels die je uit de bibliotheek van Figma kunt downloaden en in je producten kunt gebruiken. Hier is een kit voor Googles Material Design.
Deze specifieke kit biedt je een grote verscheidenheid aan elementen voor het ontwerpen van een Android-app die voldoet aan de ontwerpnormen van Google.
Dan het samenwerkingsgedeelte. Zonder goede samenwerking binnen je ontwerpteam ontkom je er niet aan dat je elementen krijgt die je richtlijnen niet volgen en je visuele consistentie doorbreken. Gelukkig zijn er UX/UI-ontwerptools om samenwerking te bevorderen, ook.
Zeplin helpt je ontwerpers en ontwikkelaars bijvoorbeeld effectiever samen te werken door ontwikkelaarsvriendelijke versies van het ontwerp te maken, waarin het ontwikkelingsteam exacte CSS-specificaties voor de elementen kan vinden en eenvoudig afbeeldingen, pictogrammen en andere middelen uit het ontwerp kan downloaden. Het integreert ook met andere tools voor UI-ontwikkeling, zodat je je ontwerpen eenvoudig kunt overzetten van de plek waar je ze hebt gemaakt naar Zeplin.
Testen en itereren voor UI-consistentie
Net als je productvereisten of je strategie zijn ontwerprichtlijnen ook geen statische documenten. Je zult er altijd wijzigingen in aanbrengen en ze actueel houden.
Enkele veelvoorkomende redenen om je richtlijnen te wijzigen zijn:
- Nieuwe elementen toevoegen die in de bibliotheek ontbraken.
- Nieuwe ontwerptrends en beste praktijken overnemen.
- Problemen en “ontwerpfouten” vinden die moeten worden opgelost.
Tot slot is het een goede gewoonte om je ontwerpteam het af en toe te laten beoordelen en er kleine verbeteringen in aan te laten brengen.
Naast het verbeteren van de algehele uitstraling en de kwaliteit van je ontwerp, stelt dit laatste je ook in staat om iets uit te voeren dat een “UI-consistentietest” wordt genoemd, waarbij je ontwerpteam actief op zoek gaat naar inconsistenties in je ontwerpsysteem en deze oplost.
Je kunt een vergelijkbare test ook uitvoeren op je definitieve ontwerpen. Er bestaat altijd een kans dat verschillende functies elementen bevatten die niet in de UI-kit aanwezig zijn of er niet uitzien zoals bedoeld.
Naast het uitvoeren van interne tests zou ik je ook aanraden om je gebruikers actief bij het testproces te betrekken. Dat kan op twee manieren.
- Vraag om feedback op het ontwerp, begrijp de behoeften van je gebruikers en verbeter het actief op basis van hun opmerkingen.
- Voer gebruikerstests uit om inzicht te krijgen in de mate van consistentie in je interface.
Wat dat laatste betreft: stel je voor dat je je primaire actieknop op 10 verschillende plaatsen in je hele product hebt gebruikt. Weet je zeker dat je gebruikers de knop in al deze 10 gevallen als de primaire actie zullen herkennen?
Dat weet je niet zeker, tenzij je begeleide of onbegeleide gebruikerstests uitvoert met prototypes die met je UX-tool zijn gebouwd en ziet hoe ze ermee omgaan.
Op basis van deze tests en feedback van gebruikers kun je vervolgens datagestuurde ontwerpbeslissingen nemen.
Laat me niet nadenken
Consistentie is een van de belangrijkste elementen van een goed UI-ontwerp. Door alles eenvoudig en visueel identiek te houden, zorg je ervoor dat je gebruikers niet verdwalen in je interface. In plaats daarvan begrijpen ze intuïtief het doel van elk element op hun scherm en voeren ze hun taken eenvoudig uit.
Vergeet niet je te abonneren op onze nieuwsbrief voor meer bronnen en handleidingen over productmanagement, plus de nieuwste podcasts, interviews en andere inzichten van leiders en experts uit de sector.
