Usability Rant: When bad design decisions become standards


John is in a crotchety phase today
Crotchety Mood
@1914 Andy Rooney

Prior to starting this blog a few months ago, I rarely had occasion to write much more than a few paragraphs in a browser based editor. In this short time, I am starting to understand why most serious bloggers seem to write their posts offline in traditional word processing software. Despite the best efforts of web developers, the browser platform is a usability nightmare fraught with peril for innocent users and their precious data.

Forgive my Andy Rooney impression, but what has me in a crotchety mood is the behavior of the backspace key in modern browsers. I understand how convenient it seems that browsers have a function to navigate backwards and there is a handy over-sized key with the word “Back” printed right on it, but sorry that key had a meaning that predated personal computers and far-predated browsers.

My Mental Map says, “Backspace = delete the last typed character.”

“But,” my tormentors would say, “you can still use backspace that way when you are in a text field. We’ve just overloaded it so that you can also use it to navigate to the previous page.”

angryuserThat is true, but it is very common for a browser to rip focus away from the edit control unexpectedly, invisibly, and unapologetic ally. –I’ll save that rant for another day– If you hit the backspace key after the focus drifts away…BAM…you wind up on on another web page and will never get back that insightful three page retort to that ignoramus who thinks Piccard was better than Kirk and the world of literature will be diminished for its loss.

Giving the user the ability to irrevocably wipe out a big chunk of their work with a single key press violates a number of the fundamental principles of usability engineering, most importantly:

User input is sacred, protect it at all costs!

Your problem is right here, m’aam.

The core problem here is the inappropriate use of modes. Application modes turn friendly UI elements and device controls into two faced bastards that promise one thing and do another and then pin the blame on you because you didn’t catch the context switch. Modes are especially evil in situations like my example of the backspace key because they turn a  harmless action (delete one character) into a catastrophic one (exit without saving).  It is like having a button on a soda machine explode instead of dispensing a Dr. Pepper because it is Sunday and that is just how they roll in Waco.

I”m not saying that modes have to be avoided at all costs, just that you should recognize that they incur a debit against usability and they should be demoted to a fallback option where there are simply more functions necessary than controls available to map them to. But don’t take my word for it.  Don Norman also recognized the danger of relying on context based function mapping in his awesome exploration of the interaction between humans and machines…

“Mode errors are inevitable any time equipment is designed to have more possible actions than it has controls or displays, so the controls must do double duty. [They] are especially likely when the equipment does not make the mode visible…”
The Design of Everyday Things – Donald A. Norman

Mitigation Strategies

If you find that a modal approach is the only option, at least implement it responsibly.  Follow these best practices when implementing a modal interface to minimize the potential for leading your users into annoying mode errors:

  1. Make it obvious to the user which mode they are in at all times. For example by changing the label on controls.
  2. Mode changes should be initiated as an intentional act by the user, not the software or as a side effect of an unrelated action.
  3. If #2 isn’t possible, at least make the mode switch obvious, but unobtrusive. That is, don’t ask them to confirm it.
  4. Recognize that mode errors will happen despite your best efforts. Anticipate them and make it easy to fix their consequences.
  5. Don’t use a mode as an excuse to force the user to memorize arbitrary and illogical control mappings.

The Legacy of The Browser Backspace Atrocity

Evil Backspace

Unnecessary Modes Are Evil

As best I can tell, though I haven’t yet confirmed it. This behavior originated in Internet explorer and has since spread to all of the popular browsers. I have confirmed the mapping of the backspace key to the back-navigation function on Windows in IE7, FireFox 3, and Google Chrome.  I suppose it is a standard now at least for Windows. Peachy.

Meanwhile, there is a growing cadre of browser users who LIKE this “feature”, are requesting it be added to other browsers, or even trying to hack it back into browsers that haven’t implemented it.

That said, a quick Google search indicates that a considerable number of developers are also trying to hack it OUT of the browser for their sites. Ultimately, the behavior has existed long enough that it will be politically impossible to undo and will force web developers who know something about UI design to continue to work around it for the sake of their users.

Advertisements

3 Responses

  1. It’s Picard 😦

  2. Microsoft Windows users that use the keyboard whenever possible (like me) are not surprised that using the backspace key does not always delete.

    In Windows Explorer (not to be confused with Internet Explorer) pressing the backspace key will open the current folder’s containing folder. Depending on the kind of view it may open the containing folder in a new window or jump up if in a tree view.

    But I agree it is unexpected behavior and bad design.

  3. I wish the Chrome browser programmers at Google would read this article, I totally get the frustration of loosing 20 minutes work when I expected the backspace to delete the last character.

    The least they could do is put the freaking option to have backspace as a backspace. Grrrr!

    Thanks for posting great article.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: