CHAPTER 12 Visual Design
380
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.
381
■
Showing which elements are selected.
■
Indicating if an element is particularly important.
■
Indicating an element is undergoing change.
■
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).
Highlight
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.
CHAPTER 12 Visual Design
382
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.
383
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.
Icons
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.
CHAPTER 12 Visual Design
384
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:
■
For many common objects and tasks, icons are more readily recognized
and remembered.
■
They take less space than corresponding textual links.
■
Icons typically have more universal recognition than text; thus, when
localizing a web application, icons, when appropriately used, have min-
imal layout impact. However, if icons are used with labels, label trans-
lation should account for text expansion when translating to other
languages (see the EXTENSIBLE DESIGN pattern in Chapter 10).
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, ”
“ Drafts, ” “ Spam, ”
etc.) and actions
(e.g., “ Delete, ”
“ Reply, ” “ Forward, ”
etc.).
385
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 meaning. 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
Icons
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.
CHAPTER 12 Visual Design
386
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.
(a)
(b)
FIGURE 12.28
Icons used by Mint use different shapes to make them clearly distinguishable
from one another.
387
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 ).
Icons
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.
(a)
(b)
CHAPTER 12 Visual Design
388
USE ANIMATED ICONS ONLY WHEN ABSOLUTELY
NECESSARY
Animation usually grabs users ’ attention and can be distracting. Therefore, use ani-
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 . )
389
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
CHAPTER
CHAPTER
13
13
Không có nhận xét nào:
Đăng nhận xét