UI and UX
Monday, December 17, 2018
Some might say that logging into a platform, whether it be Facebook, or Gmail, or anything really, couldn't get any simpler. You are more than often presented with 2 fields to fill in in order to login: a username and a password. Sometimes you're even given the option to login using your Google account or something of that nature (Single Sign On, or SSO). But after much thought, I strongly believe that 2 fields are no longer necessary. As a matter of fact, I am convinced that 2 fields is rather too many. There should only be 1 field. How is that possible? With the thing that almost all product teams don't utilize until much later in their current design process - the power of interaction design.
First of all - let's be clear on what "interaction design" is. It's not simply how a user interacts with a platform. That is an extremely vague description as to what the task at hand really is. It's really more about how a user's experience/journey can optimized while using a platform. Linking up screens (screen A slides in from the left, screen B slides from below, etc) is not a great way to go about interaction design. When a product only exhibits these interactions, it shows just how basic the product is and that much thought wasn't given on how a user would like to experience the product. Today's users expect much more than simple screen interactions from their digital platforms. Users wish to complete their tasks in mind and move from A to B in the matter of just a tap/click with as little thinking required as possible.
So how do you optimize and further simplify a 2 field interface into 1? Let the animation below speak for itself.
Now let me be a bit more transparent in this design's simplicity. Certain atoms that can be added are a back button (from password to username) to the left of the form field. An additional atom may be a Touch ID or Face ID option, which may be placed to the left of the form field when requesting a user name. Please keep in mind that a back button should not be present when entering a username, since you can only go forward in the user journey from there. Once the user enters a username, a back button can ease-in in between the form field and Touch/Face ID button or simply take the place of the Touch/Face ID button - both are valid option.
One element that I have not given enough spotlight to is a tooltip. I believe to make this interface even more user friendly, it would help to add a tooltip that appears once a user inputs a character into a field. The tooltip itself would say something along the lines of "Hit ENTER to continue" or "Hit RETURN to continue". The UI does heavily rely on a user's capability to hit a submission button on their keyboard (desktop or mobile) to move forward in the journey.
Check out the diagram below to further explore the experience and answer some of the questions you may have in mind.
Yes the solution is that simple. And very digestible, minimal, and user friendly. Your app/platform just got better.
Want to create something awesome together?
Message me on LinkedIn or email the Creative M Studios team at: firstname.lastname@example.org or email@example.com