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

Sonja Hoffmann Laatst 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 - het zijn maar een paar termen waarmee we steeds vaker worden geconfronteerd. Maar wat is het eigenlijk? Waarom zou je als webdesigner geïnteresseerd zijn in usability en user experience? En hoe kun je toegevoegde waarde bereiken door UX, zelfs als je geen UX designer in je team hebt?

In mijn laatste artikel over harmonieus webdesign, liet ik zien hoe je je eigen ontwerprichtlijnen kunt maken. Een harmonieus webdesign wordt echter gevormd door verschillende factoren - vandaag laat ik u daarom kennismaken met de gebruikerservaring:

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

Waarom zou ik moeite doen voor UX?

Veel nederlandse ontwerpers die ik ken hebben een sterke achtergrond in communicatiedesign - ze komen dus uit de printmedia-richting. Hier creëren zij geraffineerde composities die een precieze boodschap overbrengen.

Bij het ontwerpen van drukwerk is het communicatiepad duidelijk: er is een afzender (bijvoorbeeld een affiche of een brochure) en een ontvanger (de persoon tot wie het medium is gericht). De ontvanger hoeft niets meer te doen dan de boodschap te ontvangen, te begrijpen en vervolgens een (aankoop)beslissing te nemen.

Webdesign daarentegen is interactief: het gaat niet alleen om het verzenden van een boodschap, maar ook om het tot stand brengen van een gesprek. 

Gebruikerservaring: de gebruikerservaring

Sinds de begindagen van het internet kijken bedrijven naar de psychologische aspecten van deze interacties. Destijds sprak men echter niet van UX designers, maar van human interaction designers - en het beroep was over het algemeen veel minder gangbaar dan vandaag.

Wat is gebruikerservaring?

Gebruikerservaring begint volgens de huidige normen niet wanneer u een website bezoekt en eindigt niet wanneer u de website verlaat. Het beschrijft eerder de hele ervaring die een gebruiker met het merk of product heeft - van het eerste tot het laatste contact.

Ik wil mij echter beperken tot het deelgebied dat rechtstreeks verband houdt met een website: bruikbaarheid. De weg door ons product moet daarom zo aangenaam en naadloos mogelijk zijn. U mag echter niet voorbijgaan aan het budget en de interne bedrijfsspecificaties.

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

Affordanties, betekenissen en feedback

Eenvoudig gezegd, Affordance beschrijft wat in het algemeen mogelijk is. Als we een desktopscherm als voorbeeld nemen, zou dit de mogelijkheid zijn om te "klikken". Omdat het nietszeggend en frustrerend zou zijn als u overal op de website willekeurig zou moeten klikken, hebben wij signaalgevers (indicators) ingebouwd. Deze laten de gebruiker zien waar iets mogelijk is en wat. 

Een van de bekendste symbolen is een knoop. Het begrenst het interactiegebied. We weten dat als we hier klikken, er iets zal gebeuren. Dit wordt meestal versterkt door hover-effecten - of wanneer de cursor in een wijsvinger verandert als ik er met de muis overheen ga. Dit zijn ook betekenaars.

Wat zijn Affordances, Signifiers en Feedback?

Affordance beschrijft welke interactie in het algemeen mogelijk is. Signifiers geven aan dat 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 toont mij als feedback dat er iets gebeurde toen ik erop klikte. Alle drie processen lopen in elkaar over en kunnen helpen als basisvragen om uw website in de eerste plaats gebruiksvriendelijker te maken.

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

De mogelijkheid tot interactie wordt vaak bepaald door het apparaat dat wordt gebruikt om toegang te krijgen tot de website: Swipen en aanraken is niet mogelijk op een (standaard) desktopcomputer, terwijl er geen hover-effect is op mobiele toestellen.

Dit is precies wat in overweging moet worden genomen bij de keuze van de betekenaars. Bijvoorbeeld, zijn links alleen duidelijk als ik er met de muis overheen ga? Dan herkent een mobiele bezoeker niet dat er überhaupt een interactie mogelijk is. 

Gebruikers interageren fysiek en digitaal

Affordances en signifiers kunnen ook verder gaan dan uw website-interface. Uw bezoeker kan worden beïnvloed door externe omstandigheden, of bepaalde interacties anders gebruiken dan oorspronkelijk de bedoeling was. De terug-knop van de browser is bijvoorbeeld een omstandigheid die buiten uw website staat. 

Als de bezoeker per ongeluk naar een deel van uw site is genavigeerd waar hij niet kan vinden wat hij zoekt, is de kans groot dat hij via de terug-knop navigeert - in plaats van via de links op uw site. 

Hoe interacties opzettelijk "verkeerd" worden gebruikt - een voorbeeld

