Designing effective and usable applications
The following tips can help you design better applications:
- Target common tasks—Design around three or four most common tasks that users are likely to perform. If you have several types of users (for example, managers and support personnel), design separate forms, tabs, or views for each type.
- Group elements—Group information that belongs together in the same area. For example, keep all customer address information in one area. Label each section clearly. Use white space to separate the grouped information.
- Emphasize elements—Place important elements, such as required fields, at the top of grouped sections. Place optional or less important elements at the bottom. Buttons should immediately follow the section upon which they act.
- Simplify the interface—To increase your user success rates:
- Reduce the steps required to accomplish the most common user tasks.
- Reduce the amount of text and font types, design elements (such as buttons and fields), and graphics. Consider eliminating elements that are not required.
- Create smaller tables.
- Plan your design around the tasks that users must accomplish and the fields required to accomplish those tasks. As a general rule, 80% of optional fields can be eliminated.
- Create contrast—Choose a light background color that makes black text easy to read. Avoid light-colored text and dark, multicolored, or textured backgrounds. Use headings, bold text, and light-colored cells and borders to make important elements stand out.
- Align elements—Align fields and field labels. Misaligned fields create visual confusion and draw the user's attention away from the tasks they must perform.
- Be consistent—Keep language simple and consistent. For example, use Postal Code or Zip Code, but not both. Use similar field lengths and button types for similar actions.
- Provide feedback—Provide a message or clearly change the way the interface appears after a user performs an action. For example, if the user performed the wrong action, supply an error message that explains why the action did not succeed and what the user must do next.
- Test your application—Customers can provide useful feedback on your application from a user's point of view. Test your application with a cross-section of customers that reflects your intended audience.
The following figure illustrates a form with a poorly designed user interface. This form:
- Is "packed" with a large number of fields, all of which must compete for the user's attention.
- Is poorly organized, providing the user with no visual clue as to the relationship of the data or the logical flow of actions.
- Does not provide enough visual distinction between field labels and labels that group sections of fields.
- Does not align fields consistently.
- Does not label items consistently (for example, sections along the bottom are not labeled).
- Has a button (Clear Table button) that does not follow the appropriate section.
Poorly designed interface
The following figure shows a well-designed interface. This form:
- Includes only the fields necessary to perform the tasks for which the application was created.
- Arranges the fields so that related data is grouped logically, and makes groups of related data visually distinct.
- Makes important fields stand out from the background, enabling users to accomplish tasks quickly.
Well-designed interface
See these websites for more information:
User Interface Engineering (http://www.uie.com)
User Experience Professionals Association (http://www.uxpa.org)
Neilsen Norman Group and Jacob Nielsen's website(http://www.nngroup.com)
UX Magazine (http://www.uxmag.com)
UXmatters (http://www.uxmatters.com)
The Usability Post (http://www.usabilitypost.com)
Usability.gov (http://www.usability.gov)
Tip: For faster searching, add an asterisk to the end of your partial query. Example: cert*