9 Tips voor UI Ontwerp Essentiële tips voor het ontwerpen van een UI van onze UX- en UI-experts.

Essentiële tips voor het ontwerpen van een UI

Een UI ontwerpen vraagt om een combinatie van verschillende skills. Geweldig UI-design voelt voor de gebruiker compleet natuurlijk aan – maar dat gebeurt niet toevallig. Het is het resultaat van grondig onderzoek en uitvoerig testen, waarbij zorgvuldig wordt nagedacht over een reeks cruciale elementen.

Bij het ontwerpen van een UI draait alles om het vinden van balans. Enerzijds heb je de gebruikerservaring. Het spreekt voor zich dat een gebruikersinterface moet doen waarvoor hij is ontworpen. Maar dat is niet alles. Een interface kan nog zo functioneel zijn – als hij er niet uitziet, wil niemand hem gebruiken. En er zijn genoeg producten die technisch prima werken, maar gebruikers alsnog verliezen omdat ze er gedateerd uitzien.

UI is niet alleen de visuele vertaling van UX – het draagt actief bij aan de ervaring. UI-ontwerp gaat over esthetiek, en daar zit onvermijdelijk ook merkidentiteit in verweven. Hieronder delen een aantal topexperts – waaronder Pilar Serna en Daphne Lin van Spotify, Luke Cooley van Google en ethisch ontwerp- en UX-specialist Trina Falbe – hun belangrijkste inzichten voor sterk UI-design.

01. Prioriteer UX in je UI

We begonnen ermee te zeggen dat UX niet alles is – maar het is wel de reden voor alles. We zouden eindeloos kunnen discussiëren over het verschil tussen UI en UX, maar hopelijk kunnen we het erover eens zijn dat UI in de eerste plaats in dienst moet staan van de gebruikerservaring – en dat visueel ontwerp écht de functionaliteit moet volgen.

UI-design draait om de visuele componenten van een gebruikerservaring, en kan helpen om de reis van de gebruiker zo intuïtief mogelijk te maken. Zie UX als de fundering, structuur en het skelet van een huis – en UI als het behang, de meubels en alle elementen die het aangenaam maken om door dat huis te bewegen. Dat gaat over knoppen, iconen, kleuren en de volledige look & feel van de interface. Maar om dat goed te doen, moet je nadenken over wie de interface gebruikt – en waarom.

Zoals Pilar Serna, senior design manager bij Spotify, het zegt: “Zorg ervoor dat je bij het ontwerpen niet alleen het UI-gedeelte hebt, maar ook dat de gebruikerservaring erin is verweven. En probeer daarnaast die consistentie te optimaliseren. Als je een bepaald UI-element gebruikt, [zorg dan dat] het echt ergens op slaat en een reden heeft om er te zijn.”

Ondernemer, docent en Parsons School of Design-professor Rinat Sherzer raadt aan om gebruik te maken van een design thinking-methodologie. Dat proces begint met het verkennen van de wereld waarvoor je gaat ontwerpen, dan het begrijpen van de binnenkant, en idealiter het bedenken van talloze ideeën die mogelijke oplossingen kunnen zijn – voordat je er eentje kiest om uit te werken en te testen.

“Het is een ontzettend slim raamwerk om te doorlopen bij het creëren van een nieuw product, omdat het echt beide hersenhelften aanspreekt: de rechterkant, die creatief en fantasierijk is, én de linkerkant, die analytisch is,” zegt hij.

De eerste vaardigheid hier is empathie – maar óók objectiviteit. Je moet in staat zijn om de problemen en behoeften van anderen te begrijpen zonder jezelf erin te projecteren; om te kunnen ‘kijken door hun ogen’ zonder het over jezelf te maken.

02. Gebruik teksthiërarchie in je UI-design

Als we kijken naar de losse elementen van UI-design, dan is teksthiërarchie één van de belangrijkste visuele principes. Dat geldt voor UI in elk denkbaar formaat. Al van jongs af aan – via krantenkoppen, ondertitels, hoofdstuktitels – leren mensen hoe ze de visuele ‘zwaarte’ van tekst gebruiken om te navigeren.

