Voorbeelden van geavanceerde prototyping

Maak in dit prototype een knop met een verplichte interactie met een selectievakje.

Deze interactie komt vaak voor in onlineformulieren. Je moet bijvoorbeeld akkoord gaan met de algemene voorwaarden van een site door een selectievakje aan te vinken voordat je op de knop Doorgaan kunt klikken.

1. Maak een interactieve componentenset met twee varianten als selectievakje.
   1. Noem de componenteigenschap isChecked, met de varianten "true" en "false".
   2. Voeg een prototype-actie Veranderen naar toe tussen beide varianten, zodat wanneer je op de "false"-variant klikt, deze verandert in de "true"-variant en omgekeerd.
   
2. Maak nog een componentenset voor een knop "Doorgaan". Eén variant moet een inactieve toestand vertegenwoordigen, en de andere een actieve toestand.
   1. Noem de componenteigenschap hasAcceptedTerms met waardenamen "true" en "false". De "true"-variant vertegenwoordigt de actieve knopstatus, en de "false"-variant vertegenwoordigt de inactieve knopstatus.
3. Maak een booleaanse variabele met de naam "hasAcceptedTerms", met de waarde "false". 
4. Voeg exemplaren van je componenten toe aan je ontwerp.
   1. Voeg een exemplaar van de "false"-variant van de knop Doorgaan toe.
   2. Voeg een exemplaar van de "false"-variant van het selectievakje toe.
5. Wijs de booleaanse variabele hasAcceptedTerms toe aan beide exemplaren.
   1. Klik op het exemplaar van het selectievakje om het te selecteren.
   2. Beweeg in de rechterzijbalk de muis naar de rechterkant van de varianteigenschap en klik op  Variabele toewijzen.
   3. Selecteer de variabele hasAcceptedTerms om deze aan de eigenschap te koppelen.
   4. Herhaal stappen A tot en met C voor de knop "Doorgaan".

      Tip:

      Je kunt een variabele aan een variant koppelen zolang de waarden overeenkomen. Omdat de booleaanse variabele de waarden true en false heeft en de varianteigenschappen de waarden true en false hebben, kun je ze aan elkaar koppelen.

      Wanneer de variabele verandert naar een "true"-waarde, zullen de exemplaren nu ook naar hun "true"-variant veranderen.

6. Ga terug naar je componentenset voor de knop "Doorgaan" en voeg een actie toe aan de actieve variant. Je kunt bijvoorbeeld een interactie Bij klikken toevoegen die naar het volgende frame navigeert.
7. Speel je prototype af om het uit te testen.

In dit prototype kun je een formulier maken dat een foutmelding geeft als gebruikers proberen het in te dienen zonder alle vragen te beantwoorden.

1. In dit voorbeeld heeft elke vraag twee keuzerondjes waarmee een gebruiker hun antwoord kan selecteren. Laten we een interactieve componentenset maken om elke toestand weer te geven waarin het antwoord zich kan bevinden: niets geselecteerd, keuze 1 geselecteerd of keuze 2 geselecteerd.
   1. Make drie varianten om elke toestand weer te geven.
   2. Noem de componenteigenschap selectedState met “keuze1”, “keuze2” en “geen” als varianten.
   3. Voeg een prototype-actie Veranderen in toe tussen elke variant, zodat wanneer je op het object "Keuze 1" klikt, de variant verandert in keuze1 en wanneer je op het object "Keuze 2" klikt, de variant verandert in keuze2.
2. Aangezien ons formulier twee vragen zal hebben, maken we twee stringvariabelen aan. Met deze variabelen kunnen we controleren of het formulier compleet is wanneer een gebruiker het indient.
   1. Noem de eerste stringvariabele "vraag1antwoord" met de waarde "geen".
   2. Noem de tweede stringvariabele "vraag2antwoord" met de waarde "geen".
