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 :)
With all the tools out there, this is why I have always stayed with Axure... I was so delighted when when Adobe came up with XD so you can imagine how let down I was when it did not have any conditional logic.
Agreed! For now, I've created a "demo scenario picker" in my prototypes (a type of overlay). Once you hit a fork in the road, you pop up the overlay and then choose your own adventure. Kind of breaks the flow, but I can keep everything in one file. Not awesome, but it's still better than creating multiple versions of prototypes and separate files.
Absolutely true! Especially in Lean UX when you want to rapidly iterate and test.
Being able to assign a few global variables would be a game-changer IMO.
An intuitive way is to add simple "if var = x" conditions to the "pick-whip" style hook-ups between each artboard. You could even color code them for easy identification.
In our workflow, we have an app that has several release phases. Having a "if version=1.2 show/go here" and a "if version=1.3 show/go elsewhere" connection to a button, would help us to keep working in a single XD file, instead of having duplicate files per milestone/build.
It would also be valuable to implement proper layers or layer comps where those variables could determine visibility. This might be easier and more intuitive to manage and implement than doing variables on an object by object basis (although that should come at some point also).
Erin Standley commented
This would be very helpful to simulate a user journey. Something even as simple as changing the state of an artboard after an interaction would help.
For instance, a "My orders" view for an shopping app has an empty cart until a user adds something to their cart. Instead of two separate artboards, there is just one "My orders" that changes its state. This would reduce the possibility of the user ending up back at the first one via some other path because the other interactions on the "My orders" artboard are hooked up to other things.
Christian Villegas commented
On a mobile device or tablet some interactions are based on specific user input... be it a form field with specific data entry, touch based gesture, or selecting specific items on a single screen in order... this request would be the ability to add those conditional interactions into our prototypes.
AdminMary Cherng (Admin, Adobe) commented
Can change a symbol based on variables such as user roles and device, so that one user will see the same screen but with a different layer than another user.
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.