De 5 stappen in het Design Thinking Process.

De 5 stappen in het Design Thinking Process. Uitgelegd door onze Arcadian Robert.

Bovenstaande principes sluiten goed aan bij de vijf stappen van het designproces. Om de gebruiker goed te begrijpen is het een goede gewoonte om de volgende stappen toe te passen in ons werk:

Empathie: Hierbij richten we ons op het begrijpen van de gebruiker, door bijvoorbeeld gebruikersonderzoek te doen en in gesprek te gaan met de gebruiker om hun specifieke behoeften en verwachtingen in kaart te brengen.

Definiëren: Hierbij formuleren we de problemen en behoeften van de gebruiker en kaderen we deze binnen het projectdoel.

Ideëren: Hierbij brainstormen we en laten we onze creativiteit de vrije loop om tot nieuwe en innovatieve ideeën te komen die aansluiten bij de behoeften van de gebruiker. Pas op voor aannames.

Prototyping: Hierbij creëren we fysieke of digitale prototypes van onze ideeën, om een beter beeld te krijgen van hoe het product in elkaar steekt en hoe het in de praktijk zal werken.

Testen: Hierbij testen we onze prototypes en verzamelen we feedback van de gebruiker. Dit geeft ons de mogelijkheid om bij te sturen en het product verder te verfijnen, zodat het aansluit bij de specifieke behoeften van de gebruiker.

Echter, het is belangrijk om te benadrukken dat het proces niet statisch is en dat er altijd nauwe samenwerking en communicatie nodig is tussen verschillende teams en afdelingen, zodat alle betrokken partijen de kans krijgen om feedback te geven en ideeën te delen. Dit maakt het ontwerpproces dynamischer en verhoogt de kans op het maken van een gebruikersgericht product dat beantwoordt aan de wensen en eisen van de eindgebruiker.

Als Frontend Developer is het van groot belang dat je goed nadenkt wie de eindgebruiker is van het product. Jij bent immers de laatste schakel tussen de techniek en de eindgebruiker. En jouw werk zit er pas op als de voorkant van het product een goede gebruikerservaring oplevert. Uiteraard moet je daarom een goed beeld hebben wat de benodigdheden en obstakels zijn van jouw gebruiker. Wat zijn bijvoorbeeld de demografische gegevens? Waar, wanneer en tijdens welke omstandigheden wordt het product gebruikt? En ook met welke devices wordt het product gebruikt?

Door rekening te houden met deze factoren kunnen we al snel een overzichtelijk lijstje opstellen dat ons gaat helpen een betere ontwikkelaar te worden:

Maak jouw product voor iedereen. Niet alleen voor 99% van de gebruikers. Internet is een gemeengoed en zou als een mensenrecht beschouwd kunnen worden. Toegankelijkheid is daarom van groot belang om rekening mee te houden in ons werk. Gelukkig is het wiel voor ons frontend developers al uitgevonden.

Wanneer de juiste HTML5 elementen op een semantische manier worden geschreven, lost de browser al een groot deel voor ons op. Het zorgt er voor dat gebruikers makkelijker kunnen navigeren en dat er een betere toegankelijkheid ondersteuning is. Maar wij kunnen de ervaring voor onze gebruikers nog beter maken;

Maak bijvoorbeeld gebruik van alternatieve teksten voor afbeeldingen. Maar kijk ook eens naar het gebruik van de juiste focus elementen en aria-labels. Hoe gaat iemand met een screenreader gebruik maken van jouw product? Of iemand die alleen een toetsenbord kan gebruiken?

Maar controleer ook of de opmaak van jouw product wel voldoet aan de richtlijnen voor toegankelijkheid. Contrast, grootte, plaatsing en nog veel meer vormgevingen hebben effect op toegankelijkheid.

Maak bijvoorbeeld gebruik van online tools zoals Google Lighthouse of een WCAG scanner die jouw product test op toegankelijkheid en zelfs aanbevelingen doet op gevonden issues.

Hou rekening met verschillende schermen en devices. Iedereen is uniek en iedereen heeft een voorkeur als het gaat om het gebruiken van (web-) applicaties. De een doet alles met een tablet en de ander heeft nog steeds geen afscheid kunnen nemen van zijn trouwe werkpaard in een metalen kast vol lampjes.

Uiteraard is het eerste wat bij jou als developer opkomt: Responsive Design. Hoe maak ik mijn product toegankelijk op verschillende schermen. We kunnen gebruik maken van CSS media queries en ons houden aan richtlijnen die voor verschillende schermgroottes gelden. Maar toch gaat het iets verder als wij voor de gebruiker een optimale ervaring willen creëren.

Adaptive Design is de kunst om een interface aan te passen op basis van het product waar het op gebruikt wordt. Zo zitten er in een smartphone onwijs veel sensoren en instellingen welke gebruikt kunnen om logica uit te voeren in onze producten. Maar denk bijvoorbeeld ook aan het veranderen van een navigatiemenu dat niet alleen qua opmaak maar ook qua inhoud aanpast op de wensen van de mobiele gebruiker.

Maak navigatie niet complexer dan dat het al is. Navigatie-elementen zijn ontwikkeld om informatie voor gebruikers simpel en overzichtelijk te maken. Zorg er dus voor dat deze elementen op een logische en makkelijk vindbare plek staan. Dat is vaak boven en onderaan een pagina. Maar navigatie gaat verder dan een header en een footer.

