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

Creating effective alignment also helps lead a person through the design hor-by associating related elements on the page see the VISUAL HIERARCHY tern that follows.. Related design patte

ALIGN PAGE ELEMENTS ALONG GRID LINES

Align page elements along grid lines and with each other either vertically or 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

hor-by associating related elements on the page (see the VISUAL HIERARCHY 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):

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 )

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

USE CONTRAST TO ESTABLISH VISUAL HIERARCHY

Contrast is a key design approach used to communicate visual hierarchy It is 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, 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

It’s important to remember that contrast does not just refer to background –

foreground contrast but also about the contrast (i.e., differences) among page

elements If the background – foreground contrast is high, but the contrast

among page elements is low, the web page will fail to establish a clear visual

hierarchy This can also make the page appear cluttered and disorganized to

users because they will struggle to navigate through the page design to

deter-mine what to attend to fi rst, second, and so forth

GROUP RELATED INFORMATION VISUALLY

By grouping information visually and clearly indicating what the group

repre-sents, users can quickly decide whether to pay attention to it When designed

correctly, grouping makes pages appear simpler because it’s easier for users to

fi lter out (i.e., ignore) not-so-relevant information and focus on the areas of

interest ( Figure 12.16 )

Visual hierarchy is important for both between groups and between elements

within groups Once users decide to focus on a logical group, they should be

able to understand the importance of elements within the group In Figure

12.16, Crazy Egg emphasizes different elements within the group to indicate

their importance For example, in the “ Let’s Get Started ” section, “ Create a Test ”

is higher in the visual hierarchy than the text “ Setting up a test ”

PLACE PERSISTENT ELEMENTS IN CONSISTENT LOCATIONS

Persistent elements on a page — that is, elements that appear on almost all

pages within the application such as logos, navigation, headers, footers, and so

FIGURE 12.16 Crazy Egg groups different areas of the page using colors, font sizes, and white

space to not only establish a good visual hierarchy but also to make the page appear simpler

and visually pleasing

forth — should be placed in consistent locations For each persistent element, establish its importance and position it accordingly For example, navigation

is important and should be appropriately emphasized and clearly delineated from other elements such as logos and headers ( Figure 12.17 )

Related design patterns Aligning page elements is extremely important for establishing an appropri-ate VISUAL HIERARCHY and for guiding users through page elements GRID STRUCTURE is typically used to ensure proper alignment of page elements and to facilitate content scanning Knowing visual hierarchy of the page is also important for SEMANTIC MARKUP (see Chapter 11) The order of elements in the page markup should refl ect the desired visual hierarchy so that when the page is rendered without style sheets and images, the visual hierarchy of page elements is still maintained

HIGHLIGHT

Problem Certain page elements need to stand out and grab users ’ attention, not only to establish their importance (VISUAL HIERARCHY) but also in response to users ’ actions (e.g., selecting an element) or to communicate to users a status change for page elements or individual data items

Solution Highlight selected or changed elements to direct users ’ attention to them ( Figure 12.18 ) If necessary, indicate the “ value ” or the extent of the change Why

Highlighting is important to provide a visual feedback about selected elements

as well as to direct users ’ attention to changes It is also useful in the following ways (Mahemoff, 2006):

■ Showing which particular element has focus

FIGURE 12.17 Blinksale positions the header, primary navigation, utility navigation, page content, and related actions

in consistent locations

■ Prompting users to act on an element

Highlighting is particularly important for pages communicating different states

for a wide variety of elements, since it not only directs users ’ attention but also

invites appropriate action

How

There are several ways to highlight a page ’ s elements to make them stand out:

change the background color, change the text color, make the text bold or a larger

size, change borders, use animation (see the patterns ANIMATIONS/TRANSITIONS

and SPOTLIGHT/YELLOW-FADE in Chapter 8), dim some elements, or use icons

Ideally, use a combination of these styles ( Figures 12.19 and 12.20 )

HIGHLIGHT SELECTED ITEMS IN A LIST

Clearly indicate items with which users are working or will be taking action on

by highlighting each selected item Even when checkboxes are used for

selec-tion, highlighting is a better visual way of distinguishing selected items from

unselected items ( Figure 12.21 )

USE TRANSIENT HIGHLIGHTING TO INFORM USERS

OF PAGE CHANGES

Highlighting an item momentarily (typically by fading the highlight in and

then fading it out) creates an animated effect and focuses users ’ attention

on the changed area on the page (see the ANIMATIONS/TRANSITIONS and

SPOTLIGHT/YELLOW-FADE patterns in Chapter 8)

FIGURE 12.18 Dell uses several highlighting approaches on this page: recommended options

are highlighted with a green background, and changed and upgraded confi guration items are

highlighted in the “ My Components ” section with a yellow background

USE A LIGHTBOX EFFECT TO HIGHLIGHT CHANGES THAT REQUIRE USER RESPONSE

