15 Login Screen Examples for Mobile App Developers

Daffodil Software
App Affairs
Published in
5 min readAug 24, 2017

User experience (UX) has always been the element of precedence in a mobile app. A lot of efforts are put in to refine usability of an app and all of it starts with the login screen design.

Designing login screen for a mobile app is a constructive step. At the bare minimum, it includes option for account creation (Sign Up) and login (Sign In). Further, you can add more elements to the screen like social login, forgot password, view password etc. that perk up the UX. Here are some of the finest login screen examples to refer and the best practices that can be adopted to offer an easy app entry to the users.

a. Sign Up should be a Task of Few Taps

Sign-ups should be quick. A lot of users get annoyed by filling up a long registration form, which may affect the initial retention rate of the app. Let your users enter the app and then you can garner the information you require to make the user experience better. Here are few tips and examples to master sign up page design:

  • The rule of thumb for UX says ‘More Options, More Problems’. Therefore, make it easy for users to start using the app. Ask them for essentials like Name, email, and password when they are signing up. And once they are introduced with the app, they can fill in rest of the details to access app features and functionalities, accordingly.
  • Unless your app is gender or age-sensitive, avoid asking about it to the users it when they are signing up. They can update this information later, when managing their profiles.
  • Always give your users an alternative to email for sign in, like their social media accounts. An average internet user has at least 5 social media accounts. To simplify the process of email validation, allow your users to sign up through their social media accounts.
Login Screens with Alternate Sign-In Optio
  • Before the user sign up for your app, you can give them more confidence about the app potential by displaying the customer reviews. Here is an example.
Login Screen with Product Review

b. Use Email as Alternate to Username

  • A username with combination of random numbers is difficult to remember. That is why, letting the users in through their email address and password is a good idea instead.
  • Login through email has got security benefit as well. When using an app, the username is visible to all. This may be an advantage to those having prying eyes of a user’s account. On the other side, email address is not visible to others without user’ consent. And most of the time, email shared and email used for sign in are different.

c. Use Mobile Number and OTP to Login

Everyone can relate to the struggle of remembering passwords. To bring your users out of this problem, go for mobile number and OTP for login. Here is an example of how you can execute this login screen idea:

Login through Mobile Number and OTP

d. Offer Option to Login to Another Account

If your app gives an automated login option, just like Facebook does (one-tap login or with a 4-digit passcode), then give them an option to login to another account as well.

Login Screen with Email as Alternate to Username

e. Facilitate Password Resetting on Login Screen

From unlocking your smartphone to securing multiple accounts, we use and remember a number of password. Therefore, it’s quite obvious to consider that if a user logs into an account after a long time, they might not remember the password. So, give your users an option to reset the password, right there, on the sign-in screen.

Login Screen with Password Resetting Option

f. Inform your Users about what you Do

You can use this idea of login screen design if your app is new and you wish to give them an idea about your business model or your app. Have a look at how you can implement this through the example below:

Login Screen Informing about the Brand

g. Allow Users to View Password

Generally, passwords are a combination of alphabets, numbers, and special characters. While entering passwords to login, possibility is that your users enter a wrong password and thus he has to give one more try to the sign-in process. To escape this problem, give users an option to view the password, before they sign in.

Login Screen allowing to View Password

ALSO READ: Best UX Design Practices for A Mobile App Walkthrough

What’s the Best Login Screen Idea for your App?

For a login screen that can amplify user experience, it is important to understand the app and the user. Your app might not require all elements (stated above) to be added in the login screen. Confirm your user’s requirement and design accordingly.

Originally published at appdevelopment.daffodilsw.com.

Follow Daffodil Software on: Facebook | Twitter | LinkedIn

--

--

Daffodil Software
App Affairs

We build Mobile, IOT, & Web solutions that are intuitive, reactive and agile | www.daffodilsw.com