Het gebruik van de juiste HTML5 elementen zorgt voor een goede semantiek van de content. Dit zorgt er voor dat gebruikers makkelijker door jouw content heen kunnen navigeren maar ook dat het gedrag van hun browser optimaal werkt op hun devices. Maar je kunt de gebruiker ook voorzien van functionaliteit die helpt bij het scrollen naar specifieke locaties in de applicatie.

Een andere mooie bijkomstigheid is dat randapparatuur vaak gebruik maakt van semantisch correcte pagina’s. Het toevoegen van de juiste tabindices, aria-labels en alternatieve teksten helpt daar enorm bij. Je hoeft dus relatief weinig te doen om een grote groep gebruikers een prettige ervaring te kunnen geven. Navigatie-elementen zijn ontwikkeld om informatie voor gebruikers simpel en overzichtelijk te maken. Zorg er dus voor dat deze elementen op een logische en makkelijk vindbare plek staan. Dat is vaak boven en onderaan een pagina. Maar navigatie gaat verder dan een header en een footer.

Het gebruik van de juiste HTML5 elementen zorgt voor een goede semantiek van de content. Dit zorgt er voor dat gebruikers makkelijker door jouw content heen kunnen navigeren maar ook dat het gedrag van hun browser optimaal werkt op hun devices. Maar je kunt de gebruiker ook voorzien van functionaliteit die helpt bij het scrollen naar specifieke locaties in de applicatie.

Een andere mooie bijkomstigheid is dat randapparatuur vaak gebruik maakt van semantisch correcte pagina’s. Het toevoegen van de juiste tabindices, aria-labels en alternatieve teksten helpt daar enorm bij. Je hoeft dus relatief weinig te doen om een grote groep gebruikers een prettige ervaring te kunnen geven.

CMD-X (cut) the crap Lange laadtijden en onnodige animaties. Er is geen makkelijkere manier om jouw gebruikers te verliezen. Wanneer de gebruiker gefrustreerd raakt dan is het aannemelijk dat hij of zij eerder geneigd is om de interactie te breken en dat willen wij natuurlijk niet.

Denk daarom goed na wat het doel is van een ‘scherm’. Zorg er voor dat het doel bereikt wordt en dat je dit zo optimaal mogelijk doet. Verwijder animaties niet. Sterker nog, ze zijn van groot belang om de gebruiker te voorzien van feedback. Micro-interacties en grootschalige veranderingen hebben een animatie nodig zodat de gebruiker begrijpt wat er gebeurt. Maar maak er geen circus van. Uiteindelijk wilt de gebruiker zo snel mogelijk tot zijn doel komen.

Custom interfaces. Wanneer je voor de echte gebruiksvriendelijke nterface wilt gaan dan zorg je er voor dat de gebruiker volledig in controle is. En wat is een betere manier om daadwerkelijke controls aan de gebruiker te tonen. Enkele opties die je zou kunnen toevoegen:

High Contrast Mode Change Font Size Remove CSS Toggle Theme switcher

Maar als dit om een reden niet de bedoeling is dan kun je altijd nog de gebruiker voorzien van indirecte controle. Hoe? Door gebruik te maken van:

CSS properties zoals: Prefers-Color-Scheme, Prefers-Contrast, Prefers-Reduce-Motion. Het gebruik van relationele eenheden zoals REM. Het gebruik maken van fallback properties zoals meerdere Font-Family properties. Een mobiele en desktop variant aanbieden.

Hierdoor hoeft er aan de interface niets veranderd te worden in de zin van dat er extra knoppen of settings toegevoegd moeten worden. Maar het zorgt er wel voor dat gebruikers een ervaring krijgen die zicht aanpast aan de voorkeuren van het device dat de gebruiker heeft gepersonaliseerd.

Feedback, Feedback & Feedback. Tijdens het ontwikkelen van een product doe je er goed aan om regelmatig feedback op te vragen bij de opdrachtgever. Maar waarom niet ook bij de eindgebruiker? Door jouw product te testen met de eindgebruiker geef je jezelf de kans om waardevolle feedback te krijgen.

Je kunt verschillende manieren topassen om te valideren of jouw product aansluit bij de gebruiker. Geef de gebruiker bijvoorbeeld een opdracht mee zoals “Deel de weersvoorspelling van woensdag met jouw vrienden” en laat de testpersoon hardop zijn gedachten uitspreken terwijl hij de opdracht uitvoert.

Alle feedback die uit de testsessies komt kun je meenemen naar de volgende iteratie. Zo leer je de gebruikers steeds beter kennen en bouw jij betere frontends voor hen!

Wanneer wij onze producten ontwikkelen met een ‘user-centred design’ aanpak dan zijn we pas echt voor de eindgebruiker bezig. Het iteratie-proces is een cyclus die je zo vaak kunt toepassen als je wilt. Hoe vaker je een iteratie-slag maakt, des te dichter ben je bij een product dat naadloos aansluit op de behoeftes van jouw gebruikers. Als Frontend developer kun jij samen met jouw multi-disciplinaire team, maar ook alleen, het verschil maken voor de eindgebruiker. Dat maakt jou de digitale held van nu en de toekomst!

Zelf wat research doen? Ik help je graag op weg met wat bronnen:

Sony’s Human Centred Design: https://www.sony.com/en/SonyInfo/humancentereddesign/

Guidelines voor A11Y https://www.w3.org/WAI/standards-guidelines/wcag/

Testmethodes: https://www.invisionapp.com/inside-design/what-is-user-research/

JavaScript & CSS best practices: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSSandJavaScript