Which of these things does the arrow belong to? - UX in the wild

Even simple signs have UX concerns. Take this sign, in San Francisco:

I ask you this: does this sign mean the general entry is here, and that the handicap-accessible entry is to your right?  Or does it mean the entry is to your right, and it is also handicap accessible?
My first thought was the former.  Why? Having the wheelchair symbol and the arrow on the same line implies a stronger relationship than with the information above it.  To most people, they don’t think about this directly, but they intuitively process the arrow and what it means.
I looked in my immediate vicinity and did not see any entries.  I concluded the meaning must be the latter.

A better sign would have been:

Also, if the entry be handicap accessible, there be no need to call that fact out, as it isn’t special. You only need to know where the handicap-accessible entrance is if the main entrance isn’t so accessible.  I submit the best sign therefore would be:

(Of course, the arrow should be centered and not have a blotchy background, but that’s just digital manipulation error.  No, I am not going to spend the time to fix it!)

Bonus UX problem: this entry was on the southeast side of the building.  Maybe it should have been called the Moscone Center West South East Entry For Kids Who Can't Read Good And Wanna Learn To Do Other Stuff Good Too. 

Or, maybe you just shouldn’t name buildings after ordinal directions.

Oracle: Making simple things difficult since 1977

Oracle is not a company built on a strong UX foundation.
1. They sent me spam, and I wanted to unsubscribe.  I click it and get “Step 1” of n.

Really?

The cracked gasoline dispenser cradle - UX in the wild

Jakob’s Law of Web User Experience states that “users spend most of their time on other web sites.”  This can be generalized to the general: users spend most of their time on other systems.  Take the gasoline.  What do you usually do when you lift the gasoline pump handle off its cradle?  Activate the ability to start dispensing fuel by raising the start lever to cover part of the cradle, right?  Well, not on all pumps:

This looks a lot like a lever that one should pull up, but it isn’t.  You actually have to push a start button that is above and well to the left of where you lifted the pump handle.
If you look closely, the upper right of the cradle is cracked pretty badly.  Clearly, others had the same intuition I had: to yank up on this unyielding cradle.  Why? Because I use all other fuel pumps more than this one.
If you are going to make a gas pump cradle with a separate start button, at least make the cradle look nothing like the ones that you pull up! Here’s one.
Better yet, put the start lever on the bottom cradle—like most other gas pumps.

Vending Machine Lottery – UX in the wild

Compared to the vending machine in my last post, this machine is a relative paradise.

I really like this design. Presented to me are 45 choices of what to buy, and I see the actual product that I will be buying.  Each one is labeled with a very clear number, which is placed in a location which makes it absolutely clear which choice it refers to. 
 
I also imagine this machine is rather efficient, as each of the 45 choices can have a quantity of up to 10 to 11 items behind them, for a total capacity of nearly 500 bottles.  
 
This design has the added benefit of needing no labels or product specific programming.  The bottles advertise themselves; if the vendor wants to change the offering, all they need do is put the new items on the machine and be done with it.

Still, I have two small quibbles from a UX perspective. First, why do I need to enter a three-digit number when there are only 45 choices?  Each row has choices 01 through 09, and the rows are numbered 1xx through 5xx. The middle digit is always zero, so why not drop it? Presumably there are larger machines that offer more than ten choices per row--but not this one.  Even if only 1% of users mistype their choice, wouldn't it pay to make it just a bit simpler? I'm reminded of the famous quote by Antoine de Saint Exupéry: “It seems that perfection is attained, not when there is nothing more to add, but when there is nothing more to take away.”

More significantly, if each bottle isn't aligned right, the user may not be able to tell what the choice is.  For common choices like Coca-Cola, users won't have any trouble, but take the case of Honest Tea:

What flavor teas can I get? One of them is clearly peach, but is it a black or a green tea? Is it diet, low sugar, full sugar, or unsweetened? There is no way to tell. One bottle had the nutrition facts visible, which told me that it was a low sugar tea-but I didn't know what flavor that one was.  I wanted the peach, but I couldn't see how much sugar was in that one.   
 
