Please note: This site's design is only visible in a graphical browser that supports Web standards, but its content is accessible to any browser or Internet device. To see this site as it was designed please upgrade to a Web standards compliant browser.
 
Signal vs. Noise

Our book:
Defensive Design for the Web: How To Improve Error Messages, Help, Forms, and Other Crisis Points
Available Now ($16.99)

Most Popular (last 15 days)
Looking for old posts?
37signals Mailing List

Subscribe to our free newsletter and receive updates on 37signals' latest projects, research, announcements, and more (about one email per month).

37signals Services
Syndicate
XML version (full posts)
Get Firefox!

Usability Tip: Setting Expectations

12 May 2003 by

One of the things I don’t hear enough about from many usability professionals/pundits is the importance of specific interface elements setting expectations. “What happens next after I click this button?” “Can I cancel this order later?” “What if I can’t do what this button is asking me to do?” “What do I need for step 3 of this four step process?” The answers to these little questions are absolutely critical when it comes to building a great customer experience online.

And, it’s no surprise that Amazon leads the pack. Sure, their little text-based “under button” messages (see below) could be considered clutter or ugly by some, but their immense value should not be overlooked. Amazon’s “Not cancelable” blurb under a “Buy with 1-Click” button proactively answers a frequently asked question. The “fully refundable” blurb under the “Click to Give” button lets people know they can get their money back after making a donation (which probably leads to more people making donations). The “select your credit card” blurb under the “Pay Now” button lets people know the next step in the buying process. These little blurbs are beautiful things and I hope more sites follow Amazon’s lead in this area in the future.

Amazon's buttons

24 comments so far (Post a Comment)

12 May 2003 | hurley#1 said...

Excellent point!

Buttons that don't tell you what's coming next are a major deterrent for me. I don't read articles on the Washington Post's web site, because when you click on an article that you want to read you get the annoying "You need to answer a few quick questions in order to proceed" form, which indeed gives you a few quick questions and has a "Go" button. But it doesn't tell you whether pressing Go will just take you to another page of questions or to the article you want to read. If they said "Go to the article you want to read" instead of just "Go," I'd probably fill out the form and use the site.

This is an even bigger issue in software interface design. One of the many reasons I despise Lotus Notes is that when you want to close the program, you get a dialog box that says "You have asked to close this session. Do you wish to continue?" with two buttons, one for Yes and one for No. "Do you wish to continue?" is an ambiguous question. It could mean "do you wish to continue using Notes?" or "do you wish to continue closing down the program?" The Yes and No buttons don't tell you what will happen when you click on them. I guess in this case a better fix would be to just rephrase the question so it's "Do you want to exit Notes?" but still...

12 May 2003 | Michael S. said...

I fully agree. "Yes" and "No" buttons give no indication at all, and force you to look elsewhere for what they do, or worse yet, take a guess.

In some cases, it's okay to have simply worded buttons (like "Go") if in context it makes sense, like a search form.

It's all part of making the functionality visible.

12 May 2003 | fajalar said...

Go buttons next to jump menus drive me crazy.

12 May 2003 | p8 said...

For taxes our IRS has a free windows application. After you fill in all the forms you can't save. It automatically saves when you quit the program but there is no feedforward that explains this. Very scary after you spend an hour filling in all the forms.

12 May 2003 | p8 said...

Hurley #1, I have the exact same thing with the Washington Post articles.

12 May 2003 | jarrod said...

I think any order forms online should be well explained, even if it does seem redundant to some. I'd rather see some indication as what's coming up (i.e. "Click next to enter Credit Card information.") than just click ahead blindly.

12 May 2003 | angelday said...

Jason,

why didn't you post this one to DNF as well? It just deserves it.

Plus, I have a strong feeling that you should print the "Thumbs Down" stickers in red. Or so to say: distinguish them from the good ones.

13 May 2003 | indi said...

