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
53 comments
-
Sam Spicer
commented
One of the main things I love about Axure, and still use occasionally, for when complex interaction states need to reflect user input.
-
Nyhad Boutaoui
commented
That would be useful!!
-
Tarushin
commented
Would be useful for simulating login and login functionality.
For example :
If you are logged in the log out function becomes available and visa versa. At the moment when prototyping and testing log in pages users becomes confused as prototypes don't really function in the way that they would expect .
There is no way to easily simulate this in XD currently without time consuming clunky work arounds.
-
James
commented
Agreed. I wound't want a return to Axure level prototyping functionality, just the ability to make a conditional dropdown menu without having to create screens for each variable.
-
Chris
commented
I know Axure gets dinged for being clunky and you can hang yourself with how much power is in it. That said, the logic aspect of Adobe XD is really primitive. Things like conditionals, AND, OR and variables would be absolutely huge and would level up the program substantially. Please add this!
-
Eriq
commented
Katastrowl’s comment (below) is right on the money. I think a bridge between advanced prototyping and coding and something that allows the modern “designer” to perform functions like a coder - “bridging” where a stepping off point might occur and branch off into several places is what XD needs. And I love the alluding to Animate and actionscript - though, I believe the talented team on XD might want to think about a “multi-paned” solution across artboards or “tabs” or even “sets” of specific boards where one might point a single multi-choice/function drop off.
User clicks the button and that button - depending on some number of factors jumps user to here or here.
I like the idea of setting variables with some simple input and then those variables auto-populating in a component to allow this kind of execution.
Wouldn’t this make XD that much more powerful? Oh yes.
It’s somewhat clunky currently trying to illustrate more than one scrollable/draggable area. One must create two “sets” of artboards to do something so simple.
-
Katastroowl
commented
Basically to shorten this up and get us faster results: The most crucial thing, XD needs is a kind of sequence capability - for the intended use of XD, what I believe is NOT to have a full working prototype, but be able to display each Component of a Feature as a prototype, it would be sufficient to have the possibility to create SEQUENCES. (A sequence is, shown on an example, if the user hits the same button twice, or multiple times, every time something different happens, different interactions - also the step of a sequence should be capable of being selected as a destination, which would result in different prototype behaviour when the target button/ element is triggered next time)
Think closely, you will see we all can suddenly do A LOT more when we have sequences - no need for If, then, else, calculations etc. right now, of course this would be nice and necessary in the long run, but we would be able to design and display a prototype right now, and RIGHT NOW is what we need.As ghowarth said: I also need to create like not 30, but hundreds of artboards for especially simple UIs, that have few control elements, because they are obligated by multiple control methods. For the software development process it is needed to split everything anyways, but even the split elements are too much. With sequences I could reduce the work to about 10% or less - that is 90%! faster.
How I came to that solution? - It is already brought up by you ADOBE, you have something similar in "Animate", use that, combine the Frame capability somehow, maybe you can even allow Action Script for XD, so in the next step. However, right now and fast, Sequences would solve the most critical issues in time without too much development on your side.
BG
-
Bob Glaser
commented
A functional dropdown menu object with the capability to navigate to a different artboard (or other actions) based on the choice in the dropdown.
I can currently fake a dropdown, but can't make a selection within it to take a selected action such as navigation or some other trigger.The capability to customize look and action that has no complete interaction means that in the current product (March 2020) there's no possibility of this extremely common paradigm for IxD and UX flow.
-
ghowarth
commented
I've had to create 30 artboards just to illustrate iterating through a device setting (thermostat). When the user goes to a menu from any of these artboards and comes back it is impossible to return to the screen they left from without comically creating 30 menus. XD needs the ability to do simple logic like:
onClickBtn = varThermo + 5, where varThermo is simply a text field containing a variable.This variable could be accessed globally and auto populate other areas of the UI.
or onClickBtn = ifCheckbox goto artboard X else goto artboard Y.
Right now there is such a disconnect between how designers 'design' and how actual apps are built.
-
John Andrianopoulos commented
I am designing a survey-style page where a user needs to fill out a questionnaire. On a page that has a question with 4 answers, and a "NEXT" button at the bottom to proceed, I would only want the "NEXT" button to remain in an inactive state until the user taps one of the 4 answers.
Current features in XD do not allow this to happen. Conditional behavior is a must.
Can't believe this idea has not seen any progression in nearly 4 years.
-
Manon
commented
Example: when using a 'back' button, it would be great if the prototype knows where you came from so you will be sent back to the correct previous page.
-
Adam Trabold
commented
OH MY GOD this would be incredible. Would avoid so much duplication / multi-link mess when wanting to present prototypes.
-
Matt Talebi
commented
It will be great if we can soon add logic with states.
"IF checkbox1 or checkbox2 or... state is checked THEN action button state change to visible"
Something like this :)
-
Jerimy Brown
commented
We need this for maintaining component states when autoanimating to another artboard as well
-
Anonymous
commented
YES PLEASE
-
Manuel Ryan Espinosa commented
I agree. This would be nice.
-
Ashleigh Wallbank
commented
It would be handy to be able to give an artboard a different state.
At the moment I have a prototype that depending on which artboard you come from a button goes to a different place. This means I have to have multiple copies for the EXACT SAME artboard just to give something a different destination/function.
Having multiple states means I could go from artboard-1 to artboard-2-State-1, and my button would go to artboard-3, and if I went from artboard-4 to artboard-2-State-2 the button would go to artboard-5, not artboard-3.
Like on proto.io
-
Jonathan Boice
commented
The ability to create a true Drag n Drop Interface, or reorganisable elements.
For example create a list the can be move, and allow another item to move above or blew.
This could be part of a new functional overall call "Behavioural Conditionals"What are Behavioural Conditionals?
Just like you apply swipe left, right up, down or add timer to screen or elements, Behavioural Conditionals. are behaviours that can be applied to elements in the screen, for example it can be moved, or react to sound, to transform between two states based on a variable. a good example might be you design two UI's, one in dark mode and one in light, you can add a Behavioural Conditional, of switching, if ambient light sensor is above or blew a number, or based on time of day.I strongly believe their is a range os these that make a huge difference, and will set Adobe XD apart from other tools.
-
Lucian Cicos
commented
Facebook Origami has an interesting way of handling this. https://origami.design/tutorials/common-interactions/Adding-Logic.html
This logic added, is a MUST HAVE.
its very hard designing in XD all possible stages without this logic. Just take as example a simple "Account"
User is signed in or not? the design and content are totally different. -
Tomasz Czarnecki
commented
Please consider adding Conditional Statements in Prototype Mode.
I imagine this function working somehow as shown on image.
When in prototype mode it would be possible to change Simple Boolean values for example by 1st time visiting page (or other action).
When for example Tester visits Login Page once, it would not appear again in Prototyping Session (it changed its Boolean value from Unvisited (false) to Visited (true).