Tips for Making a Simple Wizard Feel ALIVE!
Simple wizards don’t have to be boring.
Though I'm a fan of wizardry, when I say "wizard," I'm not talking about Merlin or Dumbledore.
What's a wizard in product design? I'm talking about a user interface that offers step-based interactions to guide a user through an experience.
Think of the step-by-step process of installing new software on your Windows 95 machine... but maybe a little more fun.Â
There are plenty of cases when I might consider this guided flow, but at the core: you have a lot of information to gather from a user... So, how are you going to ensure they actually get it all to you? (And not bail in the middle!)
When might one create a simple wizard?
Onboarding a new user into a product that requires some details from you first—think sign-up flow
Marketing flows for opting into a service or a product—think giving your email for a newsletter
Creating a personalization experience—think profile building for social media\
And, of course, here at Township, one of our favorite things to do is create a prototype for an idea that hasn't been made real yet!
When we are in the discovery phase of a new product, working to understand a client partner's ideas, we have a Township philosophy: Don't over-architect technical solutions before our partners feel confident there is a there-there.Â
When playing with new ideas that follow a wizard-like flow, creating something that feels real can be very telling. Enter Figma for meaningful, high-fidelity prototyping without any code just yet. So what might something like this look like, you're asking yourself? Well, good news, we've made a fun visual example below paired with some design tips to illustrate how you might bring the small steps in a simple wizard to life in a big way.
Go beyond “if this, then that…” with PROGRESSION
Logic is critical to progression in a wizard, but it can also be made to feel active rather than simply functional. How?
TIP: Subtly change background color from step to step, gradually indicating a sense of progression from one step to the next.
TIP: Create a clear delineation of progression between the actual questionnaire flow and the resulting information by establishing clear visual cues between the two sections of the flow.Â
TIP: Shift or transform background and secondary graphics to indicate a transition between steps—this could be as subtle as a slightly-moving background texture or as bold as playful illustrations.
Create movement with INTERACTION & ANIMATION
Movement and interaction can support the feeling of 'completion' for added value in a wizard. How?
TIP: Establish a sense of interaction throughout by creating subtle transitions and animations on elements you want a user to tap or click on, like buttons and cards.Â
TIP: Connect the user's selection with the result in a transition that reinforces a user's choice.
TIP: Use animation to bring in supporting information like charts/graphs so they appear when relevant and catch your attention.
Develop a two-way conversation through CONTEXT
Language and knowledge of what a user might be feeling as they move through the wizard can catapult or halt an emotional connection to the experience. How?
TIP: Know your user and what language might make a question or input field feel more personalized and human rather than transactional.
TIP: Add additional help text or information for fields when it may not be totally obvious what you're asking.
TIP: Use text to illustrate the building of knowledge and value as they get further into the experience.
High-low fidelity
While the example above may look real, there was no code required. It's all a clickable Figma prototype. High-fidelity visuals and interactions with low, or even no, code help us validate ideas while spending a fraction of the time you might expect. While there are many tools and ways to approach a wizard, these tips often guide us in the right direction to create something both usable and delightful.