Ik boek vaak vluchten via een buitenlandse dienstverlener waarvan de pagina standaard noch in het Duits, noch in het Engels wordt weergegeven. Ik kon opeens de taalinstellingen niet meer vinden via de mobiele versie. Ik herinnerde me echter dat ik de website al had bezocht via de app, waar alles toen standaard in het Engels werd weergegeven. Sindsdien ga ik alleen nog maar naar de mobiele website via de "app"-omweg, omdat ik me dat kan herinneren en omdat ik liever nog twee keer klik dan gefrustreerd rond te klikken op een mobiele pagina.

U moet zich er ook van bewust zijn dat u uw gebruikers niet kunt "heropvoeden". Je kunt hen niet beletten de dingen verkeerd te doen, maar je kunt wel op dit gedrag anticiperen en ervoor zorgen dat er genoeg alternatieven zijn.

Een ander goed voorbeeld dat ons allen hoofdpijn heeft bezorgd, is het - helaas nog steeds wijdverbreide - gebruik van verouderde browsers of Internet Explorer. Sommige lay-outs worden niet zo creatief waardevol weergegeven als in Firefox of Chrome, bijvoorbeeld. Ook al is dit vervelend, wij moeten net zo goed voor deze gebruikers ontwerpen en programmeren.

Want erger dan bijvoorbeeld de site te bezoeken via de app, of de terugknop te gebruiken, is wanneer de sitebezoeker het helemaal opgeeft - hetzij omdat het gebruik van onze site te veel frustratie oplevert, hetzij omdat er te weinig alternatieven zijn om fouten op te lossen.

Waarom bruikbaarheidstesten?

Trouwens, de beste manier om achter dergelijk gedrag te komen is door observatie. Wie de website test is relatief onbelangrijk. Het is niet nodig om achteraf mensen te vinden die de site daadwerkelijk gebruiken. Want echt grove bruikbaarheidsfouten komen bij bijna elke gebruiker voor. 

Belangrijk is dat u de tester niet vertelt wat hij moet doen of hoe hij waar moet komen. Het komt erop aan mogelijke hindernissen en complicaties te identificeren en te noteren om uw website gebruiksvriendelijker te maken. Hoe minder u de respondent vertelt, hoe onbevooroordeelder de resultaten.

De 4 verschillende indicatoren

Welke signalen kunt u op uw pagina instellen om interacties te markeren? Wij onderscheiden vier verschillende categorieën, die ik kort aan u zal voorstellen.

1. expliciete betekenaar

Expliciete signifiers bestaan uit een prompt in tekstvorm, zoals "klik hier". U vindt deze vaak in combinatie met andere indicatoren, zoals contactformulieren of knoppen. Deze moeten zo duidelijk en beknopt mogelijk zijn. Bovendien moet u, omwille van de eenvoud, terugvallen op vertrouwde formuleringen en zogenaamd creatieve formuleringen vermijden. 

Dankzij de herkenningswaarde weet de gebruiker met een redelijke mate van zekerheid welk resultaat hij van een interactie kan verwachten.

"MORE ZIEN" is een voorbeeld van een eenvoudige expliciete betekenaar.

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

2. ontwerppatronen: patronen en conventies

Ontwerppatronen verwijzen naar steeds terugkerende ontwerpen waaraan we zo gewend zijn geraakt dat ze niet langer uitleg of verdere verwijzing behoeven. Er zijn er relatief veel van. 

Iedereen moet bijvoorbeeld weten dat klikken op het logo terugleidt naar de indexpagina. Of dat blauw onderstreepte tekst een link voorstelt. De navigatiebalk van een website - zoals wij die tegenwoordig gebruiken - is ook zo'n fenomeen. We verwachten dat ze op bepaalde plaatsen op een pagina staan. We weten dat de navigatiebalk dient als onze gids voor de inhoud, die ons door de website leidt. Een menubalk die op mobiele apparaten in een hamburgerpictogram verandert, behoeft ook geen verdere uitleg. 

Gemeenschappelijke patronen die we de laatste jaren hebben geleerd

Het verrassende is dat deze patronen vaak een internationale geldigheid hebben. Dit is vooral goed te zien als u zich wilt oriënteren op een site waarvan u de taal niet machtig bent. Dus het is de moeite waard om het wiel hier niet opnieuw uit te vinden. In plaats daarvan is het aan te bevelen voor een betere bruikbaarheid van uw site, als u zich houdt aan de gevestigde patronen. 

Dit is goed te zien op het voorbeeld van een pagina van een (willekeurig gekozen) restaurant in Moskou. Hoewel ik geen Russisch spreek en ook geen cyrillisch kan lezen, zie ik onmiddellijk hoe ik door de pagina kan navigeren. Ik kan zien in welk navigatiepunt ik me bevind en ik kan de belangrijkste informatie (contact) er meteen uitfilteren.

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

