Tài liệu Web Application Design Patterns- P4 doc

For web applications that allow access without logging in e.g., consumer e-commerce applications, users either remain on the same page or are taken to the next page in the sequence.. Thu

CHAPTER 3 User Authentication

76

instead of emailing the current password, assign users a temporary password that they can change as soon as they log in Alternatively, users may be emailed

a link to reset their password ( Figure 3.36 )

CONFIRM USER IDENTITY WITH SECURITY QUESTIONS

If the web application stores sensitive information, additional layers of security may be necessary to verify the identity of the user claiming to have lost log in information Additional identifi cation questions may include information that only the account owner knows, such as the last four digits of his or her Social Security number, account number, and so forth ( Figure 3.37 ) The identifi cation

FIGURE 3.36 Agile Commons (hosted by HiveLive) emails the link to reset the password after verifying the email address (a) Clicking the link displays the reset password page (b)

(a)

(b)

may also require users to answer one or more security questions set up during

registration

Related design patterns

Users may realize that they have forgotten their username and/or password

when they are prompted to log in Therefore, options to retrieve them should

be presented along with fi elds that are required to log in (LOG IN)

Fogot Username/Password

FIGURE 3.37 Advanta, a credit card company, asks for several identifi cation-related questions

before resetting user ID and password

This page intentionally left blank

INTRODUCTION

An important decision for designers is what users should see or which page

they should be taken to after they log in to the application

For web applications that allow access without logging in (e.g., consumer

e-commerce applications), users either remain on the same page or are taken to

the next page in the sequence For example, if users decide to log in on a

prod-uct details page, they remain on the same page However, if they log in

dur-ing the checkout process, they are taken to the next page in the sequence — the

shipping information page

On the other hand, applications that require users to log in before accessing

their functionality may show one of the following, depending on the nature of

■ A PORTAL, which aggregates information from several sources and serves

as a launching place for information and applications users may access

PORTAL pages often incorporate some aspects of CONTROL PANEL and

DASHBOARD in order to enable users to quickly access functionality and

content supported by one or more applications

Application main pages are typically personalized based on user profi les,

interests, and information needs with the intention of presenting the most

relevant content and fi ltering out the not-so-relevant information However,

PERSONALIZATION driven by business rules or some form of social fi ltering

may not be able to accurately predict the information users may need Thus,

applications often offer users CUSTOMIZATION options to allow them to

Application Main Page

CHAPTER 4 CHAPTER 4

CHAPTER 4 Application Main Page

80

tailor the application to their preferences and compensate for personalization shortcomings Customization is not limited to information and task-related needs; it often extends to a choice of colors, logos, themes, fonts, and page layouts

An often-overlooked design aspect of many web applications is what fi rst-time users will see (BLANK SLATE) This is particularly important for applications that rely on users to fi ll in the application with appropriate data

Why

Applications focused on managing items of one type (e.g., emails, defects,

fi les, accounts, support calls, timesheets, etc.) benefi t from showing users items that they can interact with as soon as they login This does not mean that the application does not allow users to manage other types of items or allow quick

FIGURE 4.1 NetResults tracker shows developers a list of bugs and enhancements assigned

to them when they log in

81Control Panel

access to other functionalities within the application — it’s just that they are

sec-ondary in nature For example, email applications allow users to manage

con-tact lists even though managing concon-tacts is not its primary purpose Therefore,

when users log in, they are fi rst shown a list of emails, both past and new The

term inbox is appropriate, since these are typically items that users need to

attend to when they log in to the application

How

Show users a list of items for which the application was primarily designed —

emails, defects, fi les, accounts, to-dos, and so on — highlighting the items that

users need to immediately attend to or be reminded of, such as new emails,

new fi les, new defects, and so forth ( Figure 4.2 )

ALLOW USERS TO SET UP REMINDERS

If the application is not going to be accessed frequently and if users prefer to be

reminded of changes in the state of one or more items (e.g., payment due or a

new to-do item), allow them to set up reminders ( Figure 4.3 )

Related design patterns

The INBOX pattern typically uses lists, either TABULAR LISTS or IMAGE

GRIDS In addition, like lists, they often need SORTING and FILTERING to

make it easy for users to fi nd relevant information (see Chapter 7 for further

discussion on lists)

CONTROL PANEL

Problem

After users have logged in, they may want to access different application

func-tions to perform a variety of tasks However, which function they may want to

access cannot be reliably predicted

FIGURE 4.2 Users see their email inbox after they have logged in to Gmail New items in the

inbox are in bold

CHAPTER 4 Application Main Page

