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 :)
Molly Magerman commented
Input if..., then.. coding so that interfaces can be more usable in interface testing
paul pod commented
Would second that, a little more logic will go a long way.
It's great that we have nice transitions and scrolling but at the end of the day, if building branches based on choices becomes complicated (or not sustainable) it's just more useful to drop into HTML/JS/etc.
Also allowing variables to be passed and displayed throughout a flow is much more convincing from a user research perspective.
Michael Gehrmann commented
This is somehow related to https://adobexd.uservoice.com/forums/353007/suggestions/13031871
To Show the Point for the feature Review, I extended my example to add the ability to switch between two font-faces. This results in 18 Screens and a lot of links between them.
Check it out here: http://adobe.ly/2dpEmnC
This is a quite simple Interaction and I limited myself to 2 fonts and 3 colors. And I refrained from adding a third level of interaction because … well … I have a life.
With Logic and States in the prototyping tool, maybe even hooked to Data, this mess of screens could be massively simplified.
It should support Triggers like XAML.
Josh Curtis commented
Setting conditions or variables would be amazing! For example, we have different user states within our app: Anonymous, Registered, Subscriber and Ex Subscriber.
It would be amazing to show prototype mode to a stakeholder and when they ask "What does this screen look like for an anonymous user vs subscriber?" that I can just toggle on/off conditions. Some other conditions that impact our app experience are location tracking or whether our service is available in their area.
EXAMPLE: If the user has location services / tracking turned on, then show screen A. If the user has location services / tracking turned off, then show screen B. If location services are on, but our service isn't available in their area, show screen C.
I can imagine I setup conditions that affect the experience beforehand, then when I am prototyping a screen and I can simply check the boxes on some kind of panel that will dictate presenting this screen under those conditions.
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.