Met de 5 lagen van UX design, ontwikkelt door Jesse James Garrett, ontwerp je in 5 stappen (van strategie naar vormgeving) hoe de gebruiker jouw product zal gaan gebruiken. Dit biedt structuur aan het ontwikkelteam, helpt je in het beperken van (onverwachte) kosten en zorgt dat jouw doel met de website en de wensen van de de gebruiker centraal staan.
Stel je voor, iemand biedt aan om jouw website of app te maken. Zou je het liefst willen dat deze persoon meteen met een aantal mooie ontwerpen op de proppen komt? Of zou je willen dat hij of zij eerst met je om tafel gaat om te bespreken wat je wil bereiken met je website en hoe je dit wil doen? De meeste mensen beginnen stiekem het liefst bij de visuele vormgeving, of in ieder geval bij het bouwen van het raamwerk van de website. We begrijpen dit goed, het is leuk om direct concreet resultaat te zien. Toch is dat niet de juiste plek om te beginnen. Wij gebruiken het ontwerpprincipe van Jesse James Garrett als leidraad in onze ontwerpprocessen. In dit artikel leggen we je uit wat dit ontwerpprincipe inhoudt en hoe het jou helpt om het ontwerpproces goed aan te pakkken.
Ontwerpproces
Koos je net voor een aantal mooie ontwerpen als eerste stap? Dan moeten we je helaas teleurstellen. De visuele vormgeving komt pas als allerlaatste aan bod in het ontwerpproces. We beginnen namelijk abstract en maken het stap voor stap concreet. In de praktijk ziet dat er als volgt uit.
- Als je het ons vraagt begint het allemaal bij de strategie. Wat wil je bereiken met jouw website, hoe wil je dat gaan doen en voor wie is dit bedoeld? Daarnaast kun je jezelf ook de vraag stellen wat de toegevoegde waarde is voor de gebruiker?
- Van daaruit kun je bepalen welke functionaliteiten je nodig hebt om dit te realiseren.
- Als het goed is zijn deze functionaliteiten en features aan elkaar verbonden, samen vormen ze het geheel van jouw website. Het is belangrijk om te zorgen dat je dit op een intuïtieve manier aan elkaar verbindt, dat vraagt extra aandacht.
- Vervolgens denken we na over bijvoorbeeld de knoppen die je hiervoor nodig hebt. Daar lees je meer over in ons artikel over interactieontwerp.
- Als allerlaatste komt pas aan bod hoe die knoppen (en de andere onderdelen van je website) eruit komen te zien.
Jesse James Garrett
Bovenstaande omschrijving komt niet zo maar uit de lucht vallen. Het is een praktijkweergave van het ontwerpprincipe van Jesse James Garrett. Al in 2000 presenteerde hij ‘The Elements of User Experience’. Na ruim 15 jaar wordt zijn model nog steeds veel gebruikt, zelfs in meer verschillende vakgebieden. De kracht van dit model zit ‘m in de vanzelfsprekend. Als je bovenstaande praktijkomschrijving hoort, klinkt het allemaal redelijk aannemelijk. We hebben daarmee ook eigenlijk de ‘5 elements’ al omschreven, maar in de afbeelding hieronder zijn ze weergegeven met hun officiële naam.
Onderaan beginnen
Bij het bouwen van een huis begin je niet met het behangen van de muren. Een goede fundering is een logische start. Dat zie je terug in dit model. We beginnen bij de onderste laag, de strategy. Dat is de fundering waarop we verder bouwen. Garrett voegt hieraan toe dat de ene laag niet zonder de ander kan. Een keuze in stategy beïnvloedt de beschikbare opties in de scope. Hij noemt dat het ‘ripple effect’. Dit betekent dat je aan het begin van het ontwerpproces druk bezig bent met de abstracte zaken helder krijgen. Dit voelt wellicht als vertraging, maar betaalt zich later ruim terug. Een voorbeeld: Als je niet duidelijk voor ogen hebt wie je wil bereiken met je website, is het moeilijk om te bepalen of jouw website aansluit bij de wensen van de gebruiker. De kans is groot dat je afdwaalt en dat, zodra je wil bijsturen, het budget in gevaar komt.
Werk slim verdelen
Hoewel de ene laag voortbouwt op de ander betekent dit niet dat je pas ‘door mag’ als de voorgaande laag compleet is afgerond. Het werkt het beste als de lagen organisch in elkaar overgaan. In de praktijk zal je merken dat je soms terug moet naar een voorgaande laag. Wanneer deze laag eigenlijk al helemaal afgerond was, levert dit dubbel werk op. Dat is nooit gewenst. Garrett geeft daarom als vuistregel dat je aan verschillende lagen tegelijkertijd kunt werken, maar je dat het werk aan de onderste laag moet afronden voordat je de eerstvolgende laag afrondt. Hij heeft dit weergegeven in onderstaande afbeelding.
Aan de slag!
Dit ontwerpprincipe is niet alleen van toepassing op het ontwikkelen van nieuwe websites of apps. Het werkt ook goed bij het verbeteren van een bestaand product. We zijn erg enthousiast over de resultaten die het oplevert. Ben je nieuwsgierig geworden? We helpen je graag om dit ontwerpprincipe toe te passen in jouw praktijk.
