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:

Waarom moeite doen met UX-ontwerp?

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 drukwerkontwerp is het communicatiepad duidelijk: er is een afzender (bijvoorbeeld een poster of een brochure) en een ontvanger (de persoon op wie het medium is gericht). De ontvanger hoeft niets meer te doen dan de boodschap te ontvangen, te begrijpen en dan een (koop)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.

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 bruikbaarheid kan een aanzienlijke invloed hebben op je verkoopcijfers. Wat mij persoonlijk drijft is de plicht om als website-eigenaar de gebruiker niet te frustreren.

Affordanties, betekenaars en feedback

Eenvoudig gezegd beschrijft affordance wat in het algemeen mogelijk is. In het voorbeeld van een bureaubladscherm zou dit de mogelijkheid zijn om te "klikken". Omdat het nietszeggend en frustrerend zou zijn als je overal op de website willekeurig zou moeten klikken, hebben we signaalgevers (indicatoren) ingebouwd. Deze laten de gebruiker zien waar iets mogelijk is en wat. 

Een van de bekendste symbolen is een button. 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 signifiers.

De active-state van de knop toont me als feedback dat er iets gebeurde toen ik erop klikte. Alle drie de processen hangen met elkaar samen en kunnen worden gebruikt als basisvragen om je website in eerste instantie 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" hebben gedaan?

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) desktop computer, terwijl er geen hover-effect is op mobiele apparaten.

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 gaan fysiek en digitaal met elkaar om

Affordances en signifiers kunnen ook verder gaan dan de interface van je website. Je bezoeker kan beïnvloed worden door externe omstandigheden of bepaalde interacties anders gebruiken dan oorspronkelijk de bedoeling was. De terugknop van de browser is bijvoorbeeld een omstandigheid die extern is aan jouw website. 

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. Via de mobiele versie kon ik ineens de taalinstellingen niet meer vinden. Ik herinnerde me echter dat ik de website al een keer via de app had benaderd, waar alles toen standaard in het Engels werd weergegeven. Sindsdien bezoek ik de mobiele website alleen nog maar via de "app" omleidingen, 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?

De beste manier om achter dergelijk gedrag te komen is trouwens door observatie. Wie de website test is betrekkelijk 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. 

Het is belangrijk dat je de tester niet vertelt wat hij moet doen of hoe hij waar moet komen. De sleutel is het herkennen en noteren van mogelijke hindernissen en complicaties om je website gebruiksvriendelijker te maken. Hoe minder je de respondent vertelt, hoe onpartijdiger het resultaat.

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.

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

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 je terugbrengt naar de indexpagina. Of dat blauw onderstreepte tekst een link voorstelt. De navigatiebalk van een website - zoals we die tegenwoordig gebruiken - is ook zo'n verschijnsel. We verwachten ze op bepaalde plaatsen op een pagina. We weten dat de navigatiebalk dient als aanduiding van de inhoud en ons door de website leidt. Een menubalk die op mobiele apparaten verandert in een hamburger-icoontje behoeft ook geen verdere uitleg. 

Gemeenschappelijke patronen die we de afgelopen 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.

3. verborgen betekenaar

Die kun je alleen zien door een bepaalde actie uit te voeren, zoals zweven en scrollen. 

Verborgen aanduidingen hebben het voordeel dat ze de lay-out er schoon en netjes uit laten zien. Zo kunnen ze je ontwerp gestroomlijnder 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:

In de desktopversie verschijnen nieuwe calls-to-action bij het zweven. Omdat de gebruiker intuïtief op de afbeelding klikt om die aan zijn of haar verzameling toe te voegen, zal de functie hoogstwaarschijnlijk niet onopgemerkt blijven. Toch hebben de ontwerpers een plan B ontwikkeld: Als je op het plaatje klikt, krijg je een grote weergave 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.

De linker afbeelding toont het algemene overzicht van de pagina. Het menu onderaan trekt zich pas terug als de gebruiker naar boven scrolt - wat in eerste instantie ongebruikelijk lijkt, maar ook heel intuïtief is. Als we de navigatie zoeken, scrollen we meestal naar boven. 

De extra call-to-action is echter - net als bij de desktopversie - alleen beschikbaar als je daadwerkelijk op de afbeelding hebt geklikt. Daardoor zijn het geen verborgen betekenaars meer. 

Ik was echter verbaasd dat Pinterest in de twee versies twee verschillende pictogrammen gebruikt voor dezelfde interactie. Vanuit het oogpunt van bruikbaarheid lijkt me dit niet raadzaam. Als de gebruiker overstapt van de mobiele naar de desktopversie, of omgekeerd, zou het gebruik van dezelfde pictogrammen het gemakkelijker maken om de weg te vinden. Dit maakt het gebruik soepeler. De bruikbaarheid wordt dus positief verbeterd.

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 je bijvoorbeeld een brievenbus gebruikt in plaats van de bekende envelop, kan dat de bruikbaarheid van je website schaden. Waarom? De gebruiker moet stoppen en nadenken over de volgende stap. Ze moeten zich afvragen of dit symbool overeenkomt met wat ze willen bereiken.

Conclusie over UX-ontwerp en webbruikbaarheid

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.

• "Laat me niet nadenken: Een verstandige benadering van webbruikbaarheid" door Steve Krug
• "Het ontwerp van alledaagse dingen" door Donald A. Norman
• UX Pin biedt interessante e-books aan om gratis te downloaden