For the final post in this series let’s take a look at a completely different way to use state navigation components: Rather than using states to mimic rich interactivity, we will use them to guide the user through a UX scenario.
For this example let’s first take a look at the Checkout Form widget from the Stencils and Widgets Library. This widget encapsulates a checkout form, including examples of all of the various outcomes a user may encounter when filling out the form.
Notice that when the user clicks on the “Continue” button, rather than an action occurring immediately, a Vertical State Navigation component is displayed that provides a list of potential outcomes. Each outcome represents a discrete step of a potential checkout scenario. In this sense, by using a consistent (and different) look-and-feel for these “guide” style navigation components, you can communicate all of the potential pathways through a scenario to the end user. This is extremely useful for testing and review. Reviewers can be sure they have not missed a key part of your design, and they can easily leave feedback on a given step of your scenario.
Also note that this is just a small example of the concept. The technique of scenario navigation can also be extended across an entire prototype. For example, by making the “Checkout Form” state a global state, you could then navigate to an entirely different page when the user chooses a specific outcome. In this model, new pages can display context-sensitive UI elements based on user-chosen outcomes from previous pages. In other words, as a user navigates through a large and complex prototype, all of their choices are accumulated and stored in states. This allows you to cover and test a wide array of UX scenarios, as well as to discover problem areas that may occur when combining several scenarios in a single testing session.