Better UX/UI for Google Authenticator

Anybody who knows me also knows I'm a big fan of Two-factor Authentication for a greater level of security. Most recently I have been using Google Authenticator, when possible, to generate my codes. (Image after the jump)

However, for a company that's pushing mobile-first so much, I am quite disappointed in Google's mobile app for this purpose, so I decided to throw together a quick mock-up of a better solution that would provide a better mobile interface and experience.

In the picture you can see my version on the left and Google's version on the right (As of June 22, 2015 on iOS). The first thing I did was move the menu from the top to the bottom, where your fingers are naturally placed, for easier access. I also reduced the height slightly but kept the icons the same size. I also added the familiar + in the red circle to add new items (This would hide if the area filled with services).

For each service I not only moved the service name and email/ID to the same line, but I also included the service icon for a quick visual reference without having to read each name.

I slightly reduced the size of the numbers and increased the font size for the service names. This greatly reduced the overall height of each section and, as you can see, allows me to fit all my current services within the viewable area on my iPhone 6, AND leaves me room for two more services before I would need to scroll! Even with the reduction of the numbers, they are still very easy to read on my phone.

This was a pretty quick mockup, and I'm sure I could make it even better with some tweaking, but the point was to show how much UX really does matter with even a little bit of thought going into how people use mobile devices.

Google Athenticator Mockup

 

Tags: efficiency, usability, mobile, interface

Pin it
Show comment form