of each other Although users need access to all functions, they do not need

to navigate from one function to another However, they need a place to return to when they feel lost or disoriented (similar to a “ home page ” on web sites)

How

Provide a “ launch ” page from which users can access all application functions

or mini-applications Control panels are designed using a hub-and-spoke interface approach (Baxley, 2003; Tidwell, 2006), where users can reach the self-contained mini-applications (i.e., “ spokes ” ) from one central “ hub ” page such that users can access a mini-application, accomplish desired tasks, and return to the hub page to perform another task using another mini-application

user-FIGURE 4.3 Remember The Milk offers users the option of setting reminders daily as well

as a preset number of minutes before the task is due It also allows users to be reminded via email, instant messengers, and mobile text messages

Control panels have quite a few similarities with home pages on

oriented web sites:

■ They set an expectation of the application’s scope and provide quick

access to its most important features and functionality

■ They establish an overall information design approach for pages within

the application in terms of its layout, placement of navigation, search

functionality, and so forth

■ They inform users of new features and functions

Control panels are also useful for account overview pages where users can access

all of their account-related functions in one place For example, e-commerce

applications use account overview pages to allow users access to their orders,

shipping addresses, payment information, and so forth ( Figure 4.5 )

HIGHLIGHT ITEMS THAT NEED ATTENTION

Like with the INBOX, a CONTROL PANEL is a place to inform users of, or

direct their attention to, changes in application functionality and content

As soon as users have landed on the control panel page, it is important to

direct them to items that need their attention Because users may not be

expect-ing them, it’s necessary that items servexpect-ing as notifi cations or announcements

Control Panel

FIGURE 4.4 1 & 1, a web site hosting company, gives users the ability to access all functions

related to their account on their control panel page Because there are a number of options, it

groups them into two separate areas, “ Administration ” and “ Account ”

CHAPTER 4 Application Main Page

84

are made salient A good notifi cation example is a message about a planned application outage, although this should also be done on the login page For items that serve only an informational purpose (i.e., announcements) and do not require any user action, offer users an option to dismiss them

Related design patterns

Use the BLANK SLATE design pattern, especially on “ spoke pages, ” to avoid showing users empty pages and to ensure that they are not confused as to what to do after logging in for the fi rst time This also helps them get com-fortable using the application, especially for applications that rely on users to provide data

DASHBOARD

Problem

Information that helps users make decisions and monitor information about the “ state of their world ” is available, but requires users to visit several different application areas In addition, available information is not presented in a for-mat that helps users make decisions and/or determine their next steps

Solution

Offer users a single-page “ dashboard ” view of information and metrics that they need to track In addition, allow users to “ drill ” down to detailed content from the dashboard view ( Figure 4.6 )

FIGURE 4.5 Dell’s “ My Account ” page provides a summary of account information and serves

as a launch page allowing access to user-specifi c information such as saved items, coupons, shopping cart, order status, and so forth

FIGURE 4.6 Yahoo!’s Election 08 Political Dashboard shows at-a-glance information about the

current status of each candidate at the national level (a) Additionally, it allows users to click on

candidates and get detailed information about the candidate including recent poll averages,

money raised, and so forth (b)

(a)

(b)

CHAPTER 4 Application Main Page

86

Why

Requiring users to navigate several application pages or run reports to monitor items ’ status and determine actions to take is not only ineffi cient but also may cause users to overlook important information In addition, integrating infor-mation sources from several places for every visit can become quite cumber-some for users

Dashboards, when properly designed, are “ presented in a way that allows them [users] to monitor what’s going on in an instant ” (Few, 2006) By using appropriate visualizations for important measures (often referred to as key performance indicators or KPIs) along with exception conditions and alerts, dashboards provide at-a-glance information about current status and facilitate identifi cation of necessary corrective and preventive actions

in this format

Bar Charts: Use bar charts for showing the relationship among data elements within a series or multiple series Because data bars share a common measure, they can be easily compared with one another Bar charts may not be appropriate when a data series has few values with a large outlier value, which could compress the scale for the remaining data making discrimination among the bars difficult

Line Charts: Use line charts to see trends in one or more metrics.

Tables and Lists: Use tables or lists for nonnumeric data or when a graphical presentation of numeric data may not be meaningful or easily understood by intended users Tables

or lists may also serve as an alternate view for graphical data (see also Chapter 7).

FIGURE 4.7 Data

display methods

To help users understand data, relationships, trends, and diagnose problems,

report summarized and abstracted data on dashboards using approaches

