[Product Design] [User Experience]

Cover article compiled by user research

For novice guidance, user needs are to quickly and happily learn to use the product , the product goal is to quickly transform novice users into loyal users with high activity and stickiness. User needs and product goals will start from different perspectives, and sometimes there will be conflicts, but they are not irreconcilable contradictions. Therefore, novice guidance design is to balance user needs and product goals to achieve a win-win situation.

In order not to destroy the original functions and operations of the product for users to use normally, a balance needs to be struck between guidance and interference with normal user use. You might as well ask yourself a few more questions: Is this function really necessary to guide and remind users? Does this function need to be known to all users or is it enough for a certain type of users to know it? Does this reminder need to be prompted in all scenarios, or does it only appear in certain specific scenarios? Let’s sort out various guidance design patterns:

1. First-time user guide

1. Sliding display guidance page

Most APPs on the market today will Provide a series of sliding display guide pages when logging in for the first time to introduce application functions or demonstrate interactions. The flaw of this form is that it stands between the user and the APP. Even if the page is beautifully designed and interesting enough, it is difficult for the user to read it carefully and patiently. Because the vast majority of users still tend to explore the APP on their own, even if the tutorial is helpful to them, it itself deviates from the user's original intention.

2. User Manual Guide

“Welcome Board” is the first interface that users can see when they open Trello’s task management panel, which covers pre-populated To-do lists illustrate the interactions and functions of different controls in the program. This approach allows users to learn the functionality of the product more effectively.

Paper, the flagship product of the App Store, is a drawing software whose interaction is based on many special gestures and also defines some operating specifications with brand characteristics. You must know that users do not have much time and patience to explore a completely unfamiliar product, so Paper provides a lot of guidance for users in the early stages of use.

2. Scenario-based guidance

User guidance that conforms to the scenario is to provide the necessary instructions to the user in a specific interface, scenario and moment, or in a specific user journey node.

1. Masked prompt

A masked prompt is a strong guidance that emphasizes the content that currently needs guidance by directly covering the interface. This kind of prompt allows users to focus their attention on a specific main interaction and minimizes the amount of information explained. The guidance content is superimposed on the corresponding UI control in the form of a layer. It usually appears when the user operates for the first time and only displays one at a time. It requires the user to see the prompt content and perform the corresponding operation or click the x button before it disappears. This is somewhat similar to the pop-up window logic of the app, but the difference is that the pop-up window is usually a warning or a reminder to confirm whether to perform the operation. .

Although there are no relevant statistics, it is very common for users to directly turn off gray reminders and not read the content. When using such reminders, it is recommended to have a simple and powerful design with as little copy as possible.

2. Temporary box prompts

Temporary boxes can be divided into two categories, one is called modal temporary box, and the other is called non-modal temporary box. Modal temporary boxes require the user to select an operation before they disappear, such as Alert confirmation, etc.; non-modal temporary boxes do not require the user to select an operation before they disappear, such as the Toast prompt that pops up on the page.

Modal temporary box:

A. Alert View

Alert View is a concept in iOS. The official definition is: the warning box is used to inform the user Important information that affects their use of the app or device. The corresponding temporary box is called dialog in the Android system, which is translated as dialog box.

Think back, what was your reaction when you heard shocking news? Most people's reaction is "What?" or "What did you say?" You subconsciously ask the other person to say it again. Why? Because this information is so surprising, you need to double-check whether it is true! Similarly, when you trigger the delete button, how does the app react? The deletion operation is too sensitive, so it needs to be confirmed again. The Alert View is used here. The app needs to obtain location information; access the photo album and camera; ask whether to upgrade the app, etc., all of which require the use of warning views.

In addition, the warning view can also be used as an entrance or guide page for operational activities.

As you can see from the picture above, the warning view includes three parts: title; text; button. Some simple warning views only have titles and buttons, and do not require text to explain; others may have no buttons, and the temporary box will disappear when you click outside the temporary box.

B. Action Menu Action Sheet

The Chinese translation of Action Sheet in iOS is the operation menu, which corresponds to the Bottom Sheets in Android, and the Chinese translation is the bottom action bar. Use a music app to listen to a song and look at the playback interface. At this time, you want to check the singer information, album information, and also want to collect this song... To meet so many needs on the current page, you need to use Go to Action Sheet. For the current page, there are too many operations that the user wants to perform. It is impossible to release all these operations, so that the page is full of dense icons and buttons. Putting these buttons in a temporary box in the form of an operation list perfectly solves this problem.

The two pictures above look completely different, but the principle is what I said above and remains the same, except that the UI style is changed. They all belong to the temporary box of operation menu type. There is also a variant of this type of temporary box, which does not pop up at the bottom, but pops up near the area where the user triggers the operation, as shown below:

C. Global modal Modal View

Global modal The state is a very special kind of temporary box because its area occupies the entire screen. But in the design specifications of iOS, the global modal is placed in a temporary box. The official definition is: a view presented in a modal form that provides independent, self-contained functionality for the current task or current workflow.

The global modal has the following characteristics (it will be easier to understand by comparing the picture of the iOS built-in mail APP above): ① Occupies the entire screen, or occupies the entire area of ??the parent view. ② Contains the text and controls needed to complete the current task. ③ Usually also contains a button to complete the task and a cancel button.

Non-modal temporary box:

A. Toast

Toast is the design form of the Android platform. This form is not specified in the iOS specification, but due to Toast can play a very good role in lightweight feedback. Many iOS apps now also use this kind of temporary box. Toast is a kind of lightweight feedback, which often appears in the form of a small pop-up box anywhere on the top, middle or bottom of the screen. However, the same product will try to use the same location as the module to give users a unified understanding.