In instances where a page element needs to be highlighted and users must interact with it before continuing (similar to a modal dialog box in desktop

FIGURE 12.19 Backpack shows the current (i.e., selected) tab using a combination of background color, borders, font size, and font color This page highlights the message “ Get reminders on your email or cell phone ” by changing its background color and making the font larger and bolder Backpack also deemphasizes (i.e., “ unhighlights ” ) the utility navigation links in the footer by making them smaller and gray

FIGURE 12.20 This demo dashboard from BrightPoint Consulting ( www.brightpointinc.com )

shows several different ways of highlighting page elements: the selected campaign is in a different background color, campaign totals are in yellow, and different bubble sizes highlight campaigns with higher ad spending

applications), a useful way to get users ’ attention is to dim all elements on the

page other than the highlighted element ( Figure 12.22 )

KEEP HIGHLIGHTING APPROACHES CONSISTENT

Keep highlighting approaches consistent throughout the application for similar

interactions Although the design may have different highlighting approaches

for different contexts, such as selected items, messages (e.g., error, feedback,

acknowledgment, and alert), selected navigation items, and so forth, they

should remain consistent throughout the application In Figure 12.21, Gmail

uses a yellow background for selected emails, a blue background for the

selected navigation item (in this case, “ Inbox ” ), and a green icon for users who

are currently online (in this case, Pawan Vora) for chatting

Related design patterns

Animations and transitions are also useful ways to call users ’ attention to the

changed elements (see the ANIMATIONS/TRANSITIONS and SPOTLIGHT/

YELLOW-FADE patterns in Chapter 8)

ICONS

Problem

Designers want to make different page objects and actions easily recognizable

without requiring excessive space and, at the same time, want to make the

interface visually pleasing and inviting to users

FIGURE 12.21 Gmail highlights selected items by changing their background color

FIGURE 12.22 Picnik highlights the registration form by dimming the page ’ s background,

requiring users to either continue to create an account or to close the site by clicking on the

close (  ) icon

Solution Use icons to represent commonly used objects and actions ( Figure 12.23 ) Why

Icons may be used in web applications for a variety of reasons:

How Most important, use familiar icons (Nolan, 1989) — that is, use concrete (rather than abstract) icons and those that remind users of things already known Use icons that clearly suggest the objects or actions they represent Ideally, users should be able to recognize icons without any accompanying text labels

SUPPLEMENT ICONS WITH LABELS

Undoubtedly, there will be objects and actions that are unfamiliar to users Therefore, supplement icons with labels to make actions easier to identify During users ’ initial interaction with an application, users are more likely to rely on labels, but as their use continues, their interaction will become more effi cient as the icons become familiar

When adding labels may take additional space, include tool tips for the icons However, when dynamically changing the status of an icon, update the tool tip dynamically to indicate the changed state

FIGURE 12.23

Yahoo! mail uses

icons for both

