Wat is UI design?

Definitie: UI design (user interface design) is het ontwerpen van de schermen en onderdelen waarmee een gebruiker een app, website of ander digitaal product bedient, zoals knoppen, formulieren, menu’s, kleuren en typografie. Het doel is een interface die er verzorgd uitziet, duidelijk laat zien wat je kunt doen en prettig reageert op wat de gebruiker doet.

In het kort

• UI staat voor user interface, in het Nederlands gebruikersinterface: alles wat je op een scherm ziet en aanraakt.
• UI design gaat over uiterlijk, opbouw en interactie van schermen. UX design gaat over de hele ervaring en de route die iemand aflegt.
• Een interface bestaat uit vaste soorten elementen: invoer, navigatie, informatie en containers.
• Goede UI rust op principes als consistentie, herkenbaarheid, feedback, visuele hiërarchie en toegankelijkheid.

Wat is UI design?

UI design is het vak dat bepaalt hoe een digitaal product eruitziet en hoe je ermee werkt. Een UI designer ontwerpt de schermen, kiest kleuren en lettertypes, bepaalt waar knoppen staan en hoe een formulier reageert als je iets verkeerd invult. Ook kleine details horen erbij: hoe een knop verandert als je erop klikt, hoe een melding verschijnt en hoe een lijst eruitziet als er nog niets in staat.

De term user interface is breder dan een scherm. CareerFoundry noemt ook spraakgestuurde interfaces, zoals Siri (2011), Google Now (2012) en Amazon Alexa (2014). In de dagelijkse praktijk gaat UI design meestal over grafische interfaces van websites, webapplicaties en mobiele apps.

Volgens UX Design Institute omvat UI design drie aspecten:

• Visueel ontwerp: kleur, typografie, iconen, ruimte en uitlijning.
• Interactie: wat er gebeurt als je klikt, typt, sleept of scrolt.
• Informatiearchitectuur: hoe informatie op een scherm en tussen schermen is georganiseerd.

Wat betekent UI?

UI is de afkorting van user interface. Het is de plek waar mens en systeem elkaar ontmoeten: de gebruiker geeft via de interface opdrachten, en het systeem laat via dezelfde interface zien wat er gebeurt. Een geldautomaat, het dashboard van een auto en een website hebben allemaal een user interface. Het woord design maakt duidelijk dat die interface bewust wordt ontworpen, in plaats van dat schermen ontstaan uit wat technisch het makkelijkst te bouwen was.

Wat is het verschil tussen UI en UX?

UI en UX worden vaak in één adem genoemd, maar ze gaan over iets anders.

Een veelgebruikte vergelijking: UX bepaalt welke kamers een huis heeft en hoe je van de ene naar de andere loopt, UI bepaalt hoe die kamers eruitzien en hoe de deurklinken aanvoelen. In kleine teams doet één persoon vaak allebei. Een mooie interface helpt niet als de route niet klopt, en een logische route voelt stroef aan als de schermen onduidelijk zijn.

Uit welke elementen bestaat een gebruikersinterface?

CareerFoundry en UX Design Institute delen de onderdelen van een interface in vier groepen in:

Naast deze bouwstenen bepalen een paar visuele keuzes het geheel: een kleurenpalet met vaste betekenissen (bijvoorbeeld rood voor fouten), een typografische schaal voor koppen en tekst, een raster voor uitlijning en een vaste maat voor witruimte.

Welke principes gelden voor goed UI design?

Verschillende bronnen gebruiken verschillende lijstjes, maar ze komen op hetzelfde neer.

