Tài liệu Web Application Design Patterns- P14 docx

376 CHAPTER 12 Visual Design

ALIGN PAGE ELEMENTS ALONG GRID LINES

Align page elements along grid lines and with each other either vertically or hor￾izontally. The objective is not only to create a minimal number of “ invisible ”

grids on the page but also to do it in a way that reveals the structure of the page

visually and makes it easy for users to understand and fi nd different page ele￾ments. Creating effective alignment also helps lead a person through the design

by associating related elements on the page (see the VISUAL HIERARCHY pat￾tern that follows). Using alignment consistently on all pages within the web

application improves the predictability of page elements within the design.

CREATE REUSABLE TEMPLATES

Once pages are laid out, they should be sliced into one or more page templates

(depending on the number of page types) and used throughout the applica￾tion. This ensures that designs work for the entire application and therefore

prevents any guesswork on the developer’s part as to how individual pages

within the application should be designed.

Related design patterns

One of the important reasons for using the GRID STRUCTURE pattern is to

ensure that the resulting design leads to a logical and predictable organization,

improves comprehension, and makes it easy for users to fi nd desired informa￾tion (VISUAL HIERARCHY).

VISUAL HIERARCHY

Problem

Users need to make sense of information presented on web pages so that they

can attend to the most important information fi rst before moving to informa￾tion of less importance.

Solution

Design pages such that the visual hierarchy is obvious to users. That is, use

visual cues so as to clearly indicate grouping and the order of elements on a

web page, and help guide users through the page so that they understand the

page’s purpose, comprehend its organization, and correctly assign importance

to various page elements ( Figure 12.12 ). As Lynch and Horton (1999) stated:

“ Graphic design is visual information management, using the tools of page lay￾out, typography, and illustration to lead the reader’s eye through the page. ”

Why

Establishing a visual hierarchy serves several important functions (Wroblewski,

2002):

■ It creates a center of interest to attract users ’ attention.

■ It creates a sense of order and balance.

■ It establishes a pattern of movement to guide users through various page

elements.

377

Creating an appropriate visual hierarchy, therefore, makes users more effi cient

and effective when interacting with web applications.

How

Because designers are attempting to correctly convey the importance of page

elements through visual hierarchy, the obvious fi rst step is to list page elements

on a page in terms of their importance. The next step is to use one or more of

the following visual components to order, position, and design those elements

that refl ect the desired visual hierarchy: contrast, chunking, images, alignment,

white space, font sizes, shapes, colors, and others. For example, to elevate a

page element to the top of the visual hierarchy — that is, provide the highest

emphasis or importance to an element — it could be made larger, bolder, shown

in a high-contrast color, separated from other elements using additional white

space, wrapped into a bright-colored border, included with an image, and/or

placed closer to the top left or top center of the page ( Figure 12.13 ).

Visual Hierarchy

FIGURE 12.12 Google Analytics ’ “ Dashboard ” clearly identifi es different groupings of page

elements and leads users through it with an appropriate use of images, colors, and font sizes

and their relative weights.

FIGURE 12.13 On Google’s home page, the logo has the most prominence (at the top of the

visual hierarchy) because it is larger, bolder, and more colorful; has a high contrast with the

background; is surrounded by lots of white space; and is placed at the top center.

378 CHAPTER 12 Visual Design

USE CONTRAST TO ESTABLISH VISUAL HIERARCHY

Contrast is a key design approach used to communicate visual hierarchy. It is cre￾ated by visual difference between elements — the more two elements are different,

the higher the contrast between them. In general, higher-contrasting elements

grab users ’attention fi rst when compared with lower-contrasting elements. For

example, black has the highest contrast with white and varying levels of contrast

with different shades of gray. Value is not the only way two elements can contrast

from each other. Contrast can also be created by using one or more of the fol￾lowing: size, texture, position, shape, color, and orientation ( Figure 12.14 ).

By using a combination of these visual forms, an effective visual hierarchy can

be designed, and desired elements can be emphasized to draw users ’attention.

Contrast can be applied to page elements at the text level as well. For example,

headings and subheadings can be made to stand out from the rest of the text

by using contrast forms such as size and color ( Figure 12.15 ).

FIGURE 12.14

The primary forms

of contrast. ( Source:

From Rutledge, 2007.)

FIGURE 12.15 Blogger establishes a good visual hierarchy by using a large, colorful, high￾contrasting logo; then moves users ’ attention to the center area with a prominent call to action,

“ Create Your Blog Now ” ; then to the images; and so forth.