Novice Guide Design for mobile applications

Previous has done a few values, an inexplicable washing machine interface redesign ... This time back to mobile applications dirty job, engage in grassroots construction. A text from Nielsen Norman's POPs group. Enter the translation below.

Many of the applications available today will provide a novice boot or tutorial task in the form of a "coaching board" (a translucent floating layer that paints a variety of usage instructions) during the initial load. Such guidance can sometimes actually help users use the product in the right way, but it is often unnecessary. If you decide to add such a novice guide to your application, you might want to refer to some of the design principles provided in this article to create a more useful guide, rather than a hurdle for users to skip.

Short, focused

You can't expect users to read descriptive content before using apps at any time. People open apps not to spend time learning how to use the UI, but to solve their problems at the minimum cost in the shortest amount of time. In fact, this is a paradox, because once you learn to use the UI more efficiently, users can save themselves more time. As we all know, the habit of web users not wanting to read text is famous, and mobile users are even more so, because in mobile contexts, adopts time is more limited, and attention is more easily dispersed.

Even if your users are willing to read those instructions, seeing too much content at once can exacerbate their cognitive load. Since users cannot read the instructions on the floating layer at the same time as they do, they must first memorize the contents and then put it into practice. and human short-term memory is difficult to save too much content, information in about 20 seconds time will begin to be forgotten. As a result, it is better to focus on one or two more than one display of each place in the UI at a time on a floating layer.

Morningstar ipad App: A floating layer shows too many UI instructions. In fact, some of the UI elements here are very good self explanatory (for example, click on the article title read the full text), there is no need for a brain to plug the user.

Reducing the focus of the description allows the user to focus on the most important notes. The less a presentation is, the more likely it is that users will read and remember. In addition, this approach is more guided, and people will be more willing to imitate the instructions in the instructions to try to operate, to ensure that their understanding is correct.

YouTube's Android app: Only show the user the corresponding guidance instructions in the process, rather than just throw it all on the back of your mind and forget about it. One focus at a time, direct the user to try to manipulate, so that it needs to read and remember the amount of information as little as possible.

Find the right time to provide users with the most important guidance tips, one at a time, to make them easier to understand and master.

avoid a series of hints

Sometimes, there are multiple function points in an interface that need to be explained. However, by using one way or another to illustrate the floating layer, the user will be more impatient to turn off the instructions, regardless of whether they are really useful or not. You can imagine that every user has a small container for the boot tip--it must be a whiskey mug, not a big cup of beer--you can't give the user too much, and it won't get too fast.

A succession of presentation leads not only creates short-term memory problems, but also makes new users feel that your application is too complex and daunting. Remember, in practice, this initial experience is enough to enable them to turn off your application and then look for alternative alternatives.

Makr apps on the ipad: Users will receive a series of boot prompts for each new area. The hint is too literal, and there is too much to do with the multi-step process before the user actually uses it. The user cannot do it while learning, and can only force memory of those steps before interacting with the actual UI. And there is no sign to let users know how many prompts to see next, the whole learning process is very objectionable, if it can also be called learning.

Makr brings a series of hints, and because the content is too literal, if the user quickly skipped, it really can not get any useful information, and then face the actual working interface will be completely confused. In addition, although each hint is in the form of bubbles, and there are clear arrows pointing to the corresponding description object, there are other UI elements that are mentioned in the description and are very anxious.

use graphical elements as much as possible

Using an illustrated form, not just the dry text, will give the user a general idea of the information in the shortest possible time.

For the step-by-step instructions mentioned earlier, you can try to condense each step into "the right graphic element + short text" and integrate it into a presentation level, which is useful for users to read, or to make multi-step processes more intuitive, understandable, and easy to remember.

Here are our Makr design proposals. The three-step process is put together and presented in an illustrated format. By "Customizing your template" with a unified title, users can immediately understand what the conversation is about, and the following three steps explain how quickly they can get to the point.

This is not a perfect redesign, of course, because users still need to write down the content before they actually hand it, but it's at least easier to read than the previous version. Consider such alternatives when you feel the need to tell users how to complete a complex multi-step operation with a series of hints.

don't confuse the actual interface

Must make the guidance hint in appearance and the actual interface element has the clear distinction, otherwise the guidance hint is in the interference actual interface, the user also can be confused, even will the teaching content as the function interface, tries with its interaction.

In our recent research on the usability of tablets, we found that users are always trying to click on the landmark icons in the teaching content when using Wimbledon applications. Their guidance tips are too subtle, much like the actual UI around them, and people don't realize that this is an interactive teaching content.

The easiest way to distinguish a hint from a normal interface element is to use a different font. We can usually see a lot of handwritten font style hints that can actually be contrasted with the text in the actual UI.

Let's look at a counter example. In the Ness iphone app, boot tips and an Action menu use the same font style, which can easily lead to confusing users with help text and interactive elements.

Summary

An important principle when designing a novice to guide mobile applications is to keep it as short as possible. Focus on the most important interaction tasks in the current interface, providing the most easily scanned descriptions in an illustrated way to avoid a series of prompts. Also, make sure that your cue content is not confused with the actual UI of the application.

Recommended reading: A guided design pattern for mobile application interface

Interface Design mode (2nd edition)

This book carefully combs the patterns in the interaction design in the order of the design process, each of which contains at least one example to facilitate the reader's learning. The 1th edition of the Chinese version after the launch of the great acclaim, all the way to sell; in the 2nd edition, the new social media, mobile design content, effectively conforms to the current technology development trend ...

Related books recommended

The translation represents the original author's point of view. Welcome to comment, or to the translator Weibo to further exchange discussions.

original site to compile the article. If you want to reprint, please specify: This article from is for Web English original: http://www.nngroup.com/articles/mobile-instructional-overlay/Translator information: C7210-ux players, interactive designers, Once the vision and front, the cat slave, guitar fucker.