Enable/disable buttons for state change actions

Question

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:

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

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

Answer 2

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?

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