Move-side Boot design tips 1: Front boot page

Objective：

Guidance is the process of leading users to achieve goals more quickly and cheerfully, and to provide timely help before users encounter obstacles. In the design of mobile internet products, novice-led design is the user's first use of the mobile product, given some of the necessary help to enable users to quickly and cheerfully understand the product's function and the specific mode of operation. In order to accomplish different guidance content and guide the goal, the mobile end's guidance design will carry on the different diversification processing according to the demand. According to the timing of the guidance, it can be divided into the guidance of the front-type and the guide in the process.

Pre-boot: A series of help content that is given when the user has not formally started using the product. The main design method is the design of the Guide page. Guidance in the process: a series of help content that is given during the user's use of the product. The main design method has blank page content guidance, the loading waits the condition the guidance, the split baggage step-by-step guidance, the clever setting default value function guidance, the tips guide, the floating point guidance, the Mask Focus type Guide, the trigger type Guide, the task drills the type to guide and so on.

Due to space limitations, this blog post focuses on the design of the lead-guided Guide page in detail, and the guidance in the process will be followed by post.

Research on the Design of

Guide page

The Guide page, as a front-mounted guide, must have the characteristics of a forward-type boot. Users see the content of the boot page before use, at this time the user's understanding of this product is not much, for such as product function/page layout/specific use, etc. have not yet established a complete understanding. So the guide page is better suited to describe the product profile (such as the concept of a product, the core function of the product, the competitive function point or user pain point, as well as the content that will affect the operation mode of the initial use, build up the user's general knowledge of the product, but not very suitable for the content of the product that elaborated too detail, The details will not be easy to understand because the user is not able to match the information at this time.

Although the boot page has the above limitations, it is used in a very common way because of its many advantages.

Specific advantages: 1 Space settings can be set freely, in a certain range can be less than 2) full screen or almost full screen of information presented in the way, so that the capacity of information can be more than 3 of the content of the layout of freedom, designers can be free to play.

So the Guide page is a way to be flexible and free in design. However, in practical use, we often find that the design effect is not easy to reach expectations. Users often do not look through these guided messages carefully, and the amount of content that is being delivered is compromised, and it is difficult to absorb them all; So, how do we design the guidance to arouse the interest of the users, so that they spend a little energy to absorb the content of the guidance of the information, this requires some skills.

The core skills are 4 points: streamlining and rational use & meticulous choreography & effective attention & building features.

streamlining and rational use of

In the era of lead page design, the vast majority of apps design a few pages of boot content in the first use.

Designers need to control the content of the boot. Just do the necessary boot page content. Unnecessary boot content increases the redundancy of information, diluting the attention and energy that really requires the attention of the user.

Before designing, we should analyze the psychology and usage behavior of the user when using the app for the first time, not all cases are suitable to use the Guide page, dour No to the unsuitable situation.

The basis of suitability is mainly in the real use of the scene, the user is hoping to have a general understanding of the product, or want to quickly start products immediately use, in the process of using slowly to learn. If the user is expecting a quick start in the product using too much boot will cause the user's scenario.

Specific and applicable:

1. For a new concept, users need to understand these new concepts or content to better use the product. (The following picture is Vida's Guide screenshot)

2. Introduction to competitive or attractive content points. (The following image is the guide screenshot of Alipay and glutinous Rice Group purchase)

Meticulous Choreography

When the content of the boot is identified, we need to make a careful choreography of what is being guided. The specific arrangement can be divided into straightforward and storytelling. Straightforward is a list of content points and there is no connection between them. Storytelling is a story that concatenates content into a whole.

1. The way of storytelling, so that the guidance of the situational

To establish a scene matching with the user, so that users can establish a familiar feeling, can let the user to guide the function point empathy.

The story of concatenation is generally a multi-page form. One step throws a point that needs to be told, Step-by-step commentary. Stories can be described only around a function point, or multiple function points can be concatenated into a story. Form a complete story.

Because each time a point of notification, more will use the focus of the design techniques, the visual attention to attract each point of the notice.

The main purpose of storytelling is to build relationships between users and products. Let the user feel that the product is related to their own, now the content is relevant to me, I need to spend energy to pay attention to. If the association is not fully established, it is easy for the user to ignore it.

The guidance of micro-letter 4.0 is a good example of a story-building relationship. In the 4.0 version of the micro-letter, the new add a similar path and Instagram like the album features, and can share albums to friends Circle. The addition of this feature expands the product definition between just the communication chat tool. In the 4.0 version of the new feature guide, it was very successful in telling a story about the photo album feature, and was very careful to build relationships when designing content. In the story, it has always emphasized what users can do, so that users can clearly feel the relationship with themselves.

2. The main method of storytelling-the story can be emotional, pain point rendering, role model analogy, etc.

with emotion

Create a strong emotional color of the scene, arouse the feelings of the user's heart, so that users produce empathy for the product. When the product is attached to the emotional element, the product will allow the user to form an emotional connection, the user will also increase the goodwill of the product.

Playing the emotional card is more suitable for social product guidance.

In the design of both background pictures or copywriting are committed to the creation of emotional atmosphere. (The following image is the guide screenshot of Renren)

B. Pain Point Rendering

Establish a user in real life will encounter similar inconvenience scene, let the user can feel the resonance, arouse the user to the function of the need sense. Then give the product can give the solution, can let the user feel.

The method of stabbing pain point is more suitable for practical tool function guidance. In the design of copywriting: You can use the pain point type Copy, or a very vibrating copy.

C. Role model analogy

By creating user-familiar personas to describe what other people will do with the product, this approach can broaden the scenarios and other possibilities for product functionality. Inspire users to imagine this product. The familiar character image will make the description become concrete and image, which will trigger the current user to form an analogy psychology.

This approach applies to the overall function of the product introduction, the new and old products of the functional introduction are applicable: 1 old products with this method can inspire users to broaden the use of existing functions of other possibilities, broaden the use of the scene. 2 New Product Use this method can let the user to this product the overall function has more understanding.

Design points: 1 user role rendering is believable, it is easy to think that you will encounter a similar situation. 2 copy: Can be used more affinity, simple copy.

(The image below is a guided screenshot of the impression note)

D. Sample Attraction

The guided content is integrated into the real interface, and the user can perceive the function of the product through the information of the interface through reasonable selection of the presented content. This form of guidance can be very good at the first time to show the user product shape, build user interest; the example can let the user predict what the interface will look like when using the product, can let the user have a full understanding to the actual interface, and can let the user see the Product complete function and form. But this kind of way is a kind of pay attention to the interface to present, use the visual effect to attract the user's way, so the product itself has certain request.

Applicable conditions: 1 The interface itself design needs to have a certain degree of innovation/aesthetics/attractiveness, so into the real interface of the guide can be attractive. 2 The product itself, if the user's business can slowly reach a complete form, then the real interface of the example of the way can be cited to increase the user's interest in the use of products, and to enable users to understand the product function more fully and perfect.

Design essentials: 1 The content to be presented in the Guide should be carefully selected, and the typical functions and features of the product can be fully displayed. 2 copywriting is preferred.

(The following image is a guided screenshot of path)

E. Straightforward Way

If the content points can not be concatenated, only one by one list, then in the design we Can-

1. Create a scene for each content.

2. Place attractive or competitive content.

3. According to the principle of the effect of memory reasonable sort. Put the most user-focused content at the front. (Memory effect: The first content memory effect > The memory effect of the last content memory effect > The contents of the middle part)

4. Streamline the content of the guidance. Do not place too many boot pages.

5. For each page design can refer to the following effective attention to the design techniques.

Effective Attention

Attention is the basis of memory, memory is the result of attention. Without good attention there is no good memory, good memory is based on good attention.

The Guide pages we design also need to attract the attention of the user, so that users can spend their energy to read the information we want to tell them to achieve an effective attention. What can be done specifically?

We can improve the results from different content and design methods, as described in the following one by one.

1. Focus

The interface does not have too much visual focus, easy to distract users, resulting in users do not know where to look.

When the information in the interface is focused on a certain point, the user can quickly and accurately locate the content of the information to be read, so as to digest the information.

There are many kinds of focused design techniques, such as lighting the part of the light in the most need to pay attention to the user information, the way to blur the background, highlighting the previous information content; Of course, in addition to the common methods cited in the case, you can use other ways to focus, as long as the effect can be achieved.

The focus of information requires designers to choose the content of the information, as far as possible to remove unwanted content.

If there is still more content after streamlining, the information can be focused by pulling out the level of information. As far as possible in the design of the content as a whole, forming a few chunks of information, not too trivial. Trivial content is not conducive to the acquisition of information. Because the user's knowledge of the information is a whole to the details, users in reading content, more accustomed to first of all to abstract the content into a whole, and then carefully read the overall details of the content. So our design process needs to enable users to quickly abstract the overall information.

The legend is a counter example. In the case of the design of the page formed a too many divergence points, the user's reading difficult to comb into the whole block of information, increasing the difficulty of information acquisition.

2. Optimize the message conveyed by the picture

Human's ability to read picture information is much greater than the understanding of text information. Pictures make it more intuitive for the user to perceive the message they are about to deliver.

In different pictures, people face, beauty, smile, a dynamic picture is more likely to attract users attention.

Also for the beauty of the function of the guide, the left side of the design does not need the help of words to allow users to understand the skin, and the right side of the design if only look at the picture is incomprehensible. The guide design on the left is more intuitive than the right-hand guide design.

3. In addition to the static visual screen, we can also increase the user's attention to the content of the guide.

Now the design of the Guide page is more static visual pages. Human attention to dynamic content > to static content. So in addition to the static picture of the way, we can fully increase the dynamic content to attract users ' attention.

The legend is the QQ watermark camera and the Flava guide page.

The QQ Watermark Camera's Guide page is uses the dynamic attention, each page uses one pushpin to nail a photograph, but the picture will have the Pushpin center slightly to sway around. Flava also, the middle part of the picture is a dynamic demo. These 2 designs are very easy for users to pay attention to the content of the dynamic part, so as to read the relevant content.

Of course, in the dynamic content, we also need to pay attention to the visual focus of the problem, can not let the interface of the dynamic focus too much. Generally 1 dynamic focus will be better.

Of course, in addition to the existing cases, we can also think, in addition to the dynamic content, we can inspire other senses to attract users ' attention. For example, you can add some sound effects. No such cases have been found yet, but personal feelings can be tried.

4. Change the interactive mode between screen and screen

Now the screen interactive mode of the Guide page is basically sliding, we can also increase the user's attention by changing the existing interactive mode. After all, the user's curiosity about something new is still there. But don't blindly change for the sake of change. The way of interaction should match the content of the design. Change the interactive way to be easy to learn, in the design of the interface to have the use of metaphor clues, so that the new interactive way to become natural and easy, otherwise it will cause users disgust.

The legend is a feedly boot page. Changed the usual way of sliding around, using the way up. Each boot page wants a card and the Read Guide page slides up and slides out of the screen. Interface vision for the new interactive mode has a clear guide, does not increase the difficulty of operation, will let users feel is an innovative company.

5. Can effectively convey the copy a. Word Control

From a psychological point of view, no more than 9 characters can be remembered in a short period of time. (This is the characteristics of human memory, human for the content of short-term memory capacity is limited, generally for the 7±2 project, generally 7±2, that is, 5 ~ 9 items, which is usually what we call the memory span.) More than 9 characters, the user is difficult to remember and easily disturbed and forgotten. Copywriting should be designed to focus on the point that meaningless unnecessary redundant words should be decisively removed.

If it is still beyond the limit of the number of characters, then the content of the copy can be layered.

By way of typesetting, highlighting the characters that require user memory, weakening other characters. In general, the outstanding characters of 2-7 are relatively easy to remember.

By means of punctuation, the long copy is changed into short subunits, which can enlarge the capacity of short memory. Punctuation can be achieved by marking, blank, and breaking.

(This is also the use of human memory characteristics, if more than short-term memory capacity or insertion of other activities, short-term memory is susceptible to interference and forgotten.) In order to enlarge the capacity of short time memory, we can use the method of block, the small memory units will be combined into large units to memory, then the larger memory unit is called block. ）

B. The content and style of the copywriting

The content of copywriting can be integrated into the current hot spots or topics, and the style of writing can also have the characteristics of the times. So that users can feel the product can keep up with the times, close to the current social life, more than the general copy of the user's attention.

construct characteristic

Many of the guide pages in the design of homogenization problems, extremely similar design techniques, design style, layout style, similar copy content, make users difficult to remember or attract attention. The characteristic of building a product boot page is a good way to differentiate it from other products, and features can make the Guide page stand out.

So how to build features?

1. Building features from the design approach

We can look for unique building points from the different elements that guide the content of the page.

Background picture photography angle or style/post processing/hue; layout design style/Layout layout/color scheme; text style; multi-screen switching mode can also be considered

Building features does not require all elements of the content to be done, even though it is possible to build features on only one content point, but what needs to be done is that the features on this point are so obvious that users are easily aware of it.

2. The characteristic construction of the series Guide design

For some products that continually update iterations, the necessary new boot content is often given when an important version is upgraded. Therefore, apart from a single guide to the content of thinking to build the characteristics, we can also draw a little farther, from a serialized guide to the design of the angle to build features. The guide of serialization needs to be considered from the beginning of a single guide, and a theme for serialization is conceived. The design of the guide page of Sina Weibo below is a characteristic construction of a serialized guide design. It chooses the season as the theme, according to the characteristics of the season to carry out the operation of the content. This way can let the user to the content that many times leads to feel a kind of new integral characteristic, the way that is close to the current life also lets the product feel to have the newer sex, easy to accept.

last

Of course, guidance is not a solution to design problems, and guidance can only be used as a way to assist.

The article summed up the 5 points is I in the actual work of some design sentiment and collation, which must have some more subjective and insufficient place, welcome everyone to Pat Bricks and exchange. This time the main collation of some of the front-led design techniques, follow-up I will continue to organize the process of guiding the design of the content. Thank you for your attention.

Thank you for your reading, this article by Tencent Isux Copyright, reprint, please specify the source, the offender will investigate, thank you for your cooperation.
Annotated source format: Tencent Isux (http://isux.tencent.com/user-guide-design-01.html)