How to design mobile app Novice Guide better? -20150108 Morning Reading class

It is now common for users to eject the boot page the first time they open the app. The boot page is used to help users better use the app.

Since these are often the first set of screens that users interact with, they also set the expectations of the user's application. Therefore, it is essential that those involved in developing apps-product managers, designers, developers-take the time to evaluate whether the app's boot page is necessary and, if necessary, to implement it well.

In this article, we will provide some good suggestions as well as resources, common design methods to help you improve the user experience of the Novice boot page.

? Do you want to provide a guide page

In recent years, we have seen a lot of discussion about the effectiveness of guided pages in mobile applications. A popular discussion of the boot page is, is the application needed? Is there a fundamental flaw? Is there a basic element of simplicity and user-friendliness?

Digital design has a lot of rules and examples, these things are very good. These rules ensure that designers and developers do not have to explore their own direction when developing products. More importantly, they ensure that users avoid unnecessary stress when using a new app, but they can rest assured that the editing feature will be represented by a pencil icon and that the thumb icon is "like". Therefore, the rules for designers have a lot of guidance role.

But the fact is, each app is unique, how to use, and use, these differences in certain circumstances so that the guidance has created a reliable, pragmatic, user-friendly characteristics, let us look at the case.

Case 1: Interactive Blur

If you develop an app that interacts differently than most users interact with before-especially gesture manipulation-the guide page plays an important role. Gesture-type apps are still in the experimental and exploratory stages, for example, developers need to instruct users how to interact with the app to clearly show each gesture and its corresponding function. For example, the clock software timely, in the screen specified position can be increased by sliding up and down to increase or decrease time

Timely to achieve desired results by pre-telling user gestures

Case 2: Blank statement

If an app does not have an extra text statement, it will let the user fill it with text in one or more steps, and this is the way the Guide page works. Although the boot process is only a step, it allows users to feel comfortable with what they are doing, without worrying about something wrong.

Feedly shows users how to retrieve the first part of the content

Case 3: series

If your app is a family of products, which means you have a desktop and a Web page, the Guide page will be very important to enhance the user experience, especially if your mobile app doesn't have all the features of the other version. This is especially important in complex business apps, where many of these apps play a number of user roles, including every specific access and security mechanism.

Typically, both the web-side and desktop-side support all features, such as creating, viewing, editing, and deleting content, but the mobile side restricts these features and can only be viewed. In many cases, a simple statement will help the user to better use their app.

Case 4: Personal information

If your app relies on personal information, such as age, gender, weight, marital status, etc., then collect and store this information on the Guide page. A step-by-step guide to the user's purpose is to give them a clear understanding of what you are showing and to make sure that the user can change their personal information at any time (usually on the settings page)

Fitbit tells users about the importance of personal information

Although your app does not meet the above case, your users will still be able to adapt through the Guide page guide. Remember that the user interacts with the product at least to make them understand the benefits of the product. You can show this information on the Guide page, and we'll discuss the function of the boot page later.

Of course, our job is to design an intuitive, easy-to-use product. However, we should not ignore the value provided by the bootstrap page to the user, which will make the experience more interesting.

How do you use that guidance?

This is the most common three ways:

1. Advantage Pointing Guide

2. Function Pointing Guide

3. Progressive Guidance

Let's take a look at some of the rules used in each of these ways

Mode 1: Advantage pointing guide

This is self-evident, the best place to show the app to users, based on one or more of the following ways to communicate with users:

1. What is the purpose of this app?

2. How can users integrate them into their lives?

3. Why should users integrate them into their lives?

Evernote food clearly shows users the benefits of using this app

Here are some guidelines to consider when using this approach:
1. Display three information for the most suitable

This figure is not based on scientific theory, but because the focus is to get users to quickly understand the app, "three" is the most appropriate (excluding screen titles). This way, users can quickly get started with the app without being tired of the information.

2. Apply the "one swipe gesture, one concept" rule.
Recall that most of the information you are reserving, a clear swipe gesture, may be more likely to be remembered as a centralized message. The same is the app boot page. "A sliding gesture, a concept" rule will help the user to centralize and digest every detail of the information. Sending too many messages to the user will add to their visual exhaustion of the important information you want to convey.

Prioritize

Don't go overboard and show off how cool your app is, focus on the user's data and remind yourself of the real needs of your users and all the problems that may be facing you. Then, look for ways to solve them by guiding them.

Language consistency

Evernote food, previously mentioned, uses verbs to achieve quick attraction and communication. This approach is effective, efficient and concise. If you can condense into several high-potency verbs or adjectives, then one or two sentences will suffice. This method must be adhered to. An effective and consistent expression, both visually and professionally, attracts users and enhances the user's experience.


NYT now uses concise, clear statements to demonstrate its benefits and values

Login, guide before registering

Because the boot page means a global look at the entire app, put it in front of the registration and subscription services page. Once they have decided to subscribe, the user is ready to experience the app, reminding them that the benefits of the app are irrelevant.

Keep it simple

Perhaps you will wonder if it is really necessary to guide the page. Should this be mentioned in the App Store? Without doing this, the App Store description is just the type and size of the app. The boot page must be brief, so the focus must be important. In addition, many people skip the App Store description and go directly to the download experience. So, when the user first opens the app, a simple explanation can help the user understand the app's functionality as a whole.

Precautions:

Readability is a very useful app, unfortunately there are a lot of obvious problems, this is particularly prominent on the Android platform:

1. Inconsistencies.

2. Users must digest the information shown on up to seven slides.

3. For some long-message slides, for example, a slide show about sharing features can be replaced with a simple share icon.

