The same, but different, sign-in experience

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.”

Pandora.com Home Page
Pandora.com Home page

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.)

pandora_2
Pandora “Register” page

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.)

pandora_3
Error messaging

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.

 

Button Identity Crisis

Came across this beauty of a button in the upper right-corner of a lightbox overlay.

Image

 

The value of identity of course is that so often with it comes purpose.

– Richard R. Grant

Even UX for hoodies matters

Image

I am a hoodie fanatic. My husband can’t stand it and had literally phased me out of them several years ago but then they made a fashion resurgence.

However, I won’t just buy any old hoodie. The details are too important (I’m confident other hoodie freaks can relate). Too thin (as in weight)? Forget it. Not fuzzy enough? See ya. Sleeves not long enough? Buh-bye. It has to maintain the fuzzy, comfy appeal through repeated washings. I go so far as to hang dry to keep the fuzz factor from getting sucked away in the dryer (except to fluff). Even if the hoodie has a design or graphic that is the shizzzzz, if the sum of the parts don’t add up after repeated wear, fail. Honestly, I like my Lululemon Scuba Hoodie, but I don’t LOVE it.

Sounds like someone finally got hoodie design RIGHT. 

 

Dueling remote buttons

ImageThis remote has two buttons, in shades of red, in key positions at the top of the remote.  The one on the left is labeled “POWER” while the one on the right is labeled “ON/OFF.” To a remote novice like myself, my first instinct was to press the “ON/OFF” button to turn the television “on.”  Makes some manner of sense, right? After several failed attempts, I was forced to turn to a fellow co-worker and ask WTH? Turns out, the “ON/OFF” button is to turn the button lights “on” so they’re visible in the dark. (!?!?!?!) Lesson learned, but I still question the: 1) size 2) relative position and placement 3) use of color 4) and labeling applied to the Power and the On/Off buttons. It seems the On/Off button could be given a little less prominence, a different color, and don’t we have technology to make them glow in the dark or react accordingly with sensors?

 

Join Together, Be Moved

Quick break from the action to mention a recent commercial created by Wieden + Kennedy (Portland, OR) for the folks at Sony, “Join Together.” I love the concept: bringing together the engineer and the artist because, well, it’s the world I live prefer work in.

They usually live in different worlds, but when they work together, that’s when you can get something really new.

And the soundtrack, a sick remix of “Join Together,” by the Izzie Twins, is superb.

Check out the commercial (you may end up watching several times, like me) and read on: AdWeek.