Mobile product design user guide

In the mobile phone product design process, due to the limited carrying capacity of the mobile phone interface, product features continue to expand, you must open the application after the user to inform him some of the novel features, and guide him to complete some of the major task processes, so that users do not Lost in unfamiliar applications overwhelmed. Help users quickly master the use of applications, to experience the fun of the application, novice guide has become a must-design link.

The direct goal of user guidance is to help users better use of the product, the ultimate goal is to enhance customer satisfaction. Although, in most cases, we can rationalize the design, as much as possible to simplify the function, so that users do not need guidance and help to complete the necessary tasks. However, in fact, the limitation of mobile phone products and the pursuit of powerful features make this goal difficult to achieve. Therefore, more and more applications begin to use user guidance to help users quickly get familiar with the product.

First, the text description category

The first simplest way to guide users, is the text description category. Describe the way with the text to help users understand the function of the product and the need to perform. Text description User guide Several examples of the following figure:

From left to right are Memento, Instapaper and Jamie Oliver

Menento is a diary program. When you do not add a tag to your diary, there is a text description that tells you that the tag is used to browse and search and can be created while creating and editing a diary. Tell you that you can add friends as a tag, you can add location as a tag, tag can be added to the event, you can create a custom tag; Instapaper is a reading tool, when you first open the application, there is no article, this page will There are written instructions to tell you that you can find a human readable article by friends, authors, and browsers. The article will be displayed here when you add an article to Instapaper via a browser bookmark or email. Jamie Oliver is a gourmet tool. If you do not create a gourmet shopping list, this page will remind you how to add Shopping list.

Applicable situation:

Clever as you have certainly found, the examples mentioned here all appear in the absence of data. No data, is a text description of a very important scene. Many designers ignore the interface design without data and the product staff will ignore how to guide the user to use the product without any data. As a result, the user can see the empty panel and whisk away.

In fact, the text description can also be used in more than 5s splash screen (Splash Screens), can also be used in a operation button below, can also be used in a data loading pop-up box. It can be used anywhere you can think of, as long as it is a reasonable design requirement.

Disadvantages:

Of course, the disadvantage of the text description is also obvious. Long summary of features, few people can patiently read, not to mention the boring manual has always been Apple products offensive, so the text description should be cautious, do not abuse.

Design Guide:

To use the user language rather than the programming language When no data can be given when the text description Do not lengthy, to be concise Can take the time to wait Explain the function with a text Can describe the complex function of the operation

Second, the function reminds category

Because some functions are designed to ICON is not conducive to identification, hidden some functions hidden after the gesture operation is not easy to detect, some of the features is the product's main function requires the user to know, in this case, more and more applications use function to remind the class Float to do user-oriented, such as:

From right to left are Tweetbot, QQ Contacts and Talkbox

Tweet small float with arrow to inform the user, click on the navigation bar to switch the watch list; QQ address book with a small float with dynamic effects to remind the user to slide to the left to show the hidden content on the right; Talkbox with Gif small The animation of the floating layer to tell the user, put the collection next to the ear can listen to headphones.

scenes to be used:

Used to inform important features, hard to identify the icon, not easy to detect the hidden operation

Disadvantages:

Sometimes need to remind too much, often impossible to start. If your application does not have a clear and important function, or careful design, caution with good reminder. Because you may not be reminded users need, so that novice users know what to do, veteran users that you are too superficial. But fortunately such reminders will not interrupt the user's operation will not force the user must have read, but it is also because of such reminders fleeting, it is easy to accidentally missed, resulting in no longer be able to view, So be careful to set a repetition rate to avoid being missed.

Design Guide:

Do not interrupt the ongoing operation Judgment Need to remind the timing 3 ~ 5s Auto disappear Can appear repeatedly about 3 times Used to remind the hidden operation or important function

Third, the operation guide class

