Leestijd 11 min

Stijn Schutyser

Heb je je ooit afgevraagd waarom de ene website makkelijk te gebruiken is terwijl andere sites alleen maar frustraties opleveren? Waarom je blij bent om die ene app elke dag te gebruiken en je andere apps liever zo veel mogelijk negeert? In de meeste gevallen hebben de mensen die deze praktische en veelgebruikte producten hebben ontworpen de behoeften en eisen van de gebruiker ter harte genomen. Zoals je zult hebben gemerkt, zondigen veel websites en apps nog veel te vaak tegen de basisregel van het luisteren naar de behoeften van gebruikers. Daarom is deze praktische gids bedoeld om je te helpen deze veelgemaakte fouten in productontwerp te vermijden. Elke smartphonegebruiker weet dat zijn telefoon trager wordt of zelfs kan bevriezen als hij te veel apps tegelijk gebruikt. Eigenlijk is dit ongeveer hetzelfde wat er in het menselijk brein gebeurt. Onze hersenen gebruiken het RAM-geheugen voortdurend op elk moment van de dag, bewust of onbewust. En dit werkgeheugen heeft zijn grenzen. Het begint te vertragen als het: te veel nieuwe dingen moet leren overbelast raakt doordat het voortdurend met meerdere taken moet jongleren te lang geconcentreerd moet zijn het geheugen te vaak moet activeren in korte tijd te veel beslissingen moet nemen wordt verwacht om te gaan met frustratie en verwarring In tegenstelling tot computers hebben mensen geen extra werkgeheugen nodig. Daarom is het onze taak als UX- en UI-ontwerpers om het werkgeheugen van gebruikers te ontlasten. Dit kunnen we doen door de kortste en gemakkelijkste weg naar het gewenste resultaat te tonen. In dit opzicht is het essentieel dat we informatie en functies zo eenvoudig en methodisch mogelijk weergeven. Ga voor K.I.S.S. - Keep It Simple Stupid! Dus hoe vind je de juiste balans? Deze blog geeft vijf praktische tips om eenvoud in je ontwerpen te brengen en manieren om gebruiksvriendelijke keuzes te maken die de gebruikers ten goede komen. Zeker het lezen waard! Laat me niet nadenken Stel, je komt op de startpagina van een website die eruit ziet zoals hieronder. De informatie is niet bepaald duidelijk en niet erg gestructureerd. Als gebruiker moet je je vervolgens een weg banen door verschillende pagina's en op meerdere knoppen klikken. Bovendien word je ook uitgenodigd om een account aan te maken en je wachtwoord te onthouden. Totdat je plotseling wordt uitgelogd uit je sessie. Mep! Voel je je frustratie al opborrelen? Al deze barrières bij elkaar zorgen voor veel irritatie, vragen veel concentratie en belasten je hersenen onnodig. Erger nog, het weerhoudt je ervan te bereiken wat je wilde bereiken door die website te bezoeken. Daarom is het van vitaal belang dat we als ontwerpers cognitieve drempels vermijden in de interfaces die we bouwen, en het liefst elders in het hele klanttraject. Het boek " Don`t make me think " van Steve Krug is een absolute aanrader over dit onderwerp. We weten nu dus dat elk extra element op de pagina de complexiteit van de interface als geheel verhoogt en dus een negatief effect heeft op de manier waarop onze hersenen werken. Hier zijn vijf manieren om je ontwerpen eenvoudig en gefocust te houden . 1. Zorg dat elke pagina een duidelijke hiërarchie heeft Mensen scannen een webpagina op het zicht en lezen die pagina in de leesrichting waarmee ze het meest vertrouwd zijn. Uit eyetracking-onderzoek van NN Group blijkt dat Z-patronen of F-patronen veel voorkomen, vooral bij lezers uit de westerse wereld die van links naar rechts lezen. Gebruikers die een F-patroon gebruiken, scannen de pagina eerst in een horizontale beweging, meestal beginnend aan de bovenkant van de pagina. Daarna gaan ze een stukje naar beneden en lezen verder in een tweede horizontale beweging. Tot slot scannen deze gebruikers de linkerkant van de inhoud in een verticale beweging. Zorg er dus voor dat het belangrijkste item waar je de aandacht van de gebruiker op wilt vestigen het centrale punt op de pagina is. In het voorbeeld hieronder is de call-to-action knop het centrale aandachtspunt in de mail. Wees je ervan bewust dat gebruikers vaak niet eens de moeite nemen om de tekst te lezen, maar in plaats daarvan direct op een knop zullen klikken. Richt je dus op de daadwerkelijke call-to-action! 2. Laat me niet onthouden Weet je hoeveel wachtwoorden je online gebruikt? Ken je al deze wachtwoorden uit je hoofd? Als het antwoord ja is: gefeliciteerd, dan zou je wel eens een supergenie kunnen zijn met een ongelooflijk geheugen. Tenzij je overal hetzelfde wachtwoord gebruikt, wat ook niet bepaald de veiligste weg is. Als je antwoord op deze vragen 'nee' is, ben je net als 99% van de bevolking en voel je je lichtelijk paniekerig wanneer je wordt gevraagd om je inloggegevens in te voeren. Wachtwoorden onthouden is een dagelijkse strijd voor veel gebruikers van het moderne web. Pak de oorzaak van het probleem aan en voorkom dat gebruikers gefrustreerd raken wanneer ze worden gevraagd om acties uit te voeren waarvoor ze hun geheugen moeten aanspreken. Daarom is het automatiseren van het aanmeldproces een must om een positieve gebruikerservaring te leveren. Een manier om dit te bereiken is door middel van een login die ze vaak gebruiken, zoals bij Google-accounts. Je kunt ook een andere integratie toestaan zodat de gebruiker zijn wachtwoorden kan beheren (bijvoorbeeld LastPass). In e-commerce kun je gebruikers de mogelijkheid geven om als gast uit te checken. Dit is net zo goed een commerciële beslissing die ervoor zorgt dat gebruikers snel en gemakkelijk kunnen uitchecken en betalen voor hun winkelmandje. 3. Spreek de taal van de gebruiker Dit is een element dat vaak over het hoofd wordt gezien. Juist omdat goede teksten heel duidelijk en eenvoudig zijn, krijgen ze vaak niet de aandacht die ze verdienen. Een voorbeeld van verwarrend jargon zie je bij het inlogproces. Hoe begrijpen gebruikers 'inloggen', 'aanmelden' of 'registreren'? Besteed veel aandacht aan de woorden die je gebruikt, zodat de tekst voor zichzelf spreekt. En wees consistent in het gebruik van dezelfde woorden in de hele interface. Wat opvalt in dit voorbeeld is de eenvoudige en duidelijke tekst. Moeilijke concepten worden beschreven met duidelijke en begrijpelijke woorden, zodat elke gebruiker het begrijpt. 4. Doelen vóór opties Wat is je favoriet? Pasta, frietjes, pizza, gehaktballetjes in tomatensaus, runderstoofpot...? Een salade? Of zou je zeggen dat je meer van zoet houdt? Moeite met kiezen? In dat geval heb je waarschijnlijk last van een overdaad aan keuzes. En daarin ben je niet de enige. Als onze hersenen met te veel keuzes worden geconfronteerd, moeten ze te veel informatie tegelijkertijd verwerken, waardoor we overbelast raken. Hetzelfde geldt in de digitale wereld. Door alle opties in één keer op het scherm te tonen, weerhouden we mensen ervan hun bezoek voort te zetten. Te veel informatie op het scherm is overweldigend en kan een bottleneck veroorzaken. Onze hersenen zijn beperkt in de hoeveelheid informatie die ze tegelijkertijd kunnen verwerken. Eenvoud betekent dus ook dat je er goed aan doet om het aantal stappen of opties dat de gebruiker op het scherm te zien krijgt te beperken. Zo kan de gebruiker zich concentreren op de taak die hij op dat moment uitvoert. Geworteld in de psychologie Dit idee is gebaseerd op de Wet van Hick . Dit psychologische principe zegt dat de hoeveelheid tijd die nodig is om een beslissing te nemen, gebaseerd is op de combinatie van het aantal keuzes en de mate van complexiteit. Als de complexiteit van het scherm toeneemt, doen mensen er ook langer over om een beslissing te nemen. Als je gebruiker toch gedwongen wordt om een complex proces te doorlopen, breek het proces dan op in logische stappen of beperk het aantal opties. Dit kun je doen door alleen bepaalde delen van het proces tegelijk op het scherm te tonen. Neem bijvoorbeeld het afrekenen op een e-commerce website. In plaats van het hele proces in een lange, complexe vorm te presenteren, kunt u het opdelen in logische stappen. Vraag gebruikers eerst om hun e-mailadres te registreren en een wachtwoord aan te maken (of laat ze afrekenen als gast). Het volgende scherm kan de details van hun winkelmandje bevatten, gevolgd door een ander scherm dat de leveringsgegevens verzamelt, enz. Het verminderen van het aantal opties op het scherm maakt het betaalproces gebruiksvriendelijker, waardoor de kans toeneemt dat de gebruiker het einde van het proces bereikt en betaalt voor de artikelen in zijn winkelmandje. Dit is een goede manier om afhaakgedrag te beperken. Overdrijf het niet Dat gezegd hebbende, wees ook niet te snel met het schrappen van bepaalde opties of stappen! Het is belangrijk dat er geen elementen worden weggelaten die het primaire doel van de gebruiker om de site te bezoeken ondersteunen. Met andere woorden: houd altijd rekening met functionaliteit vanuit het perspectief van de gebruiker bij het beperken van het aantal keuzes dat hem wordt gevraagd te maken. Google bijvoorbeeld richt zich maar op één ding, en dat is het hoofddoel waarvoor de gebruiker de zoekmachine gebruikt, en dat is het uitvoeren van zoekopdrachten. Wat ook kan helpen is om de interface te testen met mensen die eerder tegen de beperkingen van hun werkgeheugen aanlopen, zoals ouderen of mensen met ADHD. Wat we willen zeggen is: probeer je ontwerpen eens uit met je oma of oma! En maak je niet te druk over het aantal keren dat een gebruiker wordt gevraagd om op een knop te klikken. Gebruikers klagen meestal niet over het aantal klikken. Waar ze wel gefrustreerd van raken is de tijd die het kost om de taak te voltooien of het juiste item te vinden. En wat gebruikers wegjaagt, is zinloos klikken. Tel de kliks niet, laat de kliks tellen! "Consumenten willen websites en apps waarmee ze slimme keuzes kunnen maken." Het belangrijkste om te onthouden is dat het onze taak is om gebruikers te helpen hun handelingen snel en gemakkelijk uit te voeren. Een deel van die taak is het wegwerken van de minst aantrekkelijke alternatieven. Wat ook helpt, is om ze verschillende basisfuncties aan te bieden, zoals zoeken, sorteren en filteren. Zo kunnen gebruikers gemakkelijk vinden wat ze zoeken. Of ga voor een gepersonaliseerde aanpak en laat ze beslissen wat er op het scherm wordt getoond. 5. Creëer visuele rust in plaats van het scherm vol te proppen Witte ruimte wordt vaak erg onderschat in interfaceontwerp, net zoals stilte tussen muzieknoten. Toch is witruimte een krachtige manier om de hoeveelheid visuele input te beperken en mensen op je pagina te houden. Websites en apps bevatten vaak veel verschillende visuele elementen. Deze omvatten woorden, tekstblokken, lijnen, pictogrammen, afbeeldingen, enzovoort. De ruimte tussen deze afzonderlijke elementen noemen we witruimte. Hoe meer witruimte tussen de elementen, hoe meer rust je interface uitstraalt en hoe minder ruis de gebruiker op het scherm te verwerken krijgt. Als ontwerper kun je hier doelgericht gebruik van maken door witruimte een essentieel onderdeel van je interface te maken. Op die manier is witruimte niet langer het lege canvas waarop je schildert, maar wordt het een belangrijk onderdeel van het schilderij . Ondanks de naam hoeft witruimte niet wit te zijn. Het kan elke kleur, textuur of patroon zijn. Het kan zelfs een achtergrondafbeelding zijn. Helaas kan witruimte ook voor heel wat problemen zorgen tussen ontwerpers en klanten. Veel klanten beschouwen witruimte namelijk als een verspilling van ruimte, die ze liever gevuld zien met meer informatie op het scherm of extra functies. En dat is jammer, want witruimte is juist een goed hulpmiddel om een gevoel van balans te creëren tussen op zichzelf staande elementen, zodat je rust en focus op je scherm kunt creëren. De realiteit is dat we als mensen gefrustreerd raken als we overspoeld worden met informatie. We zijn mensen, geen machines. Witte ruimte geeft onze geest een gevoel van rust en stelt ons in staat om te 'ademen'. Laten we ter illustratie een voorbeeld nemen waarmee we ons allemaal kunnen identificeren. Weinig mensen lezen handleidingen voor hun plezier. Daarom is het des te belangrijker voor de schrijvers van handleidingen om de aandacht van de doe-het-zelvers vast te houden! Om dat te bereiken is witruimte de ster van de show, omdat het helpt om belangrijke visuele elementen naar voren te brengen. Het helpt om ervoor te zorgen dat doe-het-zelvers snel en duidelijk weten wat ze nodig hebben om aan de slag te gaan. In plaats van een hulplijn te bellen, kunnen doe-het-zelvers hun probleem zelf oplossen. De klantenservice zal je er dankbaar voor zijn ;-) Weinig witruimte en weinig focus Meer witruimte en betere focus Ook hier is het belangrijk om de juiste balans te vinden : schrap geen elementen die bevorderlijk zijn voor het bereiken van het hoofddoel van de gebruiker. Je wilt doe-het-zelvers precies de juiste hoeveelheid informatie geven om hen in staat te stellen die kast in elkaar te zetten, zonder dat ze zich ontmoedigd voelen door de hoeveelheid informatie. Het draait allemaal om experimenteren! Conclusie Dit alles toont aan dat eenvoud en focus van het grootste belang zijn bij het ontwerpen van een interface. Alle elementen, functionaliteiten, teksten en opties moeten het hoofddoel van de gebruiker ondersteunen en moeten idealiter stap voor stap aan de gebruiker worden getoond. Veel ontwerpers hebben moeite om alle functionaliteiten en vereisten te vertalen in een eenvoudig en rechttoe rechtaan ontwerp. Ontwerpers zullen altijd hard moeten werken om een eenvoudige interface te leveren, zodat gebruikers precies weten wat ze moeten doen, zich niet vermoeid voelen na een bezoek aan de website of de website (voortijdig) verlaten. Helaas is er geen standaardrecept om dit aan te pakken. Het is voor een groot deel de context die bepaalt hoe een ontwerp het beste werkt en wat de juiste verhouding is tussen minimalisme en functionaliteit. Laat je dus niet afleiden door algemene best practices. Probeer in plaats daarvan je flows goed uit om de juiste balans te vinden voor jouw specifieke situatie en doelgroep. Benieuwd hoe je een goede test uitvoert? Lees er alles over in een van de volgende blogposts in deze serie (verschijnt binnenkort). In de volgende blogpost gaan we verder in op een aantal belangrijke basisfuncties zoals de zoekmachine, microcopy en navigatie. Blijf op de hoogte! Deze blog is de tweede van een serie van vijf blogposts die ontwerpers tips en tools uit de eerste hand geven om de gebruiksvriendelijkheid van hun digitale ontwerpen precies goed te krijgen. Lees alle artikelen in deze blogserie: Tip 1: Vul je rugzak met theorie Tip 2: Breng focus en eenvoud in interfaces (verschijnt binnenkort) Tip 3: Wees je bewust van het belang van de meest voorkomende interface-elementen (verschijnt binnenkort) Tip 4: Ontwerp interfaces voor alle gebruikers (verschijnt binnenkort) Tip 5: Begrijp uw gebruikers beter door ze erbij te betrekken (verschijnt binnenkort) {% module_block module "widget_7d968885-d535-43e3-9629-cae31c958f55" %}{% module_attribute "buttons" is_json="true" %}{% raw %}[{"appearance":{"link_color":"light","primary_color":"primary","secondary_color":"primary","tertiary_color":"light","tertiary_icon_accent_color":"dark","tertiary_text_color":"dark","variant":"primary"},"content":{"arrow":"right","icon":{"alt":null,"height":null,"loading":"disabled","size_type":null,"src":"","width":null},"tertiary_icon":{"alt":null,"height":null,"loading":"disabled","size_type":null,"src":"","width":null},"text":"Connect with us"},"target":{"link":{"no_follow":false,"open_in_new_tab":false,"rel":"","sponsored":false,"url":{"content_id":230950468795,"href":"https://25145356.hs-sites-eu1.com/en/contact","href_with_scheme":null,"type":"CONTENT"},"user_generated_content":false}},"type":"normal"}]{% endraw %}{% end_module_attribute %}{% module_attribute "child_css" is_json="true" %}{% raw %}{}{% endraw %}{% end_module_attribute %}{% module_attribute "css" is_json="true" %}{% raw %}{}{% endraw %}{% end_module_attribute %}{% module_attribute "definition_id" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "field_types" is_json="true" %}{% raw %}{"buttons":"group","styles":"group"}{% endraw %}{% end_module_attribute %}{% module_attribute "isJsModule" is_json="true" %}{% raw %}true{% endraw %}{% end_module_attribute %}{% module_attribute "label" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "module_id" is_json="true" %}{% raw %}201493994716{% endraw %}{% end_module_attribute %}{% module_attribute "path" is_json="true" %}{% raw %}"@projects/aca-group-project/aca-group-app/components/modules/ButtonGroup"{% endraw %}{% end_module_attribute %}{% module_attribute "schema_version" is_json="true" %}{% raw %}2{% endraw %}{% end_module_attribute %}{% module_attribute "smart_objects" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "smart_type" is_json="true" %}{% raw %}"NOT_SMART"{% endraw %}{% end_module_attribute %}{% module_attribute "tag" is_json="true" %}{% raw %}"module"{% endraw %}{% end_module_attribute %}{% module_attribute "type" is_json="true" %}{% raw %}"module"{% endraw %}{% end_module_attribute %}{% module_attribute "wrap_field_tag" is_json="true" %}{% raw %}"div"{% endraw %}{% end_module_attribute %}{% end_module_block %}

