From 4 aspects, all-round summary of the guidance function design

Preface

Many times, we all feel that the newbie guide is unnecessary, for most products, users do not even look directly off, but for some of the more complex products, the newbie guide is not much better than reading the long-winded instructions. Imagine, we take the medicine after getting sick, can there ever be a time to read the manual from beginning to end, I believe it is usually to follow the doctor's advice or follow-up consultation, in contrast, if the purchase is a treadmill, in addition to watching the video operation, may also take a look at the manual, although the view rate is low, but undeniably encounter unexpected problems may play a key role. UI design of the novice Guidance mainly helps users to know the product and stroke the important function entrance, in order to help them get started quickly and reduce the cognitive cost in the process of subsequent use, and also is an important step for the product as a new conversion, which is crucial for the more complex products and should not be ignored. So in the design of the new guide to pay attention to what issues, how to guide the role of the maximum, the next with you to understand.

I. Understanding the newbie guide

1. What is newbie orientation

When we enter a new company, usually someone will take us to know everyone in the team, or introduce ourselves in a meeting. We know very well that even if we don't do this, we can gradually get familiar with it through active/passive communication with only a certain amount of time, but the company's arrangement will undoubtedly accelerate our integration into the new environment and get into the best working condition more quickly, which is the display version of "Newbie Orientation".

As stated in "Growth Hacking", desire - friction = conversion. In order to increase conversion, we can both increase the desire of users and reduce the friction between products and users.

New user guidance in a product can help users quickly understand the features and usage of the product in a short period of time, and easily experience various functions. From the product's perspective, the newbie guide helps users master the core functions of the product and improve the retention rate, and then plays a crucial role in improving conversion.

2. Features/contents to be guided

First, show the product features, so that users understand the advantages and highlights of the product compared to similar products, to give users a good impression, or the desire to continue to use.

Second, product updates and iterations, whether it is a new feature on the line or the location of the original function entrance changes, should prompt the user in time to avoid the user in the previous version of the inherent thinking, can not quickly scan to the entrance they need and spend more time costs.

Thirdly, the operation guide, which is not necessary for all products, under normal circumstances, the product should not let users think to quickly get started, but for more complex products, it is necessary to help users quickly grasp the operation mode and skills through novice guidance, to reduce their own learning costs, such as some B-side, tools applications.

3. Timing of appearance

Most of the newbie guides appear when the app is first opened after download or version update, which helps users to have a basic understanding of the new features/operations of the product. After introducing the core functions and features, you can hide the guides that appear so that users can manually recall them for help when needed.

In addition, the product needs to maintain the user's curiosity to explore the product on their own. For those newbie guides that are not necessary but necessary, they can be given at the right time without disturbing the user, based on the user's behavior prediction of the operation, to ensure that the user's implicit needs can be clarified and solved in time.

Second, the use of scenarios and style classification

1. Page mask guide

The difference is that a black translucent mask is added at the top of the page for masking, and the lower content is guided by a hollow design with interactive gestures, text messages or illustrations on the mask for auxiliary instructions, and the user needs to manually click the "Next/Skip/Close The user needs to manually click the "Next/Skip/Close" button to operate the rest of the content.

The biggest advantage of this newbie guide is that it keeps the visual focus on the current function being guided and ensures that the user is not distracted by other information. It basically appears when the app is first opened after downloading or updating, and can display one or more (sequential guidance) with high effectiveness of information conveyed.

It is important to note that the content presentation must maintain intimacy with the location where the lead is presented, and that the close button is obvious and easy to use. When more than one guide appears, you need to provide "Next" and "Skip" buttons at the same time, there is no shortage of old users to download the second time or for the purpose of updating the version, there is no need for newbie guide, if you have to click one by one every time, for old users, this is not Help, but interference.

2. Dialog box guidance

Dialog box is a kind of strong guidance, usually appears when the user is about to use a certain function is restricted or actively seeking help in the process of use, which has practical help for the user. Dialog box will still interrupt the user's operation, especially the automatic triggering of the pop-up timing should be appropriate, pop-up is not timely or early interference with the user will have a negative impact. Dialog box guidance will be automatically triggered by the system or actively triggered by the user at the right time.

① Automatic triggering by the system

For example, when users need to use a certain function, the system automatically pops up that they need to upgrade to a new version or complete a task in order to experience it, and provides a shortcut to facilitate users to reach the goal directly. In addition, the paid movies of video applications can be experienced for free for 5 minutes, and after the time is up, the system will automatically pause the playback and pop up the paid channel to guide users to convert.

②Manually triggered by users

This type of guidance will have an action portal, using buttons, "question mark" icons or text hyperlinks (instructions/guidance/help...) The user can click at any time to bring up the instructions. For example, the user can proactively turn on notifications and location permissions for the device within the app, and text instructions for activating a credit card with the phone number reserved or CVV/CVC graphic instructions on the back of the card.

3. Air bubble prompt guidance

This is a relatively lightweight but highly directional guidance method, which takes the form of a bubble container with sharp corners popping up at the desired location with a guiding text prompt.

The bubble tips can be used for new features, core functions, hidden menu tips and other scenarios, and can be combined with image materials and animation effects, and can appear in any position on the page because of the clear direction, which is highly compatible.

4. Operation bar guidance

Compared with the dialog box mentioned above, the action bar is somewhat similar to it, as it is a blocking type and has no clear directional guidance.

