0

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" ?

  • Divide the form in sections. Could you post a screenshot? – Alvaro Nov 30 '16 at 13:57
  • @Alvaro I added a mockup. Could you elaborate on "divide in sections" ? – Bart Friederichs Nov 30 '16 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 '16 at 18:27
  • @Alvaro do you really need screenshot. Are you sure? – Jivan Dec 1 '16 at 2:58
  • @Alvaro I added some text to explain it a little more. – Bart Friederichs Dec 1 '16 at 7:49
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?

  • That could be an option, but it adds an extra click. – Bart Friederichs Nov 30 '16 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. – Gareth Davies Nov 30 '16 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.

  • You understood incorrectly. In my example I show that the state-changes are a little more complex. – Bart Friederichs Dec 1 '16 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 '16 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. – Bart Friederichs Dec 1 '16 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 '16 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). – Bart Friederichs Dec 1 '16 at 10:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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