Popular design patterns
Recent Design Patterns
-
Article list
The user needs guidance in finding editorial content of interest, which hierarchical navigation alone does not accomplish.
-
Autocomplete
The user needs to enter information into a text box which is prone to be mis-typed, hard to remember, or ambiguous.
-
Calendar Picker
The user wants to find or submit information based on a date or date range
-
Activity stream
The user wants to get an overview of all actions in a system that are interesting from his or her perspective.
Input contexts: switching from mouse to keyboard
0 commentsWhen 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!
CommentRelated 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.
Shortcuts
Recent blog posts
- Input contexts: switching from mouse to keyboard Mar 1
- Design considerations for article lists Feb 24
- E-commerce design elements Feb 22
- Examining the grunge web design style Feb 18
- Design considerations for event calendars Feb 17
- Great banner design showcase gallery Feb 16
- Exploring new patterns with multi-touch displays Feb 14
- Designing for trust Feb 10
- 48 great ways to design lists in web design Feb 9
- 42 examples of Coming Soon page designs Feb 7