Software Project Survival Guide


User Interface Style Guide

The UI Style Guide sets guidelines to promote a consistent look and feel of a program. On a team project, many different programmers will contribute to a program, but you don't want the program to look like many different programmers contributed to it. On some projects, details of UI consistency are addressed in a requirements specification. In the approach described in SPSG, the requirements spec will be silent about UI issues, so those issues willl need to be addressed in the UI Style Guide.

Here are some topics to consider.

Relationship To Other Standards
  • Does the program follow the Microsoft Windows, Apple Macintosh, or other user interface standards? (if so, reference the book that describes the standard)
  • In the event of a conflict between the industry standard and the UI Style Guide, which should prevail?
Windows
  • Will the application be an SDI or MDI application?
  • If the application is an MDI application, what kinds of windows can be presented as MDI children?
  • What is the window background color? Is the color hard coded, or is it based on a system color setting?
Dialogs

Flow Among Dialogs

  • Are both modal and modeless dialogs allowed, or is one style to be preferred?
  • Are multiple paths to the same dialog allowed, or is only one path to each dialog allowed?
  • Are circular paths among dialogs allowed (e.g., Dialog A opens Dialog B, Dialog B opens Dialog C, and Dialog C opens Dialog A)?
Dialog Functionality
  • How is Help accessed from dialogs (i.e., Help button, F1 key, other help icon, etc.)?
  • Are tabbed dialogs allowed?
  • Do dialogs support the Apply button? If so, under what circumstances should Apply be supported, and under what circumstances is it not needed?
  • Are "common dialogs" used whenever possible (e.g., file open, file save, print, etc.), or does the program use custom dialogs?
  • Are dialogs resizeable?
  • What title-bar buttons appear on each dialog (e.g., only close, or  close plus others)?
  • How are title-bar captions determined?
Dialog Appearance
  • What font is used?
  • What style of group boxes is used?
  • If 3D effects are used, what standards apply to them (e.g., recessed vs. raised panels, thickness of panel borders, single recess vs. double recess, etc.)
Buttons
  • How big is a standard button?
  • Under what circumstances can you create a button that is not the standard size?
  • How much space is there between buttons?
  • Are buttons generally to be stacked vertically or lined up horizontally?
  • Is there a standard set of buttons that should be present on every dialog (e.g., Help, Cancel, OK)?
  • Are buttons allowed to contain pictures, or just text?
Toolbars
  • Are toolbars moveable, resizeable, dockable, and so on?
Status Bars
  • Does the program have a status bar?
  • What fields are on the status bar?
  • Under what circumstances should each field be updated?
Menus
  • How are keystroke mnemonics selected (e.g., by first letter if possible; dominant consonent otherwise, or some other plan)?
  • Are pop-up menus supported?
  • How are the contents of each pop-up menu determined (e.g., just the local action, or local plus more general actions)?
Error Processing
  • How is the user notified of errors (e.g., program doesn't do anything; program beeps; message displayed in status bar; program displays pop-up dialog and requires user acknowledgment, etc.)?
  • Under what circumstances should the program just beep?
  • Under what circumstances should the program display an informative message?
  • Under what circumstances should the program require user acknowledgment?
Colors
  • Does the program support 16 colors, 256 colors, or both?
  • What colors are allowed to be used in creating icons, toolbar buttons, and so on? Do you want to work from a specific set of colors that have been chosen to give the program a consistent look and feel, or may all colors be used?
Accessibility
  • Does the program provide keyboard equivalents for all mouse actions?
  • Does the program use system settings for all colors (e.g., dialog background color, dialog text color, dialog text size, button face color, button text color, button text size, and so on)?
General Comments

Many of these issues are easiest to address by including screen shots and annotating them to describe the salient points. The UI Style Guide should be only a few pages long.