Introductie

De tools waarmee designers werken veranderen telkens. Niet elke nieuwe tool lijkt dan ook iets toe te voegen, maar soms verschijnen er van die ‘pareltjes’ die je laten verbazen. Zo kwam ik een tijdje geleden een voor mij nieuwe tool tegen, ProtoPie. Ik was gelijk nieuwsgierig toen ik zag dat het nu mogelijk is om eenvoudig geavanceerdere interacties toe te voegen aan prototypes.

Het klinkt misschien te mooi voor woorden dat je in ProtoPie interacties toe kan voegen zonder een enkele regel code te schrijven. Voor sommige tools heb je namelijk aardig wat kennis van development nodig om een soortgelijke interactie vorm te geven. Een prototype moet naar mijn mening eigenlijk zo snel mogelijk gemaakt kunnen worden zodat deze al vroeg in het ontwerpproces getest kan worden bij de eindgebruikers.

ProtoPie is al sinds 2017 op de markt (ProtoPie, z.d.), maar is voor mij en waarschijnlijk een hoop andere designers een nieuwe tool. Ondanks dat deel ik graag mijn eerste ProtoPie ervaringen en hoop ik dat het misschien iets toevoegt aan mijn en of jouw ontwerpproces.

De tool

ProtoPie is in mijn ogen een echte ‘drag and drop’ tool die ook nog eens goed aansluit op de kennis die designers al hebben. Je hoeft dan ook maar weinig tijd te investeren in het ontdekken en onder de knie krijgen van deze tool. Veel functies werken vergelijkbaar met functies uit zoals bijvoorbeeld After Effects en design tools zoals Sketch en Adobe XD.

Je kan ProtoPie vooral gebruiken om high fidelity prototypes mee te maken en testen. Waarschijnlijk bouwt een Interaction Designer het visuele design om naar een werkend prototype tijdens de prototyping fase in het ontwerpproces (Stephenson, 2018). Het gemaakte prototype kan op verschillende manieren getest worden en zelfs gedeeld worden waardoor iedereen de gebouwde applicatie kan testen.

Hands-on

Maar hoe bouw je die interacties dan op in ProtoPie? Het werkt eigenlijk heel simpel. Je hebt een element, welke je kan importeren vanuit Adobe XD of Sketch (of je bouwt het element in ProtoPie), die je triggers meegeeft. Die triggers zijn bijvoorbeeld het klikken op of het verslepen van een element. Het element reageert op de interactie die de gebruiker met het prototype heeft. Zo kan je bijvoorbeeld een afbeelding bewegelijk maken, elementen laten verschijnen of weggaan en de device laten trillen.

Al deze nieuwe mogelijkheden gaven mij inspiratie om een soort mini Spotify redesign te maken. Ik had ooit al een keer het idee om een albumcover rond te laten draaien als een cd. Zo’n knipoog naar “vroeger” vind ik ontzettend grappig in een ontwerp. Ook wou ik de rest van de elementen interacties meegegeven die overeenkomen met de interacties die vaak voorkomen bij soortgelijke applicaties. Alleen kon ik nooit echt makkelijk zo’n redesign realiseren.

Ik besloot om een vrij basic ontwerp in Adobe XD te maken en keek een paar tutorials via de website van ProtoPie en YouTube, waarna ik begon aan het animeren van de interacties. Het begin was heel simpel en na een uurtje klooien had ik al een balk die bewegelijk was waarmee de speeltijd van een nummer duidelijker werd en draaide de albumcover als er op de start knop gedrukt werd. Wel irriteerde ik mij al snel aan de trigger tijdlijn. Je kan hier helaas geen groepen maken of iets anders om georganiseerd te blijven. Hopelijk voeren ze dit nog een keer door in een update.

Ik testte uiteindelijk het redesign via de ProtoPie iPhone app. Door het scannen van een code of het verbinden van mijn iPhone met mijn laptop had ik een prototype op mijn mobiel die niet onder deed voor een echt gebouwde app. Ik werd dan ook zo enthousiast en besloot om het redesign te testen bij huisgenoten. Altijd leuk om erachter te komen of andere de interacties begrijpen en te horen dat het net echt lijkt.

ProtoPie maakt het dus mogelijk om snel een high fidelity prototype te maken welke getest kan worden bij gebruikers, waardoor er snel in het ontwerpproces geïtereerd kan worden.

Discussie

ProtoPie is een tool die waarde toe kan voegen aan het ontwerpproces. Het ligt er wel heel erg aan hoe een team, individuele designer of designbureau werkt, maar zeker wanneer er weinig technische kennis in huis is kan ProtoPie een grote rol spelen bij het maken van high fidelity prototypes. Daarnaast kan de communicatie tussen designers en developers verbeteren door tools zoals ProtoPie (ProtoPie, z.d.). Aangezien er voorbeelden gemaakt kunnen worden die veel duidelijker zijn dan uitleg in woorden.

Tijdens het geven van mijn ProtoPie workshop aan medestudenten merkte ik dat de deelnemers makkelijk geavanceerde interacties konden realiseren zonder enige voorkennis of uitleg. Ook werden ze enthousiast toen ze zelf doorkregen dat het allemaal heel snel ging.

Er bestaat eigenlijk geen goed of fout bij het gebruik van tools, zolang je maar kan onderbouwen waarom je iets gemaakt hebt en dat het resultaat is zoals de verwachting van de opdrachtgever of gebruiker.
— Studente Communicatie & Multimedia Design

Wel vinden de medestudenten ik dat er altijd een duidelijke keuze gemaakt moet welk resultaat een prototype moet hebben. Soms volstaat een snel geschetst papieren prototype terwijl er bij een ander project misschien wel een high fidelity prototype nodig is zodat nieuwe interacties getest kunnen worden. Low fidelity prototypes hebben namelijk tegenover high fidelity prototypes als voordeel dat ze snel gemaakt zijn, weinig geld kosten om te produceren en ze geven geen onrealistisch verwachtingen aan de gebruikers (Goodwin, 2009).

Conclusie

ProtoPie is een toevoeging aan de tools die ik als designer al gebruikte. Eindelijk kan ik vrij snel en makkelijk interacties toevoegen aan prototypes die geavanceerder zijn dan het doorklikken naar een ander scherm. Ook het testen van prototypes is makkelijker geworden en gebruikers ervaren de prototypes waarschijnlijk als “echtere” producten.

“In general, prototypes are ideal for validating new or nonstandard interactions or products, or for testing parts of the product that are simply too important to get wrong.” (Buley, 2013, p. 196)

Er blijven altijd nieuwe tools verschijnen. Het lijkt mij daarom vanzelfsprekend dat je als designer “je ogen en oren goed moet openhouden” zodat je altijd op de hoogte bent van vernieuwingen. Maar dat je vooral voor jezelf kijkt of een tool een toevoeging is voor jouw ontwerpproces of niet.

Referenties

Buley, L. (2013). The User Experience Team of One. Brooklyn, New York, USA: Rosenfeld Media, LLC.

Goodwin, K. (2009). Designing for the digital age. Indianapolis, Indiana, USA: Wiley Publishing, Inc.

Korpai, D. (z.d.). Macbook, mac, invision studio and invision HD [Foto]. Geraadpleegd van https://unsplash.com/photos/bOKIptPzdPk

ProtoPie. (z.d.). ProtoPie — Intro. Geraadpleegd van https://www.protopie.io/learn/basics/

Stephenson, J. (2018, 10 juli). The spectrum of design roles in 2018. Geraadpleegd van https://uxdesign.cc/the-spectrum-of-digital-design-roles-in-2018-3286390a9966?gi=88ef137aa6ab