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

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/10/decision-analysis-killing-elements-in-ui-designs/ http://www.normalmodes.com/blog/2009/09/10/decision-analysis-killing-elements-in-ui-designs/#comments Fri, 11 Sep 2009 00:20:31 +0000 angela http://www.normalmodes.com/blog/?p=1585

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