A grid system is one of the most powerful tools available to the visual designer.
Popularized by Swiss typographers in the years after World War II, the use of a grid provides a uniform and consistent structure to layout, which is particularly important when designing an interface with several levels of visual or functional complexity. After interaction designers have defined the overall framework for the application and its user interface elements (as discussed in Chapter 7), visual interface designers should help regularize the layout into a grid structure that properly emphasizes top-level elements and structures and provides room for lower-level or less important controls.
Typically, the grid divides the screen into several large horizontal and vertical regions (see Figure 14-2). A well-designed grid employs an atomic grid unit that represents the smallest spacing between elements. For example, if your atomic unit is four pixels, spacing between screen elements and groups will all be in multiples of four pixels.
19_084113 ch14.qxp 4/3/07 6:07 PM Page 298
298
Part II: Designing Behavior and Form
Ideally, a grid should also have consistent relationships between the sizes of different screen areas. These relationships are typically expressed as ratios. Commonly used ratios include the celebrated “golden section,” or phi (approximately 1.61), which is found frequently in nature and is thought to be particularly harmonious to the human eye; the square root of two (approximately 1:1.14), which is the basis of the international paper size standard (e.g. the A4 sheet); and 4:3, the aspect ratio of most computer displays.
Of course, a balance must be struck between idealized geometric relationships and the specific spatial needs of the functions and information that must be presented on the screen. A perfect implementation of the golden section will do nothing to improve the readability of a screen where things are jammed together with insufficient spacing.
Figure 14-2 This example of a layout grid prescribes the size and position of the various screen areas employed by a Web site. This grid ensures regularity across different screens and reduces both the amount of work that a designer must do to lay out the screens and the work that a user must do to read and understand the screens.
19_084113 ch14.qxp 4/3/07 6:07 PM Page 299
Chapter 14: Visual Interface Design
299
A good layout grid is modular, which means that it should be flexible enough to handle necessary variation while maintaining consistency wherever possible. And, as with most things in design, simplicity and consistency are desirable. If two areas of the screen require approximately the same amount of space, make them exactly the same size. If two areas have different requirements, make them substantially different. If the atomic grid unit is too small, the grid will become unrecognizable in its complexity. Slight differences can feel unstable to users (though they are unlikely to know the source of these feelings) and ultimately fail in capitalizing in the potential strength of a strong grid system.
The key is to be decisive in your layout. Almost a square is no good. Almost a double square is also no good. If your layout is close to a simple fraction of the screen, such as a half, third, or fifth, adjust the layout so it is exactly a half, third, or fifth.
Make your proportions bold, crisp, and exact.
The use of a grid system in visual interface design provides several benefits:
Usability — Because grids attempt to regularize positioning of elements, users are able to learn quickly where to find key interface elements. If a screen header is always in precisely the same location, a user doesn’t have to think or scan to find it. Consistent spacing and positioning support people’s innate visual-processing mechanisms. A well-designed grid greatly improves the readability of the screen.
Aesthetic appeal — By carefully applying an atomic grid and choosing the appropriate relationships between the various areas of the screen, a design can create a sense of order that feels comfortable to users and invites them to interact with the product.
Efficiency — Standardizing your layouts will reduce the amount of labor required to produce high-quality visual interfaces. We find that definition and implementation of a grid early in design refinement results in less iteration and “tweaking”
of interface designs. A well-defined and communicated grid system results in designs that can be modified and extended, allowing developers to make appropriate layout decisions should alterations prove necessary.
Creating a logical path
In addition to precisely following a grid, the layout must also properly structure an efficient logical path for users to follow through the interface, taking into account the fact that (in Western languages) the eye will move from top to bottom and left to right (see Figure 14-3).
19_084113 ch14.qxp 4/3/07 6:07 PM Page 300
300
Part II: Designing Behavior and Form
Good logical flow
Bad logical flow
Eye movements match the
Everything is all over the place
path through the interface
Figure 14-3 Eye movement across an interface should form a logical path that enables users to efficiently and effectively accomplish goals and tasks.
Symmetry and balance
Symmetry is a useful tool in organizing interfaces from the standpoint of providing visual balance. Interfaces that don’t employ symmetry tend to look unbalanced, as if they are going to topple over to one side. Experienced visual designers are adept at achieving asymmetrical balance by controlling the visual weight of individual elements much as you might balance children of different weights on a seesaw.
Asymmetrical design is difficult to achieve in the context of user interfaces because of the high premium placed on white space by screen real-estate constraints. The squint test is again useful for seeing whether a display looks lopsided.
Two types of symmetry are most often employed in interfaces: vertical axial symmetry (symmetry along a vertical line, usually drawn down the middle of a group of elements) or diagonal axial symmetry (symmetry along a diagonal line). Most typical dialog boxes exhibit one or the other of these symmetries — most frequently diagonal symmetry (see Figure 14-4).
Sovereign applications typically won’t exhibit such symmetry at the top level (they achieve balance through a well-designed grid), but elements within a well-designed sovereign interface will almost certainly exhibit use of symmetry to some degree (see Figure 14-5).
19_084113 ch14.qxp 4/3/07 6:07 PM Page 301
Chapter 14: Visual Interface Design
301
Figure 14-4 Diagonal symmetry in Microsoft Word’s Bullets and Numbering dialog. The axis of symmetry runs from lower left to upper right.
Figure 14-5 Vertical symmetry in the Macromedia Fireworks tool palette.
19_084113 ch14.qxp 4/3/07 6:07 PM Page 302
302
Part II: Designing Behavior and Form
Use cohesive, consistent, and contextually
appropriate imagery
Use of icons and other illustrative elements can help users understand an interface, or if poorly executed, can irritate, confuse, or insult. It is important that designers understand both what the program needs to communicate to users and how users think about what must be communicated. A good understanding of personas and their mental models should provide a solid foundation for both the textual and visual language used in an interface. Cultural issues are also important. Designers should be aware of different meanings for colors in different cultures (red is not a warning color in China), for gestures (thumbs up is a terrible insult in Turkey), and for symbols (an octagonal shape means a stop sign in the U.S., but not in many other countries). Also, be aware of domain-specific color coding. In a hospital, yellow means radiation and red usually means something life threatening. On a stock trading desk, red means sell. Make sure you understand the visual language of your users’ domains and environments before forging ahead.
&nb
sp; Visual elements should also be part of a cohesive and globally applied visual language. This means that similar elements should share visual attributes, such as how they are positioned, their size, line weight, and overall style, contrasting only what is important to differentiate their meaning. The idea is to create a system of elements that integrate together to form a cohesive whole. A design that achieves this seems to fit together perfectly; nothing looks stuck on at the last minute.
In addition to their functional value, icons can play a significant role in conveying the desired brand attributes. Bold, cartoonish icons may be great if you’re designing a Web site for kids, whereas precise, conservatively rendered icons may be more appropriate to a productivity application. Whatever the style, it should be consistent — if some of your icons use bold black lines and rounded corners while others use thin, angular lines, the visual style won’t hold together.
Icon design and rendering is a craft in and of itself; rendering understandable images at low resolution takes considerable time and practice and is better left to trained visual designers. Icons are a complicated topic from a cognitive standpoint, and we will only highlight a few key points here. For those who want to understand more about what makes usable icons, we highly recommend William Horton’s The Icon Book. You may find the examples dated, but the principles still hold true.
Function-oriented icons
Designing icons to represent functions or operations performed on objects leads to interesting challenges. The most significant challenge is to represent an abstract concept in iconic, visual language. In these cases, it is best to rely on idioms rather
19_084113 ch14.qxp 4/3/07 6:07 PM Page 303
Chapter 14: Visual Interface Design
303
than force a concrete representation where none makes sense and to consider the addition of ToolTips (see Chapter 23) or text labels.
For more obviously concrete functions, some guidelines apply:
Represent both the action and an object acted upon to improve comprehension.
Nouns and verbs are easier to comprehend together than verbs alone (for example, for a Cut command, representing a document with an X through it may be more readily understood than a more metaphorical image of a pair of scissors).
Beware of metaphors and representations that may not have the intended meanings for your target audience. For example, while the thumbs-up hand gesture means “OK” in Western cultures and might strike you as an appropriate icon to communicate “approval,” it is quite offensive in Middle Eastern (and other) cultures, and should be avoided in any internationalized application.
Group related functions visually to provide context, either spatially or, if this is not appropriate, using color or other common visual themes.
Keep icons simple; avoid excessive visual detail.
Reuse elements when possible, so users need to learn them only once.
Associating visual symbols to objects
Creating unique symbols for types of objects in the interface supports user recognition. These symbols can’t always be representational or metaphoric — they are thus often idiomatic (see Chapter 13 for more information on the strengths of idioms). Such visual markers help users navigate to appropriate objects faster than text labels alone would allow. To establish the connection between symbol and object, use the symbol wherever the object is represented on the screen.
DESIGN
Visually distinguish elements that behave differently.
principle
Designers must also take care to visually differentiate symbols representing different object types. Discerning a particular icon within a screen full of similar icons is as difficult as discerning a particular word within a screen full of words. It’s also particularly important to visually differentiate (contrast) objects that exhibit different behaviors, including variants of controls such as buttons, sliders, and check boxes.
Rendering icons and visual symbols
Especially as the graphics capabilities of color screens increase, it is tempting to render icons and visuals with ever-increasing detail, producing an almost photographic
19_084113 ch14.qxp 4/3/07 6:07 PM Page 304
304
Part II: Designing Behavior and Form
quality. However, this trend does not ultimately serve user goals, especially in productivity applications. Icons should remain simple and schematic, minimizing the number of colors and shades and retaining a modest size. Windows Vista and Mac OS X have taken the step towards more fully rendered icons. Although such icons may look great, they draw undue attention to themselves and render poorly at small sizes, meaning that they must necessarily take up extra real estate to be legible. They also encourage a lack of visual cohesion in the interface because only a small number of functions (mostly those related to hardware) can be adequately represented with such concrete photorealistic images. Photographic icons are like all-capitalized text; the differences between icons aren’t sharp and easy to distinguish, so we get lost in the complexity. It’s much easier for users to differentiate between icons by shape, but in the case of Mac OS X, the outline of every icon is a similarly indistinct blob.
The Mac OS X interface is filled with photorealistic touches that ultimately distract (see Figure 14-6). None of this serves users particularly well.
Figure 14-6 Photorealistic icons in Mac OS X. This level of detail in icons serves only to distract from data and function controls. In addition, although it might, in some instances, make sense to render in detail objects people are familiar with, what is the sense of similarly rendering unfamiliar objects and abstract concepts (for example, a network)? How many users have seen what a naked hard drive looks like (far right)? Ultimately, users must rely on accompanying text to make sense of these icons, unless they are used quite frequently.
Visualizing behaviors
Instead of using words alone to describe the results of interface functions (or worse, not giving any description at all), use visual elements to show users what the results will be. Don’t confuse this with use of icons on control affordances. Rather, in addition to using text to communicate a setting or state, render an illustrative picture or diagram that communicates the behavior. Although visualization often consumes more space, its capability to clearly communicate is well worth the pixels. In recent years, Microsoft has discovered this fact, and the dialog boxes in Microsoft Word, for example, have begun to bristle with visualizations of their meaning in addition to the textual controls. Photoshop and other image-manipulation applications have long shown thumbnail previews of the results of visual-processing operations.
19_084113 ch14.qxp 4/3/07 6:07 PM Page 305
Chapter 14: Visual Interface Design
305
DESIGN
Visually communicate function and behavior.
principle
The Print Preview view in Microsoft Word (see Figure 14-7) shows what a printed document will look like with the current paper size and margin settings. Many users have trouble visualizing what a 1.2-inch left margin looks like; the Preview control shows them. Microsoft could go one better by allowing direct input on the Preview control in addition to output, allowing users to drag the left margin of the picture and watch the numeric value in the corresponding spinner ratchet up and down. The associated text field is still important — you can’t just replace it with the visual one. The text shows the precise values of the settings, whereas the visual control accurately portrays the look of the resulting page.
Figure 14-7 Microsoft Word Print Preview is a good example of a visual expression of application functionality. Rather than requiring users to visualize what a 1.2-inch margin might look like, this function allows a user to easily understand the ramifications of different settings.
19_084113 ch14.qxp 4/3/07 6:07 PM Page 306
306
Part II: Designing Behavior and Form
Integrate style and function comprehensively
and purposef
ully
When designers choose to apply stylistic elements to an interface, it must be from a global perspective. Every aspect of the interface must be considered from a stylistic point of view, not simply as individual controls or other visual elements. You do not want your interface to seem as though someone applied a quick coat of paint.
Rather, you need to make sure that the functional aspects of your program’s visual interface design are in complete harmony with the visual brand of your product.
Your program’s behavior is part of its brand, and your user’s experience with your product should reflect the proper balance of form, content, and behavior.
Form versus function
Although visual style is a tempting diversion for many stakeholders, the use of stylized visual elements needs to be carefully controlled within an interface —
particularly when designing for sovereign applications. The basic shape, behavior, and visual affordance (see Chapter 13) of controls should be driving factors in developing the visual style, and purely aesthetic considerations should not interfere with the meaning of the interface or a user’s ability to interact with it.
That said, educational and entertainment applications, especially those designed for children, leave room for a bit more stylistic experimentation. The visual experience of the interface and content are part of the enjoyment of these applications, and a greater argument can also be made for thematic relationships between controls and content. Even in these cases, however, basic affordances should be preserved so that users can, in fact, reach the content easily.
Alan Cooper, Robert Reinmann, David Cronin - About Face 3- The Essentials of Interaction Design (pdf) Page 42