Wizard - UI Element

A UI wizard is used to showcase steps and conditions the users are required to follow in order to complete or even accomplish certain goals. Wizards can be introduced in forms or designs to guide the users and help them through the process. The wizard element offers the users insights into what is expected from them as they can also know how many steps are ahead of them.

‍

A wizard UI component is a setup assistant that can be integrated in order to simplify difficult tasks and help the users fulfill their mission.

‍

• Wizards are used to create a better user experience in UI UX designs. They can be used to let the users know how many steps they need to accomplish and keep track of them.
• Wizards can be used when there are many tasks that require to be completed. Ideal wizards are used when 3-5 steps are available to the user.
  ‍

• Make the purpose clear. Be precise and make sure the users understand what is required from them when using the UI wizard. Every time the users fulfil one step, the designers need to be sure that the tasks can be easily understood by the merchants.
  ‍
• Use concise labels. Labelling the steps clearly will help the users anticipate and form an idea about what they should fill in or what task they should do next.
  ‍
• Give examples and explain. Some tasks might be more difficult than you would think, or maybe are not that counterintuitive. So, in order to be sure that users understand the design, insert examples along with your wizard.
  ‍
• Add only what is necessary to the design. When completing multiple steps, users might lose focus if they are surrounded by external links and unnecessary elements.
  ‍
• Make sure the users know at which step they are situated by numbering the steps, or indicating in which direction the steps are going. Another important feature that will help the users keep track of their journey is highlighting their current step and receiving messages when the step is completed.
  ‍
• Give the users the possibility to cancel and undo. The possibility of entering or completing a field with the wrong information is always on the table, so the user can go back or undo what they have completed. And in the case when the user changes their mind and decides that it won’t fulfill the wizard, the cancel button needs to be reachable.
  
  ‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find wizards and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!