I need to graphically represent transition between different states. The states list is dynamic. At one time only one state can be active. We have a product which gives the user ability to define manufacturing cycle.

For example One user may define the cycle as Design->Engineering->Manufacturing->Sales. Other user may define as Product Design->Product Engineering->Process Engineering->Manufacturing->Sales and Service.

We need to graphically represent the cycle created by user and also present that in which stage is it currently. For example if it is in Product engineering then we need to highlight it. Please suggest if any good examples are available for reference

For example presenting this cycle to user after he has created one (the one below is not accepted by the management), stating that its not a very good way to represent. They want some better way to represent the same enter image description here

  • I have no idea what it is you're asking here. Transitioning of states of what? Please show an example of one state vs another so we know what you're talking about here. – JonW Jan 12 '15 at 15:29
  • Updated the description – user1796650 Jan 12 '15 at 15:50
  • Something along the lines of an in/out slider but have them in a line with 'live' above the stage your at. It also means you can move it on a board that way and is effectively Agile then. – indofraiser Jan 12 '15 at 17:03
  • Can you please site some example, basically looking for attractive UI with nice colors. This rectangular shape was not taken well – user1796650 Jan 12 '15 at 18:50
  • Sounds like you're looking for a UI designer's perspective on a progress bar or process chart of some type. The interwebs has lots of examples for you, but you could try asking at GraphicDesign.SE as well. – plainclothes Jan 12 '15 at 19:35

You can look at the Activity Timeline pattern on Mailchimp UX. It is right at the bottom of the page.

The example shows vertical alignment but for your case you can make it horizontal and just show the comments with additional details for the current running stage.

  • Thanks Abhijit that was the kind of example I was looking for. Another example that somebody cited was Dominos order tracking which is also good. – user1796650 Jan 14 '15 at 17:36

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.