natalia-fitzgerald
commented
4 months ago Discovery:
Step indicator (also called progress indicator) and navigation
The CFPB does not have a step or progress indicator component so we had initially planned to use the current USWDS step indicator as a starting point and apply CFPB styles (font, state colors, etc). The USWDS step indicator component is specifically designed/intended for a linear flow (complements a back/next navigation in a linear sequence). It is not intended for a non-linear progressions or interactions that might be completed in any order. According to the usage guidelines, the USWDS step indicator should not be used for navigation. A user should navigate using back/next or something equivalent (within the page content). The step indicator is a purely visual marker that indicates where a user is within the linear flow (as opposed to one a user can interact with as a form of navigation).
Step indicator (based on USWDS component)
- Specifically designed/intended for a linear flow (complements a back/next navigation in a linear sequence).
- It is not intended for a non-linear progressions or interactions that might be completed in any order.
- The step indicator is a visual indicator of progress and is not a navigational component. The user navigates through the flow using back/next buttons or links.
Progress indicator (Carbon Design)
- A progress indicator is a visual representation of a user’s progress through a set of steps, guiding toward the completion of a specified process.
- Use progress indicators to keep the user on track when completing a specific task. By dividing the end goal into smaller, sub-tasks, it increases the percentage of completeness as each task is completed.
- Logical progression: Display the steps in order from left to right. Indicate to the user that they are performing a multistep process, and show the direction of movement. Allow the user to return to a previous step to review their data submission.
- Indicate the current step: Keeping the user informed of where they currently are within the process or task at hand will give them a sense of control. This helps the user to know where they are in relation to where they have been, and what sections are to follow. Clear labels should accompany the progress indicator to indicate what the user will accomplish within each step. Keep labels between one to two words.
- Validation: Use validation to confirm that a previous step has been completed. If the user cannot proceed onto another step without first completing a task, use an Inline Notification to inform them.
Stepped progression (Goldman Sachs)
- A stepped progression, sometimes referred to as a multi-step form or wizard, is an interface built to support a series of steps a user must complete in a process.
- Stepped progression is best employed for long and unfamiliar tasks that the user needs to complete once or rarely. Typically in each step a user is asked to input data and is provided feedback on their progression for the overall task.
Progress Indicators
- Progress is tracked in a stepped progression and displayed to the user visually and can be shown horizontally or vertically. The overall goal of the progress indicator is to show the user how far along in the process they are and how much more they have to go.
- States: incomplete, active and completed.
Alternatives to the step indicator
Although I strongly support the idea of a linear flow for the small business lending filing flow, I did want to present some alternative components that allow a user to complete a set of tasks in any order. Neither of these alternatives provide a user with any feedback as to progress toward an end goal.
Side navigation (CFPB component)
- Intended for a non-linear flow or interactions that might be completed in any order.
- Open: https://www.consumerfinance.gov/owning-a-home/prepare/
- Gated: https://www.consumerfinance.gov/paying-for-college/your-financial-path-to-graduation/
Tabs (no CFPB or USWDS component exists)
- Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
- Tabs are used to organize related content. They allow the user to navigate between groups of information that appear within the same context.
- Because tabs stack horizontally or wrap to a second line, they’re not an optimal design solution for mobile viewports.
- Tabs should never be used for primary navigation. If tabs become too complex, consider using a standard navigation pattern.
- Tabs should not be used to indicate progress. Use the progress indicator instead.
Decision: Linear flow of sequential steps
At yesterday's design/dev sync we discussed the idea of a linear (versus an open-ended flow). We decided that, for a number of reasons, a linear flow makes a lot of sense for the small business lending filing process. While there are steps within the filing process that could be completed in a different order there are certain steps that must happen before others. In deciding on a flow it is beneficial to design a system that is consistent so that a user knows what to expect. Existing steps that are not order-dependent can always be moved later if testing shows user friction. But, upload must always come before errors and warnings can be shown and before a user can view a summary and submit their filing for the year.
We did want to be able to provide the user with a way to access the "warnings" before they resolve their "errors." A user will be able to access a report of all "errors" and "warnings" by clicking a link at the top of the "Resolve errors" step.
- @angelcardoz @billhimmelsbach @dan-padgett
Milestone: [Link to milestone] Add a few sentences to describe the milestone.
Epic: Navigation
Overview
Tasks
Use the following checklist to ensure each epic is built out properly. If needed, you can add or remove items.
User stories
MVP (Beta release)
Step indicator
Header
Footer
Backlog (post-MVP)
Step indicator
Header
Footer
Requirements
Technical
Step indicator
Header
Footer
Content
Step indicator
Header
Footer
User testing
Research goals
Step indicator
Header
Footer
Task ideation
Step indicator
Header
Footer
Current mock-ups
Updated: MM/DD/YYYY