The progress rope is a tool for signposting completion on long forms or applications and is designed to be used with the GEL forms framework.
Default progress rope
The default progress rope is used for simple processes with only a small number of steps.
Grouped progress rope
The grouped progress rope is used for complex processes with multiple steps and stages.
User experience
Wayfinding is an important part of navigation. The progress rope has the primary purpose of showing a user where they are in the process of completing a form. This gives a sense of reassurance as well as an indication of how much further there is to go.
This element is primary used within the forms templates, users may or may not refer to it, depending on the complexity of the form and their competency, so avoid using it to contain critical information. When the forms template is viewed in SM to XS viewports the progress rope is hidden off-canvas behind a label (Show all steps) and icon. It is recommended to show ‘Step X of Y’ above the form page title to give users an indication of progress without interacting with the hidden menu.
Short one-page forms generally won’t need to use the progress rope.
Progress rope is made up of categories and pages (parent > child relationship). Categories are not pages, instead describe the pages within. For example:
About you
- Personal details
- Address
- Employment
Navigating
The progress rope was never intended to be a navigational tool as there are many complexities involved when jumping back and forth particularly when it comes to dependencies and validation by third party vendors. However, there is the capability of navigating backwards using the progress rope by selecting a page (not a category). It is up to project teams to decide whether this functionality is fit for purpose according to requirements.
Visual design
The progress rope indicates the steps required to complete the form and how the customer is progressing through these steps. It is designed to be simple and unobtrusive with subtle use of colour to add brand recognition. We use typography and spacing to ensure the design of this component remains elegant, uncluttered and intuitive irrespective of the amount of sections required.
Dos and don’ts
- Avoid changing the styling of the Progress Rope (size, colour, border etc).
- Do not change the functionality of the Progress Rope. If additional functionality is required we recommend designing a new (visually different) component which caters for your specific requirements.