3. Laten we nu ons prototype samenstellen. Voeg een frame toe om het ontwerp van je formulier weer te geven. Neem twee exemplaren van de "geen"-variant van het keuzerondje op en een knop Indienen.
4. Wijs de variabelen toe aan de exemplaren van de keuzerondjes.
   1. Klik op het eerste keuzerondje om het te selecteren.
   2. Beweeg in de rechterzijbalk de muis naar de rechterkant van de varianteigenschap en klik op  Variabele toewijzen.
   3. Selecteer de variabele vraag1antwoord om deze aan de eigenschap te koppelen.
   4. Herhaal stap A tot en met C voor het tweede keuzerondje, waarbij je deze keer de variabele vraag2antwoord selecteert.
5. Voeg nog twee frames toe: één om een foutbericht-deklaag weer te geven en één om een succesbericht weer te geven.
6. Voeg een prototype-interactie Bij tikken toe aan de knop Indienen. Gebruik de actie Voorwaardelijk actie:
   1. Als vraag1antwoord == "geen" of vraag2antwoord == "geen", open het foutberichtframe als een deklaag.
   2. In alle andere gevallen, navigeer naar het frame van het succesbericht.
7. Speel je prototype af om het uit te testen.

In dit prototype verhogen we een teller elke keer dat een gebruiker een selectie maakt.

Dit type interactie heeft verschillende toepassingen. Je kunt bijvoorbeeld het totale aantal artikelen zien dat je aan je winkelwagentje hebt toegevoegd op een e-commercesite, hoeveel foto's of berichten je hebt geselecteerd in een berichten- of social media-app, of zelfs hoeveel glazen water je hebt gedronken in je gewoontetracker-app.

1. Maak een interactieve componentenset met twee varianten om een geselecteerde en een niet-geselecteerde toestand weer te geven.
   1. Voeg een prototype-actie Wijzigen naar toe tussen beide varianten, zodat wanneer je op de niet-geselecteerde variant klikt, deze verandert in de geselecteerde variant en omgekeerd.
   
2. Voeg meerdere exemplaren van de niet-geselecteerde variant toe aan je ontwerp.
3. Voeg een tekstlaag toe aan je ontwerp die het aantal geselecteerde items weergeeft.

   In ons ontwerp hebben we twee tekstlagen in één frame toegevoegd. Op de ene tekstlaag staat "Items geselecteerd:" en op de tweede tekstlaag staat "0".

   
4. Maak een numerieke variabele genaamd "itemsGeselecteerd", met een waarde van 0. We zullen deze variabele gebruiken om bij te houden hoeveel items er zijn geselecteerd.
5. Ken de variabele itemsGeselecteerd toe aan de tekstlaag.
   1. Klik op de tekstlaag "0" om deze te selecteren.
   2. Klik in de Tekstsectie van de rechterzijbalk op  Variabele toewijzen.
   3. Selecteer de variabele itemsGeselecteerd om deze aan de tekstlaag te koppelen.
   
6. Keer terug naar je componentenset en voeg een extra prototype-actie toe aan elke variant die het aantal geselecteerde items berekent.
   1. Voeg bij de "false"-variant een actie Variabele instellen toe die de waarde van de variabele itemsGeselecteerd instelt op itemsGeselecteerd + 1.
   2. Voeg in de "true"-variant een actie Variabele instellen toe die de waarde van de variabele itemsGeselecteerd instelt op itemsGeselecteerd - 1.
   
7. Speel je prototype af om het uit te testen.

Bouw in dit prototype een klikteller. Wanneer een gebruiker het vereiste aantal keren op een object of objecten klikt, wordt een succesvolle interactie gestart.

Dit type interactie kan in de praktijk voorkomen wanneer gebruikers een specifiek aantal items moeten selecteren om verder te gaan. Gebruikers moeten bijvoorbeeld een bepaald aantal onderwerpen selecteren die hen interesseren tijdens een onboarding-ervaring om hun profiel aan te passen, of gebruikers moeten een bepaald aantal toppings selecteren om aan hun maaltijd toe te voegen in een app voor het bezorgen van eten.

