Great UI/UX peer website

I stumbled across a great peer website today and wanted to pass it along. If you already know about Michael Locke (UI/UX Design, Training & Education), then feel free to leave “Old” in the comment section for this post.

Michael Locke is a Lead UX Designer with ADP with over 15 years web design experience, front end web development proficiency, marketing, photography, and a ton of groovy, savvy knowledge in related fields. From his “About” section, “I have a huge passion for helping people succeed.” Boom. There it is.

I highly recommend bookmarking his website and checking in now and then.

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.

 

Designing Solutions for Unpleasant Tasks

We can all agree that there are tasks out there that aren’t fun at all, such as filing taxes, paying bills, creating a will, etc. When it comes to designing UX for an unpleasant task, the first thing to accept (and remind oneself throughout) is that the task itself sucks because it just does, and that the UX professional should do as much as possible to not make it suck more. From UXMatters.com comes a FANTASTIC piece discussing design strategies for unpleasant tasks, starting with:

Accept That You Can’t Make Some Tasks Pleasant
A positive user experience can help minimize the pain and avoids adding more unpleasantness, but it’s not going to completely take the pain away. As UX designers, our job is to help people get through their unpleasant tasks smoothly, without piling on more difficulty. Ease of use and efficiency are especially important in easing the way through unpleasant situations.

Stay Out of the Way
Ensure that the UI you design doesn’t get in the way or cause more problems. Remove unnecessary features, distractions, questions, and interruptions so users can focus on their icky tasks.

Be Careful What You Say
When writing messages and other text relating to unpleasant tasks, it’s best for the tone of the content to remain neutral or perhaps mildly encouraging. Being cute or irreverent is not going to go over well.

Avoid Overwhelming People
Too much information or too many options can easily overwhelm people who are already stressed, anxious, fed up and pissed off. Keep in mind the following techniques:

Ease into Things
Dashboards present an overview that eases users into complex information by presenting a simplified view first before they dive into the details. This approach may be more appropriate than dumping a user into complicated screen right away.

Show What’s Coming Up
Another way to ease into a process is by telling users what to expect. People are more likely to begin and complete a process if you give them a reason to do so and show them what’s involved. Consider a quick text overview before a new section to better set expectations, or a progress indicator like those used in a check out process in e-commerce transactions.

Focus on One Step at a Time
How do you eat an elephant? Exactly. For some activities it’s best to break the task into smaller, more manageable “bites.” This makes the overall task feel less overwhelming and allows the user focus better on requirements.

Use Progressive Disclosure
Provide only the information and options users need to see in order to accomplish the tasks they’re dealing with now.

Hide Complexity
Don’t expose users to information they don’t need to see. Duh, right?

Minimize the Need to Read (when appropriate)
It’s widely accepted that people don’t like to read online instructions. Under normal circumstances, they’ll skim just the content they need to get through. When people are stressed out, this is even more true. So for stressed out users, do them a favor and keep the content concise and make it easy to scan with headings, bullet points, and format text that needs to be emphasized.

Automate Actions
Automate frequent, repetitive actions, or make it easy for the user to set an automated preference. Then make it obvious that it’s been completed in case the user wants to undo the action.

Provide Common Defaults
Provide time-saving defaults to users so they don’t have to input the values themselves.

Avoid Surprises
Enough said. Keep users informed and set proper expectations.

Give Users Control
Give users a sense of control by providing them with options instead of constraining them to a specific path. Advanced, knowledgeable users will appreciate skipping the screens and information they’ve seen before. Also, in the same vein:

Provide Options For Different Audiences
E.g, Novice vs Advanced users.

Give a Sense of Progression to Encourage Users
“Are we there yet?” Not knowing makes just about everyone nuts. Especially in the midst of an unpleasant task. So let users see how their progressing to remind them that relief is in sight.

Provide Various Levels of Help
Instructional text, tool tips, contextual help, live chat access, call center access, email, contact us, progressive disclosure tips.

Help Users Make Difficult Decisions
Provide information, suggestion and recommendations. Especially when tasks and/or subjects may be unfamiliar or infrequent.

Oh yeah, avoid being annoying. “Clippy” anyone?

Read the complete article with relevant examples at UX Matters:
“Designing Solutions for Unpleasant Tasks”

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

A case of the hiccups

Earlier this week I was creating an online account in order to start a trial for a cloud wireframing prototype tool. The form itself was easy to scan and follow, aesthetically pleasing from a visual standpoint, and was using real-time field validation instead of “on submit.” It was all good until I had to enter, in order, a username and password. Then I encountered an unforeseen hiccup in the validation implementation.

After I entered my first choice for my username, I received the following alert and error messaging. uname3
Nice error message design

So I deleted my first choice and proceeded to type my second choice for my username.uname4
That’s weird. What are the odds

So I deleted my second choice and proceeded to type my third choice for my username.
uname2
Did I create an account once and forget? WTH is going on?

And other colorful commentary.

Then realization hit through happenstance of clicking away from the field. The form field didn’t recognize that I was typing in a different username after I had deleted the first. It was “stuck” on the original choice I entered. The field wouldn’t “clear” until I tabbed or clicked away, then entered a new choice for username.

uname5
Success! I wasn’t losing my mind. I wonder how many users of the same cloud software tried half a dozen usernames and passwords (yep, same issue) before they gave up or (luckily) figured it out. And/or lost their minds trying.

