Rethinking the Novice teaching mode of mobile application

Today's translation is from Theresa Neil, the author of the book "Mobile Application UI design mode" (O ' Reilly Rooster); The topic discussed in this article is also extended from this book: the author uses his own book in the actual practice of the design pattern, encountered problems, and then began to rethink ... then enter the translation.

The design pattern library is a great source of inspiration for designers, but the common practice is not necessarily the best. In this article, we'll take a look at why many mobile apps are not as effective as novice teaching models and what we can learn from game design to help us choose more effective design patterns.

After the introduction of our mobile application UI design pattern, Intuit invited me to communicate with their mobile team. At first, I explained the value of design patterns in different fields (fashion, architecture, software, etc.) from a relatively high level. After speaking, their senior UX manager, Alissa Briggs, added some cases, and told me that they had studied in my book the chapter on "Visual Attraction" (see "The design pattern of a guided mobile Application Interface"), and tried "dialog", "hint", "Use Wizard", " Slides "and other ways, but still can't effectively guide users to start products. These should be quite "helpful" interface, in fact, so that their users feel confused and frustrated. It amazes me.

Some of the lessons Intuit have tried in their SNAP payroll applications include dialog boxes, hints, slides, and use wizards.

After that, I worked with RetailMeNot to help them design novice teaching in iOS and Android apps. Their product team wants to make sure that users are clear about the value proposition of their products and how to use specific features, such as storing stores and coupons, and so on.

At the time we thought that a short use of the wizard (3 steps) or a video demo would be more effective, and that some of their stakeholders thought the slides were a good way, so we tried. But the result of the test is that instead of attracting users, they have a negative feeling.

One of the respondents told me:

"I just want to go into application and explore immediately." ”

To sum up, in a test, the user either skips the instruction or ignores the contents of various dialog boxes, wizards, video demos, or slides. Worse, these teachings irritate new users who want to get into the app at once.

Some of the test UI drafts used in RetailMeNot include slides, video demos, 3-Step use wizards.

Why do these models fail?

And why? I try to find the answer in the field of game design. Game designers have always known that you can't throw new players into the battlefield and expect them to enjoy the gaming experience immediately, or they will be killed before they know how to use them.

In the game design, the method that enables the player to participate from the zero initial depth is more mature and effective than other fields. In fact, the design of mobile applications, the truth is the same. Although the concepts of "life value" and "death" are not involved, the frustration and confusion experienced by novice users is similar. If you let too many new users feel this, then your product basic to game over.

Portal will first let new players into a safe environment to familiarize themselves with the various methods of operation.

Extra Credits's online video series deeply analyzes every aspect of the game world. One of the "tutorials" (Youtube) is worth every mobile application designer to watch and learn. This video introduces some basic rules for creating novice teaching in the game, and we can extend it to the mobile design field:

less text, more interaction. Don't show all the teaching content in a single brain. Interesting, worth trying. Consolidate the learning effect in practical use. Listen to the voice of the user. Rule 1: Less text, more interactive

When we want to explain something, text is usually the most convenient tool. But when we want users to learn something, the text is less effective. According to the "Tutorials 101" proposal, we should avoid relying on text, because "the text will disrupt the use of rhythm, break the feeling of immersion, even those who need help especially the user will easily skip text teaching." ”

Too much text, equivalent to "telling, not demonstrating," is contrary to the design philosophy of mobile applications. Novice teaching should be "demo, not tell"; it should be interactive, allowing users to learn by using. Only by allowing users to rehearse before "actual combat" can they know what to do when they really need to complete a task;

Take a look at some examples of comparisons:

Boomerang vs. Mailbox

Boomerang apps on Android, Novice teaching is all about "telling" and writing too much.

Mailbox applications on iOS, interactive novice teaching, encourage users to learn by doing hands-on.

digical vs. fantastical

Digical applications on Android, the sense of detachment between the text in teaching and the behavior they describe is too strong.

Fantastical applications on iOS, which invite users to conduct drills in the classroom to grasp the gestures that are used in the actual use.

Catch vs. Clear

The Catch app on Android uses wizards to show features and how it works, but it's hard for users to actually remember.

Clear application on iOS, the tasks in the default view are teaching content, and users can practice each item according to the text description.