This is a main difference between dialog box buttons in Windows versus the Mac. In windows you get "Save changes before closing." with three buttons, "No", "Cancel" and "OK" (that's from memory, but should be close). I always have to reread the dialog to make sure Im going to click on the correct button. On a Mac the dialog would say, "Save changes to the Adobe Photoshop Document 'seashells' before closing?" and the buttons would be "Don't Save", "Cancel" and "Save". I rarely have to reread a Mac dialog.

Anyone else notice this?

13 May 2003 | Laura said...

On our email package at work here (an older version of GroupWise), when you click on a meeting in your calendar to view the details for it, instead of a "close" option for the little pop-up window, the options are "ok" and "cancel". Both of these close the window, and "cancel" is nothing to do with cancelling the meeting, just cancelling your view of the pop-up window telling you about it...

13 May 2003 | malross said...

fajalar: Go buttons next to jump menus drive me crazy.

In a good way, I hope. There are people out there who like to use the keyboard (maybe even people who can't use a mouse) and a drop-list menu that automatically redirects on a selection is impossible to use for them, not just an inconvenience.

13 May 2003 | p8 said...

Even worse are go buttons next to pulldown menus that automatically redirect. Yahoo mail does this on the addresses overview when you want to view a different category/mailfolder.
And it's not consistent over the site. If you want to view a different category/mailfolder when you compose an e-mail it's the same pulldown-menu-with-go-button except it doesn't redirect.

13 May 2003 | fajalar said...

Lingo problem. I am a Dreamweaver user, so I used the term Jump Menu. Drop-list menu that automatically redirects/pulldown menus that automatically redirects/jump menu = same thing.

Actually I hate jump menus in general. To me a widget should only have to states: Enabled and disabled. Otherwise they should act the same all the time.

13 May 2003 | fajalar said...

*sigh*... a widget should only have two states...

Need more coffee.

13 May 2003 | pb said...

The "Go" buttons are necessary both because some browsers cannot perform the JavaScript necessary to take action from a drop-down selection and because a drop-down is supposed to be a "selector" and not trigger an action.

13 May 2003 | fajalar said...

I forgot that some browsers cannot make a jump menu function "properly." That's what happens when you design for a homogenous, slow-to-change user group.

But there are two issues. One that some browsers cannot handle the functionality of a jump menu, and two that, as pb said, drop-down menus are supposed to be for selecting a single item.

My initial reference was to Go buttons next to jump menus, thereby making the Go button superfluous.

Jump menus go home!

13 May 2003 | hurley#1 said...

My initial reference was to Go buttons next to jump menus, thereby making the Go button superfluous.

Not necessarily: you need a Go button if the user wants to select the first item in the jump menu, the item that appears by default in your menu when that page loads. Without a Go button, they can't select that link.

13 May 2003 | hurley#1 said...

Er, I should clarify that you need it if the first item in your jump menu is a link. If the first item is an instructional message like "Select a Topic" then you don't need the Go button.

13 May 2003 | kirkaracha said...

I usually use JavaScript to hide the Go button, so if JavaScript is on you don't see the button and you get redirected when you make a selection, and if JavaScript's off you make a selection and click the button.

13 May 2003 | Ben Langhinrichs said...

Excellent point about setting expectations. I plan to go through my site and make sure that everything lets you know what to expect. Since I don't do a lot of interface design (I write extensions such as COEX! Links and the Midas Rich Text LSX, but while the latter allows you to do lots of front end stuff, both are backend tools), I forget the importance of this, but I used to work on education software, lo these many years ago, and it was very, very important to make clear what would/could/should happen next. Thanks for reminding me of the importance of that. Maybe I should look at my samples as well. Hmm.

16 Jan 2004 | Rawsone said...

If an application is designed well, the reward for users is that they will learn it faster, accomplish their daily tasks more easily, and have fewer questions for the help desk. As a developer of a well-designed application, your returns on that investment are more upgrade revenue, reduced tech support, better reviews, less documentation, and higher customer satisfaction. The rewards of building a good-looking Aqua application are worth taking the extra time.

Comments on this post are closed

 
Back to Top ^