Wat is UI design?
UI design of User Interface design is het ontwerp van de vormgeving van een website of applicatie. Bij UI design bepalen we hoe een website of applicatie eruit moet zien, en welke lettertypes, kleuren, iconen etc. we zullen gebruiken.
Als we bij Lincelot websites ontwikkelen dan komt UI design na UX of user experience design. We bepalen dus eerst de structuur van de website, en dan pas de vormgeving. Net zoals je eerst de structuur van een huis bouwt, en er dan pas dakpannen op aanbrengt.
Zowel UX als UI design hebben als doel de gebruikservaring van bezoekers te optimaliseren. Het één kan niet zonder het ander. De combinatie van UX en UI design zorgt ervoor dat een website goed werkt en gebruiksvriendelijk is, én dat hij aantrekkelijk en intuïtief aanvoelt.
Waarom is UI design belangrijk?
Als de interface van je website aantrekkelijk en intuïtief is, dan verhoogt dit vrijwel altijd ook de gebruiksvriendelijkheid en leesbaarheid van je website.
Dit zorgt ervoor dat:
- je website toegankelijker is voor verschillende gebruikers;
- bezoekers langer op je website blijven (dat zijn bonuspunten voor SEO);
- bezoekers sneller en vaker tot actie overgaan (kopen, solliciteren, contacteren…);
- bezoekers je merk als professioneel ervaren.
En dat is belangrijk. Een website is het belangrijkste digitale uithangbord van je merk (zelfs wanneer je veel volgers hebt op sociale media). De gebruikservaring van bezoekers bepaalt mee het beeld van je bedrijf, en beïnvloedt de beslissing van bezoekers om bij je te kopen, te solliciteren of contact op te nemen.
Hoe zorgen we bij Lincelot voor een goed design?
Als we een website voor je ontwerpen, dan kijken we in de eerste plaats naar jouw doelen, je doelgroepen, en de producten en diensten die je aanbiedt. Op basis daarvan bepalen we de structuur van de informatie, knoppen, formulieren en navigatie-elementen op je website.
Daarna denken we na over de vormgeving. Dit kan alle kanten opgaan, afhankelijk van de doelgroepen van de website:
- De website van Seeds of Silence over mindfulness, yoga en zalige retreats onder de zon is zacht en sfeervol door het gebruik van zachte kleuren, kleurrijke foto’s, animaties, en foto’s en knoppen met afgeronde hoeken.
- De website van tweesterrenrestaurant Nuance is dan weer een sober canvas waarop de prachtige culinaire foto’s opvallen. Het full-screen menu en de zachte animaties zorgen voor een stijlvolle beleving.
Hoe dan ook zijn er een aantal UI-principes waar we nooit van afwijken.
Belangrijke tips voor een goed UI design
Een sterk contrast voor meer duidelijkheid en conversies
We zorgen altijd voor voldoende contrast of onderscheid tussen de verschillende elementen op onze websites. Hoe beter bezoekers elementen van elkaar kunnen onderscheiden, en hoe duidelijker leesbaar deze elementen zijn, hoe beter de gebruikservaring zal zijn en hoe hoger het aantal conversies op je website.
Een aantal tips:
- Kleurgebruik: Gebruik kleuren die bij elkaar passen én voldoende contrasteren. Met online tools zoals coolors.co kun je eenvoudig een mooi kleurenpallet samenstellen, of extra kleuren selecteren die passen bij de kleuren van je huisstijl. Het contrast tussen je kleuren moet ook duidelijk genoeg zijn. Via de contrastchecker kan je twee kleuren met elkaar vergelijken. Heb je een slechte contrastscore? Dan kan je de kleuren beter aanpassen om je website duidelijker te maken, vooral ook voor mensen met een visuele beperking.
- Wil je trouwens helemaal zeker zijn dat je website gebruiksvriendelijk is voor mensen met een visuele beperking? Dan kan je de WCAG (Web Content Accessibility Guidelines) hanteren. Als je deze guidelines volgt dan zal je website beter waarneembaar, bruikbaar, begrijpelijk en robuust zijn voor mensen met een visuele beperking.
- Lettertypes: Lettertypes moeten mooi én functioneel zijn. Zorg er dus voor dat je lettertypes altijd duidelijk zijn. Een mooi lettertype is leuk, maar als niemand het kan lezen zal dit het gebruiksgemak en de ervaring voor de bezoeker negatief beïnvloeden.
- Grootte van elementen: Zorg ervoor dat je knoppen, lettertypes etc. groot genoeg zijn én dat ze (net) groot genoeg weergegeven worden op verschillende toestellen. Ook op mobiel en tablets dus. Anders ga je (wellicht vooral oudere) bezoekers verliezen.
- Vormen: Kies de vormen van je website in functie van producten, diensten en doelgroepen. Harde, hoekige vormen doen het goed op ernstige en formele websites, afgeronde vormen doen het goed op meer creatieve en informele websites.
Witruimte
Witruimte is de lege ruimte rondom de elementen (tekstvlakken, knoppen, afbeeldingen…) op je website. Witruimte tussen verschillende elementen zorgt ervoor dat teksten of elementen ‘ademen’, en dat ze beter leesbaar en ‘klikbaar’ zijn.
Je kan ook witruimte gebruiken om de belangrijkste elementen op je website te benadrukken en minder belangrijke elementen minder opvallend te maken. Dit helpt de bezoekers van je website om snel de belangrijkste informatie op een pagina te vinden.
Witruimte hoeft trouwens niet ‘wit’ te zijn. Zo zie je op onze websites voor Het ConsultancyHuis en Seeds of Silence veel ruimte tussen de verschillende elementen. Deze ruimte heeft dezelfde kleur als de achtergrond, en is dus niet wit.
Uitlijning
Uitlijning is de manier waarop tekst en andere elementen op je website gepositioneerd zijn ten opzichte van elkaar. Een goede uitlijning zorgt ervoor dat bezoekers sneller de informatie vinden die ze nodig hebben. Daarnaast vergroot een goede uitlijning de leesbaarheid door rust en balans te brengen in het ontwerp.
Door elementen op een consistente manier uit te lijnen kunnen we de focus leggen op informatie die belangrijk is, maar ook focus wegnemen van zaken die minder belangrijk zijn.
Enkele tips:
- Lijn tekst zo weinig mogelijk centraal uit. We lezen bijna altijd van links naar rechts in Europa, dus een links-uitgelijnde tekst zal altijd makkelijker leesbaar zijn.
- Wil je toch centraal uitlijnen? Doe dit dan vooral met zaken die mogen opvallen: titels, knoppen, formulieren of andere zaken die in het oog mogen of moeten springen.
- Lijn intuïtief uit: Gebruik je een navigatietekst zoals ‘volgende’ en ‘vorige’? Zet ‘vorige’ links en ‘volgende’ rechts. Zo ontstaat er geen verwarring en kan de bezoeker vertrouwen op zijn ingebouwde logica.
- Lijn consistent uit: Zet je een titel centraal? Zorg dan dat alle titels centraal komen te staan. Dit zorgt voor herkenbaarheid bij de bezoeker.
Consistentie
Het gebruiken van dezelfde stijl doorheen de website zorgt ervoor dat bezoekers snel gewend raken aan hoe elementen eruitzien en wat hun functie is. Het zorgt voor herkenbaarheid en verhoogt de gebruiksvriendelijkheid.
Het consistent gebruik van stijlen heeft de volgende voordelen:
- De bezoekers van je website weten snel hoe klikbare links eruitzien.
- Het is meteen duidelijk wat knoppen zijn en wat niet.
- Je bezoekers kunnen titels en tekst sneller onderscheiden, en sneller informatie vinden.
Je koppelt daarom best dezelfde stijl aan een actie. Zijn de knoppen ‘volgende’ groen en ‘vorige’ rood op een keuzepagina? Pas dit toe in heel je website. Dit zorgt voor een intuïtieve en dus fijne gebruikservaring.
Een consistent gebruik van stijl zorgt ervoor dat bezoekers vlotter kunnen navigeren en sneller de informatie vinden die ze zoeken.
Reponsiviteit
Responsiviteit betekent: het aanpassen van je design op basis van de schermgrootte waarop je bezoekers je website te zien krijgen.
Responsiviteit is cruciaal voor een goede gebruikerservaring. Daarnaast heeft het een grote invloed op de zoekresultaten van online zoekmachines zoals Google.
Meer dan de helft van de internetgebruikers surfen via een mobiel apparaat. Daarom moet je website er niet enkel goed uitzien op een desktop, maar (vooral) ook op mobiele apparaten.
Hoe wij een design responsief maken:
- We verkleinen of halen bepaalde elementen (zoals afbeeldingen, video’s, …) weg op mobiele toestellen met verschillende schermgroottes.
- We kennen verschillende groottes toe aan elementen op specifieke apparaten: een afbeelding van 500 px hoog op desktop, moet misschien maar 300 px hoog zijn op mobiele apparaten zodat het niet heel het scherm vult maar de content ondersteunt.
- We gebruiken breekpunten. We stellen op voorhand in op welke schermbreedte er overgeschakeld moet worden naar een andere voorstelling. Per toestel (desktop, tablet of mobiel) ziet de website er dus lichtjes anders uit. Dit zorgt ervoor dat, ongeacht welk toestel de bezoeker van je website gebruikt, hij of zij de website altijd netjes te zien krijgt.
Interactie & animatie
Interactie en animatie zijn twee verschillende zaken.
Interactie verwijst naar de manier waarop bezoekers met je website communiceren. Denk hierbij aan:
- klikken op knoppen en links;
- navigeren door foto’s in een gallerij;
- scrollen en swipen op mobiele apparaten.
Interactie wordt gebruikt om bezoekers te begeleiden doorheen de website.
Het resultaat: een gebruiksvriendelijke website!
Dus, wil je graag een website die toegankelijk is, waar bezoekers graag komen én waar ze tot actie overgaan? Dan is UI design een cruciale stap in de ontwikkeling van je website. Met goed UI design zorgen we ervoor dat je website er goed uitziet, gebruiksvriendelijk is, en hopelijk ook het rendement haalt dat je voor ogen hebt.
