Subscribe only to screenshots Recently uploaded screenshots

  • www.remixjobs.com
  • www.remixjobs.com
  • www.remixjobs.com
  • www.remixjobs.com
  • http:
  • www.workatplay.com
View more screenshots Upload your own screenshot

Subscribe to new patterns and blog posts Recent Design Patterns

Displaying recent design patterns 1 - 4 of 53 in total
March 1, 2010

Input contexts: switching from mouse to keyboard

0 comments

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.

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!

Comment

Related stories


User Interface Design Patterns

It has long been common practice to use recurring solutions to solve common problems. Such solutions are called design patterns; standard reference points for the experienced user interface designer. This website seeks to better the situation for the UI designer, who struggles with the same problems as many other UI designers have struggled with before him.

This site will help you in two ways: You can read insightful design pattern articles or browse through our screenshot collection.

Finally, you can help your fellow peers by uploading your own screenshots of great user interfaces.