053423 bc01.

qxp

4/10/07

1:33 PM

Page BC1

Additional Examples
for Steps 4 and 13

BC1

053423 bc01.qxp

4/10/07

1:33 PM

Page BC2

053423 bc01.qxp

4/10/07

1:33 PM

Page BC3

Additional Examples
for Step 4

Example 2
An improperly organized menu bar and pull-down.

Menu 2.1
In this poor menu bar, all alternatives are presented creating a very crowded series of
choices in a difficult-to-scan horizontal array. No groupings are provided and an alphabetic order causes intermixing of what appear to be different functions. While menu
breadth is preferred to excessive menu depth, too many choices are presented here.

Menu 2.1

Menus 2.2 and 2.3

This is a better, but still poor, menu bar while File, Function, and Help are now presented separately, the cascading Function menu requires an excessive number of steps

BC3

053423 bc01.qxp

BC4

4/10/07

1:33 PM

Page BC4

Additional Examples for Steps 4 and 13

to complete selection. Note the number of levels needed to access the Address or
Telephone book. Excessive levels of depth are difficult to scan and lead to ones getting
lost. Some have referred to this problem as cascade confusion.

Menu 2.2

Menu 2.3

Menus 2.4, 2.5, and 2.6

Here is a much more reasonable solution Application and Tool menu bar items are
created and all alternatives now exist on one pull-down menu. The number of steps necessary to reach any alternative is minimized and easier scanning of all items is permitted.

Menu 2.4

053423 bc01.qxp

4/10/07

1:33 PM

Page BC5

Additional Examples for Step 4

Menu 2.5

Menu 2.6

Menu 2.7A through 2.7J

Illustrated is a collection of textual Web site global navigation bars showing various
presentation styles. Menu A is horizontally arrayed with good separation between
alternate choices. No delimiters between the choices are included. Menu B uses the
symbol >> to designate the choices. Menus C, D, E, and F use a vertical line to separate
the choices, a very common technique used today in textual navigation presentation.
All choices are arrayed horizontally, with Menu F comprising two lines. Menu G is
composed of four columns. This menu would be scanned horizontally between
columns and vertically within a column. Spacing and choice content make this obvious. Menus H and I are composed of fewer choices than Menu G and are arrayed for
vertical scanning.

Menu 2.7A

Menu 2.7B

Menu 2.7C

Menu 2.7D

BC5

053423 bc01.qxp

BC6

4/10/07

1:33 PM

Page BC6

Additional Examples for Steps 4 and 13

Menu 2.7E

Menu 2.7F

Menu 2.7G

Menu 2.7H

Menu 2.7I

Menu 2.7J

The vertical menu arrangements do make scanning of the choices much easier.
Whenever possible, orient menus in the manner illustrated by Menus G, H, and I. If a
horizontal array is used, a separation delimiter is recommended. A vertical line separator is recommended. This will give the choices a more button-like appearance, and
this style commonly appears on Web pages.
Menus A, B, E, F, G, H, and I use the headline style of presentation (all significant
words capitalized). The remaining menus (C, D) use sentence style (only the initial
word is capitalized). The recommendation in this book, for reasons previously
described, is for captions and menu choices to be displayed in the headline style. For
another reason, look at the illustration in Menu 2.7J. A menu choice, when underlined,
can have letters with descenders degraded, destroying the shape of the word. This is
especially critical if the letter is the first word. Capitalization of a letter avoids this
problem.

053423 bc01.qxp

4/10/07

1:33 PM

Page BC7

Additional Examples for Step 4

Menus 2.8A through 2.8E

Illustrated is a collection of local Web site global navigation bars. All are arrayed in the
desired vertical format.
Menu A is a listing comprised of 20 choices. While it is alphabetized, no groupings
of choices exist. It would have been much better presented with groupings related by
topic. If topical grouping was not possible, visual grouping of the menu choices
should have been accomplished either by leaving a space line after every five choices,
or by providing a bolder or distinctively different line after every fifth choice.

Menu 2.8A

Menu B, composed of nine choices, is grouped, with separation of groups by

horizontal lines. Ordering appears to be by frequency of use. It is a simple and wellconstructed menu.