But, lesson learned. When implementing real-time form-field validation make sure legacy messaging validation, specifically in the case of error messaging, clears appropriately in order to better inform the user. 

 

 

 

 

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?

 

Not Charming

I love it when coworkers share websites or apps with me because of either great or horrible experiences. I love it when they proclaim, out loud, “WTF?” It’s the siren song for a UX person in an interactive agency. It’s also an affirmation because their reactions tell me I’m not the only one that notices kooky or poorly designed experiences that make a website difficult to use.

Case in point, Microsoft Surface website. Specifically, the product pages. At first glance, there is a fairly innocuous navigation panel on the right-side of the screen. A common website navigation element, the menu is a list of links that anchor or “jump” the visitor to a corresponding section of the page.

Location, location, location
The first thing that caught my attention was the location of the navigation panel itself in relation to the page. I generally encounter this type of navigation on the left side of a web page. My working assumption is that the navigation panel was placed on the right side in order to replicate, to some extent, the Charms bar in Windows 8 in order to familiarize potential customers with Windows 8/8.1 OS features. (For those unfamiliar with the Charms bar, it contains search, access to settings and contextual app menus. And it appears from the right side of the OS when activated by a swipe or click on the right.)

Image
Default state of the Surface Pro 2 page.

Granted, I don’t have to use the navigation panel menu items to access the information on the page. I can scroll up and down. But like any good navigation labeling, the labels give me clues into the section contents and the information. Not too mention, it’s faster to use the menu if I want to skip around. Also, the panel location in relation to content (and vice versa) changes depending on the width of my browser window because it’s a responsive site. Which means that my mom is not going to know she can expand the width of her browser window to see the information or access the calls to action, and will call me to complain.

Image
Navigation panel open

Label System
The first item at the top of the navigation is a single house icon with no descriptive label. I’m assuming that since it’s a house, it means “Home.” But which “Home?” Surface.com? Microsoft.com? Additionally, both the “House” icon and the first link in the navigation, “Surface Pro 2” go to the same anchor at the top of the page. So,  the Home icon is unnecessary if there’s a better link to do the job and the use of the Home icon is misleading. The visitor isn’t going Home, they’re going to the top of the page.

Image

Not to get too nit-picky, but whatever.

The label system is inconsistent. I prefer navigation labels on any site or app be similar, such as all descriptive or all actionable. The navigation across all three product pages is a combination of descriptive labels and actions.

Additionally there are two different navigation labels for buying the product, “Buy Now” and “Get it now,” even though all the buy buttons on the page are labeled “Buy Now.” Sure, it’s a minor discrepancy, but like paper cuts, they add up to one big painful experience.

Obscuring Content and Calls to Action
Moving into the page itself, using the nav menu, it becomes clear that the placement is not ideal. In fact, it’s questionable. The panel partially covers written content, details and primary imagery placed on the right side of the page, as well as the almighty “Buy now” buttons. Responsive or not, information on the screen is there for a reason and if it’s not accessible, then what’s the point?

I can’t believe that someone didn’t say, “woah, hang on” before the site went live. This is after all, the flagship website for Surface products. Every word and image of the product on the page is critical to influencing potential customers and selling the product.

Image
Product feature information obscured by the navigation panel.

And it isn’t just one instance of the navigation covering critical information and CTAs (calls-to-action) on the Surface Pro 2 product page, all three of the product pages suffer from this debilitation.

For example, “New Kickstand” is hidden by the navigation panel. In order for the visitor to see it, she has to move her mouse out of the panel in order to close the panel (or expand the browser, if she’s savvy enough). If she wants to continue using the panel to navigate the page, she has to position her mouse back over the closed panel to open it, then click on the next menu item she wants to see. A lot of unnecessary actions and movements.

Image
Kickstand imagery is obscured by the navigation panel.

Additional Content
Each product page has a content section not included and therefore not accessible via the navigation panel. For example, in the screenshot below for Surface 2, the section about the new touch and type covers is not in the navigation menu. In the screenshot for Surface 2 Pro, the section for the docking station is not evident in the menu either.

This “approach” is implemented across all three product sites. As mentioned previously, since visitors will often look for keywords or phrases in navigation to determine if what they’re looking is on the page or in a section (aka “information scent“), why are these sections not included? Yet, there are two different ways to get to the top of the page and two different versions of Buy Now? I’m at a loss.

surface2_1
Information section about the new and improved Touch and Type covers is not in the navigation menu.
surface5
Information section about docking stations is not in the navigation menu.

E-commerce
From a make-it-super-easy-to-purchase-the-product-and-feel-confident-about-it perspective, two  no-no’s that would bring Amazon.com’s KPI’s to their knees: Obscuring price and ability to purchase. In the screenshot below the price for the Surface Pro 2 is obscured by the navigation panel in the “Buy Now” section of the page, and in the second screenshot “Get It Now” is also hidden by the panel. These, in addition to the differently labeled Buy Now CTA’s mentioned in the above Navigation section.

Image
Price point is hidden, next to the Buy Now button. Also, the nav panel cover and the background color are identical, creating a bizarre affect.
surface5
“Get it Now” in the navigation panel vs “Buy Now” label on the button, which is obscured by the panel. Brilliant. Also, the Docking section isn’t even in the menu.

So what does it say about Surface when information is obstructed by navigation and by a potentially poor implementation of responsive design intended to help the customer learn about their product offering?

Putting on my black hat here, this is not how you design an e-commerce experience and expect to sell product. Nor is this the best example of an responsive, information-based website intended to generate interest, shift perception, and be accessible.