1. Voeg twee variabelen toe:
• Een numerieke variabele genaamd clickCount, met een beginwaarde van 0.
• Een booleaanse variabele genaamd clickComplete, met een beginwaarde van false.
2. Voeg een rechthoekobject toe aan een frame.
3. Voeg aan het rechthoekobject een prototype-interactie toe met de trigger Bij klikken/tikken. Voeg twee acties toe, in deze volgorde:
1. Variabele instellen: clickCount op clickCount + 1
2. Voorwaarde: als clickCount == 5, stel de variabele clickComplete in op true
4. Voeg twee tekstlagen toe aan het frame:
1. De eerste tekstlaag moet eenvoudige instructies geven ("Druk vijf keer op het vierkant.").
2. De tweede tekstlaag moet een succesbericht zijn (“Gelukt!”)
5. Pas de variabele clickComplete toe op de zichtbaarheid van de tweede tekstlaag:
1. Selecteer de tekstlaag.
2. Ga naar het gedeelte Laag in de rechter zijbalk en klik met de rechtermuisknop op het zichtbaarheidspictogram.
3. Klik op de variabele clickComplete in het selectiepaneel voor variabelen. Nu is de laag alleen zichtbaar als de waarde van de variabele clickComplete "true" is.
6. Speel je prototype af om de interactie te testen.

In dit voorbeeld gebruiken we variabelen om een volumeregelaar te maken. 

Om te beginnen, stel je frame in met een paar basisvormen om de volumebalk en de bedieningselementen weer te geven:

• Voeg één rechthoek toe om de volumecontainer weer te geven—de onze heeft een breedte van 260 en een hoogte van 100.
• Voeg een tweede rechthoek toe om het volumeniveau weer te geven. Deze rechthoek moet bovenop de eerste worden geplaatst en ze moeten aan de linkerkant worden uitgelijnd. De breedte van de tweede rechthoek moet kleiner zijn dan die van de eerste—de onze heeft een hoogte van 100 en een breedte van 14 om te beginnen.
• Gebruik lijnen om objecten te maken die een plusteken en een minteken voorstellen, en plaats ze onder de volumecontainer.

Vervolgens moeten we een variabele aanmaken. Maak in een nieuwe collectie een numerieke variabele aan. Noem het volumeNiveau en geef het een initiële waarde van 14.

Laten we nu de variabele volumeNiveau koppelen aan de breedtewaarde van de rechthoek die het volumeniveau weergeeft.

1. Klik op de kleinere rechthoek om deze te selecteren.
2. Zoek de breedtewaarde op het tabblad Design van de rechterzijbalk.
3. Beweeg de muisaanwijzer over het veld met de breedtewaarde en selecteer Variabele toepassen.
4. Selecteer in het selectiepaneel de variabele volumeNiveau.

Nu ons frame en onze variabelen zijn ingesteld, is het tijd om onze prototype-interacties aan te maken.

1. Klik op het plustekenobject op het frame.
2. Klik in het tabblad Prototype van de rechterzijbalk op het plus-pictogram om een nieuwe interactie toe te voegen.
3. Stel de trigger in op Bij tikken/Bij klikken en stel de actie in op Variabele instellen. Selecteer de variabele volumeNiveau.
4. Stel de nieuwe waarde in met een uitdrukking. We willen dat de breedte van het volumeniveau met 5 toeneemt telkens wanneer een gebruiker op het pluspictogram drukt, dus gebruiken we de volgende uitdrukking:
   volumeNiveau + 5
5. Herhaal stappen 1-4 voor het minpictogram, deze keer stel je de nieuwe variabelewaarde in met de volgende uitdrukking:
   volumeNiveau - 5

Speel je prototype af om de interacties te testen.