Leestijd 3 min

Dorien Jorissen

Een selecte groep mensen heeft tegenwoordig nog steeds de neiging om te denken dat ontwerper alleen maar "pixels duwen" is: dingen er mooi uit laten zien. Voeg wat eenhoorns bedekt met elfenstof toe en alles komt goed. Natuurlijk moeten we als ontwerpers over deze vaardigheden beschikken, maar we moeten ook kritisch kijken naar nog veel meer. Onze creaties worden gestuurd door onze klanten, moeten worden ontworpen voor gebruikers en, last but not least, worden geïmplementeerd en onderhouden door ontwikkelaars. Deze blogpost geeft mijn kijk weer op ontwerpen voor de IT-sector . Als ontwerper bij ACA Group is mijn belangrijkste doel het creëren van intuïtieve flows met duidelijke navigatiepatronen om de meest relevante inhoud weer te geven aan de gebruiker. Om een creatief proces te starten om dit te bereiken, grijp ik graag terug op een goede oude vriend: pen en papier. Schets een aantal flows, bespreek, gum, start opnieuw, ... Onderzoek ontwerppatronen, verzamel slimme oplossingen voor bepaalde problemen, vraag jezelf een dozijn what-if's. En toch, zonder al te theoretisch te worden over ontwerpprincipes, is dit echt wat je creaties tot een legitiem "goed ontwerp " maakt? Waarschijnlijk niet, maar in combinatie met de volgende richtlijnen in mijn achterhoofd kom ik steeds dichter bij een succesvolle ontwerpflow. Goed ontwerp is onzichtbaar Als een gebruiker zich niet bewust is van het ontwerp, geeft dat aan dat het al geslaagd is. In vrijwel alle gevallen is dat wanneer de gebruiker zijn doel heeft bereikt op een gemakkelijke, onbelemmerde en intuïtieve manier. Inhoud is koning, maar wat is inhoud als je er niet bij kunt? Een goed ontwerp komt idealiter zonder handleiding en hoeft zichzelf niet uit te leggen aan zijn gebruikers. Als ontwerper is het doel van de gebruiker jouw doel, maar de reis is jouw speelterrein. Goed ontwerp is richtinggevend Over doelen gesproken, een van mijn meest gestelde vragen aan klanten is "Wat willen we bereiken?". Een van de minst gestelde vragen is "Hoe willen we dat bereiken?". Dat is waar de ontwerper om de hoek komt kijken, door de behoeften van de klant te vertalen met behoud van de gebruikersvriendelijkheid. Je mag dan wel voor een bedrijf werken, maar hun gebruikers spelen een sleutelrol in hun voortbestaan. Een voorbeeld uit de praktijk: bij een bezoek aan een museum (klant) heeft een goede gids (ontwerper) altijd een interessant verhaal te vertellen, spreekt met een duidelijke, begrijpelijke stem en is waarschijnlijk zeer gepassioneerd en deskundig over de inhoud. De combinatie hiervan zal de betrokkenheid van bezoekers (gebruikers) beïnvloeden. Wees als ontwerper de juiste maar niet saaie gids om gebruikers te betrekken. Een goed ontwerp is onderhoudbaar Voortbordurend op het museumgedeelte: we zijn ons er allemaal van bewust dat hoe goed de begeleiding ook is, informatie verloren kan gaan in de vertaling. Daarom is een goede relatie tussen ontwerpers en ontwikkelaars essentieel om de intuïtiviteit en esthetiek van een project te behouden. Omdat statische ontwerpen evolueren naar dynamische omgevingen, zullen er zich onvoorziene situaties voordoen. Om dit soort situaties aan te pakken, moet je het ontwikkelteam er al vroeg bij betrekken. Toon enthousiasme en informeer ze over bepaalde ontwerpbeslissingen. Zorg voor een stijlgids en definieer de herbruikbaarheid van componenten. Praat vooral over context en het behouden van harmonie, want hun primaire doel is om content te koppelen aan het ontwerp. Het is een mooie samenwerking die vereist dat beide partijen wat dieper in elkaars dagelijkse activiteiten duiken, maar het loont zeker op de lange termijn. Zorg als ontwerper voor context en wees de evangelist voor je creaties. Conclusie Om mijn schrijfsels samen te vatten, je kunt aanvoelen dat er in zekere zin veel inleving nodig is om een geweldige gebruikerservaring te bieden. Uitleggen aan je klant dat je ontwerpt voor hun gebruikers en niet voor hen is soms een moeilijke taak. Het overdragen van je ontwerpen aan een ontwikkelaar brengt veel vertrouwen met zich mee en kan enige begeleiding nodig hebben. Maar over het algemeen is de juiste basis voor het ontwerpen van een project (naar mijn mening) gebaseerd op de volgende 3 lagen: Het doel van de gebruiker is jouw doel, maar de reis is jouw speeltuin. Wees de juiste maar niet saaie gids om gebruikers te betrekken. Zorg voor context en wees de evangelist voor je creaties.