Form progress bar

[alyblenkin]

User need

Collect had a progress bar at one point and users are very keen to bring it back so that

• data collectors understand how close they are to completion
• for lengthy forms it provides a sense of progression

Solution

Reduce uncertainty for the data collectors by introducing a Linear progress-bar

The new M3 progress indicators have

• New color mappings (so we will have to play around with this)
• Higher contrast between track and active indicator to enhance the perception of progress
• Rounded corners
• End stop indicator to improve accessibility (which is a really nice addition)
• New motion behavior

The indicator will jump around a bit depending on the form design (e.g. repeats or relevances), so in some cases it might not be a true representation of how much they have left.

Figma

For discussion

• I'm assuming we will want to update the other indeterminate indicators as well (adding the end stop), but maybe we do this as another story?
• Collect and web forms: we want it to be a setting or be the default (Enketo already has a progress bar).
• In right-to-left (RTL) languages, linear progress indicators should move from right to left.
• We could add a shadow to make it look more like the M2 version, so people don't get confused with the gap

Notes for user feedback

• Does a percentage help?
• Linear or circle progress?
• Feedback on more complex forms where it jumps around

[lognaturel]

One quick concept to take or leave is a progress circle with percentage in the middle displayed in the app bar. I know I've seen this before but can't think of where. Here is the basic idea.

We would have to bump one of the existing actions but that could be a good thing: we could solve our northeast arrow problem by moving that action to the overflow menu and describing it in words ("Jump to question", "Summary").

[alyblenkin]

Sorry—I probably should have kept this in draft mode! I want to play around with a version with the percentage (for both linear and circle). I've seen the progress circle in buttons, but not in the app bar off the top of my head.

We would have to bump one of the existing actions but that could be a good thing: we could solve our northeast arrow problem by moving that action to the overflow menu and describing it in words ("Jump to question", "Summary").

I really really like the idea of describing action in words that would be much more clear. It would mean one extra tap, but we should explore it.