Presumably, the onus is on the vendor to ensure the bottles are stocked with their fronts facing the user, but this adds time to every machine load.  Is this little concern worth all the other benefits of this design? Either way, the key concept here is don’t make your users guess, even if you think it is a reasonably easy guess.
 
I bought it, feeling like I was playing the iced tea lottery.
 
Ah, it's a low sugar peach white tea.  I would have preferred black, but still very good.

And it’s the only lottery I ever won.

Vending Machine Madness – UX in the wild

I’m flying today to San Francisco to attend a conference. I was thristy, so I sought out the beverage vending machines In the Minneapolis-St. Paul airport.  I was taken aback to see this.

Now, I am not disturbed that I had nothing but a four-foot touchscreen with which to interact.  Truthfully, I didn’t mind that.  It was how the items were on the screen that was troubling.  The bottles of pop (“soda” for you coasterners) spiraled around in a helix in a way that I am sure they thought was visually appealing and eye-catching.  However, at any given time, half the bottles were not discernable to the user.  To make this worse, the helix had no beginning or end, and the bottles just continued to sprial into infinity off the screen.  I could not figure out where the list started and ended.
Now, my ability to read the designers’ minds told me that choices weren’t really off the screen—that the list loops around, and at some point, the helix just starts over near the bottom with the same choices as on top.  So, I figured that I could just find the first repeated bottle and look at everything in between them.  Now, 90% of users wouldn’t think of doing this, thus they are left in a morass of confusion as to whether they have seen the whole list.  But I am a power user, right?  The black Coke Zero bottle was particularly eye-catching, so I located two of these and focused on all the bottles in between. I had to wait a bit for the unreadable bottles “in the back” to cycle to to the front.  Also, the labels on the bottles were so small that I had to get pretty close to the screen and study them intently. There were 16 choices in between the two Coke Zeroes, which seemed like a lot, so I probably saw them all, right?
Wrong.  Between the two Coke Zero bottles were no Pepsi bottles, but near the bottom I spotted a Pepsi that didn’t appear before!  Really?  So now I have no earthly idea how many varieties of pop this machine offered.  For all I know, I might stand there for ten minutes before the rare choices appear!  (I hope I can get a Surge or an OK!)
So I watched a bit more, when suddenly…a Mary Sue full-screen ad appears!

Really?  I was trying to figure out what $3 pop to buy—an activity that directly leads me to giving Theisen Vending some money--and they take away my only interface to the system I have?
This illustrates a still-too-often ignored principle of UX: Your graphic design and aesthetics should help the user complete their desired action.  Above all, the aesthetics should not hinder them. Seems pretty basic, right?  Sadly, many still get this wrong.
Theisen, hire a UX expert for a few hours and let them tweak your touchscreens (or make your software vendor do it).  You’ll sell more pop.

Artifacts that can improve UX

Yesterday at work, we gathered in a conference room to hear from Jay Mathews of Straight Line Media on user experience and software design. 
How can any of us understand a design from a list of requirements or even user stories? How can we hope to communicate with product owners and stakeholders what we propose to build? Mathews suggested these artifacts:

• Low-fidelity sketches (6-8 hours for many) of a proposed GUI are typically created with a whiteboard and can quickly generate and communicate ideas and discussions to try to find a working approach. Drawing out several sketches can allow us to combine vastly different GUI approaches to come up with a better visual design than we can fathom via requirements alone.
• A vision document (2-8 hours) answers the question “what are we building” at a high level. Perhaps it is just an overall definition of the system, four meaningful paragraphs of detail, and/or a visualization of the system we intend to build.
• An experience map (10-15 hours) can describe the end-to-end experience for users
• I discussed personas in earlier blog posts – formalizing our personas help us understand about our users and get on the same page.  It helps get us out of our own experience and bias and reveal what we don’t know about
• Much like a user story map slice or customer journey, a scenario a set of interactions that a persona would interact with the software system.  Scenarios are story-driven, told in human terms, focus on what the user can accomplish with a yet-undeveloped system.  The user’s outcome, overall experience, and emotions are the focus here—not merely what they can do with the system.
• A conceptual architecture diagram (15-20 hours) answers “how is the overall system going to work". It overviews both the concepts and the core structure of the proposed system.
• Detailed site architecture diagram – depicts all unique pages/screens of an application and where each lives in the application’s hierarchy.
• A user flow diagram details the path a user follows to complete a specific task.
• Wireframes (3-6 hours each) communicate fundamental details about the functionality, content, navigation, and interactivity of a screen or a page. This sometimes is the final deliverable of a design.
• Prototypes (8-20 hours) help us to visualize a specific interaction with actually functioning software.

(Mathews mentioned that Agile “user stories” are “more like requirements” and thus differ from scenarios. I’d argue that the distinction between requirements and user stories is very important; indeed, both are different from scenarios.)
I believe that the best software results when we value working software over comprehensive documentation. That doesn’t mean we dismiss creating these artifacts, as some misunderstand Agile to demand. Instead, we create just enough of these artifacts as needed to create good software, and no more. We must constantly be examining ourselves to see if more documents would be useful. These documents can be highly polished or quick-and-dirty, whatever is appropriate for your purpose.
Mathews also encouraged us to do usability testing, and I completely agree. He said, “Small improvements can yield big results.” Testing with even just a few users can reveal flaws that are crucially important to fix. He recommended a formal session with a trained facilitator, but any usability testing is better than none. I’ve seen numerous ways of doing real user testing; one promising service is YouEye, where you can in mere minutes get a usability test going for any public web site.
To Mathews, UX expertise is nothing but the intersection of empathy, analysis, and intuition about our users.  We must visualize our projects—the visualizations don’t have to look pretty, but they do have to communicate what we are going to build.
Mathews recommended Goodwin’s Designing for the Digital Age for more on these topics.

UX in the wild: “What do you want from me?”

I was recently looking into opening a CaringBridge web site, since I have a special needs daughter with an undiagnosed genetic syndrome. Trying to sign up, I encountered this page:

As an aside: do they even want men to sign up for this site?  Pink and hearts and lowercasing and round fonts and flowers and puppies and rainbows pervade this site, on this page and other pages.  But I digress.
More importantly, notice the form in the screenshot above. I was somewhat puzzled as to which options to choose. Hmm, myself or someone else. Am I creating an account for someone else, on their behalf, or am I creating an account site to benefit someone else, but it is my site?  All I am prompted with is “who is it for”?  I decided it was for my daughter—it is for her benefit, but not for her personally to use.
That was a pretty easy decision, but then I’m confronted with the first name/last name fields.  Do I type my name or my daughter’s name?  Again, the direction is ambiguous.  I started typing my name, presumably because I’ve done this before on hundreds of web sites. It makes sense to me that I would perhaps type in my daughter’s name in a later step.  However, a few clues told me otherwise—the fields are indented under “someone else”, and the following field is “enter your e-mail”, making me guess that the name fields are not asking “enter your name”.  Also, the submit button (properly left-aligned but improperly indented) is labeled “preview site”, telling me there relaly is no step 2 (despite the 4 numbered circles listed at the top) and it would only make sense to put my daughter’s name on this field.  I entered her name and was able to get the preview of my site.  My guesses were right.

The design of this page forgot Jakob’s Law of the Web User Experience: people spend nearly all of their time on other web sites, not yours.  It was only a small gaffe, and the page contained enough clues for me to figure it out, but how many hundreds of users had the same confusion I did?

Incidentally, we also see that we should serve your target market first (here, moms) but don’t alienate your largest secondary market (dads) in the process.

Hat tip to Kamran Ayub for the “Experience in the wild” idea. Others have done this a lot, but I was just reading a few such posts from his blog.  Thanks, Kamran!