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.
Variables:
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 :)
Ayhan
shared this idea
29 comments
-
Rajeev
commented
In my view, this is the single most valuable feature in any prototyping tool. Without this, I consider XD as just an eye candy tool like so many on the market today.
-
renatowaj
commented
I would like to be able to apply conditional to an animation.
Example: When you click on certain button, depending on the screen, the action should take a particular screen -
Grant Howarth
commented
This would be great and hopefully the step needed to stop me having to use Axure for prototypes requiring logic.
-
H. Postma
commented
For XD to be useful for any game designer, it must have logic, conditional statements in any form so that a prototype can show some form of gameplay.
-
Anonymous
commented
I object to my idea (logical operators for voice triggers that are in the trigger syntax) being merged with this post.
- My idea is low-hanging fruit that could be implemented very quickly.
- The post my idea has been merged with is on a GENERAL solution to logic, which may be months or years away from being implementedKoen van Niekerk
-
Anonymous
commented
It would be great to have logical operators (AND/OR/NOT etc.) for voice triggers.
Usecase:
- Suppose your prototype asks your user to choose from 3 options (e.g. flavors)
- Suppose only 3 options are available (Strawberry, Chocolate and Vanilla)
- Suppose the user responds (voice) with something else than these 3 options
- Suppose you want your prototype to respond "We don't have that, please choose between Strawberry, Chocolate or Vanilla"
The amount of "wrong" responses is infinite, so you cannot make a trigger for the whole dictionary. But what if:
You can combine voice triggers in an OR function:
trigger : voice
command : strawberry OR chocolate OR vanilla
voice response : coming up!
And cover all other scenarios in a NOT function:
trigger : voice
command : NOT strawberry NOT chocolate NOT banana
voice response : I did't get that, please choose between strawberry, chocolate and vanilla
Possibilities would be almost endless!!
BTW the prototype I attached ONLY responds to the 3 flavors. Saying something else does not trigger a response...
Koen van Niekerk
UX Director, VanBerlo -
Best Of All Films
commented
I will think about it if possible i can make a plugin for that
-
Anthony
commented
Yes I agree we very much need conditional logic!
Once you get to a certain level of sophistication with your model it becomes frustrating for the customer that you can't take it to the next level of reality. Sometimes the customer mistakes this constraint for lack of effort or diligence, which make me look at other tools. -
George Livieratos
commented
Live menu for an item where options related to item can be selected/deselected to configure aforementioned item.
Eg.
Let's say I want to configure a pizza. Let's say I have crust, topping and size and variables.
If I select option #2 from crust, option #4 from the toppings, and the extra large size, I want to the pizza-configuration menu to remember my options before the last one (in this case size).
If I have to create a state for every pizza configuration and I would have to create a massive amount of states. Might as well program it then.
Thanks for your attention.
-
Jess
commented
This is a must for me to starting using Adobe XD and streamline my workflow to stop using Sketch/Axure. Thanks!
-
Fiona
commented
Support conditions in prototyping?
For example, if {{userName}} has {{1 or more items in basket}} then show populated checkout page, else show empty checkout page.
-
Ocube
commented
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.
-
ImpendingDoon
commented
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.
-
Sabine commented
Absolutely true! Especially in Lean UX when you want to rapidly iterate and test.
-
John
commented
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.