Registration/sign up and login/sign in forms are common within mobile applications especially in the business to business realm. Most of the apps I’ve written have had a login and registration page. Usually the user only has to interact with these pages once and they are permanently logged in. The only time they have to use the login page again is if they manually logout via the menu options or if the app is security sensitive and requires a login every time the user opens the app.

It’s important to get the basic right on a Registration (Sign up) and Login (Sign in) page. There is a surprising number of factors to consider when designing and coding the reg/login process.

Firstly, it’s a good idea to show the login controls right there on the first page the user sees, rather than making them click on a button or link such as a ‘Login’ button. On mobiles there is an argument to be made that because of the restricted space that an additional click is justified, but with the larger screens on modern smartphones, it’s easy to accommodate a few input boxes.
Another common rule is that you should never use Sign In and Sign Up together. Buttons that are close together on the screen should use different verbs and when they may be similar then use different colours to distinguish them. Instead of using Sign In and Sign Up, it’s better to use Login and Register. Or you could go for ‘Sign Up Free’ and ‘Log In’. The Sign Up Free text will entice the user to go through what is sometimes an onerous Sign Up procedure. After all, there is still a minimum amount of data you will need to collect and users don’t like going through this process. The ‘Sign Up Free’ text is a little more enticing than just ‘Sign Up’.

samecontrols signin_signup

 

If the Registration and Login fields are going to be on the same page, then make sure they are differentiated. They shouldn’t look the same. A surprising number of apps have the Login and Registration forms looking almost identical. They have clearly designed this on purpose in order to give a uniform look to their screen. Normally this is desirable, but not when it could lead to confusion for the user. At least have the buttons a different colour and size.

 

multi2 multi

In order to minimize the time required for a user to register, it’s a good idea to allow Facebook, Twitter and Google+ login options. This means the user doesn’t have to create yet another user and password. However, some users will be sensitive about sharing even the minimal registration information that results from using this form of registration/login, so you still have to provide your own registration option. Privacy is a big concern and you don’t want users shying away from your app because they are forced to use a 3rd party login such as Facebook. Bottom  like is that you have to give them the best of both worlds. They should have the option to use Facebook/Twitter/Google login or to create a custom login within your app.

Remember that you are on mobile and that a mobile phone is a more personal device than a desktop, so don’t be worried about hiding the password during registration and login. Remember to always give an option to unhide the password during login. There are a few exceptions such as banking apps, but generally speaking, you should always give the option to unhide the password entry.

For usernames, use emails or phone numbers. It’s easier to remember and ensures individuality. It’s the standard these days so stick with what works.

As mentioned above, the mobile phone is a personal device so once the user logs in once then they shouldn’t have to login again unless they manually logout via the app.

That’s about it… all common sense guidelines, but it’s surprising how many apps don’t use basic UI rules when designing their login and registration screens.