Regarding the display time of Toast, the two time attributes that come with Android are 2 seconds and 3.5 seconds respectively, but they are generally customized to 1.5 seconds and 2.5 seconds. Text in Toast takes 2.5 seconds if it exceeds 10 characters, and 1.5 seconds if it contains less than 10 characters. Therefore, do not use it as a form of guidance for important objects. Most of it is dispensable or will appear repeatedly. Secondly, language refinement is also necessary. In terms of style, try to be consistent with the overall style of the product, so that it will be more harmonious and not abrupt.

B. Snackbar

Same as Toast, SnackBar is also a temporary box unique to Android. SnackBar inherits all the characteristics of Toast, that is, it is in the form of a small pop-up window and will disappear automatically.

There are three differences: ① 0 to 1 operation can appear, excluding the cancel button; ② Click on the area outside the SnackBar, the SnackBar will disappear; ③ Generally only appears at the bottom of the screen. In actual product design, it is rare to see the form of SnackBar. Here are two pictures from the MD specification.

Take a scenario where SnackBar temporary frame can be used: when deleting a photo, a Snackbar can appear at the bottom of the screen, prompting "Photo deleted successfully" and accompanied by an undo operation. When the user clicks Undo, the photo Recoverable. If the user does not perform any operation, the Snackbar will disappear and the photo will be deleted successfully.

C. Bubble/Floating Layer

Bubble/Floating Layer is a lightweight but highly purposeful guidance method. It is generally a design of translucent floating layer combined with copywriting. model. Most floating layer modes have directional arrows, which can be used to prompt important functions or hide operations. It is usually non-modal and disappears automatically after 3-5 seconds, causing less interference to the user.

3. Embedded (partial embedding/whole embedding)

Embedded guidance is divided into partial embedding and overall embedding. Partial embedding is to add guidance prompts to the current page content. In order to ensure that the object is not buried in the information flow and effectively attracts the user's attention, it needs to be processed visually. Overall embedding uses the guide as a whole to replace the display of page content, and is mostly used in the "empty state" situation.

3. Interactive guidance

1. Interactive prompts

are triggered when the user enters a specific link or progress during use. A prompt that does not appear in a certain order, so different users encounter these prompts at different times and in different scenarios. Duolingo, a language learning APP, has a very good understanding of the rules of people's language learning. Learning languages ??in actual combat is the most effective way, so it will provide interactive prompts as users continue to interact with the APP.

2. Operation instructions

Operation instructions often use short animations to show users how to operate, and there are also static pictures with descriptions. The advantage of this method is that it is very intuitive. It can convey fresh functions and interesting usage to users in a relaxed and easy-to-understand way, which is more considerate than rigid words.

There is another kind of operation hint that is more subtle, which is to guide the user to complete the operation during the interaction between the user and the product. Common gesture interactions such as pull down to refresh and bottom pull up also often occur in voice operations. For example, when the user uses the microphone, the interface interacts with the user's voice input.

4. The strength and triggering of guidance

1. The strength of guidance

According to whether there is blocking when it appears and whether operations are required when it disappears, we Guidance prompts of different strengths and weaknesses can be divided. Usually, the appearance of a weak prompt may not necessarily make every user pay attention, or it does not need to be fully understood by all users. Such a prompt will not hinder the user's current reading and operation behavior, and can also disappear automatically; a strong prompt The user must be aware that it will block the user's current use and requires a clear specified operation to disappear.

2. Selection of guidance trigger point

The trigger point of user guidance is where the guidance is triggered. Is it triggered when the user opens the program? Triggered after reaching a specific page? Triggered after operating the specified function? Triggered at a certain point in time? They are all additional things on the basis of the original product, and are often not what users have expected.

Method 1: After you have clearly identified which users you are targeting, you must consider the scenario. What is the popularity of such users? Which pages are frequently visited by such users? Based on the user's popularity and the most visited pages, placing the trigger point here will have the greatest impact on target users and the smallest impact on non-target users.

Method 2: Sometimes the content of the guidance will limit the trigger points, such as functional guidance. When the user browses to the page where the function is located for the first time, the guidance is triggered. This should be regarded as a common operation for new functions. way.

At this point, it’s best to think in reverse, do most of the users of this page need guidance? If so, how can we reduce the interference to non-target users? If not, we need to reflect on whether this function is appropriately placed here.

3. The frequency of boot triggering

refers to the number of periodic changes completed per unit time. After determining the trigger points and types of guidance, another factor of thinking that cannot be ignored. If the form of guidance is too strong, it will interfere with the user's current operation; if it is too weak, it may be ignored. You need to grasp the frequency of its appearance, especially guidance like toast and floating layer that are easily ignored. The picture below shows the screenshot sharing function of NetEase Cloud Music. Although the sharing overlay will automatically disappear after 3 seconds, in order to prevent the overlay from appearing every time a screenshot is disturbed by the user, a function switch has been added to the settings page.

So how to tell the user that there is a switch? The method is: for all users after the function is launched, when you manually cancel the floating layer for the first time (click the " Manually cancel the prompt three times.

5. Guidance effect measurement

After you have designed the new user guidance process, you need to constantly measure whether the user is truly "Onboarding" based on the data and information fed back by the user. . This measurement indicator is crucial and should be set to a value, strictly track data changes, and adjust sensitively based on success rate and user response. Before starting any new project, you should ask yourself this question: "How will this project measure onboarding success?"