UX Design & Web Usability: wat zit er achter User Experience?

Sonja Hoffmann Bijgewerkt op 21.10.2020
8 Min.
UX-Design-Usability
Laatst bijgewerkt op 21.10.2020

User Experience (UX) Design, Usability, Human Interface Design en Human Centered Design - dit zijn slechts enkele van de termen waarmee we in toenemende mate worden geconfronteerd. Maar wat is dat eigenlijk? Waarom zou de gebruiksvriendelijkheid en gebruikerservaring u als webdesigner in het bijzonder moeten interesseren? En hoe kun je via UX toegevoegde waarde bereiken, zelfs als je geen UX Designer in je team hebt?

In mijn laatste artikel over harmonieus webdesign Ik heb je laten zien hoe je je eigen ontwerprichtlijnen kunt opstellen. Harmonieus webdesign wordt echter door verschillende factoren beïnvloed - daarom stel ik u vandaag de User Experience voor:

UX Design & Web Usability: wat zit er achter User Experience?

Waarom zou ik met UX omgaan?

Veel nederlandse ontwerpers die ik ken hebben een sterke achtergrond in communicatiedesign - ze komen dus uit de richting van de gedrukte media. Ze creëren uitgekiende composities die een precieze boodschap uitdragen.

In de vormgeving van het drukwerk is het communicatiekanaal duidelijk: er is een afzender (bijvoorbeeld een poster of brochure) en een ontvanger (degene waar het medium op gericht is). De ontvanger heeft hier niets meer te doen dan het bericht te ontvangen, het te begrijpen en vervolgens een (aankoop)beslissing te nemen.

Webdesign daarentegen is interactief: er wordt niet alleen een bericht verstuurd, maar er wordt ook een gesprek gevoerd. 

Gebruikerservaring: de gebruikerservaring

Sinds de begindagen van het internet hebben bedrijven te maken met de psychologische aspecten van deze interacties. In die tijd spraken ze echter niet over UX-ontwerpers maar over Human Interaction Designers - en het beroep was over het algemeen veel minder gebruikelijk dan het nu is.

Wat is User Experience?

De gebruikerservaring volgens de huidige normen begint niet bij het bezoeken van een website en stopt niet bij het verlaten ervan. Het beschrijft eerder de hele ervaring die een gebruiker heeft met het merk of product - van het eerste tot het laatste contact.

Ik wil me echter beperken tot het deel van de website dat direct verband houdt met een website: usability. De weg door ons product moet daarom zo aangenaam en naadloos mogelijk zijn. Desalniettemin moet u de begroting en de interne bedrijfsrichtlijnen niet negeren.

Een goede gebruiksvriendelijkheid kan een aanzienlijke impact hebben op uw verkoopcijfers. Wat mij persoonlijk drijft is de plicht als websitebeheerder om de gebruiker niet te frustreren.

Affordances, signifiers en feedback

Simpel gezegd beschrijft de betaalbaarheid wat er over het algemeen mogelijk is. Aan de hand van het voorbeeld van een bureaubladscherm zou dit de mogelijkheid zijn om te "klikken". Aangezien het zinloos en frustrerend zou zijn om willekeurig ergens op de website te klikken, nemen we de ondertekenaars op. Deze laten de gebruiker zien waar iets mogelijk is en wat. 

Een van de bekendste betekenaars is een knop. Het vernauwt het gebied van de interactie. We weten dat als we hier klikken, er iets gebeurt. Dit wordt meestal versterkt door zwevende effecten - of wanneer de cursor verandert in een wijsvinger als ik er overheen ga (hovere). Dit zijn ook betekenaars.

Wat zijn de veroorzakers, de ondertekenaars en de feedback?

Affordance beschrijft welke interactie over het algemeen mogelijk is. Signifiers (indicatoren) geven aan dat er een interactie mogelijk is. Feedback daarentegen zorgt ervoor dat de gebruiker weet dat zijn interactie iets teweeg heeft gebracht.

De active-state van de knop laat me als feedback zien dat er iets is gebeurd toen ik erop klikte. Alle drie de processen zijn met elkaar verweven en kunnen helpen om uw website vanaf het begin gebruiksvriendelijker te maken.

  1. Welke interacties zijn over het algemeen mogelijk?
  2. Hoe laat ik mijn gebruikers zien dat ze mogelijk zijn?
  3. Hoe weten ze dat ze het "juiste" hebben gedaan?

