User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
Perhaps I didn't get the question right, but in most of the modern processes, several kinds of pipelines or stages are established.
One way to solve the visualization could so use one of these. I'd suggest Kanban - known from the Scrum methodology.
In terms of visualization you could relate to the carousel or progress dots:
The more defined approach would be a BPMN Diagram where you highlight the current position of transactions. But not everyone can read those easily.
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.