(Insert a few words: I personally have reservations about the novice teaching of clear. At least I used the first time completely did not have the patience to so many "gesture learning task" completed one by one; too many gestures, really finished the task of learning can not remember; If you delete these teaching tasks, when you really need, it seems that there is no such "help" content. Don't like it. -Translator C7210)

Important: If there is a way to "demo", Do not "tell". Let the user learn through the operation, text only to play a supplementary explanation or invitation to operate the purpose of the walkthrough.

Rule 2: Don't have a brain to show all the teaching content

"If you start out with all the teaching content and want to teach everything to the players, they will be overwhelmed and lose the desire to participate." "Tutorials 101 tells us so. Replacing "player" with "user" is a clear link to mobile design.

If the amount of information in the Novice's teaching is too large, then even if the user is really going to learn, they will forget what they learned before they actually need it. Provide instructional information to them in short, digestible fragments when users need help. You know, novice teaching is also to make users the first impression of the place, you want to let users produce "give me more" desire, or "Give me Less"?

dooo vs. todoist

The Dooo application on iOS, on the one hand, uses 11 interfaces to show novice teaching content.

The Todoist app on iOS displays a hint each time only where it's currently needed, such as adding a task or viewing the Options menu.

Usertesting recently confirmed in the article "Six UX lessons learned from the New Facebook app,paper" that "users prefer how-to", which is called "Operation guidance" Refers to the application of the user for the first time the actual use of a series of situational operational tips.

Important: Instead of showing all of the teaching content to users before they actually use the product, provide the most streamlined and useful information when users really need guidance and help.

Rule 3: Interesting, worth trying

The rule mentioned in Tutorials 101 is "make teaching more fun." Of course, not all mobile apps can be fun, but as the video says, "Teaching should be as interesting as any other part of the game" applies to mobile design.

Even if it's hard for us to make the application of novice teaching truly fun, it's also necessary to design it to make users feel interesting, worthwhile to try, and seamlessly integrate with the application's overall experience.

Let's compare the guided design of the two reading classes of NBC News and Flipboard. NBC News uses a static slide model, in which, in addition to the "interesting" font, the whole teaching is essentially straightforward: too much text, too much information, boring, lack of interactivity.

The first experience of Flipboard (2013) is quite different: without a textual introduction, the bottom half of the interface will flip a little bit, allowing you to see "below" and something, and after the flip part is automatically closed, you know you can "lift" this part to see more. If you haven't made any action at this point, the bottom of the interface will be prompted to "page up".

Each subsequent page dynamic effect enhances the user's sense of relevance to the operation gesture and its results.

Important: Increase the depth of user participation in teaching. Try to add "interesting" interactive elements to the right place and create a "quick learning, direct use" atmosphere.

Rule 4: Consolidating learning effects in practical use

Remember how excited you were when you understood the law through a simple experiment in your physics class? That's what we're going to say. Of course, before the experiment, the teacher has explained the relevant concepts, but it is the hands-on experiment so that you really understand the knowledge.

The same is true of novice teaching in mobile applications. If you have followed the previous three rules, this one will look very natural. Form can be very simple, for example, in the interactive novice teaching, if the user completes an operational task, they provide some visual or auditory feedback. Then, when the user performs this operation again during the actual use of the application, the same form of visual or auditory feedback can reinforce their memory (if you use sound feedback, remember to provide settings that allow users to turn off their sound effects, because once the user is familiar with the operation, repeated auditory feedback becomes interference).

This approach is also complementary to the rule that "do not have a brain to show all the teaching content". In the course of the user's actual use, after they have learned the most basic usage methods, they are prompted to guide the user through more "advanced" features, or to give some unexpected feedback (such as a "reward") after they have done some action correctly. You can enable users to consolidate what they have learned in the actual use of the application process.

Polar (left) will give the user a hint of gesture action after several rounds of voting. Duolingo (right) is more gaming, and when users have completed specific learning goals, they will receive rewards and upgrades.

Rule 5: Listen to the voice of the user

Considering that you've spent months or even longer building your own product, I'm afraid you're not the best person to explain to your users how to apply the work. As mentioned in Turorials 101:

"When you work in a project for a year or two as a designer, it's easy to mistake the concepts that are difficult to understand for the average person to be obvious and intuitive." ”

In this problem, simple and proper usability testing can remove most of the obstacles. Look at your users, see where they are stuck, where they have problems, listen carefully to their views and comments as they use the product or prototype, and remember not to ask them immediately, otherwise it will cause them to inadvertently guess what you want to hear.

The designers of SNAP payroll found in usability tests that operating instructions (or situational cues) can produce the best teaching results. We came to the same conclusion after 4 rounds of usability testing for RetailMeNot.

Main point: You think you're crafting the design of a beginner's teaching, but being overly knowledgeable about a product can blind your eyes. Try usability testing to get your target users to help you find out where the problem is, and find out more about the new form of teaching that best suits your product.

Recommended reading: Novice Guide Design for mobile applications

Mobile Application UI design pattern

This is a mobile application UI design pattern reference book, the 10 categories introduce 70 mobile application design patterns (including anti-mode), with more than 400 screenshots and illustrations to help readers understand and utilize UI design patterns to address common design challenges while providing "learn-and-use" skills and experience ...

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 the is for Web English original: Http://www.smashingmagazine.com/2014/04/22/rethinking-mobile-tutorials ... Translator Information: C7210-ux players, interactive designers, cat slaves, guitar fucker, is now working in Tencent Isux (Shanghai)