September 93 - WORKING IN THE THIRD DIMENSION
WORKING IN THE THIRD DIMENSION
JAMIE OSBORNE AND DEANNA THOMAS
Macintosh users have a lifetime of experience seeing and manipulating objects in three
dimensions. Many developers are taking advantage of this experience by adding
three-dimensional elements to their human interfaces. 3-D effects can heighten the
ease of use, realism, and visual appeal of your application. This article discusses why
3-D effects add value to Macintosh applications and describes an easy way to add 3- D
effects to applications created with MacApp.
Three-dimensional effects can add life to any user interface. A 3-D interface is
inviting to users. It offers them tactility and can make the user interface elements
they work with stand out. When implemented correctly, the 3-D interface helps users
differentiate between the important contents of a window and the background. The
result is a friendlier, more accessible interface to your application.
This article tells you about some basic 3-D design principles that you can use and
describes one way to implement them. The accompanying code on this issue's CD
contains a set of adorners and classes that make it easy to bring your MacApp
applications into the third dimension.
WHY A 3-D LOOK?
Developers have been adding color and 3-D buttons to their products for a couple of
years now. Users like 3-D effects not only because they're nicer to look at but also
because they help define user interface elements within the workspace. There's a clear
message that both users and developers want 3-D effects, and developers aren't holding
off until Apple provides guidelines and tools to implement them.
We've seen many developers come up with their own implementations of gray windows
and 3-D buttons. Even within Apple there are several ideas about what a 3 - D user
interface should look like. Although this article doesn't present an official Apple 3-D
interface, it does describe designs and approaches that we developed while
implementing a 3-D interface and that we think can help you with your own 3-D
interface design.
THE 3-D LOOK
In our three-dimensional look, windows have a light gray background instead of the
standard white background. Darker shades of gray and white on the edges of user
interface elements give the illusion that some elements are chiseled into the
background while others appear in bas-relief. There are two special cases: Modal
dialog boxes (windows with the definition ID of dBoxProc) have a gray background, but
do not have the chiseled effect because the color version of the window already has a
3-D border. Scrollable document windows (definition ID of documentProc) do not have
a gray background at all.
The 3-D look offers the user two advantages. First, it creates a clearer work
environment. White interface elements, such as text fields, checkboxes, and pop-up
menus, stand out from the light gray background and call attention to themselves. The
chiseled appearance, though subtle and unobtrusive, effectively communicates the
division of elements within the window.
The second advantage to the 3-D look is that it lets the user work on a more tangible,
tactile surface. The chiseled look gives strong clues that invite interaction. The slight
depression of text fields, for example, invites the user "into" the field to edit text. The
shading around buttons makes them look as if they project slightly from the gray
background. This makes buttons appear pressable, and they react appropriately when
the user clicks them. Our implementation of these elements strives to maintain the
crisp, clean graphical elegance that the Macintosh is known for.
The background gray we use for windows is the lightest gray in the Macintosh palette.
Its RGB value is 61166, 61166, 61166 (hex 0xEEEE). In small areas, this gray is
subtle; it appears to be darker in large areas that have only a few text fields or other
graphical elements.
Chiseled lines define the edges of windows, text fields, and checkboxes. They also help
group related items within a window. To create a chiseled effect on the light gray
background, use white and the fourth gray value from the Macintosh palette. The RGB
value of this medium light gray is 43690, 43690, 43690 (hex 0xAAAA). The way
you use these colors determines whether an object comes toward the user or recedes
into the background.
To chisel an object into the gray background, use gray shading on the object's top and
left edges and white on its bottom and right edges. To make an object project from the
gray background, reverse the order: use white on the top and left edges and gray on the
bottom and right edges. Note that the color of the top and left edges, whether white or
gray, always extends to the far corner pixels. Figure 1 shows both kinds of shading.
Figure 1 Shading Items for 3-D Effects
If you keep in mind that the imaginary light source on the desktop comes from the
upper left corner of the screen, you can always determine where to place the highlight
and shadow colors.
In windows, the background itself should appear to come forward by one pixel. To
create this effect, draw a white line on the top and left edges of the window and a gray
line on the bottom and right edges. Figure 2 shows a window with the background
drawn this way and a scrolling list chiseled into the background.
Figure 2 A Window With 3-D Effects
Though these chiseled effects are subtle, they do give a sense of depth, even if it's
almost subliminal in some cases. Remember, we don't want to hit anyone over the head
with these graphical enhancements. The goal is to add elegance and ease of use to the
work environment, not to scream out "Look at me!
ICON BUTTONS
Icon buttons are buttons that use graphics to describe what they do. The page
orientation controls in the standard Page Setup dialog box are good examples of early
icon buttons. One of the great things about icon buttons is that they give pictorial clues
at a glance. The user can usually understand what the buttons do from the way they're
clustered and from their surrounding context. Another advantage of icon buttons is that
they're more accessible and easier to see than menu commands. This makes icon
buttons ideal for frequently used commands.
It's very easy to create poorly designed icons. If you decide to use icon buttons in your
application, take the extra time to do plenty of user testing to make sure your users
think your icons mean what you think they mean. This is especially important if you
decide not to use text labels for your buttons.
Our icon buttons are square or rectangular, and the button is a slightly darker shade of
gray so that it's easily distinguished from the light gray background. The illusion of
height invites the user to press a button. Figure 3 shows a few examples of icon
buttons.
Because icon buttons are dynamic elements with specific characteristics, they need to
maintain a distinct appearance even in black and white , just as checkboxes and radio
buttons do. On a black-and- white screen, we use a 50% dither pattern along the
bottom and right edges of an icon button to give the button height (see Figure 3). When
the user clicks the button, the entire button inverts, maintaining a subtle 3-D look.
Figure 3 Some Icon Buttons
To achieve a consistent 3-D effect, our icon buttons follow certain guidelines. We
always use a 2- to 3-pixel margin between the icon boundaries and the edge of the
surface of a button. The frame and shading that give the icon button its 3-D appearance
extend four pixels in each direction. Figure 4 shows a closeup of an icon button's
shading. When you design your icon buttons, don't forget the additional pixels that
you'll need for the shading. If you want to use a 32 x 32 icon in a button, the minimum
button size is 40 x 40. If you want the entire button, including its shading, to fit in a
32 x 32 space, the icon should fit in roughly a 22 x 22 area so that it sits comfortably
within the button.
Figure 4 Icon Button Detail
As you design your icons, try to keep the image as free form as possible. In general,
the image shouldn't follow the outline of the button. A square icon can hide the
appearance of a square button and diminish the 3-D effect when the user presses the
button. The more free form the image, the clearer it is within the button. The icon
buttons in Figure 3 are good examples of free-form images.
Our icon buttons can appear in one of three states: available, selected, and unavailable.
Figure 5 shows what these states look like.
• In the available state, the button shows the full 3-D shading, and its icon
is displayed in the normal way. When the user clicks the button, it goes into
the selected state.
• In the selected state, the button and its icon darken, similar to a selected
icon in the Finder. Since it's a 3-D image, the shading changes to make the icon
recede into the surface, giving the impression that it's pushed in. If the button