You just want into your account. But the guardian (log in window) of your account is drunk and belligerent. Giving you bad directions and making you jump through hoops, as if for its own amusement. Technical limitations may have resulted in these solutions. However, a more elegant solution was surely possible. Other options are offered up below, but these may not have worked within the limitations of their respective environments.
First up is the BofA log in window. Credit where credit is due, overall this site is awesome. People have a lot of bad feelings towards the mega banks, but this website showcases the kind of features that power and money can buy. That being said, the following window trips me up almost every time I use it. I have finally learned to slow down and think about what I am doing when I encounter it. However, for the sake of usability, a user shouldn’t need to think. Design should flow naturally.
In Figure 1, the natural tendency is to fill out the Online ID and click “Sign In”. Seems easy enough. Step one immediately followed by step two. Wrong! You forgot to “Select account location”, as shown by the error message in Figure 2. These form fields violate the simple 1-2-3 linear process that we rely on in most aspects of our lives. Instead, the designers want you to follow an unnatural 1-3-2 upside down triangle process by filling out the online ID, going down to select account location, then back up to sign in.
Part of this is my fault. I prefer to browse with either private browsing turned on, or I clear my history religiously after every few websites. Shopping for shoes and then being inundated by shoe ads on every site, proves to me that the man is watching and it makes me mad. Sure clearing my history provides a false sense of security but it makes me feel better. In fairness to the designers, if I never cleared my history, this would only be an issue the first time I logged in, not every time.
All things considered, I am the user and this is about me, not the designer. Therefore, I propose the following solution in Figure 3. Place the various fields in an order that makes sense. Select account location, Enter Online ID, Sign In. Otherwise known as 1-2-3.
In the process of changing up the field order, other inconsistencies became apparent. In the original screen grab, “Enter your Online ID” is above the form field and “Select account location” is within the form field. In the interest of simplification, both descriptors get placed within the form field.
Also, “Enroll” was tucked down in the bottom right. Ease of enrolling is crucial to the overall experience and user numbers. Second only to being able to log in. By moving it up to a tab next to “Log in”, we increase visibility. The same thing can be said for moving “Help/Options” up to a tab. Moving “Help/Options” up also has the added benefit of removing the expandable triangle. This little window already had a text field, button, check box, drop down, expandable triangle, and link. The new design has been greatly simplified to fewer types of user input.
Next on our list is the log in for Redbox. After clicking “Log In” in the top right of Figure 4, why is the user taken to the “Create Account” tab in Figure 5? I consistently (and wrongly) enter my log in info into the “Create Account” fields assuming I am on the Log In page. I only realize that I have been had when I get to the “Confirm Your Password Field”. Then I am forced to click the “Log In” tab and re-enter my info in the appropriate fields in Figure 6.
In Figure 7, the solution places a “Create Account” link on the initial page next to “Log in” with each link taking the user to the appropriate page, saving user time and page calls.