Direct Mapping

Lipstick on a Pig Ep. 1

Home / Blog / This Post

Good looking and usable are different features. This example looks nice, but is rediculously unusable. It highlights one of the fundamentals of UX Design.

How would you like to be contacted?

Why This Is So Bad

I don't have to convince you that was commically unusable. In fact, if you actually got your email address entered, I applaud you!

But what underlying user experience and design principles were broken to make it so awful?

Your expectation of this direct mapping between the keys on your keyboard and the input is so ingrained that you didn't even think about it.

Mapping

In The Design of Everyday Things Don Norman introduces the idea of a "mapping" between the inputs and the outputs of a system. There should be a clear mapping from each input to the associated output.

In the case of that horrible email form, the direct mapping between your keyboard and the input was deliberately broken. Push the "a" key, and get the letter "n".

Expectation

When a mapping is commonly encountered, or even ubiquitous, we come to expect it from new interfaces that appear similar to what we have experienced in the past.

The email form above was familiar on a number of levels. As the user, you're familiar with text inputs, online forms, and especially email address inputs.

You expected the computer to simply map from your keystrokes directly to characters in the input.

Habituation

In fact, your expectation of this direct mapping between the keys on your keyboard and the input is so ingrained that you didn't even think about it. You simply started typing your email address.

Regardless of your typing technique, or even whether you were using a physical keyboard or the touch screen input on your mobile device, you never conciously thought about it.

In the discipline of UX this is called habituation.

What Now?

First, don't remap your user's keyboard!

Ok, seriously, of course you wouldn't do that ... for usual text input. But what about keyboard shortcuts?

Some shortcuts, such as Ctrl-S, are obvious conventions, and have been for decades now.

But other conventions are still emerging:

  • Using / to focus the search input on a website (GitHub.com and DuckDuckGo.com both use this)
  • Using Ctrl-K to open the search input in other applications (Slack uses this)

Additional Examples

A few more examples of expected behavior:

  • Underlined text in a different color is expected to be a hyperlink.
  • Search interfaces are case-insensitive (except the ones used in software development-related tasks).
  • In online interfaces, single-clicking opens the click target. It is quite confusing to encounter an interface which expects a double-click online...

Taking Action

Be aware of and study the other digital experiences your users are accustomed to; maintain the same behavior as thoses and meet your users' expectations.

If you found this useful, you'll love my UX Mini Course.

Give Your Users a Better Experience in 5 Easy Steps

Apply the principles by the end of the course your users will have a significantly improved user experience.

Plus, you'll have learned five fundamental principles of great UX that will pay dividends for the rest of your career!

Including
  • Improved Discoverability - make it easier for your users to find valuable features.
  • Better Form Input - make it easier for your users to sign up, log in, and pay you.

The UX Mini Course is COMPLETELY FREE!


Read Now
Contact Me
Copyright Caleb Peterson • Soli Deo Gloria