Meer dan ooit kijken zoekmachines naar de user experience van een website. De gebruiksvriendelijkheid van een website wordt gebaseerd op twee factoren, welke nogal eens door elkaar worden gebruikt: UX en UI. Beide hebben invloed op de look & feel van een website, en zijn min of meer complementair aan elkaar. Bovendien speelt de Mobile-first Indexing van de zoekmachine ook op de achtergrond, welke doorwerkt in de user experience van een website. We bespreken de inhoud van UX en UI, en in hoe je hier als bedrijf rekening mee kunt houden.

UX en UI

De twee verschillende onderdelen die we in deze blog bespreken zijn UX (User Experience) en UI (User Interface). Daar waar UI zich vooral richt op het design, focust UX zich meer op de algehele gebruiksvriendelijkheid van een website. Daarentegen kan een sterke en doordachte UI strategie wel degelijk resulteren in een verhoogde User Experience.

UX: User experience

De User Experience is min of meer alles omvattend, en dus meer dan ‘slechts’ het design van de website. De nadruk ligt op het functioneren van de website, en dat op alle devices die gebruikt kunnen worden. Men zal evenwel met name de mobiele responsiviteit van een website als uitgangspunt nemen. Een UX designer doorloopt in dit proces een aantal stappen, om ten einde te komen tot de ultieme gebruiksvriendelijkheid van de website.

Vooronderzoek

Voordat een UX designer zich bezig houd met het optimaliseren van de gebruiksvriendelijkheid van de website, moet het eerst meer weten over de behoefte van de doelgroep. Deze inzichten worden verkregen vanuit een uitgebreid vooronderzoek. Nadat de behoeftes van de doelgroep worden verwerkt in de site, worden A/B testen uitgevoerd om te zien welke ontwerpen het meest nuttig zijn.

Wireframe

Als er een goed beeld is van de doelgroep, dan kan een wireframe worden gemaakt. Wat is het wireframe? Een wireframe is in de wereld van webdesign een visuele weergave van de structuur en functionaliteit van de website. Het is een schematische weergave van zowel de website als de bijbehorende losse pagina’s. Door dit in een vroeg stadium goed vorm te geven, zal je er in een later stadium achter komen dat je veel efficiënter kunt werken. Overigens ligt de focus binnen het wireframe vooral op content(ruimte) en functionaliteit, en nog iets minder op uiterlijke kenmerken.

Met een wireframe in het achtergrond is het voor de UX-designer makkelijker om duidelijk te communiceren met de UI-designer, waar we later in de blog op terugkomen.

Google Analytics

Om een goed inzicht te krijgen over hoe de consument zich gedraagt op de website, is Google Analytics een handige tool. Waar komen de bezoekers vandaan, hoelang blijven ze op elke pagina en welke conversies worden er behaald? Maar ook: in welk stadium haken bezoekers af? Belangrijke informatie, want zo kan je gericht sturen op het verbeteren en versterken van de website.

Ook biedt Google Analytics inzicht in de gegevens van de doelgroep: demografie, interesses en locaties. Met deze informatie kun je de gebruiksvriendelijkheid weer beter laten aansluiten op de beoogde doelgroep.

Aspecten van de User Experience

Welke aspecten zorgen er nou precies voor dat de gebruiker de ultieme beleving op een website krijgt voorgeschoteld? Het zijn die aspecten, welke de emotie van bezoekers in positieve beïnvloeden. Denk aan snelheid, responsiviteit op mobiele apparaten, structuur, concrete inhoud en óók de uitstraling. Dat laatste aspect sluit goed aan op de UI: User Interface. What you see, is what you get. We bespreken waar bedrijven met een eigen website rekening mee moeten houden om de User Experience te optimaliseren.

UI: User interface

User interface mogen we vrij vertalen naar het grafische ontwerp en de vormgeving van de website. Dit is dan ook specifieker gericht op het design van de website, waarin details steeds vaker het verschil maken. Het vindt allemaal plaats op de voorgrond en is zichtbaar voor de bezoeker. UI vertaalt hiermee dus bepaalde wensen die voortvloeien uit de behoeftes van het onderzoek uitgevoerd binnen de UX. Deze gegevens kunnen op haar beurt worden gehaald uit het wireframe dat gemaakt wordt door de UX-designer.

Elementen User Interface

UI bestaat in het algemeen uit drie verschillende elementen:

Input controls
Dit is de ruimte op de website die is gereserveerd voor knoppen, tekstvelden en dropdowns. De input controls zijn eveneens gebaseerd op onderzoek naar touchpoints en heat maps. Wat trekt de aandacht van de bezoeker, hoe verhoog je met de website het aantal conversies en wat moet je op gerichte plekken van de website vermelden?

Navigatie
Tags, zoekvelden, breadcrumbs. Factoren die ervoor zorgen dat bezoekers van je website makkelijk kunnen navigeren over de verschillende pagina’s, en daarmee eenvoudig weten te vinden waar ze voor kwamen. De intentie van de bezoeker ondersteunen door middel van een logische navigatie. Het is een belangrijk onderdeel van de gebruikerservaring op een website, als ook van de User Interface.

Informatie
Middels pop-ups, tooltips en andere type berichten word de gebruiker geïnformeerd op de website. Ook kunnen deze meldingen ervoor zorgen dat je conversiepercentage stijgt. Niet onbelangrijk!

Het verschil tussen UX en UI (en de samenhang)

Voor de gemiddelde websitebezoeker zal het lastig zijn om UX en UI te onderscheiden. Logisch, want tussenbeide is sprake van een zekere samenhang, te meer omdat UI complementair is aan een uitstekende User Experience. Het is niet onmogelijk om zowel UX als UI door één expert te laten doen, maar door de variatie aan componenten die erbij komt kijken, zal het lastig zijn om alle facetten optimaal af te stemmen. Dit vereist minimaal vier ogen, maar vaak meer. Dit alles om de ultieme gebruiksvriendelijke website te creëren, eentje die voldoet aan de richtlijnen van de zoekmachine én de wensen van de bezoeker.

De gebruiksvriendelijkheid van de website heeft weer grote invloed op de technische SEO-waarde. Denk hierbij aan je Bounce Rate Percentage, CTR (Click Trough Rate) en de gemiddelde sessieduur per pagina. Ook het aantal conversies kan hoger of lager uitvallen door wel of juist niet aandacht te besteden aan UX en UI. Tenslotte zorgen UI en UX op de juiste manier uitvoeren ervoor dat een website beter presteert in de zoekmachine.