Hoe komt de interface van Floriday.io tot stand?

Een kijkje in de bovenkamer.

Na een presentatie van de UI (user interface) krijg ik vaak de vraag hoe zoiets nou tot stand komt. Als ik het probeer uit te leggen blijft het altijd een beetje een abstract verhaal. Om een beter beeld te geven wil ik in deze update laten zien hoe het UI design proces er bij ons uitziet.

De bovenkamer

Het designproces begint letterlijk en figuurlijk in de bovenkamer. De bovenkamer is een ruimte bij ons in het pand waar aan zo ongeveer elke muur een whiteboard of stuk papier hangt. Het is een ruimte waar je prima gek kunt worden als je er te veel tijd doorbrengt. De ruimte heeft dan ook wel iets weg van een isoleercel, alleen stappen wij er vrijwillig naar binnen.

De reden dat we dit doen is omdat er in deze ruimte weinig verstoring van buitenaf is. Een belletje of een vraag van een collega is al voldoende om je volledig uit je flow te halen. Daarbij is het ideaal dat je overal ideeën achter kunt laten, en niet eerst uit moet vinden of die marker nou permanent of uitwisbaar is.

De whiteboards in de bovenkamer dienen als een ‘gedeeld brein’. Gemiddeld kun je maar 7 dingen tegelijkertijd actief houden in je kortetermijngeheugen. Dus als ik opeens bedenk wat ik ‘s avonds zal eten, kan het best zijn dat ik niet meer op één lijn zit met Jefry. Door alle ideeën direct op het bord te zetten is makkelijk om op hetzelfde punt van de gedachtengang te blijven, en om eventueel later iemand anders bij te praten.

Terug naar de interface.

De customer journey

Een sessie in de bovenkamer begint doorgaans met een korte pitch. De product owner, Jefry in dit geval, legt een scenario voor dat moet worden verwerkt in een interface. Dit is meestal een scenario om een behoefte uit de markt te vervullen.

Om een zo helder mogelijk beeld te krijgen van het scenario probeer ik veel door te vragen. Ik wil geen aannames doen, dus ik bij alles wat hij vertelt vraag ik: ‘Waarom?’. Zodra ik het idee heb dat ik een goed beeld heb, begin ik met tekenen.

Zoals in het filmpje is te zien maken we ruwe schetsen van de interface. We tekenen elke stap die een gebruiker moet doorlopen in een proces. Je noemt dit de ‘customer journey’.

User interface design

Als we het volledige proces hebben doorgelopen, maak ik foto’s van alle aantekenen en ga ik terug naar het ‘bewoonde’ deel van het kantoor.

Gewapend met alle informatie begin ik aan het ontwerpen van de interface. Bij het ontwerpen probeer ik de schetsen die we in de bovenkamer hebben gemaakt zo volledig mogelijk om te zetten naar een interface. Hiervoor maak ik gebruik van Adobe Experience Design, een pakket speciaal voor het ontwerpen van interfaces en prototypes.

Tijdens het ontwerpen komen er vaak nog allerlei vragen naar voren. Een schets op een whiteboard is vaak toch nog een beetje abstract. Jefry schuift van tijd tot tijd een uurtje aan om te sparren over deze vragen. Dit zijn in feite mini-iteraties.

Vragen die naar voren komen, gaan bijvoorbeeld over de verschillende gebruiksscenario's. Een interface is geen statisch plaatje maar een scherm dat zich op verschillende manieren kan gedragen, afhankelijk van het gedrag en device van de gebruiker.

In het geval van de catalogus:

• Hoe ziet de catalogus eruit als een gebruiker het op zijn telefoon of tablet opent en welke functionaliteiten zijn dan het belangrijkst?
• Wat gebeurt er met de catalogus als er geen artikelen zijn?
• Wat gebeurt er met de catalogus als er heel veel artikelen zijn?
• Wat gebeurt er als je meerdere artikelen selecteert?
• Hoe ziet een foutmelding eruit?

Zo zijn er nog veel meer scenario’s die allemaal moeten worden uitgedacht voordat er een ontwikkelaar mee aan de slag kan.

Check het filmpje voor een beeld bij het proces. In het filmpje zie je hoe de bovenkamer en het ontwerpproces eruit ziet.

Heb je vragen over het proces? Laat het me weten via bas@jem-id.nl