1

I have a (Windows) form that shows an 'order', which can have different states and have different actions to move from one state to the other. I would like to show all possible actions, so the user will find the button always in the same spot and use enable/disable to show if an action is available in the specific state the order is in.

The trouble I am getting now, is that there are quite some buttons in my form, which add to clutter, also making a newer user have to read all the labels, before a good choice can be made.

Mockup: enter image description here

For example, if the order is in state XXX, you can do Action1 do go to state YYY, Action2 to go to state ZZZ, but Action3 is not available. In state ZZZ, Action3 gets you back to state XXX, and Action1 gets you to state YYY, Action2 is not available. Compare an "order" to a web-order, that can be in a state "in basket", "paid", "shipped", "cancelled" etc. You can go from "paid" to "shipped", but also to "cancelled", but never to "in basket".

The "ActionX" buttons show all possible actions for all possible state-transitions. I have shown three now, but have five already, and who knows what the future will give.

Is there a good UX design to do this "right" ?

5
  • Divide the form in sections. Could you post a screenshot?
    – Alvaro
    Nov 30, 2016 at 13:57
  • @Alvaro I added a mockup. Could you elaborate on "divide in sections" ? Nov 30, 2016 at 14:47
  • Its a bit complex to understand how it is going on for me, if you could post an example of a combination of states/actions, how they work how they change,etc it might be easier to understand.
    – Alvaro
    Nov 30, 2016 at 18:27
  • @Alvaro do you really need screenshot. Are you sure?
    – Jivan
    Dec 1, 2016 at 2:58
  • @Alvaro I added some text to explain it a little more. Dec 1, 2016 at 7:49

2 Answers 2

1

Is it possible to condense all the functions you want into a drop down / select scenario? Label it something like "actions" and disable the options that aren't relevant?

2
  • That could be an option, but it adds an extra click. Nov 30, 2016 at 14:52
  • Sure, but i think that's the trade off with reducing the screen clutter. Especially if you're going to have a large number of options and you want as much transparency as possible. Nov 30, 2016 at 14:57
0
V
// Go to V
Go to W
Go to X
Go to Y
Go to Z

W
Go to V
// Go to W
Go to X
Go to Y
Go to Z

X
Go to V
Go to W
// Go to X
Go to Y
Go to Z

Y
Go to V
Go to W
Go to X
// Go to Y
Go to Z

Z
Go to V
Go to W
Go to X
Go to Y
// Go to Z

This is what I understood, I called your actions by what they do to clarify. If your actions are buttons, then they probably need to be seen as so.

  • Separate the action from a single button:

[Label] Navigate to: [Dropdown] V | W | X | Y | Z ; [Button] Go

or

[Label] Go to: [Buttons] V | W | X | Y | Z ;

  • Simplify the actions. Im not sure if the actions follow a process, if they do you could:

Go to Previous | Go to Next

  • Maybe Tabs could be useful so you could skip the buttons?

tabs

I think you are trying to face a problem similar to pagination. Take a look at other solutions on it, it might help.

5
  • You understood incorrectly. In my example I show that the state-changes are a little more complex. Dec 1, 2016 at 10:34
  • "in state XXX, you can do Action1 do go to state YYY, Action2 to go to state ZZZ, but Action3 is not available" . Isn't this the same as in X you can Go to Y and Z but not X ? Forget about the wording, it could be "change to state" or "move to".
    – Alvaro
    Dec 1, 2016 at 10:36
  • No. Changing state from X to X is nonsensical. Mind you that the state of the order is updated in the database when a button is clicked. It is not just stuff on screen. Dec 1, 2016 at 10:37
  • In the answer, the // means that action is not available. So // Go to X means it is not available, I just left it that way to see what is changed, but it could be removed.
    – Alvaro
    Dec 1, 2016 at 10:39
  • My examples are incorrect (that is why I hate examples ...). Another example is: From state AAA you can only go to state BBB with action Q, actions P and R are not available, you can never get to state CCC from AAA (which is not the case in your solution). Dec 1, 2016 at 10:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.