Registration and Login UI Design
I designed a login and registration process back in 2011 which just went live. I’ve written a case study on the process and logic behind it.
While I was working for VideoGamer.com in 2011 we identified areas within the site’s community area that could be improved. We created a roadmap and broke the required changes down into different stages. From an agile development point of view we decided that launching redesigned registration and login processes, followed by an updated user settings area would lay the foundations for further changes to follow.
Login or Register?
If an action required a user to be registered with the site they would have to either log in or create an account to continue so I designed the login and registration processes together. Combining two forms could easily make the page cluttered, which might overwhelm the user and prevent them from continuing. To keep the page simple and inviting, only the minimum amount of input is required. All fields use placeholder text, preventing the need for labels, reducing clutter. I also removed all links other than the homepage to prevent users from becoming distracted and leaving the process.
Login Process
Only two standard fields are required and the option to keep the user logged in is offered to make things easier next time. Once a user logs in they are redirected to the page they were trying to access.
Registration Process
If a user has to create an account to access a feature they’re interested in, the feature has to be worth the effort involved in registering. It’s therefore essential to keep the effort required down to an absolute minimum. The obvious choice is to allow the user to create an account using an existing login, such as Facebook. However this page was designed in stages and to keep development time down to a minimum social network integration was to be added afterwards.
To complete a ‘standard’ registration we had certain requirements to meet. There were 5 fields to capture and legal text to display. Including this on the first page would have been far too off-putting so I decided to capture just 3 fields to begin with and encourage the user to sign up with a highlighted button. All fields are actually optional and used to pre-populate inputs once the user is redirected to the full form. If the user had completed 3 fields on the last page, they would only have two more required inputs to go, which doesn’t feel like too much effort and hopefully is enough for them to complete the process. They also have some additional hygiene options like setting a cookie to keep them logged in or registering for updates.
Validation
To keep the form even easier and more efficient, data is checked while the user is completing the form. The main purpose is to prevent the user being agitated by errors such as finding out their requested username is unavailable. This keeps the user on track. Also by showing a tick to indicate a successfully completed field, you’re rewarding the user for completing the form.
Spam Prevention
Unfortunately there aren’t many ways to prevent automatic registration by robots other than annoying Captcha inputs. I tried to make it as painless as possible by removing it from the main form and including it as a modal dialog just before the final redirect. (The light-hearted copy may also be a reference to my love of Terminator 2.)
Completed Registration
Once a user has signed up I wanted to offer some clear call to actions. I highlighted the ‘continue’ button for the obvious route to end the journey. I also added three large buttons as shortcuts to common actions for new users.
Logging Out
When a user logs out for whatever reason, instead of showing a blank page with a message to indicate they have successfully logged out, I designed a page to encourage the user to continue using the site when they weren’t at their computer by promoting the iOS app.
Forgotten Details
If a user is having trouble with either their username or password they can send an email to their registered address with a new password.
It’s great to see these designs working and out in the public. Congratulations to the team for doing such a good job of the development and I look forward to seeing what’s next!