Logic in prototyping - conditional behavior, branching, if/then
To be able to prototype for usability testing and demonstrations there needs to be a bit more intelligence around how experiences are joined up togehter.
If clause example:
If user makes choice a, do x. If user makes choice b, do z. And so on.
When user makes a choice/clicks/fills in a field etc. assign a variable. Then allow designer to use variables in an if-clause to make decision which roots to go down.
Thank you :)
I am at screen 5 and I have Button1 and Button2. I press Button1 and go on, but if I press Button2 I am being returned to screen 2. I now have to repeat steps 2-5 but with different content. I have also other actions on screen2 which differ when I am being returned to the screen from screen5 and when I simply reach screen 2 formt he start.
I could do this with simply duplicating artboards, but then it can get messy and I lose the track of the "Original" number of artboards.
My idea was that maybe I can somehow mark Button2 with "subflow" process (other color - red) and then everything connected with "red" subflow becomes connected with eachother.
Brain dump follows… ask for clarity if I got to messy. :-)
I'd like ability to have state reflected across multiple object and pages, and bonus points if state can be data driven.
– Click a 'add to cart' button
– The cart icon in your nav changes to show item in cart version (all instances of that cart icon update across all pages)
– Taking this further… the cart page would have a dynamic repeat grid that displays the actual item you added to your cart.
The simplest version might be swapping an object (empty cart icon) for another object (cart has items icon) based on an event—and ideally syncing that change across all instances of the object on all pages.
The super-amazing version would allow objects (text field, rectangle, etc…) to set properties (color, size, text) dynamically based on user created variables.
–Designer creates cart object group (cart icon and text field)
–She then creates a variable (via sidebar panel) 'cart_qty' and sets it's type to number and value to 0
–Then the variable is dragged onto the text field in the cart object, thus setting the text value to that variable (0)
–Then a 'add to cart' button is created
–Then the button is giving a interaction, on_click: increment variable 'cart_qty' by +1
THE END RESULT: When the 'add to cart' button is clicked, the cart object goes up by 1 across all pages.
This could be taken further by creating a product variable that has sub-properties (product image, product name, etc…) which could be spit out into a repeat grid on the cart page.
Pretty much, I want to make state-based prototypes—ideally with data.
I'm creating a form. One field is Country, the following page after a Submit button is clicked will need to show different information.
So the Submit Button should give more than one artboard option to link to, based on the dropdown selection.
Danny Arielli commented
I agree. In my current prototype tool I have the option to work with variables, conditions a.s.o
To be honest, I need this to prototype but if Xd would have such abilities I could def. Use it!
Steve Pick commented
This would be a great addition - definitely more of a hardcore thing, but will be much more adaptable for flows with multiple outcomes/conditions.
A way to make the prototype actually interactive, show a transition from screen to screen is very basic showcasing, would be absolutely brilliant to be able to show how the site/app can react upon selecting a field or typing in a password.