Operation guide class user guide is a large number of applications and games and SNS products, if it is a complex product set a lot, but also must have a reasonable operation guide. Operational guidance is divided into mandatory and non-mandatory. Mandatory is the registration, verification, activation related processes, do not meet the conditions can not meet the safety; non-mandatory are mostly to encourage the completion of a good information or to encourage completion of a task, such guidance is best to give some incentives , Such as points, badges, levels, etc., at least have a "congratulations, success," such as the satisfaction of the heart. See the specific case below:

From left to right are Albumphoto, Gowalla and With.

Albumphoto guides the new user to create a new album; Gowalla guides the new user to create a check-in message and share the picture to his friends; With guides the user to bind the Twitter account to share the photos. If it is a complex task flow, each step should be made clear to new users, this step is where a link, how to operate, what is the role.

Operational guidance requires a certain amount of operation to stimulate, at a certain time, there is a certain frequency of repetition, and define a certain guide style.

scenes to be used:

Guide the user to perform the operation, guide the user to login and register the bound account, guide the user to improve the information, guide the user to import the relationship, guide the user to share the application to the friend, and so on

Disadvantages:

Sometimes it's a bit overly suspicious, and users do not necessarily need this level of guidance, as it is better to have only one spotlight focused on important operations, otherwise all apps are going to be like game clients.

Design Guide:

Can guide the user to perform the main operation Do not force the user to perform the operation If the task is multi-step To pay attention to the design of each step The main function can be distinguished from other design

Fourth, the operation schematic type

Schematic novice guidance, often using a simple animation, or the function is displayed, and then move smoothly to the outside of the screen; or the click of a button to do a click after the effect of animation out, or a Some users expect to perform the operation demonstrated in advance. The first time I saw good action The newbie boot was run on the Nokia N900, the Maemo operating system, with a small bright spot that simulated the effect of a finger tap on an action button.

The picture above from left to right are Naver, Bump and Sina Weibo.

Naver search type switching is the drop-down search box will appear, the first time you start, the search box is in a drop-down state, remind the user to pull down to see these features, and then automatically hidden; Bump is in the initial interface, with animation To inform the user, touch the phone can transmit data; and Sina microblogging in the first load data, it will give a gesture + pull-down guide to inform the user to pull the data can be refreshed.

These are simple and easy to use methods to convey to the user the fun of the use of fresh features, than hard words or outdated shells are too considerate, encourage designers to try a lot of this way.

scenes to be used:

Animation of complex or important operations

Disadvantages:

Design to achieve trouble, the cost is slightly higher

Design Guide:

Pay attention to the duration of the animation and the timing of the emergence of more to illustrate the hidden operation or function Do not affect the main task flow Five,

Do not know when to start, user-guide style began to become popular, this seemingly more traditional means to a more comprehensive display of product features and methods of use, especially for product updates, this version What functions have been iterated, what improvements have been made, so that users know when they come in and know that they spend time and money updating applications and are worth it. The single-page instruction manual guide is as follows:

From left to right are Google clients, Pull Time and today

Google gives multiple question marks on one page, click on the question mark to see what's going on in the area, and how it's done. Pull Time uses a more intuitive way to show how this interactive, best-of-breed product works; and Today uses one Paging description of the page to inform this version updated what.

Obviously, a page can carry a limited content, the emphasis is not particularly prominent, in order to more three-dimensional narrative products, there is a demonstration of novice guidance, see the following case:

Layar with a series of animation + text, that is, to explain what the product can do, have explained the use of the scene and the use of methods.

In order to have a better explanation for the user for each newer version, many applications begin to use multi-page update instructions or introduction, as shown in the following case:

Weico this revision by the novice guide method, is definitely regarded as stunning level, with 6 pages, a detailed introduction to the avatar features, simply referred to the Weibo sun mood, Gif direct play, pictures Progress reminder, etc. Secondary functions. Although from a functional point of view, I do not necessarily agree with the virtual image, but from the guidance of speaking, it is too much love, is indeed a design company.