Op z’n simpelst: zorg ervoor dat de belangrijkste informatie het grootste is, en dat dát is wat de aandacht van de lezer als eerste grijpt. De lopende tekst bevat de details, en je kunt elementen zoals kaders of kleuraccenten gebruiken om andere belangrijke punten uit te lichten.

“Het gaat erom dat je de juiste informatie bij de juiste mensen krijgt,” zegt Jo Gulliver, group art director events bij Future. “Je moet goed nadenken over het formaat van de pagina waarop je iets overbrengt, maar de basisprincipes zijn altijd hetzelfde: korte, krachtige koppen die mensen aantrekken, meer uitleg in de strapline en dan de diepte in met bodytekst, portretten en visuals die context bieden.”

03. Gebruik de juiste iconen

De juiste iconen kiezen is een interessante uitdaging binnen UI-design. Iconen moeten simpelweg een idee, actie of activiteit overbrengen. Je kunt een icoon versimpelen of abstraheren, maar het mag nooit zó abstract zijn dat mensen het niet meer snappen – het moet intuïtief zijn. Natuurlijk kan een icoon ook meer worden dan alleen functioneel: het kan een symbool worden dat mensen herkennen als hun ingang tot een ervaring, zoals een logo.

En zelfs als een icoon in eerste instantie wat vreemd aanvoelt, raken gebruikers er meestal vanzelf vertrouwd mee na herhaald gebruik.

“Het is ongelofelijk krachtig dat een icoon een hele lap tekst kan vervangen,” zegt Fiona Yang. “Het kan iets direct herkenbaar maken en een hele pagina overzichtelijker. Het juiste icoon kiezen is dus héél belangrijk – je kunt duizenden iconen in je bibliotheek hebben, maar één verkeerde keuze en mensen weten niet waar ze moeten zijn om hulp te krijgen of een actie uit te voeren.”

John Bricker, principal en creative director bij Gensler, merkt op dat veel UI-designers hele iconenbibliotheken opbouwen om uit te putten en van te leren. De juiste iconen kiezen betekent vaak dat je je voegt naar bestaande systemen of een bredere visuele taal – en dat je inspeelt op herkenbare conventies, meer dan dat je je laat leiden door trends. Maar iconen veranderen en evolueren ook. Denk bijvoorbeeld aan toiletpictogrammen, die nu ook ruimte moeten bieden aan minder eenduidige genderrepresentaties.

David Owen Morgan, senior productontwerper bij Spotify, zegt: “Er is een beeldtaal en die kan veel sterker zijn dan een teksttaal. Je kent het cliché over een afbeelding die duizend woorden waard is. Dit is waar en zoveel van onze herkenning van objecten en taken is omdat we iets eerder hebben gezien dat vertrouwd is.”

04. Kies kleuren verstandig

Naast tekst en iconografie kan kleur ook een zeer belangrijke rol spelen bij het begeleiden van gebruikers door een UI. Daphne Lin, senior productontwerper bij Spotify, zegt: “Contrast is iets dat je heel doordacht en spaarzaam moet gebruiken. Het zal veel aandacht naar zichzelf trekken als je een item met hoog contrast ontwerpt. En daarom reserveer ik meestal hoog contrast voor mijn actiekoppen op een interface.”

Een principe dat is overgenomen uit interieurontwerp is om drie kleuren te kiezen, maar ervoor te zorgen dat de basiskleur (iets neutraals) 60% tot 80% van de pagina beslaat. De twee andere kleuren kunnen worden gebruikt om de aandacht te vestigen op zaken die ertoe doen. Er bestaan regels en richtlijnen om te voorkomen dat mensen in verwarring raken door te veel complexiteit. Dus bijvoorbeeld, als je een call-to-action-knop en een secundaire call-to-action hebt, ga je ze niet dezelfde kleur geven. Je wilt je secundaire kleur gebruiken terwijl je ervoor zorgt dat dit de knop er niet uit laat zien alsof deze is uitgeschakeld.

