Menu
Blog

Priority guides

15 feb. 2017

Als User Experience designer (“UX’er”) ben je vaak met minimaal tien dingen tegelijk bezig en moet je snel kunnen schakelen tussen projecten. Als je nu, net als ik, alles wat je moet onthouden op post-its schrijft, kan je het overzicht van afspraken kwijtraken. Dit moet makkelijker kunnen...

Door Danielle Enzler

En dat kan natuurlijk, bijvoorbeeld door alle gemaakte afspraken met klanten gelijk toe te voegen in je wireframes, de backlog en op je checklist van die klant met punten wat je allemaal nog moet doen en niet moet vergeten. Maar eerlijk is eerlijk, wie doet dat? Ik in ieder geval niet.

Maar dat hoeft ook niet meer. Sinds afgelopen jaar werken we met priority guides. Een manier om op één plek de juiste content te bewaren, de invulling van de pagina’s weer te geven en de gemaakte afspraken met de klant gelijk toe te passen. Een communicatiemiddel voor opdrachtgever, projectleider, visual designers én developers.

Wat zijn priority guides?

Een priority guide is een uitgekleed wireframe op mobiel formaat, met alle elementen op prioriteit gesorteerd. Er staan twee kolommen naast de guide. In één kolom staan per element de elementnamen, zoals het kruimelpad of contactblok. Dit is qua communicatie prettig en geeft ook op een snelle manier weer wat het element inhoudt. In de andere kolom staat het gedrag van het element en waar het element eventueel naar toe moet linken. Hiermee houd je voor jezelf weer overzicht over de vervolgpagina’s, en geeft het inhoudelijk (voor de visual designers en de developers) snel weer wat er van een element verwacht wordt.

Priority guide (links) met uitgewerkt design (rechts)

Priority guide (links) met uitgewerkt design (rechts)

Hoe dan?

In ons werkproces wil ik overal over nadenken: responsive gedrag, transities, weergave, informatiearchitectuur en het liefst ook kleuren en typografie. Al die elementen in een website zorgen namelijk voor de totale gebruikersbeleving.

Dit kan ik echter niet alleen. Door middel van een priority guide word ik niet meer verleid om pagina’s al compleet in te gaan vullen, maar dit over te laten aan de visual designer en frontend-developer. Het is belangrijk om de guide te vullen met representatieve content, zodat echte teksten in het ontwerp gebruikt kunnen worden, en zo een goed beeld kunnen schetsen van hoe de pagina er later uit zal gaan zien. Heel kort door de bocht gezegd is een priority guide dus een versimpelde versie van een wireframe, maar dan met rijke content in plaats van placeholders.

Voor wie?

Een priority guide helpt de UX’er om overzicht te behouden en snel in het proces keuzes te maken over hoe belangrijk de content is die op een pagina komt.

Het geeft de visual designer houvast over welke informatie in welke volgorde op de pagina’s moet komen, waarbij hij geheel vrij is in de keuze van hoe het eruit moet komen te zien. Zo wordt hij niet afgeleid door een plaatje dat in het wireframe met afgeronde hoeken is gemaakt, want dat soort keuzes zitten niet in de priority guide. Daarbij is de designer vrij in de invulling van de pagina op desktop schermen, zolang de juiste volgorde maar aangehouden wordt.

Het haalt ook ruis weg bij developers wanneer elementen er in het wireframe anders uitzien dan in het visuele design, en responsive lost het ook veel vragen op. De UX’er maakt in de priority guide de mobiele variant en de visual designer maakt in het visuele design het desktop design. De frontend-developer kan hierdoor voor elk tussenliggende formaat vaak direct oplossingen bedenken met betrekking tot het gedrag van alle elementen.

Kortom, een priority guide zorgt ervoor dat:

... ik niet meer aan een volgeplakt bureau met post-its moet werken, maar dat ik het overzicht (online) houd, zodat iedere discipline er altijd bijkan;

... er geen ruis meer is tussen gemaakte afspraken, wireframes, het visuele design en de frontend-componenten; en

... er bovenal voor alle betrokkenen goede houvast is bij het schrijven van content, en het ontwerpen en bouwen van een website.