Wat is een interactief prototype?

In het boek 'Design Engineering Handbook' wordt een mooie omschrijving van een interactief prototype gegeven:

"Finally, there is the interactive prototype, which simulates the end experience. Interactive prototypes are built in code and incorporate mock or production data. Their purpose is to solidify the interaction design, validate solutions, and uncover any edge cases that the other methods might not catch."

Interactieve prototypes worden gebouwd in code en gebruiken een mix van dummy content en echte content. Een interactief prototype probeert zo veel mogelijk op het daadwerkelijke eindproduct te lijken. Dat betekent dat het technisch nog niet hoeft te werken, maar dat het voelt alsof de gebruiker al test met het eindproduct. Bijvoorbeeld dat het wel mogelijk is om een formulier in te vullen, maar dat de resultaten nog niet worden opgeslagen in een database.

De voordelen van een interactief prototype

“A prototype is worth a thousand meetings.”

Zo gaat het gezegde van IDEO, het wereldwijd gerenommeerde design en adviesbureau. Elkaar in tekst, of zelfs met plaatjes, uitleggen hoe iets moet werken is lastig. Er zijn vaak spraakverwarringen, wat bedoelt iemand bijvoorbeeld met header, hero, een lijstje of een menu? En wat gebeurt er precies als een gebruiker ergens op klikt? Veel van deze onzekerheden worden weggenomen als er een interactief prototype gemaakt wordt. Het is dan direct zichtbaar hoe (en of) iets werkt.

Bij IDEO zorgen ze er daarom voor dat ze zo snel mogelijk in de prototype fase belanden. Zoals Scott Belsky omschrijft in zijn boek 'Making Ideas Happen':

"When team members have an idea for how something might look or function, they’ll simply have a prototype built and start tinkering—despite what stage of the design process they are in. IDEO’s rapid prototyping practices are part of a clever strategy to overcome some of the biggest boundaries to making ideas happen."

Door in een vroeg stadium beginnen prototypes te bouwen overkom je bepaalde blokkades waar je lang over kunt discussiëren. Door snel en iteratief prototypes te ontwerpen en bouwen ondervang je in een vroeg stadium problemen die op dat punt in het proces makkelijker, en goedkoper, op te lossen zijn.

Dit onderschrijft ook David Heimeier Hansson, mede oprichter van het succesvolle bedrijf 37 Signals:

"But we don’t do the bulk of our design work with or in Figma when developing Basecamp or HEY for the web. That’s all done directly in HTML and CSS, as it should be. Because no matter how good Figma is, it’s an intermediary abstraction, like Photoshop before it. If you’re working with the web, you’ll work faster without such an abstraction layer in the design process filtering the collaboration between programmer and designer."

Figma (of Sketch, Adobe XD of Photoshop) is handig als ontwerptool om schetsen mee te maken. Maar uiteindelijk is het een extra abstractielaag tussen de gebruiker en het eindproduct. Robin Rendle houdt eenzelfde betoog wanneer hij aangeeft dat Figma niet je uiteindelijke product is en het daarom minder belangrijk is hoe iets er in Figma uitziet:

"But Figma will always be out of sync with the front-​end and that’s okay. We have to pick and choose which parts of the front-​end we should make a mirror-​image of. Do we need all the form styles? Nah, just what most designers need each day to get their work done. The hard truth is this; your Figma docs should be treated like a sketch on the back of a napkin."

Alles wat je in Figma doet is om snel iets te kunnen onderzoeken. Het hoeft niet 1 op 1 gelijk te zijn met het daadwerkelijke eindproduct. Daarvoor heb je het interactieve prototype zoals Shasmi Brinn aanhaalt:

"The biggest benefit is that a functional prototype speaks everyone’s language: engineers, designers, end users, everyone, we all understand web functions presented in a browser. It taps into mental models we all already share. And if the team is confused by the prototype, well, that is critical user feedback right away!"

Als je een interactief prototype maakt en gebruikt dan spreekt iedereen dezelfde taal omdat we inmiddels gewend zijn aan hoe websites en webapplicaties werken. Een interactief prototype spreekt daarom meteen tot de verbeeldingen van designers, gebruikers en ontwikkelaars. Het zorgt daarom ook voor meer synergie tussen de designers en ontwikkelaars. De overdracht van design naar bouw verloopt soepeler, beter en sneller.

Hoe maak je een interactief prototype?

Dit kan op verschillende manieren, maar als het gaat om websites of webapplicaties dan moet de basis altijd HTML en CSS zijn omdat dit het dichts in de buurt komt van het uiteindelijke product. Als je hier van uitgaat zijn er meerdere opties.

Zo weet ik bijvoorbeeld van een overheidsinstantie waar designers uitsluitend prototypes maken in een HTML, CSS. Hierbij worden dan componenten direct vanuit hun Design System gebruikt.

Zelf maak ik demopagina's in een Storybook omgeving. Storybook is een open source applicatie waarmee je kan laten zien hoe een component, zoals een button, eruit hoort te zien. Je kan dan gelijk de code bekijken en argumenten aanpassen om verschillende varianten te genereren. Dit is ideaal voor ontwikkelaars die aan de slag willen met jouw Design System.

Het maken van demopagina's in Storybook heeft als voordeel dat ik direct de beschikbare components kan gebruiken en eventuele 'gaten' zelf opvul met HTML en CSS code. Dat gezegd hebbende ben ik redelijk ervaren met HTML en CSS dus is dit voor mij geen groot probleem.

Toch is dit niet voor iedere designer weggelegd. Voor de minder technisch onderlegde designers zijn er tussenoplossingen zoals UXPin. UXPin kun je integreren met een Storybook of Github omgeving waardoor je echte (HTML en CSS) components kan inladen. Deze components kun je met een Graphical User Interface (GUI), zoals je gewend bent van Figma of Sketch, gebruiken in een prototype. Ook is het mogelijk om bepaalde logica in te bouwen zoals condities. Bijvoorbeeld als de gebruiker voor Optie A heeft gekozen laat dan formulierveld X zien.

Maar met Figma, Sketch, Penpot, Adobe XD kun je toch ook een prototype maken?

Dit klopt gedeeltelijk. Met programma's zoals Figma kun je een flow maken waardoor je plaatjes op de juiste volgorde achter elkaar kan zetten afhankelijk van op welk gedeelte de gebruiker op een plaatje klikt. Maar het blijven plaatjes. Het is een stap verwijderd van een realistisch eindproduct, namelijk een website of applicate gebouwd met HTML en CSS.

Ook gebruikt Figma een eigen manier om lettertypes te tonen op een scherm. Dit is niet hetzelfde zoals een browser zoals Chrome, Firefox of Edge dit doet waardoor het minder op het eindproduct lijkt.

Jouw ervaringen met interactieve prototypes.

Ik ben benieuwd naar jou ervaringen. Ben je een ontwerper en bouw je ook interactieve prototypes? Of ben je juist een designer die voor geen goud code aan wil raken? Laat het mij weten door hieronder een reactie achter te laten