GUI Design Tips - 1
Organize the user interface so that the information flows either vertically or
horizontally, with the most important information always located in the upper-left corner
of the screen.
Group related controls together using either white space or a frame.
Align controls to minimize number of margins.
GUI Design Tips - 2
Either center the command buttons along the bottom of the screen or stack them in either
the upper-right or lower-right corner.
Use no more than six command buttons on a screen.
Place the most commonly used command button first.
GUI Design Tips - 3
Assign meaningful captions to command buttons.
Place the caption on one line and use from one to three words only.
Use book title capitalization for command button captions.
GUI Design Tips - 4
Label each control in the interface. The label should be from one to three words only,
and it should be entered on one line.
Align each label on the left, and position each either above or to the left of the
control it identifies.
Follow the label with a colon (:) and use sentence capitalization.
GUI Design Tips - 5
Maintain a consistent margin of two or three dots from the edge of the window.
Position related controls on succeeding dots. Controls that are not part of any logical
grouping may be positioned from two to four dots away from other controls.
Try to create an interface that no one notices.
GUI Design Tips - 6
Command buttons in the interface should be sized relative to each other.
If the command buttons are centered on the bottom of the screen, then each button should
be the same height; there widths, however, may vary.
If the command buttons are stacked in a corner, then each should be the same height and
the same width.
GUI Design Tips - 7
The human eye is attracted to pictures before text, so include a graphic only if it is
necessary to do so.
If you are including the graphic for aesthetics only, use a small graphic and place it
in a location that will not distract the user.
GUI Design Tips - 8
Use 8, 10, or 12 point fonts for the elements in the user interface.
Use only one or two font sizes.
Use a sans serif font for the text.
Use only one font type for all of the text.
Avoid italics and underlining.
GUI Design Tips - 9
The human eye is attracted to color before black and white.
Build the interface using black, white, and gray first, then add color only if you have
a good reason to do so.
Use either white, off-white, light gray, pale blue, or pale yellow for an
application’s background, and use black for the text.
GUI Design Tips - 10
Always use dark text on a light background because it is the easiest to read.
Never use a dark color for the background or a light color for the text.
Limit the number of colors (other than white, black, and gray) to three.
Never use color as the only means of identification for an interface element.