The Wizard of user experience
How to use wizards in UI with UX principles in mind.
When most people hear the word wizard, they think of an old man like Dumbledore with magical powers. Unfortunately, this doesn’t relate to the technical term, but it can have a magical impact when designing user-centered interfaces!
What is a Wizard?
A wizard is a setup assistant that guides the user through a series of steps or conditions that must be completed in order to achieve a goal. This software simplifies complicated tasks into manageable, smaller tasks, and instructs the user on how to complete these steps as they reach their end-goal (Babich 2018). We were first introduced to wizards in a paper format that would often come with our appliances and infamous Ikea furniture; a manual that would guide the daunting task of building a new cabinet, into a feasible project thanks to the step-by-step instructions we were given. More recently, we see wizards in a digital format such as a software installation assistant, or even when our favourite websites walk us through an account setup process.
An example of a wizard that you probably use often, is the e-commerce checkout wizard. If you take a look at the image above, this specific form wizard guides the user in completing a purchase. It simplifies which steps of the user’s goal are completed, and have yet to be completed in a progress bar at the top of the interface. The additional requirements needed to complete a specific step are listed in a fillable form below the progress bar. An excellent usability feature included in this example is the user’s ability to go back and forth between steps to make corrections as needed.
When Not to Use a Wizard
Sometimes when we divide a task into smaller steps it doesn’t necessarily enhance the usability of our product. Wizards are for complex goals, so If you can simplify a task to the point where a few buttons or condensed text can get the point across effectively before using a wizard, this is the best approach! Wizards are also impractical if you are trying to teach something to a user because the user is not consuming any additional knowledge while using the wizard. If education is your goal, try creating an informative tutorial instead.
Wizards and Usability
A tip on creating an effective wizard would be to visually indicate where the user is in the process by numbering steps or by showing the direction of their workflow as seen in the Facebook UI below. Try and keep the number of steps required of the user to a minimum. Although wizards are best suited for tasks that are long and complicated, If there’s less than 2 steps you probably don’t need a wizard, and if there’s over 10 steps, you should consider simplifying these steps (Babich 2018).
Wizards are important to UX and UI design patterns because it ultimately lowers the learning curve by taking the burden of decision making off the user. When used accordingly, they enable untrained users to achieve a goal through a sequence, limiting the risk of poor usability and adds to the fulfilment of their experience. The best way to make sure your wizard has a valid purpose and works well is to put it through lots of usability testing!
Take Away
As you continue to create, I hope you have a better understanding that when developed with simplicity and a purpose in mind, a wizard can be a great way to enhance the satisfaction and ease of your designs!
References
Anders Toxboe (2015). Wizard Design Pattern at Facebook [Photograph].
Babich, N. (2018, March 5). Wizard Design Pattern. Retrieved from https://uxplanet.org/wizard- design-pattern-8c86e14f2a38.
Ildiko Gaspar (2017). Day 349: Checkout Process UI [Photograph].
