I am in the process of creating an UI for workflow process where the object (document) is moving by workflow. We have two sides: sender of document and acceptor.

This interface have to inform sender on which state of workflow the document stays currently and in case he can do something with the document, do that and send it to approval.

Acceptor changing the state of document (Stage and status), for him the element of UI works as a button to change the document status.

From the point of saving space in the interface, the best case is to use related dropdown lists. But they do not provide clarity.

I'm trying to use on linear view, as shown in the picture, but this not satisfy me, because the workflow can have a lot of stages and if we use linear view we have to make scrolling buttons on this scale. Where we have transition to previous stages, it is not very comfortable too.

I used icons for stages:

  • Flag - as present state
  • Lock - as unaccesible
  • Target - as sign of accessible stage.

The matter is complicated by the fact that acceptor can select for the document the previous stages and the task executor must be informed at what stage he is now and from which stage he came there.

bp example

3 Answers 3


enter image description here

The attached screen show a visual clue of first level and detail on hover. if you see under review tab, detail of the step is highlighted.

On the top, status, next step and date is mentioned.

  • Thank you @UXbychoice This is looks like that I seek
    – Vadim Bond
    Sep 28, 2020 at 15:31

If the information is so extensive and each item has different possibilities, a possible solution is to think of a certain type of UI animation.

This is an example of a horizontal menu accordion where the vertical space is compensated by the amount of items that can be put in a row. Expanding each one when hovering or clicking can show its content, info and buttons.

enter image description here

Original Codepen

Or try a collapsed breadcrumb to save space as shown in codemyui.com

enter image description here

  • it is very nice example. But with long names of phases it can be too high. And reading of vertical oriented text is not very comfortable.![enter image description here](i.stack.imgur.com/zNxpx.png) In our local discussion with colleagues appeared hypothesis that full list of phases is not necessary, only those that are near current and where the process can be selected. Looks like on the picture. What do you think about it?
    – Vadim Bond
    Sep 27, 2020 at 19:56

Linear flow is correct. Do you need to show all the status in 2nd level ?

  1. In general, 5-8 steps can be easily accommodated on the screen. You can Show recently closed or upcoming steps and put a numbers (+5 more steps)
  2. You can add a audit trail to show previous steps
  3. 2nd level status can be shown vertically and collapsed.
  • thank you 1. Linear flow good, bot how we can optimise scrolling? I am updated original picture with big amount of stages. 2. Audit trail - something like history of changes? Will do that. Good idea. 3. Collapsing - is not very good solution. The workflow sequence can be various: for example acceptor can move document from stage 3 back to stage 1. But, acceptor can assigns only statuses. If he needs to change stage, he have to choose status in the border of this stage. So stage buttons needs only for selecting between stages and checking which status can be assigned.
    – Vadim Bond
    Sep 27, 2020 at 12:56

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.