Designing Multi-Step Processes

Many digital experiences require multiple steps; often building on each other as well. Creating these experiences can be challenging. If not done properly, the result can be a confusing and messy experience, ultimately turning users away.

💡Think about an e-commerce checkout experience and how easy it is to abandon ship somewhere along the (typical) checkout process (adding an item, signing in/creating account, address, payment, and order summary…etc.). Amazon’s One Click Checkout avoids this mess in its own (patented) way and shows how crucial it is to them to ensure that users don’t abandon ship. The rest of us need to solve this issue by creating highly efficient (multi-step) experiences.

3 reasons for the multi-step mess:

• The process requires following multiple steps. Like a clear and coherent story, the narrative of your process needs to be well communicated and understood. As the process stretches and builds on itself orient the user by making it clear where they are in the given process (including what they have done in the past and what is up next). Otherwise they will feel lost (or get distracted) and slip away. The longer and more tedious the process is, the greater the likelihood of a mess.

Cant get enough of online shopping

• Organization of different subsections and parts. What if within the process there are subsets that are tied closely together? How do you balance the need for a streamlined (and efficient as possible) process while maintaining order and organization?
• Interface issues. As we mentioned, the more entangled and sticky the process, the more likely it is for users to give up. How do you deal with the above challenges visually and spatially (within space constraints) without overly complicating and exacerbating these issues?

[On the web, multi-step processes will often contain the interface to one screen (or modal) and use process or progress bars to show users where they are and what’s next. We didn’t go that route because we (whooosreading.org) did something even better; we were able to pare down our experience and keep it to actually one screen, simple!]

Lets look at the multi step interface we created.

Challenge: The interface should allow teachers to set goals for their students.

• They can set up to 3 types of goals
• They can specify a quantity for each goal
• They can set the general frequency of those goals
• They can set a specific time for the frequency selected (meaning, for “quarterly” they will choose the start and end dates).

Solution:

We nested everything into two sections: Goals and Frequency. This made it more focused and contained. The secondary or quantifying parts of each section stack into their respective sections and only show when relevant; meaning once they are selected.

Goals. Once a goal type is selected, an input field appears and a specific (goal) quantity can be entered.

Frequency. Again, at first, all you can see are the top level options, weekly, monthly etc. After selecting a frequency time frame, an interface appears underneath, allowing the user to then quantify their selection.

Two nifty things to notice on (the goals column of) this form:

1. When a user attempts to select more than 3 goals, instead of displaying a new error message, “You may set up to 3 goals” turns red.
2. Once 3 goals have been selected, the non selected options become faded out.

Oh, and for those of you who wanted to see some of the nitty gritty lo-fi stuff:

If you like this post, subscribe to the publication (UI/UX examples and topics) and get involved in the conversation! Oh, and give this a clap 👏!