De mogelijkheid tot interactie wordt vaak gedefinieerd door het apparaat dat wordt gebruikt om toegang te krijgen tot de website: Op een (standaard) desktopcomputer is vegen en aanraken niet mogelijk, terwijl er geen zweefeffect is op mobiele apparaten.

Dit is precies waar rekening mee moet worden gehouden bij de keuze van de ondertekenaars. Worden links bijvoorbeeld pas duidelijk als ik er met de muis overheen ga? Dan herkent een mobiele bezoeker niet eens dat er interactie mogelijk is. 

De gebruikers communiceren fysiek en digitaal

Affordances en signifiers kunnen ook verder gaan dan de interface van uw website. Uw bezoeker kan worden beïnvloed door externe omstandigheden, of bepaalde interacties anders gebruiken dan oorspronkelijk de bedoeling was. Zo is bijvoorbeeld de terugboekknop van de browser een functie die zich buiten uw website bevindt. 

Als de bezoeker per ongeluk naar een deel van uw pagina is genavigeerd waar hij niet kan vinden wat hij zoekt, is het waarschijnlijk dat hij zal navigeren met behulp van de achterste knop in plaats van de links op uw pagina. 

Hoe interacties bewust "foutief" worden gebruikt - een voorbeeld

Ik boek vaak vluchten via een buitenlandse dienstverlener waarvan de site niet standaard in het Duits of Engels wordt weergegeven. Met behulp van de mobiele versie kon ik ineens de taalinstellingen niet meer vinden. Ik herinnerde me echter dat ik de website al had benaderd via de app, waar alles standaard in het Engels werd weergegeven. Sindsdien krijg ik alleen nog maar toegang tot de mobiele website via de "app" omweg, omdat ik dat kan onthouden en omdat ik liever twee klikken meer maak dan dat ik gefrustreerd rondklik op een mobiele pagina.

Maar u moet zich er ook van bewust zijn dat u uw gebruikers niet kunt "heropvoeden". Je kunt ze niet "ontmoedigen" van dergelijk "verkeerd" gedrag, maar je kunt wel plannen maken voor dit gedrag en er ook voor zorgen dat er genoeg alternatieven zijn.

Een ander goed voorbeeld, dat voor ons allemaal al tot hoofdpijn heeft geleid, is het - helaas nog steeds wijdverbreide - gebruik van verouderde browsers of de Internet Explorer. Sommige lay-outs worden niet zo creatief weergegeven als bijvoorbeeld in Firefox of Chrome. Ook al is dit vervelend, we moeten voor deze gebruikers op dezelfde manier ontwerpen en programmeren.

Erger dan het gebruik van de app om toegang te krijgen tot de pagina of de back-button is bijvoorbeeld wanneer de paginabezoeker het volledig opgeeft - ofwel omdat het gebruik van onze site te veel frustratie veroorzaakt, ofwel omdat er te weinig alternatieven zijn voor foutafhandeling.

Waarom bruikbaarheidstesten?

Trouwens, de beste manier om dit soort gedrag te ontdekken is door het te observeren. Wie de website test is relatief onbelangrijk. Het is niet nodig om mensen te vinden die de site achteraf ook daadwerkelijk gaan gebruiken. Want echt grove bruikbaarheidsfouten komen bij bijna elke gebruiker voor. 

Het belangrijkste is dat je de tester niet moet vertellen wat hij moet doen of hoe hij waar moet komen. Het belangrijkste is om mogelijke hindernissen en complicaties te identificeren en op te schrijven om uw website gebruiksvriendelijker te maken. Hoe minder je de testpersoon vertelt, hoe onbevooroordeelder het resultaat.

De 4 verschillende indicatoren

Wat voor signalen kunt u op uw site instellen om interacties te benadrukken? We onderscheiden vier verschillende categorieën, die ik u kort zal voorstellen.

1. expliciete betekenisgever

