01

–

What is guided design?

The term “Wizard interface” in software interface design comes from the English word “Wizard”. Wizard, wizard, wizard Extension means “guide”. A guide, as the name suggests, is a person who can lead or guide others to their destination. In practice, this kind of interaction really acts as a guide, leading the user step by step to take complex tasks apart and complete them step by step.

Guided design is also a form of process design, which is usually purposeful. It is widely used in many commercial fields, such as shopping, hotel reservation, banking and so on. It is especially suitable for new users to experience the product for the first time, allowing users to quickly get used to the product and tasks, saving time and improving efficiency.

02

–

The main role of guided design

  1. Guide novice operation. Let new users in the shortest time to understand the product/task, understand how to quickly start using.

  2. Look at the big picture. So that users can control the whole process when they operate, and they can predict the operation/completion time in advance

  3. Simplify operational tasks. Complex tasks are disassembled to improve user operation efficiency and reduce error rate.

  4. Fewer operational decisions. Fixed task operation path, save users thinking & making operation decision time, quickly complete the task.

03

–

Usage scenarios for wizard design

In general, the standard wizard steps are used in the following scenarios: steps 2-5 are appropriate. < 2 steps, > 10 steps, use is not appropriate. Because < 2 steps are not necessary; < p style = “max-width: 100%; clear: both; min-height: 1em;

04

–

Type of wizard design

  1. Accordion guide

  2. Standard guide

  3. Horizontal standard wizard

  4. Longitudinal standard guide

  5. Bounced wizard

  6. Tab bar wizard

  7. Label the wizard

05

–

Wizard design type case scenario analysis

Accordion guide

Accordion wizard design type, generally applicable to 2B background business data, relatively clear task direction, the process is basically fixed. Scenarios such as user help documents and Q&A; PC page registration guide; E-commerce website shopping payment and other processes.

Accordion guide, in addition to meet the task guidance, step disassembly, intuitive display and other functions; More importantly, it can collect and sort out a large amount of data information, highlight the clarity of information level, and save page space while receiving information, so that the page is more rhythmically and breathable.

2. Standard Wizard – Horizontal Wizard

The horizontal standard wizard can also be called the horizontal step bar, which makes it easier to understand. This kind of wizard design is the most common, but also the most common horizontal wizard design, the main role is to disassemble complex tasks, in accordance with a fixed sequence of clear steps, so that the user is about to operate the task time and content have a controllable psychological expectation. General users can see the total number of steps at a glance, the current status of each step (such as completed/in progress/not started), and their current operation position.

At present, many component libraries in the industry basically adopt the following form of UI design for horizontal step bar (picture source: Alibaba TXD-AISC component library), with only a little difference in details.

    

The specific difference is mainly reflected in the use of state color and the layout of the upper and lower text. For example, The Ant Design of Ali-Ant Financial adopts the text and text layout of the horizontal step bar. The advantage of this Design is that if the process steps are relatively few, the text can also be used as part of the horizontal direction to avoid the page being too empty. At the same time, Ant Design has broken down the usage scenarios of the step bar more. In addition to the simple step bar, there are mini versions and step bars with ICONS.

   

In addition to the step bar style commonly found in the standard component library above, there are also the following common styles, such as e-commerce shopping and payment scenarios, in addition to the completed state confirmation display, color block arrow design, more guidance.

    

Similar to a case of UI beautification upgrade version, in fact, the functional principle is the same.

    

In addition to the above steps of relatively simple scene, actually there are in the business of 2 b is relatively complex steps of the design, the corresponding is a complex business scenarios, such as covering product line more participation, more role for examination and approval, include steps to the approval of the business scenario, father and son simple routine standard guide design is not able to meet the needs of the business scenario, The simplified version of the horizontal wizard needs to be further expanded and optimized.

     

The above two common horizontal wizard step bars tend to be 2B middle and background, with a relatively conservative and rigorous style. In fact, there are a lot of online design sense and interesting step bar design, UI style is very creative, but the principle is the same, specific UI style details will not be repeated. Refer to the author’s design board (link at the end of this article). The overall UI style is as follows:

    

2. Standard Wizard – Vertical Wizard

The vertical standard wizard is also called the vertical step bar wizard. The vertical standard wizard is mainly used in scenarios where the content data is large and needs to be displayed in pages or plates. The vertical wizard is also designed to be displayed on the left for rapid screening and positioning of a large number of data, and there is no need to compare and view such data, as shown below:

3. Pop-up wizard

The pop-up wizard design mainly uses the registration page, login page, and lightweight task operation page, which are all in the pop-up box and can be completed quickly with few steps. The diagram below:

4. The Tab bar guide

Tab bar wizard is Tab bar + article steps, formed a new lateral guide mode, its main usage scenarios are relatively flexible, can be used for login and registration pages such as scenario, lightweight pages can also be used in a fixed task process details page, but generally the PC details page article will use a separate Tab and steps of the show, To make the hierarchy of information clearer.

5. Label Wizard

The label wizard design is mainly used in mobile terminals, with less fixed operation sequence, but the basic operation path has a certain order. The main scenario is to quickly guide, locate and search specific things, and quickly find what you need in a large number of commodity categories. For example, label guides are often used in search of browsers and commodity classification search of e-commerce platforms, as well as food and scenic spots search of takeout and travel categories:

06

–

Issues to be aware of in wizard design

  1. When the task process itself is not complicated, try not to use it to avoid self-defeating and gilding the lily.

  2. Each step should be clearly defined, the progress node where the user is currently, and the specific steps and status at the moment should be clearly displayed.

  3. Colors should not be used arbitrarily to avoid implied differences and excessive design. In general, it is ok to use blue or green for “completed”, but need to mark “completed” icon, highlight “in progress” in blue, and gray “not started”; But can also make corresponding adjustments according to the brand color, avoid using too many colors, let the user feel dazzled, at a loss;

  4. Timely tracking and feedback of the status, to avoid users do not know whether their operation is effective, confusion of cognition;

  5. It is a good idea in any wizard design to provide an option to undo at any time, to allow a reversible scenario for a misoperation, and to provide an opportunity to go back and modify any misoperation.

Note: The author’s design board is linked as follows (including the wizard design case materials) :

https://dribbble.com/Cubbyvv369/buckets/730433-Step-design