Kleur kan echter een probleem zijn voor toegankelijkheid. Dus hoewel kleur belangrijk is, kan het het beste worden overgelaten aan de latere fase van het ontwerp. Yuchen Zhang pleit ervoor om eerst in grijstinten te ontwerpen. “Veel mensen vertrouwen op kleuren om het verschil te maken tussen bijvoorbeeld twee verschillende knoppen of een link van een gewone tekst,” zegt ze. “Als een ontwerper die rood en groen kleurenblind is, is een ding dat ik echt, echt nuttig heb gevonden in mijn werk, dat ik over het algemeen werk in zoveel detail als mogelijk voor de definitieve versie van wireframes voor mijn app-ontwerp of webontwerp.”

Het ontwerpen van een UI aanvankelijk in zwart-wit en grijs stelt je in staat om het contrast van tonaliteit te gebruiken om een visuele hiërarchie voor navigatie te creëren. “Ik denk dat wanneer we onszelf soms een beperkt aantal hulpmiddelen geven, we eigenlijk een toegankelijker ontwerp creëren,” zegt Zhang.

05. Streef naar universeel ontwerp

Dat brengt ons bij het concept van universeel ontwerp. Het is belangrijk om te onthouden dat je mogelijk een UI ontwerpt voor gebruikers uit verschillende achtergronden en van verschillende leeftijden. Cultuur is zijn belangrijk in gebruikerservaringontwerp, en vaak betekent dat het aanpassen van je onderzoeksstrategie.

Ontwerpen voor verschillende leeftijden betekent rekening houden met visuele scherpte naast andere factoren (wat een comfortabele lettergrootte en contrastniveau is voor een 25-jarige is niet hetzelfde voor een 70-jarige). Het is ook gemakkelijk om cultureel bevooroordeeld te zijn in UI-ontwerp. Jacquelyn Iyamah, merkt op dat iconografie vervreemdend kan zijn, bijvoorbeeld genderpictogrammen voor mensen die zich niet identificeren met een enkel geslacht of genderneutraal zijn. Ondertussen kan spraakgestuurde UI moeite hebben met verschillende accenten.

Universeel ontwerp is een reeks praktijken en waarden om ervoor te zorgen dat ontwerpers denken aan alle verschillende soorten mensen die met een product zouden kunnen omgaan, of dat nu stem, tekstgrootte, kleuren, afbeeldingen of andere elementen zijn. “Je kunt niet alleen omgaan met mensen die als de standaard in de samenleving worden beschouwd,” zegt Iyamah. “Je moet met andere mensen praten en begrijpen welke uitdagingen ze tegenkomen om producten te creëren die echt universeel zijn.”

Luke Cooley, een UX-onderzoeker in het Cloud AI-team van Google, moedigt studenten aan om antropologie, sociologie en economie van macro tot micro te verkennen om hun werk te informeren. “Er is geen snelkoppeling,” zegt hij. “Het vergt constante investering in je gebruikers, maar ook begrip van hoe mensen zich gedragen in verschillende landen, hun percepties, hun houdingen. En niet alles daarvan is direct gekoppeld aan UX-onderzoek en ontwerp. Je zult dat niet altijd vinden in ontwerpboeken of onderzoeksboeken.”

06. Creëer feedbackmogelijkheden in je UI

Hopelijk test je de UI voordat deze live gaat, maar je kunt ook mogelijkheden voor verdere feedback inbouwen bij het ontwerpen van een UI. Dit kan zo eenvoudig zijn als een pop-up met een bericht in de trant van ‘hoe zou je je ervaring vandaag beoordelen?’, met een beoordeling van één tot tien. Andere opties zijn exit-triggers – bijvoorbeeld, de UI detecteert dat je muis naar de zoekbalk gaat om een site te verlaten en het zal op dat moment een bericht weergeven.

Er zijn ook scroll-triggers, die verschijnen nadat scrollen heeft aangegeven dat de gebruiker enige interesse in de pagina heeft, en triggers voor het verlaten van de winkelwagen. Er zijn ook veel mogelijkheden om gegevens te verzamelen. “Interface-elementen op de pagina hebben, of op zijn minst acties op een pagina die klikbaar zijn, zijn gebieden waar je gegevens kunt verzamelen,” zegt Lin. “Alles wat een gebruiker doet, kun je informatie over verzamelen. De harten bij Spotify zijn een gebeurtenis die we vastleggen. Begrijpen wanneer mensen op het hart klikken en waarom ze erop klikken, dat zijn allemaal gegevenspunten die we vervolgens kunnen vastleggen en betere producten kunnen creëren.”

