Many of us who work in the business of designing interactive experiences would agree that most days we’re pretty savvy when it comes to identifying less than optimal designs and working through them to get to where we need to be. To be fair, we all have moments when maybe our synapses aren’t firing on all cylinders, or our situational awareness isn’t at 100% (aka: distracted).
But on those off days, we need better visual affordances to help us along.
Case in point. Pandora. I recently found myself trying to log into my Pandora account from the Pandora home/landing page (I’d obviously been logged in forever), and for the life of me couldn’t figure out what was happening (or not happening) to the sign in page.
Briefly, I was repeatedly clicking the “sign in” link in the upper right corner, expecting the page to refresh and do something sign-inny, like a refresh, alert or instructions, highlighting…something, anything.
Troubleshooting kicks in, and I switch browsers, believing that something must be wrong with the site in Chrome. Hey, it happens, right? But even switching browsers (to Safari) nothing changes on the Pandora home page.
Since I was focused on the page more than usual, I realized that the primary focus of the home page content (in a signed-out state) is to sign in. (How come I never noticed this before? Or overlooked it so easily?) Studying the components more closely, it became apparent there was no large, bold type directing me to “Sign in below.” (That would have been super helpful in my case.) Instead, the copy on the page was introducing me, the account holder, to the concept of Pandora, “It’s a new kind of radio – stations that play only the music you like” followed by text fields for “Your email” and “Password” with a sign in button. At the bottom of the sign in module read tiny text, “Create an account for free.” with a contextual link, “Register.”
Okay, I get that once you start dissecting and breaking down what the text says and the labels in the text fields with the corresponding Sign in button, it’s more obvious that the page is intended for existing members to sign in. (Though I do question the introductory nature of the copy and it’s close relationship to the sign in fields for existing members. Seems like Pandora could have done a better job of directing members to sign in while using the intro copy for creating new accounts. But I digress somewhat.)
Recall I was clicking the upper right corner “sign in” link, and there was no visual response on the page. Each time I clicked, the page appeared to remain “static” with no error message instructing me to enter my email and password while highlighting the required fields on the page. When I clicked the “register” link in the upper right had corner, the page refreshed to the Register experience. Same with clicking the “help” link. So naturally my expectation was, in my distracted limited attention state, that something should happen to the page.
(In fact, I figured out what I was overlooking when I clicked “Sign in” from the Register page, and was directed to the Pandora home page. Where I’d started from.)
What I needed to happen is what the page did when I clicked the “Sign in” button next to the sign in fields – I got red text directing me to specify my email address and password. As I would expect. (And now I know that I can sign in using the fields on the home page.)
Now granted the upper corner is navigation, and the button is for input. But even the other navigation items (register, help) have a distinct page change, so at minimum I’d expect the page to briefly refresh when clicking sign in. And maybe some language to the tune of, “You’re obviously having a stupid moment, clicking the same link expecting something different to happen.”
Lesson learned here. Language should go with the action. And, secondarily, despite the fact that both the sign in link and Sign in button are “relatively” identical calls to action, the post-click visual affordances are different. Small discrepancy, yes, but the inconsistency affecting the user from quickly and easily accessing her account is the larger issue.
ittybittyusability 