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.
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.