Track work in progress visually

Question

In my project we have so many transactions created every day, we wanted to create a workflow diagram which shows visually what is current state and what is my next state and how many levels need to go.

can someone please share some best practices and paradigms to show workflow in visual way?

Answer 1

Perhaps I didn't get the question right, but in most of the modern processes, several kinds of pipelines or stages are established.

Kanban

One way to solve the visualization could so use one of these. I'd suggest Kanban - known from the Scrum methodology.

• Your workflow has clear stages
• you can see where most of the transactions pile up (aka. the bottleneck)
• there is a defined pre- and next stage
• You can name the progress 3/5 stages

Progress indicator

In terms of visualization you could relate to the carousel or progress dots:

Process Graph

The more defined approach would be a BPMN Diagram where you highlight the current position of transactions. But not everyone can read those easily.

Answer 2

Utilizing semantic architecture (natural elements and terms):

For linear workflows, you would want to create a breadcrumb that shows the future.

For variable path workflows, you would want to create a tree. Which in essence is a stacked, or multilevel, breadcrumb that shows the future.

This covers the structure, visual display would follow your current style guidelines.

One funny thing is that ul’s by nature are vertical elements. Breadcrumbs are horizontal navigation elements that use ul’s. This is visual display breaking holistic markup, but is accepted approach.

If I were to make any point, it would be to start with holistic markup, and add styles and behavior to improve UX. In this case you need a trail, trails are ul elements in general. While they can be generated with anything, even groupings of span tags, the internet as a whole wants certain tags for certain things.