The design idea behind FACEBOOK paper new User Guide

In design, Paper is my personal favorite product, in addition to its innovative mobile App interaction and many surprising design details, the initial use of the magnetic female guide is also quite commendable. The article was to be shared with you after reading a speech on new user guidance in a small-scale technology-sharing session of the Paper team, posted on YouTube on April 18.

Background: April 18, Facebook posted a video of the Paper team's small-scale technology sharing meeting on YouTube, where 5 Paper team members introduced the design ideas and specific aspects of new user guidance, UI, animation, and gesture interaction during the Paper development process. Law, and with a case description; In this sharing session, the official first announced the Paper behind the animation engine POPs is about to open source (yesterday Github was open source, quick action).

Open Paper can be seen, unlike the common app,paper of the main interface is no navigation bar. The goal is to render as much useful content on a limited screen as possible to the user, rather than being occupied by a variety of feature buttons. You can compare the first screen of Facebook for IOS and Paper:

The latter is significantly more effective than the former (pictured below, yellow):

But this is risky: users have been accustomed to entering an App to click the navigation button to do all kinds of operations, now lost navigation, must think of other ways to tell users how to use this app--what kind of way is better?

The Paper approach is a boot/tutorial (Tutorial). Tutorial has a number of benefits, such as making it fun for users to learn about APP use, like looking for a treasure, but the downside is Lla, such as the possibility of interrupting a user experience (think about how bad it feels to be interrupted by a guide flying out of a screen if you're doing something); Not to mention the mood when you see a boot that is not relevant to the current operation, and the ability to force a user (why should I be forced to learn these features?). Especially when you just open the app and there are 5 steps Tutorial: I'm not sure what your app does, how can you learn to remember?), and so on.

　　Paper the principle of doing Tutorial

Do not tell the user all functions and methods at once

The Tutorial of each feature point appears in the corresponding scene of the user action

Timely feedback to the user (figure below, when the user is guided by the tilt of the phone, show successful feedback)

Make sure the whole process is in App.

Tutorial can be closed (avoid forcing the user to feel forced)

Get inspired by watching the interaction of various games and make Tutorial as interesting as possible

　　The appearance mechanism of Tutorial

In order to provide users with timely help, while adhering to the principle of avoiding disturbing users, Paper defines the mechanism that Tutorial appears:

Tutorial must appear in the relevant scene

That is, if the user is in the Settings page, the system will never show Tutorial that is not related to the settings.

Determine whether a section of Tutorial should appear according to the correlation test

For example: The user is browsing a post, when the system should be for him/her to display the Tutorial related to the browsing posts; Suddenly the user clicks on the notification button, and if you continue to display a post-related Tutorial, it has nothing to do with what the user is doing (viewing the notification).

Paper does not want to show the user a bootstrap that is not relevant to the current action, so set the Tutorial dependency variable. The Tutorial is started when the detection status shows a dependency of True, and if False, the current Tutorial to the tutorial center is stranded.

Tutorial Start delay

There are two advantages to doing this:

1, the user in the A-b-c coherent operation, avoids in the operation A and the operation B to appear between A and B's Tutorial.

2, to the user to understand the function of time, only the system believes that users need help to start Tutorial.

　　The perception of Paper team to do guidance

The user likes to guide, the premise is the guidance to the user really to help the role

Therefore, the guidance to do to really help users solve problems, at the right time to give users the appropriate content.

The typical response of a user to a new App is "I want to try it out on my own, and then look at help if I don't understand it."

So give the user the opportunity to try for themselves, not to be guided immediately.

Find the balance between "help users" and "annoying users"

Excessive, non-current scenario-related guidance can cause users to get bored, and appropriate and timely guidance can really lead to the role.

P.S. This video, for the development of mobile applications, especially for similar Paper dynamic animation is very interesting to see the students, many dry goods. I am not, do not understand the animation, only read general principles, about the specific implementation of the t^t.