scenes to be used:

Product update instructions, user education for complex products

Disadvantages:

The cost is slightly higher, with compulsion

Design Guide:

Tell the user where the guide is now in the guide Each page only make it clear that a feature can be selectively skipped only appear once

Perhaps a variety of complex guidance, to help new users quickly familiar with the application, but also allow old users to tire of repeated familiarity with some already familiar features, in particular, some applications are still in-application education users how to use the system-level features, Even more cumbersome. Once the help documentation of the computer software may be a good idea, when you have ambiguities, click on the help, quickly access problems encountered obstacles, everything is solved. The iPhone also has default help icons, but the situation is not very good.

Of course, I advocate, not more than those simple and straightforward guidance, but a simpler and more straightforward guidance, similar to the Naoto no direct design, allowing users to unconsciously by some control, not Consciously produce some behavior. This requires designers to understand something psychology or marketing.

First, the digital guide

Almost all of the digital guidance design is in the use and exploration of the user's psychological impact on user behavior. In many cases, this number of incentives does give users a good guide, allowing users to follow the design trajectory. However, digital guidance is not a panacea. Under some circumstances, such a guide design may have a negative effect if it is not properly implemented.

From left to right are the street, Taobao and QQ mailbox Wap version

Several unread messages along the street, several friends request to guide the user to see the new message; poly cost-effective using a countdown to a sense of urgency design, next to a group button next to, and deliberately the price and Discount marked red, showing how many people have purchased, these figures together to create a kind of time, low discounts, more struggle to grab the illusion of allowing users to quickly choose to buy a commodity; QQ mailbox with a lot of red bubble design, Focus all of a sudden on the module where you have unread messages.

Second, small secretary class

Do not know where the source is, more and more applications began to increase the small secretary, XX customer service, XX product team such as the official account for the user to boot. The obvious advantage of this approach is that cold mechanical guidance becomes a fictive personification guide. The little secretary will tell you as soon as you open the app that you can do something and be very considerate. Such as the following applications:

From left to right followed by WeChat, M chat, TalkBox

All three apps belong to the IM class. In your friends, add a system account to communicate with you and teach you to use the app. Of course, are not enough intelligence, reduced to advertising channels, rather than really answer small secretary.

Third, content education

The idea of ​​content education is that at the beginning of a user's application, there may be no data or no user in the application, and the user does not know what benefits the application can bring to himself. At this time, reading the class client will add basic default books, such as product manuals; GTD client will increase the number of to-do list, to do with the way to tell what you can do, how to do; Social class will give you a few pre-set friends, you look at what they have done, you know what to do; search category may give search terms, you see how they search, on their own Know what to type in.

Fourth, the text slogan

Do not think this way old-fashioned or outdated, this approach is the most effective way. If you tell the user "good chef favorite dish," he will choose the dish; if you tell the user "good people will manage their own spending plan," he will set yourself a consumer plan; if you Telling the user that "a good album has at least 10 photos," then the user will get ten photos up and they are eager to be admitted that if you subconsciously implant this good sense, he will pay for it .

Five, incentive mechanism

Good guide is to allow users to explore their own discovery, to have fun. Where is the fun? The one hand, the user found a hidden operation, self-inflated sense of accomplishment, on the one hand may be, the user completed a task, the system some reward users donated. Points such as Foursquare's original, the mayor and badge.

I remember M chat has a page to do is particularly good, is the personal business card page, when your information is not perfect, it does not guide you to hard to fill in, but put a progress bar in the interface "completed 10% And tell you that the more you finish the harder it is to find more friends, so in the midst of that frustration 10%, I have to add more information to make it look better and more, until it shows 100% It's like a great mission has been completed.

For novice guidance, first write so much, welcome to criticize all means Heroes ...... ^^

Falling water elya girl: http://elya.cc/blog/2011/10/09/user-guide/