It’s all about making a good first impression.
Don’t you want users to fall in love at first sight? In the first few minutes of using your app, your users must feel welcome.
An important part of the onboarding process is the login screen that your users see in the first moment they want to use your app.
These screens must be simple and clear. People can quit your app when they have to fill in a lot of information or when they are not quite sure what information is asked for.
But, what is the best way to create such a screen? To find out, I created a list of login screens of 12 popular apps; which parts do they master, and which parts can they improve on?
Let’s start off this list with the log-in screen of the most downloaded android app: Facebook.
At the top of the screen, Facebook tries to immediately take the user into the app’s goal; connecting with friends by liking, commenting and sharing.
This reminds the user of why they downloaded the app. However, the busy top can distract the user from the screen’s goal; getting the user to log in.
The log-in form is clear and simple. There are two options to enter the app: to sign in with your email and password or to create a new account.
Those who want to rent an apartment or earn extra money by renting out their apartment, have heard of Airbnb.
The first screen is focused on new users.
AirBnB highlights two options: to continue with Facebook or to create a new account. If you want to log in with your existing account, you have to look for the login button at the top right corner.
The design is clean and recognizable. Especially for new users, reaching the goal of signing up is easy, clear and free of distractions.
Twitter lets you engage with people through tweets, retweets, comments and likes.
Twitter masters the art of simplicity.
It’s clear how to proceed if you don’t have an account. If you just want to log in, you have to search for it.
Twitter doesn’t provide the option to log in with third party services like Facebook, which makes it ‘harder’ for the customer to sign up.
The less clicks, the better. Being able to sign up with an account that already includes all your personal information, grants your user a quicker and easier option.
You probably heard about this e-commerce company.
The benefits of Amazon are immediately clear on the log-in screen.
Amazon shows you the pros of signing into your personal account, before introducing their three options: to sign in, to create an account or to skip the sign-in.
The logo makes the brand recognizable, as well as the hint of color used in the design.
The disadvantage of this design is the amount of text, especially when compared to some of the other screens we have seen. If you design a login screen yourself, try to reduce the amount of text and be clear.
Let’s take a look at another e-commerce giant: eBay.
At the bottom of the page are the sign-up options to choose from. Users can easily identify what would suit them best. This is a big pro about this minimalistic design.
What could be improved: as soon as you open the app, there’s no sign of Ebay any more. The app has lost its recognition. The whitespace feels empty and the tone of voice robotic.
For those who may not know Dropbox, it’s an online web storage where you can share your documents with others, and access them when you are connected to the internet.
Dropbox’s log-in screen has a similar approach to Facebook. By showing three different frames alternately, Dropbox explains the core benefits to its users. The lines are short and clear, with a small illustration to get the customer’s attention. The distinctive buttons guide the user to the next step.
It’s immediately clear that you are using Uber. The name and color block is taking over almost ⅔ of the entire screen. It can be distracting from letting their users sign up, but has a positive effect on brand recognition.
As you can see, uber only provides two options for signing up:
sign up with your phone number or one of your social accounts (Google or Facebook).
It’s clear that Uber wants you to put in your phone number by highlighting the option.
Pinterest is an app that helps you out when you are looking for new ideas. It displays photographs of styles or ideas you might be interested in, which you can save.
Their login screen is easily recognizable, because of the logo in the middle.
Besides, the pictures on the top of the page gives you the same feeling as using the actual app; you scroll through the pictures and like styles and ideas that speak to your mind. Because there is a lot happening, the design is not minimalistic, but doesn’t feel overly crowded or screaming at you.
The routes you can take are also very clear. The three options to continue are presented in different colors and clear, short explanations.
The picture on the top refers to the app’s goal, but it is pretty prominent. However, you can easily identify the Sign in button, and the user has options to log in with either his Facebook or Google account.
Skype is a way to keep in contact with friends, family or colleagues that are not able to meet you in person.
Unlike some of the examples above, you can’t log in with your Google or Facebook account, but it’s connected to your Microsoft account. The design is recognizable and still clear; there’s only one button to push on the first screen, hard to miss.
LinkedIn is a social network to share your professional experiences and get in contact with other colleagues and potential employees in your work field.
LinkedIn definitely scores points in its minimalistic design. This is about as minimalistic as it can get. But, on the contrary, because of this type of design, you can’t recognize the app properly.
LinkedIn uses their brand colors, but it’s hard to see in one glance that this is the LinkedIn login screen. Especially for new users who are not familiar with the colors used by LinkedIn.
A small, well recognizable, LinkedIn logo would keep the design intact, but gives users the confidence to know what they sign up for.
SHAREit is an app that makes it possible to transfer files between different devices and users.
Unlike the other apps mentioned in this article, users don’t have to log in at SHAREit with any of your personal information or personal account.
Users only need creativity, because they have to come up with a nickname to use. They can upload a photograph from their device, or choose a standard illustration on the screen.
Logging in with a nickname has the advantage that users don’t have to fill in any personal information – which has the disadvantage that no data gets collected to stay in touch with users.
However, users have to think about a nickname, instead of just filling in standard information. For the people amongst us that are not that creative (or think they are not), this could be an extra hurdle to take before signing up.
Obviously, like all screens, log-in screens should be user-tested, for example with our solution UXCam.
To keep your customers interested in your app and sign in after they download your app, make sure you logging screen is simple and precise.
Clearly present the different options your customer has. Less is more. But also keep in mind that it has to be recognizable for your readers.
My favorite from the list above? For me, Airbnb has a minimalistic, clean design, but it’s recognizable and distinctive. It also has the option to login with Facebook. An option Twitter – the master of recognizable simplicity – doesn’t. This makes Airbnb my favorite.