What are the 3 design details worth pondering in mobile apps?

This article, translated today, is a popular article on Medium. User is the King Part 1, the author from the user's point of view, summed up a series of current product design problems, and gave their own ideas and solutions. Enter the translation below.

"Download app→ open → start screen → read Tutorial → register → wait → authorization app send notifications → authorized app use location → invite friends → ..."

As a product designer who loves researching mobile apps, I download a lot of different app--every week to find new ideas for interaction and visual design. There are occasional cool, interesting designs, but most of the time you get frustrated because many apps don't respect their users.

Here are some basic design principles that can be introduced into your app to optimize your app and make it more fun for users.

In the first part of this series, I will mention the following points:

How to obtain a (user's) license

The challenge of "registering"

Excellent loading interface

Request authorization

The first time you open an app, you're immediately asked to allow it to send you notifications-nothing is more annoying than that. When you don't see any of the relevant introductions, there's a pop-up window that just hit you in the face-"I want to send you spam messages every day." Basically, once this happens, I delete the app right away because I think "it doesn't know what the user experience is, so I can't see anything interesting in it." 』

Imagine you just entered a restaurant, the waiter suddenly appeared in front of you, said, "Give me your e-mail address, we will send you a member newsletter every day." What rude behavior is this? If you were the owner of the restaurant, what would you do?

Why would I want to subscribe to his newsletter If I haven't had time to get to know the restaurant or eat its food?

In the app and the real world is the same, we need to use some means and time to request authorization from users. Whether this is to send them a notification, to subscribe to a service, or to request credit card information, etc.

I usually do this and you should do the same-first, use an interface that is consistent with the app design style, "politely" ask the user for authorization and "explain" why you need this authorization.

Some apps work entirely on the user's geographic location, such as Uber. It is done in this way:

The prompt interface for the first time you open Uber

Allow "Uber" to access your location when you use the app?
Uber will arrive at your current location and pick you up. If you start the ride, select Allow so that the application can find your location.

This is the most basic iOS modal window. Now everyone knows what Uber is, but suppose I don't know? What happens when I don't allow it to use my geographic location?

Tips for not allowing Uber to use geolocation

Location service is disabled
Please open the location service in Settings → privacy → location service.

I have to manually enter my location in the search box, or go to the settings to open the location service in order to continue to use. Whichever you choose, it's not a good user experience.

The actual problem can be avoided by simply one step:

The original author's optimization scheme

Translation: Uber
Personal drivers for everyone
In order to easily receive you and send you to where you want to go, please allow us to use your location.
(Your information will not be shared with anyone, it is safe here for us)

Adding the pop-up window doesn't take much effort, and even if it's an extra step before using the app, it doesn't have a bad effect. Because it shows your concern for the user. It tells users that their privacy is safe and that you want to bring the best possible experience to them.

The challenge of "registering"

In my last startup product Whowanna, I was stuck on how to better attract new users and how to get the best initial experience for new users. Because in the Whowanna, if the user does not register first and invites several friends to use, it is impossible to continue to use.
Whowanna is a social app that allows users to propose a campaign proposal to attract interested friends to attend. Therefore, it is only meaningful to register and invite friends to use it first.

If you think that just adding a "Facebook Login" button to your app can easily solve all of your registration challenges, you're just going to have to be a keyboard man.

True, Facebook/twitter/google account login is really great and useful. But the problem is that not every user will use them. So how do you make sure that a user creates a new account in your app?

The first thing to prove is the value of app

Our common registration process is a bit silly. Although it solves the problem most of the time, when you think about it, you will find that its user experience is not good.

Common sign-up process
Launch Interface →app Introduction (Login & Facebook login) → Invite friends →app main interface

In most apps, there's an introduction or a little tutorial that doesn't actually really look at anyone. Next, you'll need to register to continue using it.

In a virtual world, will you give your personal information to it before you have experienced the app yet?

The reason for the "register" process to become difficult is that many apps (such as Whowanna) work based on the user's personal information.

If you can, please add a "no registration" feature in your app. You'll find that once you've experienced the app, you'll know that the app is valuable to them, and then you'll have to register an account automatically. And the users who have experienced this process will be the fans of your app, because they are completely from the heart to register.

Ask the user only one message at a time

Sometimes, in order for users to get the best possible experience, you will need a lot of his personal information. But it's the most annoying thing to fill in the form. And what's worse, you find that you don't have any eggs after you fill it out.

For example, I open a shopping site and it does not immediately ask me for credit cards and personal information. It will wait and wait until I actually "buy things" to appear, in order to avoid premature interference. In addition, until I paid the money, the website finally let me to create an account. (If the site is good enough, it will give me a discount code to use the next time I shop)

This is the same for all products. When I download a great app that looks great, I can't wait to try it out. If it is really necessary, I will provide my username and email address. But don't ask me about sex and birthdays in the first. Please wait a little while and tell me why you need this information.

Excellent loading interface

When you are talking to others, they will respond to you. It is not necessarily the use of words, it can also be body movements or eyes. The other person always responds to your movements with some action. Similarly, this is true when people interact with machines. Once the user initiates an action, the software must do something to respond to him.

Today, most applications use the "chrysanthemum" rotation animation when handling the loading process, which is ubiquitous and never stops.

"Chrysanthemum" Loading animation

Have you ever been in a restaurant for a long time before serving food? And I don't even know if the chef is cooking your order? Worse still, there is no waiter to tell you how long it will take to wait. What a painful experience it is. You will never go to this restaurant or recommend it to a friend.

Yes, using "daisy" to load the interface is such a bad experience. I, as a user, are waiting for your app to serve me and convince me to continue using you. I don't owe you anything, nor do I have to use your app. The experience of the app must be as smooth and enjoyable as possible. So what can we do about this?

Progress bar

The first step is to show the user the current progress of your app. The presentation of progress is not limited to percentages, circles, or straight lines--Any form you can think of. This progress bar will give users timely feedback and guidance-"You need to wait so long" and you are now in "this position".

Various progress bars on the dribbble

I do not recommend a progress bar form, that is, regardless of what happens, the user's entire screen is completely obscured, and forcing the user to wait.

Depending on the type of content being loaded, there are a few tricks you can use to make certain usage scenarios more efficient.

In 2013, YouTube started using a new progress bar--it was locked at the top of the window, 5 pixels high and the color YouTube red. This is one of the best progress bars of all time, and many people have borrowed it for their ingenious design.

Youtube progress bar

This progress bar not only tells the user how long it will take to wait before loading is complete. At the same time, this mode of loading also allows the user to continue to operate while waiting.

Once your app has a "step-through" strategy, the experience will be greatly improved.

For example, you want to load a Web page that contains a lot of pictures, text, links, videos, beautiful graphics, and so on. This page may look good after it's loaded, but what if I want to see something that has been loaded in the first? Why do I have to wait for the entire page to load? Suppose the search results I want are the first things that are loaded when I search, why should I wait for other results?

Never prevent users from doing other things when loading a page, because you'll never guess what the user is going to do on the page.

Delight your users

In any case, there are always situations where users need to wait, such as the login and registration process.

Do you remember waiting for a meal in the restaurant when you were a kid? It was so long and boring. Fortunately, my mother had a bag of pencils and White paper for a moment. I used these waiting time to draw and play games, so the whole process was very happy.

When the user waits in your app, he's holding a powerful, connected touch-enabled device. I'm sure you've thought of some good ideas. Let's learn about video games. In order to load some dick bombing days of animated scenes (especially in the past), you have to wait a long time. So the game designers have designed some great little games that you can play while waiting.

The loading interface of Dragon Ball number one martial arts

Talk to users

The best way to communicate between two people is to talk and exchange ideas. At some point, speech is the best and simplest way to communicate. and the interaction between human and machine design, communication is also the key. It's not complicated, you just need to add a description below the progress bar to tell the user what's happening right now. With this description, you can give users more accurate information and make your app look more human.

Remember, don't just write "Loading something awesome," because it's completely out of egg. It's best to give the real information.

Skills and teaching

Sports game you should have played it? Although there are a lot of buttons on the gamepad, the right combination of skills is often difficult to press. Thus, the game loading interface is often designed to showcase the "skills and teachings" content. Just imagine, when you first in the game, you have learned that "X + L1 + left" is cast curve shot, is not super-cock?

The skill and teaching interface of a touch-screen football game

What are the 3 design details worth pondering in mobile apps?