objects (e.g., “ Inbox, ”

AVOID USING TEXT IN ICONS

Avoid using text as part of an icon’s image, since it makes it more diffi cult to

localize it (i.e., translate to other languages; see Chapter 10) Because of the

smaller sizes of icons, text may also be diffi cult to read, and when used with a

label, it may not be clear to users which label or text to consider for

decipher-ing the icon’s meandecipher-ing In addition, for users with vision defi ciencies, the text

may be diffi cult to read when zoomed in (see the ACCESSIBLE IMAGES

pat-tern in Chapter 11)

USE MODIFIERS TO INDICATE OR CHANGE AN OBJECT’S STATUS

The same base icon can be used for multiple object states — for example, new

email, read email, and responded-to email ( Figure 12.24 )

For monitoring applications, similar modifi ers — referred to as “ health

badges ” — are often used to indicate alarms or the status of objects They are

either placed side by side or to the bottom right or bottom left of the main

icon ( Figure 12.25 ) The modifi er icon may be used over the main icon as long

as the main icon is still recognizable and is not masked by the modifi er icon

(e.g., putting a “ X ” over an icon)

USE TOGGLE ICONS TO INDICATE ALTERNATE STATES

Toggle icons are used to indicate either the presence or absence of an attribute

or to assign a state For example, Figure 12.26 shows the star icon used as a

tog-gle by Gmail to indicate the “ starred ” or “ normal ” states of an email This is

very similar to the “ fl agging ” approach offered by desktop-based email systems

FIGURE 12.24 Hotmail uses the same base icon to show emails are new, read, and read and

responded to

FIGURE 12.25 In this example, modifi er icons are placed next to the network icon to indicate

the “ health ” of the network: ( left to right ) critical issues, major issues, minor issues, and normal

status

FIGURE 12.26 Gmail toggles the star icon to indicate a “ starred ” or “ normal ” state for an email

FIGURE 12.27 Both Yahoo! mail (a) and Netvibes (b) use arrow icons to expand or collapse sections

FIGURE 12.28 Icons used by Mint use different shapes to make them clearly distinguishable from one another

such as Outlook Toggle icons are also used to indicate the disabled and enabled

states of objects

Some common uses of toggle icons are to show expanded and collapsed states

in tree structures, for navigation, or for specifi c page elements (as in portlets)

( Figure 12.27 )

MAKE ICONS VISUALLY DISTINCT FROM ONE ANOTHER

It’s important that icons are easily distinguishable from each other to help

users fi nd appropriate icons (thus, actions) quickly and minimize confusion

This is usually accomplished by making their shapes visually distinct from one

another ( Figure 12.28 ) and is particularly important when icons are used to

suggest “ status ” information For example, avoid using the same-shaped icons

with different colors (e.g., red, yellow, and green) to indicate status Instead,

use different shapes in addition to colors such as, red octagon, yellow triangle,

and green circle Using multiple coding methods also helps users with

color-vision defi ciencies, as they can use the icon’s shape to determine status

USE THE SAME VISUAL STYLE FOR ICONS

Make sure that icons appear professionally designed and follow the same set

of stylistic conventions — that is, the same base color set (matched to the site’s

brand) and the same visual styles and effects ( Figure 12.29 )

TIP

To test icons for their visual distinctness, fi ll nontransparent areas of icons with the same color and

put them next to each other The more distinguishable

they are from one another by their shape, the better their discriminability

FIGURE 12.29 The icons used by Hulu (a) and Brightcove (b) use a consistent stylistic

approach

USE ANIMATED ICONS ONLY WHEN ABSOLUTELY NECESSARY

Animation usually grabs users ’ attention and can be distracting Therefore, use mated icons only when it’s necessary to direct users ’ attention — for example, when users need to wait for the web application to fi nish processing ( Figure 12.30 ) Related design patterns

When used with health badges, icons are often used to highlight status change Therefore, consider using other highlighting practices to ensure that users have noticed the change (HIGHLIGHT)

FIGURE 12.30 Animated icons are typically used to inform users that the application is processing information This example shows 11 of the 24 frames used to create animated icon

( Source: www.ajaxload.info )

INTRODUCTION

As indicated in Chapter 1, design patterns have the potential to offer benefi ts

such as proven design solutions and guidance for their use, improved design

process, reusability and consistent interfaces, and so forth To realize these

bene-fi ts, however, it’s important that design patterns be documented and made

available in a format that promotes reuse Several documented collections of

patterns, commonly referred to as pattern libraries , currently exist Some notable

ones include Jenifer Tidwell’s collection of interaction design patterns (Tidwell,

2006), Martijn van Welie’s web site about design patterns ( www.welie.com ), Van

Duyne et al.’s Design of Sites (2006), and Yahoo! Design Pattern Library (

devel-oper.yahoo.com/ypatterns/ )

Despite the popularity of patterns and pattern libraries, currently there is no

consensus on how patterns should be documented, maintained, and shared

with others Nor has there been any empirical research that evaluates the effi

-cacy of existing pattern languages, libraries, and collections designed for user

interfaces Rather than analyze and discuss the pros and cons of different

approaches (Dearden and Finlay, 2006; Dennis and Snow, 2006), this chapter

presents a pattern library as a pattern and identifi es its core elements, as well as

offers best practices for its development

PATTERN LIBRARY

Problem

In the absence of a formal process for reusing successful design solutions, the

design process can be quite ineffi cient, because designers and developers spend

time trying to solve user interface design problems for which successful design

solutions have already been identifi ed and implemented This is often

exacer-bated when the rationale and context for previously used design solutions is

not documented, making it diffi cult to justify their use

Pattern Libraries

Solution Develop a repository of design patterns (i.e., a pattern library), documenting the knowledge of design problems, solutions, rationale, and best practices for implementing the patterns ( Figure 13.1 ) In addition, share the pattern library with other designers and developers, promote use and reuse of patterns by incorporating implementation code snippets (i.e., components), and encour-age designer and developer participation

Why For large and/or distributed design teams within a corporation, it is common

to fi nd differing user interface designs and interaction approaches for the same design problem across different product lines; they often have different visual treatments as well This results in inconsistent interfaces, which can lower usabil-ity of applications and weaken the corporate brand (Malone et al., 2005) By facilitating the reuse of design solutions, pattern libraries offer an effective way

of documenting and sharing solutions for recurring design problems and help achieve desired consistency Pattern libraries can also make the design process more effi cient and increase the productivity of designers by reducing duplicate research and minimizing “ reinventing the wheel ” (Malone et al., 2005)

Although patterns are design solutions independent of specifi c tion issues, design and development teams can further reduce the time spent

implementa-on user interface development by building software compimplementa-onents to support

FIGURE 13.1 Yahoo! Developer Network’s Design Pattern Library is available as an open-source pattern library It offers interaction designers a stencil kit to facilitate development of wireframes and maps many patterns to code snippets in the YUI library to help with its use during development