1. Consistentie. Dezelfde actie ziet er overal hetzelfde uit. Een knop om op te slaan heeft op elk scherm dezelfde kleur, vorm en plek.
2. Herkenbaarheid. Gebruik patronen die mensen al kennen, zoals een winkelwagentje of een menu rechtsboven. Volgens Shopify verlaagt dat de denkinspanning van bezoekers.
3. Visuele hiërarchie. Het belangrijkste valt het eerst op. Grootte, kleur, contrast en positie sturen de aandacht.
4. Feedback. Na elke actie laat de interface zien wat er gebeurd is: opgeslagen, verzonden, bezig met laden of mislukt.
5. Fouten voorkomen en herstellen. Controleer invoer tijdens het typen, geef heldere foutmeldingen en bied een weg terug. Shopify noemt broodkruimelpaden en duidelijke 404-pagina’s als voorbeelden.
6. Controle voor de gebruiker. Mensen willen een actie kunnen annuleren of ongedaan maken.
7. Toegankelijkheid. Voldoende contrast, leesbare tekstgroottes en bediening met het toetsenbord. Breng informatie niet alleen met kleur over: Shopify raadt aan om bijvoorbeeld een vinkje en een kruisje te gebruiken naast groen en rood.
8. Efficiëntie. Veelgebruikte acties zijn snel bereikbaar. De wet van Fitts zegt dat grotere en dichterbij gelegen doelen sneller aan te klikken zijn, dus belangrijke knoppen horen groot en goed bereikbaar te zijn.

UI design voor bedrijfsapplicaties

Bij een website draait UI vaak om uitstraling en overtuigen. Bij een webapplicatie die medewerkers elke dag gebruiken, verschuift het accent. Daar gaat het om snelheid, overzicht en het voorkomen van fouten. Een paar aandachtspunten:

• Overzichten met veel gegevens. Tabellen met filters, sortering en zoeken zijn vaak het hart van een bedrijfsapplicatie. Goede UI maakt duidelijk welke kolommen ertoe doen en wat de status van een regel is.
• Lege toestanden. Wat ziet iemand op de eerste dag, als er nog niets is ingevoerd? Een korte uitleg en een duidelijke eerste actie helpen meer dan een leeg scherm.
• Statussen. Een label als concept, ingepland of afgerond vertelt in één oogopslag waar iets staat. Gebruik vaste kleuren en woorden.
• Formulieren. Vraag alleen wat nodig is, groepeer velden logisch en zet de uitleg bij het veld, niet in een aparte handleiding.
• Rollen. Een beheerder ziet andere knoppen dan een medewerker of een klant. De interface moet per rol logisch blijven.
• Mobiel en desktop. Sommige taken gebeuren op kantoor, andere onderweg. Bepaal per taak op welk scherm die vooral wordt gedaan.

Hoe verloopt het UI-ontwerpproces?

1. Context begrijpen. Wie gebruikt het product, voor welke taak en in welke omstandigheden? Vaak bestaat er al onderzoek of een UX-ontwerp.
2. Structuur vastleggen. Met wireframes leg je vast wat op welk scherm staat, zonder kleur of stijl.
3. Visuele stijl bepalen. Kleuren, typografie, iconen en de toon van teksten, afgestemd op de huisstijl.
4. Schermen uitwerken. De belangrijkste schermen worden in detail ontworpen, inclusief foutmeldingen, lege toestanden en laadmomenten.
5. Componenten en stijlgids. Terugkerende onderdelen worden vastgelegd als componenten, zodat het product consistent blijft.
6. Prototype en testen. Een klikbaar prototype laat gebruikers de route doorlopen voordat er gebouwd wordt.
7. Overdracht aan ontwikkelaars. Ontwerpen, maten en gedrag worden zo vastgelegd dat ontwikkelaars ze nauwkeurig kunnen bouwen.
8. Verbeteren na livegang. Volgens Shopify is UI-ontwerp iteratief: je stuurt bij op basis van gebruikerstests, feedback en analyses.

Welke tools gebruiken UI designers?

