DO UI kit for PhotoShop

How to design awesome log-in forms on mobile

Davina S
5 min readDec 13, 2016

Tips on creating the best user experience

Sign-in forms on apps and mobile sites have given us all a headache at times, and I still come across a lot of very badly designed ones. What makes a bad mobile form? We’ve all seen them: the long or multiple screens of endless form fields or those annoying security questions like ‘my first pets name’ or ‘town of birth’. A recent project gave me the goal of turning a confusing form with poor usability into something fully optimized for mobile.

Looking at both good and bad examples of UI, I came up with a simple list of tips to help guide us in creating better sign-in forms:

Keep it simple. Let users sign in via an external app such as Facebook or LinkedIn, if the user is already signed into these apps (and most of us are) then it prevents them from having to re-enter their information again. A quick and easy method!

Don’t over-complicate things. Give users the option of signing in with their email instead of creating a separate username. A username is easier to forget (and many users WILL forget). If you have to include a username, then give your users the option to sign in with either the username or their email address.

If the password on your form must contain certain characters, make it clear to the user, this prevents confusion and stops your user getting frustrated by those error warnings popping up if they create the wrong type of password.

Try to keep the form fields to an absolute minimum, consider asking for just email address and password to begin. Let the user sign in with these two credentials and, if needed, request further information later on once they are signed in.

If your form has to be long at the outset, consider splitting it across multiple screens. It breaks the task down and makes the sign-up process appear simpler, if you present new users with fewer form fields per page, they are less likely to get bored and give up (something I’ve done many times).

Make it easy for users to retrieve a forgotten password. Remember to include a very clear ‘lost password’ link. If possible, allow the user to reset their password via their registered email. I’ve lost count of the times I’ve filled in my email address, clicked on the ‘forgotten password’ link, only to have to re-enter my email address, annoying right? And if you absolutely MUST ask security questions, try to keep them to a minimum too.

Don’t log your users out. This really goes without saying. There’s nothing more frustrating than having to log in each time. So make sure you’re not making your user input their details every time they use your app, you could even offer them a ‘Remember me’ check-box. Of course, don’t forget to include a ‘log out’ function, in case the user really does want to log out.

Ensure the ‘Log-in / Sign-in’ call-to-action (CTA) button is easy to find. Think about the user interface, don’t make the user scroll for the CTA if they don’t need to, consider colours and shades you will use, if your call-to-action is not distinctive, this could confuse your users. Muzli on Medium have a collection of form screens for more inspiration.

Don’t think too much about whether to use ‘Log-in’ versus ‘Sign-in’, there are many arguments for and against each. You’ve noticed that I have referenced both here, however, consistency is what matters most, so pick one and stick with it throughout your site or app.

Finally, test your designs on an actual mobile device. Whether you have a fully clickable prototype or just a flat wire-frame image, by loading it onto a mobile you’ll get a better idea of how your users will perceive it. Remember that some users will have smaller devices too. If you find it tricky to use yourself, then no doubt your users will too.

Keep it simple

The easiest approach is to just think simply, don’t make your user guess, mobile presents us with a small amount of space to work with; consider stripping back anything you don’t need whilst still finding a balance between usability and security.

By following some of these ideas, you’ll be offering your users a better sign-in experience, and if you have any new ideas, be sure to share — I’d love to hear more!

Like what you read? Don’t forget to share!

This article was first published by Davina Spriggs on LinkedIn.

Davina lives on the Mediterranean island of Malta where she works as a UX designer. Originally from the UK she has also lived in Barcelona. See some of her work here: www.davinaspriggs.com

Keep in touch

Connect with me on LinkedIn and Twitter, or check out some of my UX work on Dribbble.

More posts from Davina

Becoming a freelance designer

Discovering the surrealist world of Spanish artist Salvador Dali

--

--

Davina S

UX product designer, creative artist, PT, vegan health coach & marathon runner. Sharing posts about my 2 passions - design & fitness.