Expliciete betekenaars bestaan uit een prompt in tekstvorm, zoals "Klik hier". Vaak zijn deze te vinden in combinatie met andere indicatoren, zoals contactformulieren of knoppen. Deze moeten zo duidelijk en beknopt mogelijk zijn. Bovendien moet men omwille van de eenvoud terugvallen op vertrouwde formuleringen en vermeende creatieve formuleringen vermijden. 

De herkenningswaarde stelt de gebruiker in staat om met een hoge mate van zekerheid te weten welk resultaat hij kan verwachten van een interactie.

"ZIE MEER" is een voorbeeld van een eenvoudige expliciete betekenisgever.

UX Design & Web Usability: wat zit er achter User Experience?
https://www.lonelyplanet.com/portugal/lisbon

2. ontwerppatronen: patronen en conventies

Ontwerppatronen verwijzen naar terugkerende ontwerpen waar we zo aan gewend zijn geraakt dat ze geen uitleg of verdere verwijzing meer nodig hebben. Dat zijn er relatief veel. 

Iedereen moet bijvoorbeeld weten dat een klik op het logo leidt naar de indexpagina. Of die blauw onderstreepte tekst staat voor een link. De navigatiebalk van een website - zoals we die vandaag de dag gebruiken - is een ander dergelijk fenomeen. We verwachten dat het op bepaalde plaatsen op een pagina zal verschijnen. We weten dat de Nav Bar ons dient als inhoudsopgave en ons door de website leidt. Een menubalk die op mobiele apparaten verandert in een Hamburgse icoon behoeft ook geen verdere uitleg. 

Gemeenschappelijke patronen die we de afgelopen jaren hebben geleerd

Het verrassende is dat deze ontwerpen vaak internationaal geldig zijn. U kunt dit vooral goed zien als u zich wilt oriënteren op een site waarvan u de taal niet spreekt. Dus het is de moeite waard om het wiel niet opnieuw uit te vinden. Voor een betere bruikbaarheid van uw site is het aan te raden om met de vastgestelde patronen om te gaan. 

Dit is duidelijk zichtbaar in het voorbeeld van een (willekeurig gekozen) restaurant in Moskou. Hoewel ik geen Russisch spreek en ook geen cyrillisch kan lezen, zie ik meteen hoe ik door de pagina kan navigeren. Ik kan zien in welk navigatiepunt ik ben en ik ben in staat om de belangrijkste informatie (contact) er in eerste instantie uit te filteren.

UX Design & Web Usability: wat zit er achter User Experience?
https://bulka.cafe/

3. verborgen betekenissen

U kunt deze alleen zien door een bepaalde actie uit te voeren, zoals zweven en scrollen. 

Verborgen betekenaars hebben het voordeel dat ze de lay-out schoon en netjes doen lijken. Zo kunnen ze je ontwerp slanker maken. 

Ze hebben echter ook enkele nadelen. Ze worden door de gebruiker alleen gevonden als hij weet dat ze aanwezig zijn of als hij per ongeluk de activerende interactie uitvoert. Daarom zijn deze signalen niet geschikt voor belangrijke, maar hooguit voor secundaire oproepen tot actie (call-to-actions).

Bij het gebruik van verborgen betekenaars moet u er ook rekening mee houden dat het nodig kan zijn om voor elk eindapparaat een aparte oplossing te vinden.

Een goed voorbeeld is Pinterest:

pinterest

In de desktopversie verschijnen nieuwe Call-To-Actions bij het zweven. Omdat de gebruiker intuïtief op de afbeelding klikt om deze aan zijn collectie toe te voegen, zal de functie waarschijnlijk niet onopgemerkt blijven, maar de ontwerpers hebben een plan B ontwikkeld: Door te klikken op het beeld ontstaat een groot beeld waarin alle mogelijke interacties zichtbaar zijn.

Het is interessant om te zien hoe het geheel wordt opgelost in de touch screen versie. Ook hier zijn er verborgen interacties - maar dan voor verschillende doeleinden.

UX Design & Web Usability: wat zit er achter User Experience?

In de linker foto ziet u het algemene overzicht van de pagina. Het menu onderaan trekt zich pas terug als de gebruiker zich oprolt - wat op het eerste gezicht ongebruikelijk lijkt, maar ook erg intuïtief is. Als we de navigatie zoeken, scrollen we meestal naar boven. 