such as pie charts, bar charts, line charts, tables or lists, and so forth To ensure

that data are understood correctly, employ data visualization or charting

meth-ods that are suitable for the type of data and their intended use ( Figures 4.7

and 4.8 )

MATCH EXCEPTION CONDITIONS TO USERS ’ TASKS

Match dashboard icons and indicators to users ’ monitoring tasks ( Figure 4.9 )

For example, use indicators, such as alert or traffi c light icons, if users need to

know only the current state of a metric However, if users need to also know

trends, use trend icons, such as up and down arrows, with appropriate colors

may be more appropriate; they may be supplemented with spark lines to show

a quick snapshot of the historical trend

Dashboard

FIGURE 4.8 Google Analytics ’ dashboard uses a variety of charting methods to convey web

site performance metrics It uses a trend chart to show “ Visitors Overview, ” numbers and spark

lines to show “ Site Usage, ” and tabular data to show “ Content Overview ”

CHAPTER 4 Application Main Page

88

SHOW INFORMATION IN CONTEXT

Because dashboards show monitored data (i.e., metrics) as abstractions or maries, include their historical context to help users identify whether:

■ The metric has reached the desired benchmark; and so forth

Showing data in context offers users at-a-glance insights that simple measures

by themselves can’t provide Knowing the nature of contextual information that needs to be provided can also help identify appropriate charting methods and exception indicators For example, trend information can be presented using line charts, area charts, or spark lines accompanied by trend icons ( Figure 4.10 )

DISPLAY ALL REQUIRED INFORMATION ON ONE SCREEN

Whenever possible, avoid scrolling on dashboards (Few, 2006) This is cially true for dashboards that present real-time data and are used primarily for monitoring The main purpose of dashboards is to provide an overview of the current state for selected metrics and emphasize metrics that need users ’ atten-tion In addition, ensure that every dashboard widget is allocated space and positioned relative to its importance to users

espe-FIGURE 4.9 Dashboard visualizations

Alert icons convey state information by using both color and shape They indicate binary information such as online/offline, safe, warning, and critical states.

Traffic light indicators, like alert icons, convey state information.

Although they are widely recognized, they take up considerable space and are not desirable when screen “real estate” is limited.

Trend icons represent whether a metric is up or down and, with the accompanying color, whether the trend is favorable.

Spark lines provide a quick overview of trends and provide a historical context for the current value of the metric.

Progress bars provide a visual indication of progression along one dimension and, with appropriate threshold markers, can indicate whether specific limits are reached.

Gauges allow a quick assessment of desirable and undesirable values along a scale Like traffic light indicators, however, they require additional space and are usually higher in the page’s visual hierarchy Therefore, their use should be limited to the most important metrics.

ALLOW USERS TO CUSTOMIZE DASHBOARDS

Although dashboards are often personalized to meet the needs of specifi c user

roles, it’s possible that the same layout and design may not satisfy all users in

a given role For example, while some users may like the default chart format,

others may prefer a tabular view In addition, some users may want to reorganize

the information presented to better match their needs Accommodate such

individual differences by allowing users to customize their dashboard layouts

(see the CUSTOMIZATION pattern later in this chapter)

ALLOW USERS TO “ DRILL ” DOWN TO VIEW DETAILED

INFORMATION

When viewing dashboards, users may need additional information either to

better understand the summary views or before making decisions on

correc-tive actions Therefore, from the dashboard, allow users to “drill” down to the

detailed information that formed the basis of the summary view ( Figure 4.11 )

ALLOW USERS TO TRANSFER OR SHARE DATA

Users may want to download dashboard data locally to do further analysis

and/or share them with others This can be accomplished by enabling actions

such as downloading a detailed report in formats such as PDF, Excel, or XML,

or sending emails to other users from the dashboard ( Figure 4.12; see also the

LIST UTILITY FUNCTIONS pattern in Chapter 7 )

Dashboard

FIGURE 4.10 Chart Chooser from Juice Analytics helps determine appropriate chart type(s)

based on what users want to convey using the chart, such as a comparison, distribution,

composition, trend, relationship, or table In addition, it allows users to download corresponding

Excel and PowerPoint templates (Source: www.juiceanalytics.com/chartchooser/ )

CHAPTER 4 Application Main Page

90

Related design patterns

The goal in laying out an effective dashboard is to have the most important business information as the fi rst thing to grab users ’ attention (see the VISUAL HIERARCHY pattern in Chapter 12)

FIGURE 4.12 Google Analytics ’ dashboard allows users to export data in PDF or XML formats and allows users to email the dashboard to other users