Progress Indicator

[rowanmanning]

What

A progress indicator is used to display a user's progress through a multi-step process. This could be a multi-page form, a contract renewal process, or similar. This is distinct from the deprecated o-progress component in that it has a fixed number of steps and each step can have different state.

Naming: this could also be called a "progress tracker", or "stepped progress".

Why

This component has been designed separately (but very similarly) by two different teams on FT.com and Internal Products. After speaking with the designers it's clear that the use-cases are similar enough for it to be one component.

This is also a component that's present across the web, and so should be familiar to users. There are lots of good examples in this article.

Supporting Examples

I've attached examples of designs. These may change slightly, but there are a lot of similarities.

Designs for FT.com:

Designs for Internal Products:

Thinking So Far

• We need to support both Master and Internal brands
• Steps are always evenly distributed. Might this ever not be the case?
• Steps have the states: Completed, In Progress, Next, Error, Green tick (?)
• Steps are optionally clickable
• Step Labels can have text and links
• Between-Step Lines have the states: Completed, Next
• Current progress can be between steps (in which case a non-dismissible tooltip is required)

[JakeChampion]

There are less states than those listed in the original post.

Steps have the states: Completed, In Progress, Next, Error, Green tick (?)

Green tick (?) looks to be equivalent to In Progress, I'm not sure if that is the case though.

---

If we use this picture as the example:

What happens if the user goes back to the previous step labelled Details? Does the partially filled out step Preferences get a different design or is it the same as In Progress?

---

Current progress can be between steps (in which case a non-dismissible tooltip is required)

Are the positions between the steps going to be configurable? The designs show the non-dismissible tooltip to be in one of two locations, could it be in more than that?

[rowanmanning]

Green tick (?) looks to be equivalent to In Progress, I'm not sure if that is the case though.

I spoke with Olga about the error and green tick, and it's a shorter term state to highlight that a thing was completed recently. The green would go away after a short amount of time. So it's kind of a "recently completed" state.

---

What happens if the user goes back to the previous step labelled Details? Does the partially filled out step Preferences get a different design or is it the same as In Progress?

I think that's a good question for design. I'll get them involved.

---

Are the positions between the steps going to be configurable? The designs show the non-dismissible tooltip to be in one of two locations, could it be in more than that?

In Olga's case, the "You are here" tooltip indicates how far along the timeline you are between the two points, so you can see how close to renewal you are. So the tooltip can be at any point between two steps, ideally configured as a percentage.

[draysonandstock]

Having had a brief look at this along with a slide component that Internal are after here is what I was looking at:

https://drive.google.com/open?id=1beM5bIEchNPSx6t3mv1yUDA_D78ccbkO

It was mainly basing the sizing off our existing radio buttons but changing the look slightly to better suggest they are interactive beyond just a selected/filled or not state.