De extra Call-To-Actions - zoals in de desktopversie - zijn pas beschikbaar nadat u daadwerkelijk op de afbeelding hebt geklikt. Het zijn dus geen verborgen betekenaars meer. 

Wat mij echter verbaasde was dat Pinterest in beide versies twee verschillende iconen gebruikt voor dezelfde interactie. Vanuit het oogpunt van bruikbaarheid vind ik dit niet aan te bevelen. Als de gebruiker van de mobiele telefoon naar de desktopversie overschakelt, of andersom, zou het gebruik van dezelfde pictogrammen het makkelijker maken om de weg te vinden. Dit maakt het gebruik soepeler. De bruikbaarheid wordt positief verbeterd.

4. metaforische betekenissen

Een vergrootglas, dat aangeeft dat het zoekveld zich hier bevindt. De enveloppe die staat voor het versturen van berichten. De knop die aangeeft dat je er op kunt drukken. Alle principes hebben met elkaar gemeen dat we ze uit de echte wereld kennen. 

Hun gebruik in de digitale wereld heeft zich ontwikkeld tot een ontwerppatroon. Maar je moet hier wel voorzichtig zijn: Het gebruik van een metaforische indicator met een aangepast symbool kan uw gebruikers in verwarring brengen.

Als u bijvoorbeeld een mailbox gebruikt in plaats van de vertrouwde enveloppe, kan dit de gebruiksvriendelijkheid van uw website schaden. Waarom? De gebruiker moet pauzeren en nadenken over de volgende stap. Hij moet zich afvragen of dit symbool overeenkomt met wat hij wil bereiken.

UX Design & Web Usability: wat zit er achter User Experience?
Auteursrecht: https://www.iconfinder.com/icons/2296974/email_inbox_letter_mail_mailbox_icon_icon

Conclusie

Bruikbaarheid betekent niet alleen dat uw bezoekers op de een of andere manier hun weg vinden op de site. Usability betekent dat de focus ligt op de bezoeker als geheel - de "reis" door uw site moet zo naadloos mogelijk verlopen. 

Elke onderbreking - d.w.z. elke keer dat de gebruiker moet stoppen en zich moet afvragen "Wat wordt hier eigenlijk aangeboden? Wat gebeurt er als ik erop klik? Kom ik dan terug? Waar vind ik mezelf? Hoe ben ik hier gekomen? - is contraproductief.

Is het mogelijk om een pagina op te bouwen zodat er geen onderbreking is? Zeer waarschijnlijk niet. Afhankelijk van de getoonde informatie kunnen bepaalde onderbrekingen, doelgericht denken en lichte frustratie zelfs wenselijk zijn.

Het is belangrijk om de verschillende tools te kennen om ze op de juiste manier te kunnen gebruiken voor je eigen project.

Aanbevolen lectuur

Een van de beroemdste boeken over gebruiksvriendelijkheid is "Laat me niet denken!"door Steve Krug. De titel is hier het programma en daar gaat het uiteindelijk om bij elke usability-aanpak.

  • "Laat me niet denken, herzie: Een Common Sense Approach to Web Usability," Steve Krug...
  • "Het ontwerp van alledaagse dingen," Donald A. Norman
  • https://www.uxpin.com/ biedt een aantal zeer interessante e-boeken gratis te downloaden
Uw vragen over de gebruikerservaring

Welke vragen over web usability en user experience design heeft u? Welke processen kunt u aanbevelen? Gebruik de commentaarfunctie. Wilt u meer tips over webdesign en ontwikkeling? Volg ons dan op TwitterFacebook of via onze Nieuwsbrief.

Na haar studie Game Design en Creative Writing in het groene Auckland heeft Sonja Hoffmann zich gespecialiseerd in web- en app-desgign en de ontwikkeling daarvan. Haar focus ligt op gamification en het verkennen van gebruikersmotivatie en ervaring, gekoppeld aan haar passie en nieuwsgierigheid voor technologische trends.

Gerelateerde artikelen

Commentaar op dit artikel

Schrijf een opmerking

Je e-mail adres wordt niet gepubliceerd. Verplichte velden zijn met * gemarkeerd.