The other day I was grabbing a salad and some spring rolls for lunch at an upscale grocery store in Houston. I used my debit card to pay, which is an almost daily exercise for most of us. Entering my PIN and clicking through the screens is such an ingrained habit for me that I probably perform it through pure instinct and muscle memory. Well, I ran into a snag.

Typically, the debit card screens run through the following progression:

1. Swipe card.
2. Enter pin.
3. Do you want cash back? Yes or No. If no…
4. Is this amount OK? Yes or No. If yes…
5. Voila. I’m done.

This particular store’s machines work differently.

1. Swipe card.
2. Enter PIN.
3. Is this amount OK? Yes, No, or Cash Back.
4. Etc.

Whaaaaat? I wasn’t even paying attention, and I clicked “No” in step 3. Which meant that “No, this amount is not OK.” What I intended to say was, “No, I don’t want cash back.” The machine brought me back to the beginning of the process.

Apparently the machine’s GUI designers decided to combine two screens and therefore save their users a click. I didn’t save a click, though. I had to start all over.

Consider, please, the Principle of Least Astonishment (POLA), which states that “when two elements of an interface conflict, or are ambiguous, the behaviour should be that which will least surprise the user.” So for software GUIs, users form expectations based on their experiences with similar software.

The debit payment interface I encountered is a perfect example of why it’s so important for your design to conform to your users’ expectations. Saving a click is good practice — most of the time. But if your GUI’s behavior is counter-intuitive to your typical user, you’re just going to cause frustration and wasted time.

Resources about POLA

Principle of Least Surprise
Steve Smith
stevesmithblog.com

Principle of least astonishment
UXPassion.com

Applying the Rule of Least Surprise
Chapter 11. Interfaces
History of Interface Design on Unix

The cranky user: The Principle of Least Astonishment
Peter Seebach
For IBM.com

Most Astonishing Violation of the Principle of Least Astonishment
stackoverflow.com

A recent TechCrunch article reported that Google is offering $75 in American Express gift checks to participate in a 60-minute usability test of features being developed for Blogger, its blog creation site that competes with WordPress.  Google is looking for participants who are 18 years of age or older, own a Windows PC, are willing to have the session recorded, and of course, will sign a non-disclosure agreement.

Google is actually looking for more specific participants, but the TechCrunch article’s description is enough to pique your interest, yes?  It’s the general description that will have many people saying to themselves, “I’m over 18, use a PC, am willing to comply and could really use $75.”  Enough people will attempt to sign up that Google will then be able to select a representative sample of subjects.

What kinds of subjects might the company be looking for?  Here are some interesting, recent statistics on bloggers from the State of the Blogosphere 2009 report done by Technorati:

• Two-thirds are male.
• 60% are 18-44.
• 75% have college degrees.
• 40% have graduate degrees.
• More than half are married.
• More than half are parents.
• 68% have been blogging for two years or more.
• 86% have been blogging for at least a year.
• 15% of bloggers spend 10 or more hours each week blogging.
• 82% of respondents say that they post photos to their blog.
• 20% of all users have updated their blog or added content from their mobile device.
• 72% of respondents are classified as hobbyists, meaning that they report no income related to blogging.

These statistics already suggest some particular users that should be included.  For instance, naturally the study may target those between 18 and 44 years old, but there should also be participants older than 44.  Perhaps the study should include people who have never blogged before along with those who have been blogging for years.  There could also be both hobbyist and professional bloggers as subjects.  Depending on the features being tested, the study might involve users who update using a cell phone.  The study may even be very targeted and specific, looking at bloggers who spend 10 or more hours each week blogging.

The only way to ensure these populations are represented, though, is by having a preliminary survey.  Sure enough, Google’s includes questions about a volunteer’s gender, age, occupation, location, and how long he or she has been using Blogger, indicating that just because you don’t have to ask your parents’ permission to participate and you use a PC doesn’t mean you’re up $75.

Let me introduce myself since I’m new to Normal Modes and hence to the blog.  My name is Sara and I’m a User Experience Consultant.  My background is in Computer Science and I specialized in Human-Computer Interaction for my Master’s degree.

What I particularly enjoyed studying while in graduate school was cognition and the physical limitations humans have when interacting with technology.  While browsing the web the other day, I was reminded of two principles by a website on which I was attempting to read a news article.

Principle 1:  Humans are not multi-taskers.  As much as we would like to think we are accomplishing 2 or 3 or 5 things at once, we really only excel at task-switching.  You cannot talk on the phone and drive at the same time.  You are either concentrating on the conversation or concentrating on the road but you are switching back and forth at such a rate that you believe you are multi-tasking.  This is why hands-free devices are not the solution; but that’s another discussion.

Principle 2:  The human eye has developed so that only a small part of the retina can see objects sharply and clearly.  Therefore, human beings must constantly move their eyes and heads to be able to view objects in the 2 degrees of their field of vision that exposes the image to that part of the retina.