Figma is een veelgebruikte tool, onder meer omdat meerdere mensen tegelijk aan een ontwerp kunnen werken en omdat je er componentbibliotheken in beheert. CareerFoundry en UX Design Institute noemen daarnaast Sketch, en voor prototypes InVision. Steeds vaker wordt ook direct in code ontworpen, met componentbibliotheken die ontwikkelaars al gebruiken. AI-tools kunnen snel een eerste schermopzet maken, maar de keuzes over hiërarchie, statussen en foutafhandeling blijven werk dat aandacht vraagt.

Wat doet een UI designer?

Een UI designer ontwerpt schermen en visuele onderdelen, inclusief hun gedrag. Volgens CareerFoundry horen daar ook het maken van stijlgidsen, het kiezen van kleurenpaletten en typografie, het testen op verschillende schermformaten en de samenwerking met UX designers en ontwikkelaars bij. In kleinere projecten combineert één persoon UI, UX en soms ook de bouw. Wat telt is dat iemand verantwoordelijk is voor de samenhang van het geheel.

Veelgemaakte fouten in UI design

• Elk scherm net anders. Zonder vaste componenten groeit een applicatie uit tot een lappendeken.
• Alles even belangrijk. Als vijf knoppen dezelfde nadruk krijgen, weet niemand waar te beginnen.
• Alleen het ideale pad ontwerpen. Foutmeldingen, lege lijsten en laadmomenten worden vergeten.
• Mooi boven bruikbaar. Lichtgrijze tekst op wit oogt rustig, maar is slecht leesbaar.
• Vakjargon in de interface. Knoppen en labels moeten de taal van de gebruiker spreken, niet die van de database.

Wat betekent dit voor jouw project?

Bij een nieuw idee begin ik met twee vragen: wie gaat het gebruiken, en welke taak moet die persoon als eerste kunnen afronden? Het schermontwerp volgt daaruit. In de betaalde blauwdruk maak ik daarom schermschetsen van de afgesproken route, voordat er een regel code geschreven wordt.

Bij de rekentools van Capaciteitberekenen.nl, voor onder meer olie- en vetafscheiders en infiltratie, zie je hoe bepalend de interface is. Die tools volgen een vaste route van invoer, berekening en resultaat, met een print- of PDF-stap. De les daaruit is dat de invoer begrijpelijk moet zijn en de uitkomst bruikbaar, en dat zichtbaar blijft welke aannames gelden.

Bij Elevtr, mijn eigen software voor het voorbereiden en publiceren van LinkedIn-content, speelt een andere UI-vraag. Daar moet een gebruiker kunnen zien wat de software voorbereidt en wat er daadwerkelijk wordt gepubliceerd. Het onderscheid tussen input, voorstel, keuze en uitvoering moet in de schermen terug te zien zijn.

Vraag? Heb je een proces waarvoor je een overzichtelijke applicatie zoekt? Stuur me voor wie het is, wat er nu gebeurt en wat de eerste versie moet oplossen. Dan bepalen we samen de logische eerste stap. Meer over de aanpak lees je bij webapplicatie ontwikkelen.

Veelgestelde vragen over UI design

Wat is UI design in het kort?

UI design is het ontwerpen van de schermen en onderdelen waarmee een gebruiker een digitaal product bedient, zoals knoppen, formulieren, menu’s, kleuren en typografie. Het richt zich op hoe een interface eruitziet en hoe die reageert op wat de gebruiker doet.

Wat is het verschil tussen UI en UX design?

UI design gaat over het uiterlijk en de interactie van afzonderlijke schermen. UX design gaat over de totale ervaring en de route die een gebruiker aflegt om zijn doel te bereiken, en omvat onder meer onderzoek, structuur en testen.

Wat betekent UI?

UI is de afkorting van user interface, in het Nederlands gebruikersinterface. Het is het deel van een systeem waarmee een gebruiker opdrachten geeft en waarin het systeem laat zien wat er gebeurt.

Verwante termen

UX design · Wireframe · Mockup · Klikbaar prototype · Design system · Toegankelijkheid · Responsive design · Figma