The Curious Case of a Log In Screen
When we decided to overhaul the UX and UI of our iOS and Android apps at Vonage R&D Center in Israel, it was very clear to me what screen should be worked on first. Yes, you guessed correctly , I wanted to start from the very beginning — the login screen. In this article, I would like share with you the process of changing the UX of the Android log in screen.
Our login screen hasn’t changed since I joined the company, two years ago, and pre-overhaul it looked like this:
The colours and UI of the screen clearly had to change, because we were aiming for a younger, and more enjoyable vibe — it’s not shocking news that B2B applications can and should be as enjoyable as B2C products. We do spend most of our hours at work, after all. Still, it was more important for me to start with the UX.
The Problem:
The first thing I did was go to AppSee and check how many users we had for the lower resolution phones. I found that around 20% of our users had xhdpi phones, with around 6% using resolution lower than 540x960. When I ran the app on my personal device — a Nexus 5, and raised the keypad, the login screen looked like this:
Then, I went to the cool wall of mobile devices we have in the office, and found the smallest one we had — The Moto G.
When the app opened on the Moto G, the ‘Forgot Password’ and ‘Login’ buttons were completely hidden by the keypad, and the second input field was half covered as well, making it all too easy to tap on a prediction on the keypad instead of tapping on the field to make it focused.
A user who wants to log into the app on a low-res, small device would have to lower and bring up the keypad several times in order to be able to fill in both fields and tap the ‘Login’ button. They would need an extra tap to lower the keypad to tap on the ‘Forgot Password’ button. Something had to change, and I had to get to the bottom of the issue.
At some point, I wanted to find some inspiration, and so I went to Dribbble. But while there were many shots with cool animations, and pretty UI, most of the shots didn’t have the keypad open (perhaps the username and password were typed in using the user’s mind power) and even more shots had the login screen show in the newest, coolest mobile devices. Taking into account an open keypad, and a smaller device, broke these designs.
Looking at these shots did not help me find an inspiration, but it did make me ask myself, what were the actual issues that stopped our login screen, and the shots posted on Dribbble, from working on smaller devices?
I went over the shots again, and created a rough wireframe showing the common attributes between the different login screen designs. Here it is:
I found several things:
- Most of the designs, including our app, had the logo appear very prominently on the screen. Together with the top margin, it took more than one third of the screen’s height.
- The username and password fields, as well as the ‘forgot password’ and ‘sign up’ buttons were mostly center-aligned on the bottom half of the screen.
Both issues had to be addressed in order to find the right solution.
The Solution
Playing with the vertical margins between the elements did not work — minimizing those to the max while still keeping the UI elegant, and running the app on the Moto G it was clear the problem wasn’t going to be solved this easily.
The next ‘quick’ solution that came to mind was to remove the logo and bring the other elements to the top third of the screen. As quick as it was, so quickly was the idea dismissed. It wasn’t right from a Product perspective to remove the logo from the login screen of the app. We had to think of something else.
To add to the complexity of the task, it was decided to add another button to the screen — a ‘Help’ button that would assist the user to troubleshoot in case they weren’t able to log into the app.
The layout had to change. I started playing around with the ‘Login’ button, looking for a different way to present it on the screen. Finally, I decided to include the button in the same layout as the input fields, not beneath them, and instead of it place the ‘Help’ button.
Having solved this issue, it was back to square one on the most important problem that remained unchanged — how to make the login screen UX work on smaller screens.
Our biggest problem was the logo, it pushed all important elements down. We could not remove it entirely, but we could use another version of it. The app has a splash screen with the full logo in the middle, which faded out and was then replaced by the login screen. I took the shortened part of the logo, just the Vonage V, which was considerably smaller, and replaced the full logo on the login screen with it.
The PM approved of this change, and it allowed me to allocate less space for the logo, move things up more than we could afford with the full version of the logo, and we moved to creating a smooth animation between the full logo in the splash screen, to the minimal logo on the login screen. What we ended up doing is making the full size logo animate up and out off of the top of the screen, and then the whole log in screen would fade in over the gradient background that stayed the same.
I added two more things:
- Auto focus on the first input field once the screen appears, and bringing up the keypad — saving the user a click since most users do remember their credentials and can login successfully into the app, not needing the ‘Forgot Password’ and ‘Help’ buttons. This also helped the bottom of the screen to not look empty.
- All the elements on the screen were placed inside a vertical scrollview. This allowed users of small, low-res devices reach any field or button, without lowering the keypad once.
The Afterward
We tested the new login screen on myriad devices, had our QA team do the same, and since then have released it to our Beta users and gradually to all of our Android users. The results of the change have been positive in their entirety, as are the comments we’ve been getting from our users. Knowing that we are now equally taking into account users from all device sizes and resolutions makes me happy :)
Thank you for reading my story, if you found value in it, please share it. Have you had a similar experience revamping a feature? Please comment below.
