Input contexts: switching from mouse to keyboard

When designing for efficiency in web application, an area that often gets little attention is the contexts of input. On most desktop computers, there are two ways of inputting data: via keyboard or mouse.

Categorized in: design tips, keyboard, mouse, tab, form, efficiency

Working in a web-based system, many web editors and administrative personnel find themselves switching from the mouse to the keyboard and back constantly. Taking your hand away from the mouse in order to operate the keyboard takes time: you stop your current flow and have to start a new one. Every time the user has to change input device, speed and efficiency is lost.

The most common deficiency regarding input-context change is having to click on a form field in order fill in data. It gets annoying having to go back and forth all the time. Instead, many prefer to just stay on the keyboard. Leverage this fact when you designing workflows in web applications. Make it easy to stay on the keyboard!

A series of actions will help you accommodate keyboard-only interfaces:

  • Use javascript to put focus (i.e. select a field) on the first form element, so that the user can start typing in information right away.
  • Make sure all fields have tab-indexes, so that the user can use the tab button to easily go from field to field in an order that makes sense for the input.
  • Provide keyboard shortcuts for saving, undoing, going to the next section, or similar actions.
  • Add auto-complete functionality to input fields, so that the user does not have to scroll down a huge select box.

Count the number of times a user have to change back and forth between the keyboard and mouse when filling out a form or navigating an interface. Work on bringing this number down. Consider each context change (from keyboard to mouse or back) a fail on the designer’s part!

About the author

29e46e03eb13e5cea3474606aa970f99

Anders Toxboe builds websites with an outstanding team at Benjamin Interactive in Copenhagen, Denmark. He also founded UI-Patterns.com and a series of other projects.

Published on 1 Mar, 2010

4 Comments

Post a comment

Required. Real name or initials only.
Required. Will not be published.

Browsing blog posts

Vote down Vote up
Out of 2 votes, 50.00% like this one.

Recent blog posts