cases werkwijze over ons blog contact

ProtoPie: high fidelity prototypingLara neemt je mee op ontdekkingstocht

ProtoPie is een tool waarmee je klikbare prototypes maakt. In deze blogpost leg ik de basis van ProtoPie uit en licht ik enkele functies toe die voor mij dé reden zijn om ProtoPie te gaan gebruiken.— Lara Vaneman (UX-designer, Jager & Prooi)

Wat is ProtoPie?

Met ProtoPie maak je klikbare prototypes. Net zoals in InVision en Figma is het mogelijk om snel eenvoudige interacties te prototypen zoals een scroll en clicks. Daarnaast kun je ook complexe interacties maken en zelfs animeren. Hierdoor wordt het mogelijk om een volledig prototype te tonen en zelfs een productdemonstratie te geven voordat er ook maar iets is geprogrammeerd. Dankzij het prototype weten developers precies wat er uiteindelijk moet komen te staan. Ook kunnen alle mogelijke interacties worden getest en weet de klant waar hij aan toe is.

De basis

De stappen die je voor een interactie in het echt neemt, moet je ook doen in ProtoPie. Neem bijvoorbeeld het aanzetten van een lamp:

1. Je hebt de lichtschakelaar
2. Je klikt op de lichtschakelaar
3. De lamp gaat branden.

Zoals bovenstaand te zien, worden er drie stappen genomen. ProtoPie heeft dit als volgt benoemd:

1. Het object (wat wil je interactief maken)
2. De trigger (wat wil je doen)
3. De response (wat moet er gebeuren)

Voor elke interactie die je wilt doen moet je deze drie stappen uitvoeren.

Het ontwerp

In ProtoPie is het mogelijk om te ontwerpen. Zo zijn de basis vormen zoals een cirkel en een rechthoek beschikbaar evenals tekstvelden. Ook kun je video’s, afbeeldingen, audio en gifjes gebruiken.

Zeer prettig is dat het mogelijk is om je ontwerp te importeren vanuit Adobe XD, Figma en Sketch. Belangrijk is dat niet alleen de pagina’s maar ook de lagen in je ontwerp goed benoemd zijn. Wanneer je de lagen niet goed benoemt is het lastig om het object, zoals die ene knop, terug te vinden. Na het importeren of het opzetten van je ontwerp kan je aan de slag met het interactief maken door het aangeven van de objecten, de triggers en de responses.

Mogelijkheden

Wanneer je aan het prototypen bent met een andere tool worden er regelmatig interacties overgeslagen. Bij het aanklikken van een invoerveld op bijvoorbeeld een inlogpagina wordt er vaak gebruik gemaakt van vooraf bepaalde inloggegevens. Doordat de gebruiker zelf niets hoeft in te typen is hij voornamelijk bezig met het navigeren tussen pagina’s in plaats van dat hij bezig is met de hele ervaring. In ProtoPie is het wel mogelijk om interacties die voorheen niet werden getest of werden overgeslagen uit te voeren. Onderstaand licht ik 5 functies uit waardoor ook jij overstag gaat.

Invoervelden

Met behulp van werkende invoervelden lijkt het voor de gebruiker alsof hij in de echte omgeving zit en kan hij zich beter inleven. Een invoerveld werkt als volgt:

  • Selecteer text: input
    + geef in het menu aan om wat voor tekst het gaat. Keypad options: type. Geef aan of het tekst, een URL, een e-mail etc. is

Je hebt nu al een werkend invoerveld. Mocht je de gegevens van het invoerveld ergens op dezelfde pagina terug willen laten komen volg dan ook de onderstaande stappen:

  • Maak een tekstveld waar je de tekst vanuit het invoerveld in terug wil laten komen.
  • Selecteer trigger: return
    + selecteer het invoerveld
  • Selecteer response: text
    + selecteer het tekstveld
    + selecteer bij content: formula
    + ga in het veld onder formula staan, klik op FX
    + klik op +
    + selecteer het invoerveld en schrijf erachter .text

Let op: deze manier van input teruggeven werkt alleen wanneer je in dezelfde scene/pagina blijft. Voor invoervelden tussen meerdere schermen bekijk deze tutorial.

Dus:

  • Persoon A klikt op het invoerveld
  • Hij typt zijn naam
  • Na op enter te hebben geklikt verschijnt zijn naam in het tekstveld

Gebruik van de camera

Dankzij de camera is het écht mogelijk om een foto te maken. Dit is erg handig wanneer je een app zoals Snapchat of Instagram wilt prototypen of een specifieke functie zoals het maken van een profielfoto. Hieronder wordt aangegeven hoe je de camera gebruikt en hoe je een foto neemt.

  • Selecteer media: camera
    + vink in het menu de auto start aan
    + geef aan of je de voor- of achter camera wilt gebruiken
  • Maak een object zoals een cirkel
  • Selecteer trigger: tap
    + selecteer het object
  • Selecteer response: camera
    + selecteer de camera
    + geef de actie aan: stop

