Het verhaal van gebruikerservaring (UX) en gebruikersinterface (UI) begon met de allereerste uitvindingen—toen de prehistorische mens voor het eerst een steen aan een stok bevestigde, waardoor hij de steen gemakkelijker kon hanteren (wat hem hopelijk ook een promotie opleverde). UI werd echter pas in de jaren ‘70 een samenhangende discipline en een gecodificeerd systeem bij bedrijven zoals Xerox en won aan populariteit in de jaren '90 dankzij de bredere acceptatie van de pc.
Sindsdien is de ontwikkeling van UI-design verder gegaan en is het aangepast voor compatibiliteit met de nieuwe technologieën en apparaten. Je kunt gebruikersinterface-ontwerp—vaak afgekort tot UI-ontwerp—toepassen op je e-commercewebsite door richtlijnen te volgen. Hieronder ontdek je hoe jij aan de slag kunt gaan met UI-ontwerp.
Wat is UI-ontwerp?
UI-ontwerp is het proces van het creëren van de visuele lay-out en uitstraling van software, apps, websites of iedere digitale interface waarmee de gebruiker interactie heeft. Voorbeelden van UI-componenten zijn de indeling van knoppen op een pagina, de tekst die je helpt bij het aanmaken van een account met gebruikersnaam en wachtwoord, en de iconen die je door een winkelervaring loodsen. UI-ontwerp heeft als doel om eenvoudige, esthetisch aantrekkelijke en functionele interfaces te creëren die gebruikers helpen bij het uitvoeren van taken.
Waarom is UI-ontwerp belangrijk?
Een goed ontwerp ziet er niet alleen mooi uit, het speelt een grotere rol—het kan je winstgevendheid verbeteren. Een veel geciteerd onderzoek hield tien jaar lang de prestaties bij van populaire bedrijven waar design centraal staat en er werd ontdekt dat ze het beter deden dan de 500 grootste bedrijven op de Amerikaanse aandelenbeurzen met een percentage van wel 219%. Een van de meest directe manieren om de nadruk te leggen op ontwerp is via de gebruikersinterface van je website.
UI-ontwerp versus UX-ontwerp
UI-ontwerpers werken doorgaans nauw samen met ontwerpers van gebruikerservaring, en hoewel UI en UX nauw met elkaar verbonden zijn, zijn het aparte disciplines. UI-ontwerp is gericht op de visuele en interactieve elementen van het product, zoals lay-out, typografie, kleuren, pictogrammen en knoppen en UX-ontwerp houdt zich bezig met de algehele gebruikerservaring, inclusief abstracte concepten zoals het algemene doel van het product en de mening van de gebruiker over het product. Beide concepten zijn cruciaal voor een succesvol resultaat: een degelijk UI-ontwerp ondersteunt de onderliggende UX-strategie.
Denk aan de telefoon. In het begin moest je een menselijke medewerker vertellen met wie je wilde praten. Later werd de kiesschijf geïntroduceerd, die de noodzaak voor menselijke medewerkers wegnam, maar een tijdrovend draaimechanisme toevoegde. Uiteindelijk werd het toetsenbord geïntroduceerd, met een knopindeling die de traditionele telefoon heeft overleefd en de standaard is geworden voor mobiele telefoons. Sneltoetsen, contactlijsten en spraakassistenten hebben dit proces verder gestroomlijnd.
Deze evolutie volgt de gebruikersinterface van de telefoon: de knoppen en de manieren waarop interactie plaatsvindt. De gebruikerservaring daarentegen omvat niet alleen de UI van het apparaat, maar ook de acties die het uitvoert, ons begrip van de mogelijkheden, hoe tevreden we zijn na gebruik, enzovoort. Je tevredenheid over je ervaring met het boeken van een rit via een ridesharing-app bijvoorbeeld wordt niet alleen beïnvloed door de interface van de app, maar ook door hoe eenvoudig het is om een chauffeur te vinden, de geschatte aankomsttijd en het gedrag van de chauffeur tijdens de rit.
7 belangrijke principes van UI-ontwerp
- Zorg voor een comfortabele gebruikerservaring
- Geef de gebruiker controle over de beleving
- Maak het intuïtief
- Maak het toegankelijk
- Laat gebruikers weten wanneer dingen werken…
- …maar zorg voor voor een plan indien dingen niet naar behoren werken
- Omarm herhaling
1. Zorg voor een comfortabele gebruikerservaring
De gebruiker, in dit geval, is je klant. Om hun surfervaring te verbeteren, is het essentieel om een gastvrije omgeving op je website te creëren. Hieronder ontdek je hoe je de navigatie intuïtiever en gebruiksvriendelijker kunt maken:
- Less is more. Ongeacht je smaak in kunst, staat minimalisme centraal in UI-ontwerp. Een goed ontwerp voor de gebruikersinterface vereist het verwijderen van alle elementen op een pagina die niet aan je behoeften voldoen. Opvallende lettertypen, onnodige informatie en te lange teksten zijn veel voorkomende boosdoeners.
- Zorg voor een duidelijke visuele hiërarchie. De wet van Fitt stelt dat grotere doelen gemakkelijker en sneller aan te klikken zijn dan kleinere doelen die verder weg liggen. Met andere woorden, zorg ervoor dat belangrijke elementen zoals koop-knoppen prominent en opvallend aanwezig zijn en dat belangrijke foto's en informatie de aandacht van de gebruiker trekken.
- Houd het simpel. Een geweldig UI-ontwerp maakt gebruik van eenvoudige taal, leesbare lettertypen en een vereenvoudigd kleurenpalet. Negatieve ruimte (of witruimte) op de pagina is ook wenselijk.
- Houd het consistent. UI-ontwerpelementen zoals knoppen, micro-copy, lay-outs van pagina’s en kleurenschema's moeten uniform blijven op je site. Volg algemene ontwerpnormen, zoals het plaatsen van een menu bovenaan de pagina.
- Vermijd jargon. Laat je bezoekers zich op je site op hun gemak voelen door taal te gebruiken die niet intimiderend is en die vrij is van onnodig technische termen.
Met andere woorden, je doel is een strak, aantrekkelijk ontwerp met doelgerichte visuele elementen die gebruikers de informatie geven die ze nodig hebben wanneer ze die nodig hebben.
2. Geef de gebruiker controle over de beleving
UI-ontwerp is ook een kans om je doelgroep beter te leren kennen. Met marktonderzoek, of zelfs demografische informatie die beschikbaar is via sociale media-accounts, kun je dieper ingaan op hun behoeften en interesses. Verkrijg inzichten door je in te leven in gebruikers en hun motivaties voor het bezoeken van je site in kaart te brengen. Welke knoppen en visuele informatie willen gebruikers meteen zien? Welke elementen mogen volgens meer ervaren gebruikers minder prominent aanwezig zijn? Door voorrang te geven aan je doelgroep, zorg je ervoor dat hun behoeften centraal staan in de interface.
Een andere manier om gebruikers controle te geven over de beleving, is door hen de mogelijkheid te geven om een actie ongedaan te maken zonder negatieve gevolgen. Dit maakt het verkennen van de site toegankelijker en veiliger, wetende dat ze altijd kunnen terugkeren als ze verzeild raken in het tijdrovende proces van gegevens invoeren. Zogenaamde broodkruimelpaden die gebruikers laten zien waar ze zijn geweest en waar ze naartoe gaan, helpen hen een mentale kaart van de site te vormen om zo informatie gemakkelijker te kunnen vinden. (Denk aan het pad boven de kop van dit artikel, dat als volgt wordt weergegeven: Home > Shopify Blog > UI-ontwerpprincipes.)
3. Maak het intuïtief
Goede gebruikersinterfaces zijn intuïtief, met alles precies waar de gebruiker het verwacht. Zelfs de meest ‘disruptieve’ merken gooien geen roet in het eten als het aankomt op de verwachtingen van gebruikers met hun UI-ontwerp. In plaats daarvan zou het doel moeten zijn om een naadloze gebruikerservaring te creëren.
Bekende patronen, sjablonen, lettertypes en lay-outs van pagina’s verminderen de cognitieve belasting van je bezoekers. Dit betekent ook dat je het wiel niet opnieuw hoeft uit te vinden en dat je ook geen verantwoording hoeft af te leggen voor iedere ontwerpbeslissing. De kleine menu’s met drie regels aan de bovenkant van elke app voldoen prima, omdat we weten hoe ze werken.
4. Maak het toegankelijk
Kleurenblindheid heeft invloed op ongeveer 5% van de volwassen mannelijke bevolking en 0,5% van de vrouwelijke bevolking. De Wereldgezondheidsorganisatie meldt dat 253 miljoen mensen een bepaalde vorm van blindheid of visuele beperking hebben, 466 miljoen last hebben van doofheid en gehoorverlies, en nog eens 200 miljoen intellectuele beperkingen hebben.
Een goede website ontwerpen betekent een goede website ontwerpen voor iedereen. De WCAG Web Accessibility Initiative biedt UI-ontwerpers gedetailleerde richtlijnen. Een vuistregel is om niet op één element te vertrouwen voor alle communicatie. Twee knoppen gelabeld 'Ja' en 'Nee' kunnen bijvoorbeeld ook uit een vinkje en een X bestaan. Deze knoppen groen en rood maken voegt een extra laag van communicatie toe, zodat kleurenblindheid of leesvaardigheid de gebruiker niet belemmert om op de site te navigeren.
Het vorige principe—"Maak het intuïtief"—helpt hier ook. Standaard symbolen en zinnen zijn toegankelijk voor iedereen. Iconen zoals het winkelwagentje, het euroteken en vinkjes zijn algemeen erkend en stellen alle soorten gebruikers in staat om gemakkelijk te navigeren.
5. Laat gebruikers weten wanneer dingen werken…
Gebruikers willen weten wanneer dingen werken. Overweeg om een lichte animatie toe te voegen als een knop wordt ingedrukt om de actie te bevestigen, een bedankpagina om een succesvolle transactie of ingevuld formulier te voltooien, een voortgangsbalk als een functie tijd nodig heeft om te laden, of een reeks vereisten die geleidelijk groen worden als je probeert een wachtwoord aan te maken. Al deze elementen kunnen ervoor zorgen dat je bezoekers het vertrouwen ervaren van een complete beleving.
6. …maar zorg voor een plan indien dingen niet naar behoren werken
We hebben het allemaal meegemaakt: woedend klikken op knoppen wanneer een site of software niet werkt zoals bedoeld. Een goed UI-ontwerp vangt dit op door directe en informatieve feedback te geven.
Zorg voor een plan als dingen anders verlopen dan verwacht. Goed ontworpen foutmeldingen en 404-pagina's zijn duidelijk en handig, en leiden de gebruiker naar een andere pagina. Dergelijke details zijn een indicatie voor klanten dat ze zich in een functionele, betrouwbare winkelomgeving bevinden en ze maken duidelijk: "Maak je geen zorgen. We zijn op de hoogte en we werken aan een oplossing." (Denk aan de Twitter fail whale—de vrolijke beluga die uit de golven wordt opgetild door een zwerm vogels—die verscheen als het platform een serviceonderbreking had. (De fail whale werd in de zomer van 2013 uitgefaseerd, maar blijft een nostalgisch symbool voor de beginperiode van Twitter toen het moeite had met de grote volumes aan bezoekers.)
7. Omarm herhaling
Zie het ontwerpproces als een iteratieve cyclus zonder een duidelijk eindpunt. Het gaat om het herhalen van stappen om te verbeteren. Plan een moment na de implementatie om te evalueren hoe je ontwerp het doet, voordat je de gegevens evalueert en aanpassingen doorvoert.
Herhaling kan op verschillende manieren worden omarmd; misschien betekent het dat je moet luisteren naar klantfeedback, dat je gebruikers moet inhuren om een website te testen, of dat je moet duiken in analyses om te zien welke pagina's hoge bouncepercentages hebben of waar de conversie lager is dan verwacht. Kleine wijzigingen in het ontwerp van een afrekenpagina kunnen bijvoorbeeld een lek in de verkoopfunnel verhelpen.
Alle gebruikers en alle bedrijven zijn verschillend, dus een beetje trial and error is te verwachten. Met een beetje sleutelen kan een goed UI-ontwerp je site mooier, gebruiksvriendelijker en winstgevender maken.
Veelgestelde vragen over UI-ontwerpprincipes
Wat zijn de belangrijkste principes van UI-ontwerp?
De belangrijke principes van UI-ontwerp zijn:
- Zorg voor een comfortabele gebruikerservaring
- Geef de gebruiker controle over de beleving
- Maak het duidelijk
- Maak het toegankelijk
- Laat gebruikers weten wanneer dingen werken…
- …maar zorg voor een plan indien dingen niet naar behoren werken
- Omarm herhaling
Wat zijn de fasen van UI-ontwerp?
De zes fasen van UI-ontwerp zijn analyse (bepaal de doelen en verwachtingen van de gebruiker en het bedrijf), ontwerp (compositie, wireframe en een prototype voor een daadwerkelijke gebruikersstroom op de website), ontwikkeling (zet het ontwerp om in een bruikbaar online product), implementatie (testen op bugs en publicatie), evaluatie (meet de effectiviteit van het UI-ontwerp door middel van gebruikerstests, feedback en analyses) en iteratie (gebruik de resultaten van de evaluatie om het ontwerp te verbeteren).
Wat maakt een UI-ontwerp goed?
Een goed UI-ontwerp moet effectief zijn en dat geldt met name voor de belangrijkste prestatieindicatoren (KPI's). Daarnaast moet het esthetisch aantrekkelijk, alsmede intuïtief en breed toegankelijk voor gebruikers.