As I am reading a news article on the topic of education and my eyes are focused on the upper-left area of the screen, a pop-up appears at the lower, right-hand corner alerting me to another education article I might find interesting with a link to view it.  I am now frustrated and upset.  The site has forced my gaze to be diverted to the pop-up and forced me to switch tasks.  I am no longer attuning to and engaged in the article.  Instead, I am looking at a pop-up that has interrupted me.  Worse still, once I return my attention to the article, I have lost my place.  Why would I have wanted to click on the link anyway to start reading another article when I have not finished reading the one I am currently viewing?

This is why UX designers talk about funnels, especially in an e-commerce checkout process.  You want to allow the user to focus, finish and not get distracted.  An element on your site should not be the proverbial call or text that causes the user to drive off the road.

However, there are other UX designers who disagree with me.  You can read Jason F.’s commentary here.

Last week I had the honor to be a speaker at the Mom 2.0 Summit. The conference was fabulous – great ladies who were kind and supportive of each other, nice panels where everyone shared experiences, and the hotel – Wow! Four Seasons all the way!

Here’s the slideshow we used to get the discussion rolling. We tried to keep everything pretty positive and not bag on anyone. Thanks to my co-presenter Sania for putting it together. (She’s great, isn’t she?)

I didn’t anticipate having more than 50 people in our presentation, so I was surprised to run out of the handouts we shared with everyone. If you missed the handout, you can download it here:

Consider the User Experience & Usability of Your Website: 20 Do’s and 14 Automatic Fails.

Thanks to Marla, Carrie, & Laura for all their hard work putting together the conference! See you next year in New Orleans!

Over the past month I’ve toiled away on a special project:  a gallery of 51 simulated eye tracking heatmaps featuring the homepages of popular websites.  The heatmaps cover a variety of industries including travel, consumer retail, media, government & politics, a catchall category of “other,” and finally a few categorized as “fun.” (More information about how I generate simulated eye tracking heatmaps.)

As you might imagine, this project was a huge undertaking and offered the opportunity to tackle some interesting UI problems.  The first question:  how to organize the images so comparing the best and worst in a category was easy for those viewing the heatmaps.  The second question was more bedeviling:  in what way should I display the final images so we capture the nature of the content in them.  Should I display them as small image thumbnails?  If so, what size? Should the thumbnails be “clickable” and appear in a modal window, an established website design pattern?  Even then I had to consider that each image was based on the content width of the page. Egads — many questions, with many imperfect answers.  I looked at a variety of jquery plugins, including:

• Gallerific
• Notes for Lightbox
• Lightbox 2

I considered Lightbox 2 most seriously, but decided against it because the content in the hotspots is obscured when displayed at smaller sizes thus rendering the heatmap image virtually meaningless.

For now, I’ve settled on Supersized, which allowed me to display the images in their original full screen format. This solution is not without its limitations, namely that some images may be slightly distorted in some browser windows.  Most of this is owing to the variations in image size and the inability to specify a fixed resolution.  The other limitation is more minor: there’s a bar across the lower portion of the page that gives a bit of image information and allows the user to rewind, forward, and pause/play the slide show.  Because of this, a portion of the each image is obscured.  If I think (or hear) this is problematic after it goes live, then I’ll use A/B testing to see if users would be more satisfied with the Lightbox 2 solution.

The images I selected are based purely on my whims and interests. Among the homepages featured in the 51 images:

Apple (www.apple.com)

Continental Airlines (www.continental.com)

Continental Airlines Homepage Eye Tracking Heatmap

Martha Stewart (www.marthastewart.com)

Martha Stewart Homepage Eye Tracking Heatmap

Major League Baseball (www.mlb.com)

Major League Baseball Homepage Eye Tracking Heatmap

Senate.gov (www.senate.gov)

Senate.gov Homepage Eye Tracking Heatmap

Wall Street Journal (www.wsj.com)

Wall Street Journal Heatmap

To see all of them, visit the Homepage Eye Tracking Heatmap Gallery.  And please enjoy!

——

Unrelated side note: If you didn’t get to enjoy the first night of the new PBS series on national parks  – The National Parks: America’s Best Idea (A Film by Ken Burns) – check out your local listings for the cable-style repeats they plan to offer.  You’ll learn all about Yosemite, Yellowstone, the amazing John Muir, and a bit about gorgeous Alaska.  I shouldn’t really single out Alaska as the only “gorgeous” one — they’re all just breathtaking.  And if you haven’t been to any of these places, by all means go.  I’m a better person for the few hours I spent at Yosemite watching the sunrise the morning of a friend’s wedding, and my current “happy place” is a variety of scenic landscapes near Anchorage, Alaska.  Indeed, my mighty life list includes the goals of spending a summer living in/exploring Alaska and visiting all the national parks at least once, collecting a stamp in my passport for each one.

I type wicked fast. My fingers sometimes bang away at the keys at a rate faster than I can think.  But for all my mad typing skizzles, I’m a horrible speller.  And for all my speed, I’m hampered by habitual use of the delete/backspace key.  I’ve used it probably seven times in this sentence alone. And there are some errors I miss because I’m typing so fast I’ve already long since moved on.