Dus:

  • Persoon A opent het prototype
  • Zijn camera staat aan
  • Wanneer persoon A op het object klikt stopt de camera (er is een foto genomen)

Geluid

Voice wordt tegenwoordig steeds meer gebruikt, denk maar aan Google Home of Siri. Met ProtoPie is het mogelijk om te interacteren op basis van geluid. Dit kan op basis van een bepaalde range aan dB of op specifieke woorden. Beide gevallen zal ik uitleggen.

1. Interactie op basis van dB

  • Maak een object
  • Selecteer trigger: sound
  • Selecteer response: scale (dit keer is de response vrij, ik kies voor scale)
    + selecteer het object
    + geef het dB aan waarop hij moet interacteren
    + geef de verandering aan wanneer het dB verhoogt/verlaagt wordt

Dus:

  • Persoon A zegt of doet iets op bepaalde toonhoogte
  • Het object verandert van schaal

2. Interactie op basis van woorden

  • Maak een object
  • Selecteer trigger: tap
  • Selecteer response: text to speech
    + geef aan wat er gezegd moet worden. Bijvoorbeeld: Hoi!
  • Selecteer trigger: Recognise speech
    + geef enkele mogelijkheden die door de gebruiker gezegd kunnen worden als reactie. In dit geval: Hallo, Hey etc.
  • Dit zou je kunnen aanvullen door extra tekstvelden toe te voegen aan de response. Zo lijkt het net een dialoog.

Dus:

  • Persoon A klikt op het object
  • Het prototype reageert daarop en zegt Hoi!
  • Persoon A reageert (hardop) met een reactie
  • Dit wordt in tekst uitgedrukt

Interactie tussen twee devices

Met ProtoPie is het mogelijk om het ene device op het andere te laten reageren. Zo wordt het bijvoorbeeld mogelijk een chat gesprek te prototypen of het versturen en ontvangen van een e-mail tussen twee personen. Om de interactie tussen twee devices uit te voeren (ter demonstratie) moet de ProtoPie app geïnstalleerd zijn op beide devices. Omdat het om twee devices gaat maken we gebruik van niet één maar twee prototypes die we met elkaar laten interacteren. Het is ook mogelijk om nog meer devices op elkaar te laten interacteren. Zo zouden ook twee mensen hetzelfde prototype (ontvangst) open kunnen hebben.

  • Maak een object
  • Selecteer de trigger (deze is vrij, ik kies voor tap)
    + selecteer het object
  • Selecteer response: send
    + selecteer de channel: ProtoPie Studio
    + geef de message aan. De message is niet zichtbaar in het prototype, hij wordt alleen gebruikt om aan te geven dat twee prototypes bij elkaar horen. Ik noem hem bijvoorbeeld prototype-2-devices
  • Extra optie: de gebruiker laten weten wanneer de interactie plaatsvindt
    + maak een tekstveld aan
    + haal de standaardtekst weg
    + selecteer nog een response: text
    + selecteer het tekstveld
    + schrijf bij content een status zoals ‘Gelukt’. Wanneer deze gebruiker dus op het object heeft geklikt wordt aangegeven dat de verzending is gelukt.
  • Open een nieuwe prototype
  • Maak een object
  • Selecteer de trigger: receive
    + selecteer de channel: ProtoPie Studio
    + geef dezelfde message op als bij het eerste prototype: in dit geval ‘prototype-2-devices’
  • Selecteer response (deze is vrij, ik kies voor move)
    + selecteer het object
    + geef aan waar hij heen moet verplaatsen

Dus wanneer persoon A prototype 1 open heeft staan en persoon B prototype 2 gebeurt het volgende:

  • Persoon A klikt op het object
  • Vervolgens ziet hij direct de tekst verschijnen dat het is gelukt
  • Wanneer persoon A op het object heeft geklikt ziet persoon B het object verschuiven

Discussie

Naast de bovenstaande gave mogelijkheden zijn er ook nadelen aan ProtoPie. Zo is het van belang om alle lagen goed te benoemen, zodat je deze snel weer terug kan vinden. Doordat er zoveel mogelijkheden zijn kost het meer tijd om het onder de knie te krijgen dan andere tools zoals Invision en het prototypen in Figma. Daarnaast leiden er meerdere opties naar dezelfde uitwerking: wanneer gebruik je nou wat?

ProtoPie is vooral een goede tool wanneer je een high fidelity prototype wilt maken. Dit is zeker een voordeel ten opzichte van bijvoorbeeld InVision of Figma waarbij je lang niet alle mogelijkheden hebt. Met name de interactie tussen meerdere devices en de werkende invoervelden zijn dikke pluspunten gezien dit regelmatig in ontwerpen terugkomt. Ik ga ProtoPie zeker gebruiken voor het maken van een high fidelity prototype of wanneer ik bepaalde interacties wil laten zien.