Menu 2.8B

Menu C is composed of two groups, with headings for each group. The headings,
being capitalized, stand out well. The ordering schemes within groupings are not
immediately obvious, however. In the MARKETS section, subgroupings of choices are
desirable.

BC7

053423 bc01.qxp

BC8

4/10/07

1:33 PM

Page BC8

Additional Examples for Steps 4 and 13

Menu 2.8C

Menu D contains a heading (In City of London) with five subheadings. A larger size
makes the heading stand out, and boldness makes all headings stand out. Sections are
grouped and visually separated. Why, however, is the subheading Search for in the
map positioned over two lines? It would appear to easily fit on one line. What is the
purpose of the horizontal lines separating the bottom three groupings? Because these
groupings all relate to map, perhaps it was to separate the three map components.
The horizontal line extending to each end of the box implies too great a separation and
no relationship, however. It would have been better to inscribe a shorter line extending
no wider than the choices themselves.

Menu 2.8D

053423 bc01.qxp

4/10/07

1:33 PM

Page BC9

Additional Examples for Step 4

Also worth considering, if these lines were shortened, would be to include two lines
the entire width of the box to separate the three major menu sections. This recommendation is illustrated in Menu 2.8E.

Menu 2.8E

Menus 2.9A through 2.9C

Illustrated is a collection of global navigation bars containing icons.
Do these icons add to screen usability? When searching through these menu arrays
do you look at the icons or words? Menu C is particularly wasteful of screen space,
forcing below the screen and out of sight content that might otherwise be visible if the
navigation bar were more reasonably sized.

Menu 2.9A

Menu 2.9B

Menu 2.9C

Menu 2.10
Menu 2.10 is an interesting menu, combining a two-level menu with a historical trail.
The top level, individual pages, has led to the selection of layout on the submenu. The
path followed exists within the displayed menu. All lowercase letters for menu choices
is not recommended, however. Headline-style presentation would have been much
better.

BC9

053423 bc01.qxp

4/10/07

1:33 PM

Page BC10

BC10 Additional Examples for Steps 4 and 13

Menu 2.10

053423 bc01.qxp

4/10/07

1:33 PM

Page BC11

Additional Examples
for Step 13

Example 3
These are redesigned versions of the banking screen presented in Step 3.

Screen 3.1
This is the original screen.

Screen 3.1

BC11

053423 bc01.qxp

4/10/07

1:33 PM

Page BC12

BC12 Additional Examples for Steps 4 and 13

Screen 3.2
The Name field is given a caption and a single alignment point is established for both
captions and data. Captions and data are now much more readable. Name format
instructions (1st, 2nd, and so on) are established as prompts. This prompt designation
is signaled by placing them in italics to subdue them visually. The prompt for Date of
Birth is placed to the right of its text box, out of the way but still easily viewable. This
also permits the alignment point for the text boxes to be moved closer to the captions.
Date is also segmented into its component pieces. The command buttons are positioned at the bottom. No groupings are established, however. This screen is 9 percent
less complex than the original.

Screen 3.2

Screen 3.3
This screen is identical to the previous version except that Sex and Marital Status are
arrayed vertically. This screen is 17 percent less complex than the original.

Screen 3.4
The elements are now grouped with group boxes and section headings. Name is segmented into its three components. Address details are moved closer to the customers
name. Sex and Marital Status must be arrayed horizontally because of space constraints caused by the groupings. This screen is 4 percent less complex than the original. Which of these do you prefer, 3.2, 3.3, or 3.4?

053423 bc01.qxp

4/10/07

1:33 PM

Page BC13

Additional Examples for Step 13 BC13

Screen 3.3

Screen 3.4

053423 bc01.qxp

4/10/07

1:33 PM

Page BC14

BC14 Additional Examples for Steps 4 and 13

Example 4
These are redesigned versions of the drawing program screens presented in Step 3.

Screen 4.1
This is the original PRINT MERGE screen.

Screen 4.1

