“Download the app → open → splash screen → read tutorial → sign up → wait → allow notification → allow geolocation → invite friends → … ”

As a product designer who loves to work on mobile apps, I download tons of different mobile products every week — always looking for a new little interaction or great visual to inspire me. Sometimes, you come accross some very cool and interesting concepts, but most of the time, you get depressed, seeing that a lot of apps do not respect their users.
There are some basic principles that you need to introduce into your app in order to make it better, in order to make your users happy.

In this first part, I will give some keys about :

- How to ask for permission
- The signup dilemma
- Good loading effect

Ask for permission

There is nothing more annoying than launching an app for the first time and instantly being asked to allow notifications. When you did not even had to see any introduction screen, there immediatly a native popup coming in front of your face saying “I want to spam you every day”.
Most of the time, when this happen, I just delete the app because I think “Ok, this one do not know a thing about user experience, I won’t find interesting content here”.

Imagine putting one foot inside a restaurant and having a waiter coming in front of your face asking “Give me your email address, we will send you our newsletter everyday”. How rude? Would you do that? Would you like somebody to do that to you?
You did not even try the place, you did not taste their food, why would you want their newsletter?

Just like in real life, there are some ways and timing to respect to ask a user for permission. Wether it is in order to allow notification, to subscribe to something, to give their credit card info, etc.

What I usually do, and what you should also do, is to first come up with a screen, using your own design and graphic identity, in order to politely ask and most of all, EXPLAIN why you want this.

Some application, like Uber, are completely dependent on the user geolocation. Here is how they ask :

Just the basic iOS modal. Now, everybody knows Uber nowadays, but what if I did not? What happen when I do not allow my geolocation, because I have no idea what they will do with it?

I either have to set up my location directly in the search field or have to go to the settings and enable it. In both case, there is a lot of UX friction.

This might be prevented with one simple step :

Adding this extra popup does not require a lot of work, and it does not matter if it is one extra step before using your product, because it shows that you care about your users. It shows that they are safe with you and that you want to deliver the best experience possible.

The sign up dilemma

When I was working on my last startup product WhoWanna, I struggled a lot about how I could properly onboard first time users, for them to have the best first experience possible. In this product, it was absolutely impossible to use the application, without having created an account and invited some friends first. Which made it very hard.

If you think that simply adding a “Facebook connect” button on your app will take care of all your signup problems, you never really tested it. Facebook/twitter/google connect are amazing and so useful, but unfortunately, not every user want to use them. So how to be sure that a user will create its account?

Prove the value of your app

The usual signup flow we all use is kinda crazy. It somehow is working most of the time, but, when you think about it, it makes no sense in terms of proper User Experience.

In most of the app, there is a quick introduction or tutorial, that nobody really pay attention to, and then, you need to register before trying the service.

In which kind of world, do you give all of your personal information, without even having experienced a product? It is the notifications popup all over again.

What makes this flow complex is that, for a lot of product (like mine) you need all those personal information, for the product to function.

But, if you can, just add a simple “Browse without account” button on your app. You will see that once experienced, once they completely understand why and how your service will ease their life, the users will definitely want to be a part of it and create an account. And the people who will signup here, will be the one true users, because they did signed up completely intentionally.

Ask one info at a time

Sometimes, you will need a lot of information from your users, for him to get the best experience possible. But there is nothing more annoying in the planet than filling up form. Even worse, when you won’t get anything valuable out of it. Let me explain.

If I go on a shopping site, the platform does not asked for my credit card & personal info right away. It waits until I find something that I really want to purchase, to reduce the friction. And once I purchased it, eventually, it offers me to create an account (with a promo code for next time, if it is a good one).

Same thing happens for every kind of product. When I download a new app which looks great, I want to try it right away, maybe I will give a username and email adress if it is really necessary, but don’t ask for my gender and birth date while we just met. Wait a little longer and explain to me why I should.

Good loading effect

When you interact with a human, the other person will respond. Not necessarily with words, but with a movement of head, arms or eyes. Something will happen as a response of your interaction. This is the exact same thing with machine. If the user initiate an action, the software mustrespond to him.

What most of the application are using now whenever there is something to load are spinners. Spinning forever and ever.

Have you ever been to a restaurant and waited forever before receiving your order? Having absolutely no idea about what was happening in the kitchen?
Even worse, there is no waiter to come check and give you a headsup about how long you will be waiting for.
How bad and stressful is this experience? Would you go again and recommend this restaurant to your friends?

Well, having a spinner during any loading time is the exact same awful experience.
As a user, I am waiting to be served and convinced with your app. I don’t owe you anything and I don’t need you either. So, your experience needs to be as smooth and enjoyable as it can be.
So how what can you do?

Progress bar :

The first step, is to show the progress thanks to percentage, a round filling up, a bar or whatever, the limit is your creativity. Here is the first response and indication you can give to the user “You will wait this and we are here”.

Various progress bar borrowed on Dribbble

What I do not like with progress bar taking the whole screen is that it completely block the user view and make him wait, no matter what.

Depending on what kind of action is loading, you can use some tricks which will be very efficient in some user cases.

In 2013, Youtube introduce its new progress bar, stuck to the top of the viewport, 5pixel high and flashy Youtube red. It is one of the best progress bar used now and everybody borrowed it because this pattern got a lot of benefits.

Youtube progress bar

Not only, it displays an idea of how long the user have to wait before the loading is complete, but it also lets you navigate and act on the product at the same time.

While using a “progressive enhancement” approach on your application, it can add a lot of value to your experience.
Let’s say you are loading a page with a lot of content, images, text, link, videos and fancy graphic. The interface will be beautiful at the end, but what if I am just searching for a precise text link which has been loaded during the first miliseconds? It is nice to not be waiting the all ride.
What if a do a search request and the answer is the first one, I do not want to be waiting for all the others.

Never block a user when there are some content loading. You have no idea what he will be doing on the page.

Entertain your users

There are, anyway, some cases, when the user needs to wait. During a log in or signup for example.
Do you remember when you had dinner at a restaurant as a kid, how boring it was to wait? Somehow, it feels faster now as a grown up. Luckily, the bag of my mom, was always full of pencils and paper. I spent hours drawings and playing games, I stayed entertained.

When a user is waiting on your app, he got a touch device, with tons of different features and a connection to internet in his hand. I bet, you can imagine something awesome.
Have a look at video games. In order to load awesome graphics (even more back in time), you have to wait a long time. Game designers created awesome mini games to be played during this time.

Dragon Ball Tenkaichi loading screen

Talk to the user

The best interaction between two human is when they talk together and exchange thoughts. Sometime, words are the best and easiest way to communicate, and when it comes to interaction design between a man and a machine, communication is the key. It does not require a lot, to add, under your progress bar, a sentence explaining what is happening. This way, you will give better information to the user and make your application a little more human, a little more natural.

And please, don’t go with “Loading the awesomeness”, this is completely useless. Prefer some real information.

Trick and tips

Have you ever played a sport video game? On a controller, there are tons of buttons and the right combination are rarely instintive. This is why the loading screen is oftenly use for “trick and tips”. How cool is it when you just start a game and already know that “X + L1 + left” will make an awesome shoot and score a goal?