Borrowing from Fowler’s “Refactoring,” I’m using the phrase “bad usability smell” as something that tips us off; that things might not be quite right.

In order to return my notebook warranty, HP provided a link to an online FedEx label printer.

Notice the two bits of instructional text: “(Please select one or more labels)” and “Click the Continue button for dropoff/pickup options.” Why is this a bad smell? Such a simple interface should not require instructions. It doesn’t use any complex components. Checkboxes and buttons have been in the mainsteam for almost 20 years. We have:

• (2) Buttons
• (1) Checkbox
• (2) Links - We can ignore links since navigability is implied, they should be ignored by users as well.

What’s wrong?

1. The “Print Selected Labels” button is out of sequence. If the first step is to “select one or more labels” it should be after the checkbox(es).
2. The enabled/disabled state of “Print Selected Labels” is all but impossible to discern.  By disabling it, they’re giving you a hint that a requirement isn’t met, but by such obfuscation there’s no way you’ll be able to tell when it’s disabled.

   

3. The “Continue” button should be a link. It’s acting just like a link, moving you on to the next step - a navigation function.
4. The “C” section heading is in the same font size as the table headings.  If the function is different (section label v. column header) it should look different.
5. Arial and Times fonts are mixed - why?

Instructional text usually tells us that the text itself should be incorporated into the interface.  Quick mockup:

There’s much room for improvement and I’m late for work.  Hopefully someone else picks it up and runs with it :)

This entry was posted on Monday, February 11th, 2008 at 10:05 am and is filed under Usability. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.