In addition, the action bar has more space resources, which is more suitable for detailed guidance with more content, and can create a strong visual atmosphere through the combination of graphics and background, and also increase the prominent CTA button to enhance the conversion rate.

5. Other guidance methods

In addition to the above-mentioned newbie guidance, there are also guidance pages, default pages, preference labels and other ways, but those are more complex and independent module system, not clear in a few words, it is recommended to read other separate related information.

Third, the new guide design tips

1. Emotional links

Emotional is a powerful tool of design, which brings emotionless Internet products to life, eliminates the cold interaction of human-machine interface and helps users and products to establish a friendly connection.

When designing a newbie guide, you may want to add anthropomorphic images, in-depth copy and simulated real-world things/affairs to make a product with temperature, which can better bring the distance between users.

2. Reinforcing points of interest and establishing goals

For the newbie guidance of activity promotion, before users operate, they can tell what they can get after operation and what they will lose if they don't operate, and there is no lack of using some conventional design means such as benefit lure, interruption warning, visual atmosphere, etc. to let users have a clear goal of using, so as to facilitate users to make positive decisions. After the operation focus on highlighting the benefits to stimulate the user, to impress the user or make them look forward to the next time.

3. Multi-functional layered guidance

Following the principle of doing one thing at a time, multiple functions need to be presented sequentially according to different priorities and following the user's operation. It is also necessary to provide a "skip" entrance at each level, and the newbie guide is to provide help to meet user needs, not to force users to use.

4. Complex functions are guided in time slots

The more complex functions can be divided into different time courses according to their importance to avoid users receiving too much information at one time, which can also reduce the single learning cost and improve the absorption efficiency. For example: VIP function, each level may open new services, permissions, the system should be in the user after each upgrade, the new services in a timely manner to guide the feedback, do not open the VIP for the first time in a brain to inform the user of all value-added services, do not have the patience to remember, and can not remember. If necessary, the functions that can not be used can be put out of the gray display or provide operational restrictions.

5. Diversified visual style

Different newbie guide can be designed with different visual styles to avoid the same style to make users form "inertia thinking" that they have already seen it and skip it without thinking and make the newbie guide become cumbersome.

IV. Common problems and how to deal with them

1. Weak handling of "skip"

In the UI interface, as long as the user does not actively seek help and pop-up information, they will reflexively look for the close button, until the content disappears.

Although many newbie guides provide "skip" operation, which is not wrong, but do not design too obvious, too eye-catching "skip" button is easy to provoke the user's conditioned reflex, regardless of whether there is help, click when you see it, which also loses the original purpose of the newbie guide. The original purpose of the guide is lost. By moderately weakening the "skip" operation portal, users may be distracted by interesting and helpful information in the process of searching for operations, even if they want to close it, or they can continue to browse.

2. Use light color masks

Many times, in order to let users walk through the newbie guide in order, a layer of mask will be added behind the bubble, whether it is an arrow indication or a hollow bottom, the color of the mask (pure black opacity) is best to use a light color, the user needs to absorb the content of the newbie guide at the same time, but also see the overall structure of the interface style, after the newbie guide to have a certain impression of the operating path, too deep mask is not conducive to the user Overall learning.

3. The most easily understood expression

The guide text must be concise and need to highlight the key points in the most attractive and easy-to-understand expressions. Do not be long, too much text content, the user is easy to forget or memory bias, and also do not have the patience to read.

If the content can not be streamlined shorter, you can consider using pictures / illustrations instead of part of the text, to reflect the combination of graphics and text, you can also use the segmentation of the display with the user interaction, learning while using.

4. Show progress when there is more content

In the design of the new guide, no matter how wonderful the content is, do not think of instilling too much information to the user at one time. When users first use the product, they only need to be given the necessary functions and appropriate help, and the number of multiple guides is usually limited to 3~5. It is also necessary to let the user know the current progress in real time to avoid anxiety caused by the user's inability to control the amount of content, and if they are directly skipped they will not be able to play the role of a novice guide.

5. Users should have the right to choose

The main purpose of the newbie guide is to help users get started quickly, although the ultimate goal is to improve conversion, but don't be so imaginative as to place only a "go to conversion" quick entrance in the newbie guide. Without closing the operation, forcing the user to enter the conversion process, except for a very few cases of mandatory use, the probability is that the user will directly end the process, since it can not be closed, then uninstall it!

https://www.svgkey.com/ac-portfolio

No matter how important the content is, how much you want to improve the revenue, you can not force the user, we can use the design means to attract users to operate, but still provide the back of the entrance, even if it is not how obvious it is, the user should have the right to choose.

6. Interesting content

Users in the process of using the new guide to learn, itself is boring, designers can design interesting fonts, illustrations according to the tone of the product, but also with the animation design to bring the user a fun experience.

V. Conclusion

This article has introduced the practice of newbie guide in UI design from four aspects: basic understanding, style classification, design skills and common problems. If your newbie guide is just a decoration, or even a burden, it is better to remove it.

Newbie guide design should be based on the product's own characteristics combined with business scenarios, at the right time, in the most reasonable way to present to the user, guide the user quickly familiar with the product, and use the product.

I hope that through the content of this article, junior designers will have a systematic understanding of newbie guidance, and in the future design, they can give the most suitable solution in combination with the actual application scenario to provide practical help for users and enhance the value of the product.