4. A slideshow that encourages users to install Firefox plugins is redundant because it's just a mobile side. In addition, previous slides have been told to users, "readability supports web-side and mobile-side." "The boot page should not be an all-encompassing marketing product on the mobile side, but should be associated with a mobile platform."

Avoid too many PowerPoint presentations and keep content and platform-related

Mode 2: Functional boot

Another option is to give up the advantage Guide and focus on selecting the important features of the app to boot. This is similar to coach marks, if you take this approach, take a look at the following:

1. What is an important feature? (for example, how to start or the most common behavior)

2. When to use these features (for example, when you view search results)

3. How to use these features (for example, double-click or drag to the left)

Carousel highlights these key features

Don't explain the concept of being widely known

Since the spread of the Internet, from desktop apps to web apps to mobile apps, the symbol "X" has always meant closing, exiting, or canceling. So, unless the symbol has a special meaning on your app, don't tell the user what it means.

Adobe Kuler does not show the other meanings

Three slides, each showing a major feature, if you show a major feature in each slide show, then the maximum three slides, each showing a major function.

Help users to open the App tour, if the app is empty by default, for this point on your boot page. Don't let users face a blank page as soon as they open the app. Including a note to guide users to start, users do not want to do so, even for a second, they will think this is a bug.

Spendee users feel at ease by telling them how to get started

The boot page is placed before the login or registration page, as in the last way, before the user is registered or logged in.

Something that should not be done:

Photo Show class app,500px has some amazing content and rich features. However, the app on the iphone platform made some mistakes in booting:

1. Navigation bar and its function display. Tells the user that they can navigate through the areas below the navigation bar.

2. Some slide show buttons such as "link", "Favorite", "share". These three features are displayed by a button icon, which often reminds people of its function. So it's completely superfluous to explain their usefulness on the Guide page. Let's guess that the target audience for 500px is unfamiliar with these icons. In this case, the user is guided through the context of the app to provide better service (for example, when the user is viewing the image, the next step may be "like").

3. A slide Show "process", a timeline that records changes in user activity. You can benefit from these "processes" once you follow others.

By telling the user this feature to guide them, at least some people can get help from it.

500px avoid showing too much functionality on a single slide to keep information concise and important

Mode 3: Step -Up Guide

In general, the best way for people to learn is to practice. This can be verified in a step-up guide, a real-life guide page that displays information to users as they use the app. For example, when the user is on the dashboard interface, they see only the information that is relevant to the dashboard, and when the user views the search results, only the relevant search results appear in front of them.

Feedly There are some hints when the user opens the app for the first time

When you step through the user, keep in mind the following points:

In a complex workflow, it's a good choice to step through if your app's workflow is quite complex or is dealing with complex things like finances. Users can digest them better only when the information is appropriate and logical.

Use in cases where some features are hidden

When developing mobile apps, we always focus on the high-efficiency features on small screens, and then we have to hide the menus and some features. We only use voice, double tap or long press to bring up these features. In this case, we need to guide the user to use these hidden features.

For example, take pocket as an example, as shown below. The available features are in the reading list, and users can see these feature options only by dragging to the left. Because the user is associated with the content of the app, the user must add a feature in the reading list at least to make the click, and the app prompts the user to drag to the left to display the hidden features.

Pocket can gradually guide the user by prompting the hide feature

The best thing is to use gestures to manipulate the app, and if your app relies heavily on gesture manipulation, this is the best way to practice. Let the user take the corresponding gesture action with the introduction of the function.

Solar takes every gesture hint, allowing the user to master the corresponding function through practice

Guided continuity

For gesture manipulation app, provides a shortcut and corresponding action, text hint for a series of gestures in the Setup interface.

Remember, the more gestures your app has, the more gestures the user will have to remember. There are also many gestures on the user's mobile app, and they will also be confused. Users have to remember the meaning of double-clicking between each app. At this point, you have to make some annotations to make the information easier to understand and to make users feel more comfortable.

Beats Music provides permanent, quick access to a range of gestures

Precautions:

Because gradual guidance is the use of the User app assistance, the biggest risk is that users in the use of the app constantly prompt users, which will undermine the user to better experience the app. So, use this approach to show useful information to users in a gentle, human manner.
In addition, in each guide page brightness should not be too high, give users more space to breathe, the purpose is to enable them to better experience your app. Guidance is not to disguise bad design, but to assist users to better experience.

Alternative Solutions

The above mentioned methods are the most commonly used and most popular. But you can also create your own way to better guide users!

Option 1: Mix

Hybrid method--mixing one, two or three methods. This approach is sometimes possible, for example, as shown by Flink:

Flink-Combined Boot mode

Option 2: Video

Video booting is also used in some apps, and this approach is also worth considering. This is a different direction, and applying some videos is more practical and looks like a tutorial, however there are some purely ads. These videos will automatically play and unintentionally invade the user's vision when compared to the video on the Web page. When users are in public places, the explosive sounds from mobile devices are clearly discordant and inappropriate.

Fifty-three uses the power of sound and video to show their app–paper

Option 3: Sample Data

It is also worth making some sample data available to the user. In particular, sensitive data, such as financial and human resource data, to be processed by the app. If the app loads these sample data, the user will be more comfortable with the actual operation, learn how to use the app, and be prepared to better enter real data.

Provide some sample data to the user for reference to the application of learning app

Conclusion:

The guidelines and examples in this article will help you with your guided project, however, as always, users are at the heart of everything. So, regardless of the way you use it, remember to revisit your own role, user usage scenarios, and user data you hold, whether through market research and analysis.

If you still don't know how to do it in that way, you can test it in one or two ways and analyze the feedback to see if that's feasible. There is no one way to universal. So, as always, use the data to make the most sensible decisions.

How to design mobile app Novice Guide better? -20150108 Morning Reading class