Screen 4.2
The redesigned PRINT MERGE screen. Elements are aligned and the File text box is
positioned by its related list box. The Up command is placed in the proper contingent
relationship to the Directories list box. The command buttons are moved to the bottom
of the screen and Merge is changed to OK for consistency with the other screens. The
title is capitalized for consistency with the other screens. This redesigned screen is 29
percent less complex than the original.

053423 bc01.qxp

4/10/07

1:33 PM

Page BC15

Additional Examples for Step 13 BC15

Screen 4.2

Screen 4.3
This is the original PAGE SETUP screen.

Screen 4.3

053423 bc01.qxp

4/10/07

1:33 PM

Page BC16

BC16 Additional Examples for Steps 4 and 13

Screen 4.4
Here is the redesigned PAGE SETUP screen. The radio buttons are aligned for vertical scanning and placed within borders. The inches control is changed to a standard
drop-down/pop-up list box. This redesigned screen is 19 percent less complex than
the original.

Screen 4.4

Screen 4.5
The original EXPORT screen.

053423 bc01.qxp

4/10/07

1:33 PM

Page BC17

Additional Examples for Step 13 BC17

Screen 4.5

Screen 4.6
The redesigned EXPORT screen. The radio buttons and check boxes are aligned for
vertical scanning and placed within borders. The check boxes are given a caption, as is
the list box. For balance purposes, the controls are arrayed in two columns. This
redesigned screen is 5 percent less complex than the original.

Screen 4.6

053423 bc01.qxp

4/10/07

1:33 PM

Page BC18

BC18 Additional Examples for Steps 4 and 13

Example 5
Here are redesigned versions of the word-processing screens presented in Step 3.

Screen 5.1
This is the original FOOTNOTE OPTIONS screen.

Screen 5.1

Screen 5.2
The redesigned FOOTNOTE OPTIONS screen. Elements are aligned, including the
single check boxes. Headings are capitalized and left-justified within the borders.
Position and Separator are combined into one grouping called LOCATION. This
redesigned screen is 13 percent less complex than the original.

053423 bc01.qxp

4/10/07

1:33 PM

Page BC19

Additional Examples for Step 13 BC19

Screen 5.2

Screen 5.3
This is the original LOCATION OF FILES screen.

Screen 5.4
The redesigned LOCATION OF FILES screen. The section headings are capitalized
and left-justified in the borders. Visual competition with the text box information is
now minimized. A grouping called FILES is created at the screens top for consistency
and balance. The single check box is aligned under the text boxes. This redesigned
screen is 2 percent more complex than the original, again due to the added heading.

053423 bc01.qxp

4/10/07

1:33 PM

Page BC20

BC20 Additional Examples for Steps 4 and 13

Screen 5.3

Screen 5.4

053423 bc01.qxp

4/10/07

1:33 PM

Page BC21

Additional Examples for Step 13 BC21

Example 6
Here is a redesigned version of the drawing program read-only/display screen presented in Step 3.

Screen 6.1
This is the original screen.

Screen 6.1

Screen 6.2
Here is the redesigned screen. Headings are capitalized to set them off from the control
captions. The headline style of presentation is consistently applied to all captions. The
data fields are aligned and the Units in the IMAGE sections are moved to the top. This
redesigned screen is 12 percent less complex than the original.

053423 bc01.qxp

4/10/07

1:33 PM

Page BC22

BC22 Additional Examples for Steps 4 and 13

Screen 6.2

Example 7
Here are redesigned versions of the other read-only/display screen presented in Step 3.

Screen 7.1
This is the original STORY INFO screen.

Screen 7.1

053423 bc01.qxp

4/10/07

1:33 PM

Page BC23

Additional Examples for Step 13 BC23

Screen 7.2
Here is the redesigned STORY INFO screen. Elements are aligned and incorporated
within borders. Note that headings are not included within the borders. The command
remains positioned in the upper-right corner, as is standard for this graphical system.
This redesigned screen is 8 percent less complex than the original.

Screen 7.2

Screen 7.3
Here is another version of the redesigned STORY INFO screen. The only difference is
that the command button is positioned at the bottom rather than at the side, creating a
better-balanced screen. On less complex screens, this is another advantage of bottom
positioning of command buttons.

Screen 7.3

053423 bc01.qxp

4/10/07

1:33 PM

Page BC24