3. verborgen betekenaar

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

Verborgen aanduidingen hebben het voordeel dat zij de lay-out er schoon en netjes doen uitzien. Zo kunnen ze uw ontwerp meer gestroomlijnd maken. 

Zij hebben echter ook enkele nadelen. Zij worden alleen door de gebruiker gevonden als hij weet dat zij aanwezig zijn of als hij per ongeluk de triggerende interactie uitvoert. Daarom zijn deze signalen niet geschikt voor belangrijke, maar hooguit voor secundaire oproepen tot actie.

Bovendien moet u er bij het gebruik van verborgen aanduidingen rekening mee houden dat voor elk eindapparaat een afzonderlijke oplossing moet worden gevonden.

Pinterest geeft een goed voorbeeld:

pinterest

In de desktopversie verschijnen nieuwe call-to-actions als je er met je muis overheen gaat. Aangezien de gebruiker intuïtief op de afbeelding klikt om deze aan zijn verzameling toe te voegen, zal de functie hoogstwaarschijnlijk niet onopgemerkt blijven.Niettemin hebben de ontwerpers een Plan B ontwikkeld: Door te klikken op de afbeelding verschijnt een groot beeld waarin alle mogelijke interacties zichtbaar zijn.

Het is interessant hoe de hele zaak is opgelost in de touch-screen variant. Ook hier zijn er verborgen interacties - maar voor andere doeleinden.

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

De linker afbeelding toont het algemene overzicht van de pagina. Het menu onderaan wordt pas ingetrokken als de gebruiker omhoog scrollt - 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 zijn echter - net als bij de desktopversie - alleen beschikbaar wanneer u daadwerkelijk op de afbeelding hebt geklikt. Het zijn dus niet langer verborgen betekenaars. 

Ik was echter verbaasd dat Pinterest twee verschillende pictogrammen gebruikt voor dezelfde interactie in de twee versies. Vanuit een bruikbaarheidsperspectief, denk ik niet dat dit aan te raden is. Als de gebruiker overschakelt van de mobiele op de desktopversie, of omgekeerd, zou het gebruik van dezelfde pictogrammen leiden tot een snellere oriëntatie. Dit maakt het gebruik soepeler. De bruikbaarheid wordt dus positief opgewaardeerd.

4. metaforische betekenaar

Een vergrootglas, dat aangeeft dat het zoekveld zich hier bevindt. De enveloppe die de verzending van berichten weergeeft. De knop die aangeeft dat je hem kunt indrukken. Alle principes hebben gemeen dat we ze uit de echte wereld kennen. 

Hun nut in de digitale wereld is een ontwerppatroon geworden. Je moet hier wel voorzichtig mee zijn: Als u een metaforische indicator gebruikt met een gewijzigd symbool, kan dat uw gebruikers in verwarring brengen.

Als u bijvoorbeeld een brievenbus gebruikt in plaats van de vertrouwde enveloppe, kan dit de bruikbaarheid van uw website schaden. Waarom? De gebruiker moet stoppen 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?
Copyright: 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 door de site vinden. Gebruiksvriendelijkheid betekent eerder dat de nadruk hier holistisch op de bezoeker wordt gelegd - de "reis" door uw site moet zo naadloos mogelijk verlopen. 

Elke onderbreking - dat wil zeggen, elke keer dat de gebruiker moet pauzeren en zich moet afvragen "Wat wordt hier eigenlijk aangeboden? Wat gebeurt er als ik er op klik? Zal ik nog eens terugkomen? Waar ben ik? Hoe ben ik hier gekomen? - is in dit opzicht contraproductief.

Is het mogelijk om een pagina zo op te bouwen dat er geen onderbreking is? Waarschijnlijk niet. Afhankelijk van de gepresenteerde informatie kunnen enkele onderbrekingen, gerichte gedachten en lichte frustratie zelfs wenselijk zijn.

Het is belangrijk de verschillende gereedschappen te kennen om ze te kunnen gebruiken voor uw eigen project.

Aanbevolen lectuur

Een van de bekendste boeken over usability is"Don't make me think!" van Steve Krug. De titel zegt het al en is uiteindelijk waar het bij elke usability-aanpak om draait.

  • "Don't Make Me Think, Revisited: A 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-books om gratis te downloaden
Jouw vragen over de gebruikerservaring

Welke vragen heeft u over web usability en user experience design? Welke processen kunt u aanbevelen? Voel je vrij om de commentaarfunctie te gebruiken. Wilt u meer tips over webontwerp en -ontwikkeling? Volg ons dan op Twitter, Facebook 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.

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.