Today when I went to register for a new Alltop account I misspelled my own email address.  (I know!  I’ve had it like 5 years now. You’d think my fingers would be on auto-pilot.)  Here’s what I entered instead:

Unfortunately, I didn’t notice my error and waited for almost an hour for my confirmation to show up. Of course, it never did and, impatient to get started, I went back to Alltop in search of answers. I clicked around on the website until I found a page that would send me a new confirmation email.

Good news: Alltop will send me an new email.  And they take out all of the guess work about what I’m supposed to do next on this page. I’m supposed to click “Yes, please.”  Indeed, I did send myself a second email before I realized the underlying issue.

Bad news: It’ll do me as much good as the first email.  Alltop doesn’t allow me to recover gracefully from my email address entry mistake.  There’s no option to say anything other than “Yes, please.”  (At least they’re polite.)

To their credit, Alltop does give me contact information on the preceding page.

Of course, I’d forgotten all about that by the time I got to this page.

So, what would make this user experience better?

1. The easiest – something that can be done today in less than 5 minutes – is just to move that contact us link over to the page.

(Note, I reformatted it as a text link rather than the url link.  The url is inconsistent with the style for the rest of the links on website.)

Estimated level of effort: VERY LOW

2. Add the ability to change my email address, starting with something like this:

Of course, this will require presenting back the original information to be edited by the user.  I don’t see any reason why the original registration modal window can’t be presented to the user and resubmitted.

Estimated level of effort: LOW/MEDIUM

3. Suppose changing my email address isn’t technically possible. That’s cool – sometimes there are technical limitations that can’t be easily solved.  I get that.  Just tell me about it and don’t keep me hanging.  Something like this:

Of course, there are a few limitations to this solution.  First of all, it’s a hack.  A really bad, somewhat shameful one.  Secondly, I lose my username. What if it’s the only username I ever use and I’m lost without it?  Finally, Alltop ends up with a bunch of abandoned accounts on its servers.

This is the worst of all the solutions. Still, it’s better than leaving me hanging.

Estimated level of effort: VERY LOW

4. Avoid this kind of error to begin with by running basic email validation during the registration process.

Really, this is a no-brainer. Think offensively rather than defensively, avoiding problems before they really even begin. Validate email addresses on the front end programmatically or by asking the user to enter the email address twice.  The former only ensures that email addresses are technically correct, but would have caught my error.  The latter is a more diligent approach, but the burden falls on the users who mostly hate entering their email address twice.  And, of course, the solutions can be used in tandem to hopefully eliminate all problems.

Estimated level of effort: MEDIUM

Conclusion

Everyone makes mistakes, and Alltop’s not the only website out there who’s fumbled a bit in the area of error messaging.  This doesn’t mean the Alltop website isn’t a good – some features, like the introduction video, are great.

This is just a standard user experience weakness.  (For me, a pretty big one.)

Building in the ability to fail gracefully and recover quickly creates a compassionate user experience and keeps customers engaged. As we’ve seen here, there are multiple ways to handle this sort of error recovery, some better than others.  We can even build successive levels of handling by pairing things like proactive form validation with reactive recovery measures.

]]> http://www.normalmodes.com/blog/2009/09/17/failing-gracefully-four-solutions-for-wrong-registration-email-addresses-on-alltop-com/feed/ 0 http://www.normalmodes.com/blog/2009/09/11/usability-the-delayed-frontier/ http://www.normalmodes.com/blog/2009/09/11/usability-the-delayed-frontier/#comments Fri, 11 Sep 2009 12:00:42 +0000 angela http://www.normalmodes.com/blog/?p=1588

People want less information, they don’t want more information. They want it to be easier for them to use. Easier for them to get what they want. Easier for them to do what they want to do. The next big breakthrough, in my mind, is going to come from the usability standpoint… A lot of the technology is there right now. The pieces are there… [Technology] is ahead of the software curve… ahead of people’s and companies’ ability to integrate the technology and to support the technology.

–Ted Waitt, chairman, CEO and founder, Gateway, Inc. (“Charlie Rose”, PBS, 5/27/98)

The big question here is why this quote is 11 years old and usability (and a focus on the user experience) is only emerging priority for progressive organizations. It’s such a sha me too. Good usability is good for business – not only does it make customers loyal and happy, it decreases long term development costs.

A general principle for all user interface design is to go through all of your design elements and remove them one at a time. If the design works as well without a certain design element, kill it.

- Jakob Nielsen

There is, of course, a certain measure of humility required for designers to open themselves to incorporating the user experience into the design process and to engage in usability testing. For so many years the predominant culture in these groups was that web design was a “creative” art, and as in the manner of all true artistes, judgment of art best resided with the “experts.”

I’m guest blogging over at StartUp Houston about old skool ideas about web design and more modern approaches that take things like, I don’t know, the CUSTOMER consideration. Revolutionary bits, along with 3 ways to incorporate the user experience and usability testing into your website over at Start Up Houston.

(Thanks guys!)