07. Bouw branding in je UI-ontwerp

Dit is iets om te overwegen als het merk waarvoor je ontwerpt al buiten de UI die je creëert bestaat, wat vaak het geval zal zijn. Je kunt de mooiste en meest bruikbare UI ter wereld creëren, maar als het er niet uitziet en aanvoelt als onderdeel van het gevestigde merk, verliest je bedrijf, of je klant, een kans om hun identiteit te versterken en kunnen gebruikers zelfs in de war raken. En branding is niet alleen het visuele logo, kleuren en lettertypen, het is ook aanwezig in de toon van de UI.

“Merk is niet noodzakelijkerwijs alleen de visuals,” zegt auteur AJ Camara. “Het is echt het hele gevoel dat je krijgt wanneer je met het bedrijf te maken hebt. Wanneer je een website of een app of een product ontwerpt, creëer je vaak onbewust iets dat een uitbreiding van dat merk is. Daarbij moet je in gedachten houden waar dat merk voor staat, hoe dat merk wil worden vertegenwoordigd en de manier waarop dat merk met zijn gebruikers wil communiceren.”

Dit betekent het vastleggen van de persoonlijkheid van het merk wanneer je een UI ontwerpt, of het nu stil en sierlijk, minimalistisch of luid en uitbundig is. Gulliver zegt: “Het kan een echt gedenkwaardige strapline zijn, je gebruik van kleur, je gebruik van lettertype, lettergrootte. Je beschouwt al deze ontwerpelementen als op zichzelf staande dingen, maar je moet ook overwegen hoe ze interactie hebben.”

Maak de meldingen van je UI betekenisvol

De Human Interface Guidelines van Apple zijn een goed startpunt bij het overwegen van meldingen. Ze hebben een reeks normen die stellen dat een melding betekenisvol, informatief en niet repetitief moet zijn. Dat betekent in feite dat een melding die geen daadwerkelijke betekenis of zinvolle informatie voor de gebruiker bevat, niet verzonden mag worden. En een melding mag niet meer dan eens worden verzonden, wat ook iets is dat veel UI-ontwerpers vergeten (of negeren).

Trine Falbe suggereert dat in plaats van alleen te focussen op het type melding, het gebruiksscenario en de timing, het ook nuttig is om na te denken over de gebruikerswaarde van de melding. “Dat is een kolom in dat kader die mensen vaak niet opnemen,” zegt ze, “maar als je jezelf dwingt of eraan herinnert om na te denken over de gebruikerswaarde voor elk van de meldingen die je systeem daadwerkelijk wil verzenden, helpt dat je om alleen betekenisvolle meldingen te creëren.”

Vergeet niet dat geluid deel kan uitmaken van UI-ontwerp

UI wordt vaak gezien als visueel en misschien tastbaar, maar geluid kan ook een rol spelen. Geluidsontwerp is een interessante ruimte voor ontwerp en gebruikerservaringontwerp. We zijn gewend om te denken aan schermen en ervaringen die vereisen dat de gebruiker interactie heeft met knoppen en velden. Maar niet alle producten en diensten hebben een scherm nodig.

“Kijk naar de Alexas of de Google hub,” zegt Vee Rogacheva, senior productontwerper bij Future. “Of er is een heel klein scherm of helemaal geen scherm. Je moet met geluid interacteren. En het is niet alleen de interactie van jou die het apparaat vraagt om iets te doen. Het is wat het apparaat je vertelt.”

Een ander mogelijk gebruik van geluid bij het ontwerpen van een UI is om feedback te geven, bijvoorbeeld of de gebruiker het apparaat correct gebruikt of een fout heeft gemaakt. Trilling kan hier ook voor worden gebruikt. “Al deze zijn elementen van de ervaring die bewust zijn ontworpen om te motiveren, aan te moedigen en uiteindelijk een probleem of zelfs twee op te lossen,” zegt Rogacheva.