CHAPTER 12 Visual Design 376 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. CHAPTER 12 Visual Design 378 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. 379 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 Visual Hierarchy 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. 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. [...]... Fluid Open Source Design Pattern Library: www.uidesignpatterns.org Jenifer Tidwell’s collection of interaction design patterns: www designinginterfaces.com Martijn van Welie’s web site about design patterns: www.welie.com Sakai UI Design Patterns: bugs.sakaiproject.org/confluence/display/DESPAT/ Home UC Berkeley Pattern Library: groups.ischool.berkeley.edu/ui_designpatterns/ webpatterns2/webpatterns/home.php... because designers and developers spend time trying to solve user interface design problems for which successful design solutions have already been identified and implemented This is often exacerbated when the rationale and context for previously used design solutions is not documented, making it difficult to justify their use 390 CHAPTER 13 Pattern Libraries FIGURE 13.1 Yahoo! Developer Network’s Design. .. the pattern library with other designers and developers, promote use and reuse of patterns by incorporating implementation code snippets (i.e., components), and encourage designer and developer participation Why For large and/or distributed design teams within a corporation, it is common to find differing user interface designs and interaction approaches for the same design problem across different... can lower usability 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 efficient and increase the productivity of designers by reducing duplicate... related design patterns For example, a software component for the TABULAR LIST pattern can incorporate the SORTING and PAGINATION patterns and make it easy for developers to implement all three patterns in their designs Even when design teams are smaller and colocated, pattern libraries are beneficial because they provide a way to capture design best practices and promote reuse Because of the limited design. .. The name of the design solution to clearly communicate what the pattern stands for An unambiguous (and preferably familiar) name is important to make it easy for designers to recognize, select, and remember patterns Problem A brief description of the design problem and the trade-offs faced by the designers, if any Solution A brief summary and an exemplar image that shows the successful design solution... the library, the designs are available for reuse INCLUDE IMMEDIATELY (RE)USABLE DESIGN COMPONENTS An important goal of a pattern library is to promote the reuse of design solutions Pattern libraries should therefore consider offering artifacts that would make use of proposed solutions easier for both interaction designers and developers For example, to facilitate reuse by interaction designers, pattern... 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 (developer.yahoo.com/ypatterns/ ) Despite the popularity of patterns and pattern libraries, currently... Interface Design Pattern Library: www.ui-patterns.com Yahoo! Design Pattern Library: developer.yahoo.com/ypatterns/ 403 This page intentionally left blank References 37signals Getting Real: The Smarter, Faster, Easier Way to Build a Successful Web Application Available from gettingreal.37signals.com, 2006 Accessites.org The Art of Accessibility Available from www.accessites.org, 2008 Adams, C Fancy Form Design. .. applying the design solution (how) In most instances, applying a design solution requires attending to additional considerations For example, when using the DELAY/PROGRESS INDICATOR pattern (see Chapter 8), designers may need to know whether to show time elapsed or time remaining and in what contexts Identifying best practices is essential to ensure the correct use of the selected pattern Related design . 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. successful design solutions, the design process can be quite ineffi cient, because designers and developers spend time trying to solve user interface design