Executive Summary Usability Report

Transcription

Executive Summary Usability Report
Avram Baskin
Usability Review for Senior Citizens: Evaluation of AOLTravel
http://www.aol.com
Page 1
Executive Summary Following is a list of the top usability issues I believe have to be addressed on the AOL Travel web site:
!
!
!
!
!
Make more judicious use of color. Use high brightness and saturation values for high value objects, and
lower saturation and brightness values for low value objects.
Avoid long downloads – seniors may not have high speed internet access, and they will likely be using
older, hand-me-down computers.
The search engine is not smart enough to recognize typos. Switch to a smarter search engine, such as
Google.
Some pages are too long – too much scrolling is required. Break down the content on these pages into
logical groups and put the content on two or more pages.
Not all buttons are clickable. In some cases, only the label is “hot”. Use image maps to make the entire
button clickable.
Usability Report “They say you can't teach an old dog new tricks - and maybe they're right. It
seems to me our mission to escort the Chancellor of the Klingon High Council to
a peace summit is problematic at best.”
Captain’s log, Captain James T. Kirk
Stardate 8679.225.
While the stakes of Captain Kirk’s final mission in command of the Starship Enterprise (NCC-1701-A) were
a bit more weighty than the stakes for creating usable web sites for seniors, his sentiment about not being
able to teach an old dog new tricks is no less problematic for the design of usable web sites than it was for
his mission. In the case of web sites the “old dog” is not the senior citizens using the web, but rather the
people designing the sites senior citizens want to use.
Morrell, Mayhorn, and Bennet’s survey of world wide web usage by middle-aged and older adults showed
that the top three interests of both groups was (1) e-mail, (2) accessing information about traveling for
pleasure, and (3) accessing health related information. While access to communication and health care
information are both important goals, I suspect that that “traveling for pleasure” points to the most likely
reason for designing more senior friendly web sites – because there’s a buck to be made.
The 2000 census of the United States showed that there were more than 35 million people aged 65 or older
(U.S. Bureau of the Census, 2001). This demographic controls more than 900 million dollars in disposable
income (Spry Foundation, 1999). So, there is an economic incentive to create web sites that accommodate
the needs of this age group. And this incentive will increase in the future. 2000 was the first census in
which this age group did not grow faster than the total population (U.S. Bureau of the Census, 2001). There
is now a population bubble behind this group – the baby boomers -- that will be retiring over the next 20
years.
Avram Baskin
Usability Review for Senior Citizens: Evaluation of AOLTravel
http://www.aol.com
Page 2
As with any computer interface, designers have to consider the particular needs of the target audience. In
the case of seniors, there are three areas that require special attention over younger users. As we age, our
cognitive processes become less efficient. One consequence of this is that, in general, the capacity of working
memory decreases. Also, efficiency in performing motor tasks (i.e. pointing and clicking with the mouse)
decreases. The third area is vision – for most adults, vision declines over time, and this may have
implications for the color palette and fonts selected for the interface.
One area of conflict that comes up in the research on usability for seniors is the age range that constitutes the
demographic “senior citizens”. Because different age ranges are used by different researchers, it is difficult
to draw global conclusions and create design guidelines based on a literature survey. The following table
lists the age ranges included in studies reviewed for this report:
Title Making Computers Easier for
Older Adults to Use
Web Usability and Age: How
Design Changes Can Improve
Performance
A Further Examination of the
Influence of Spatial Abilities
on Computer Task
Performance in Younger and
Older Adults
A Comparison of Website
Usage Between Young Adults
and the Elderly
Aging, Motor Control, and the
Performance of Computer
Mouse Tasks
The Locus of Age-Releated
Movement Slowing: Sensory
Processing in Continuous
Goal-Directed Aiming
Age-Releated Kinematic
Differences as Influenced by
Task Difficulty, Target Size,
and Movement Amplitude
Effects of Age and Training on
World Wide Web Navigation
Strategies
A Survey of World Wide Web
Use in Middle Aged and Older
Adults
Nielsen and Coyne
Exploring How the Elderly
Use the Web
Authors Worden, Walker, Bharat, and
Hudson
Chadwick-Dias, McNulty, and
Tullis
Age Range Mean age 70.1 years
Pak
65-75
Liao, Groff, Chaparro, and
Stumpfhauser
64-87
Smith, Sharit, and Czaja
60-75
Pohl, Winstein, and Fisher
64-78
Ketcham, Seidler, Van
Gemmert, and Stelmach
Mean age 68
Mead, Spaulding, Sit, Meyer,
and Walker
64-81
Morrel, Mayhorn, and Bennet
60-92
Usability for Senior Citizens
Groff, Liao, Chaparro, and
Chaparro
65+
64-87
Comments Age range not provided
55+
Age range not provided.
Avram Baskin
Usability Review for Senior Citizens: Evaluation of AOLTravel
http://www.aol.com
Page 3
Context I evaluated the usability of AOLTravel from the perspective of Arlene, a 72 year old woman. Arlene has
been using a computer for a little over seven months. Her first computer was a hand-me-down from her
daughter, but she felt the performance was too slow when she tried to access the Internet, so in August she
purchased a new Dell computer.
Arlene wanted a computer because she thought it would be “interesting and a good way to get
information”. When she received the computer from her daughter she took a training class geared toward
senior citizens through a local adult-education program. She finds that using the computer is fun, “it’s like
a hobby”. Never-the less, her computer time is limited. She has a very active – she participates in several
discussion groups, and volunteers her time with two charitable organizations. She does not depend on the
computer for her social life.
Arlene uses a dial-up connection to access the web. She does not mind waiting a bit for pages to load. She
reported that she does sometimes get frustrated with long waits for search results, but she attributes this to
her entering incorrect information for the search – “it’s because I’m not specific enough”.
When queried about whether she’d be interested in a faster connection, such as cable modem if it cost $50
per month, she responded that it would not be worth it. Her main concern is that when she is online she
and her husband cannot respond to phone calls. As a result, she limits her sessions to 30 minutes. She
would be interested in a device that would allow her to respond to phone calls while she’s online.
E-mail was not one of her goals for getting a computer, but she reports that she now spends approximately
60% of her time online reading and sending e-mail. She finds it’s an economical way to stay in touch with
far flung friends and relatives.
Arlene does not have any favorite web sites, but she reported that she uses the web to check movie reviews
on http://tvplex.go.com/buenavista/ebertandroeper/today.html, weather reports, and prices for hotels,
car rentals, and airfares (although she has never made purchases or reservations online). Her experience
has been that it’s easier to call, and that calling gets her better prices when she and her husband travel. She
reported that if she saw a good price she would purchase online, and would not have a problem providing
her credit card number to a “reputable company”.
I observed Arlene performing a search
task (checking for hotel prices) as she
would for a trip to Florida. She said she
used www.travelocity.com,; she did not
realize that she was using the Travelocity
search engine on AOL – she thought she
was using the actual Travelocity web site.
Avram Baskin
Usability Review for Senior Citizens: Evaluation of AOLTravel
http://www.aol.com
Page 4
The task was to find the price for her
favorite hotel in Boca Raton. Starting on
the AOL Travel: Travel Main page, she
entered BocaRaton, FL (sic) in the search
field (there is a Hotels and Lodging link
on the page).
The response was an error message that informed
her the system could not find a match for bocaraton,
fl.
When Arlene realized there was a typo in the search
entry she corrected it. She received a links to get
information about Palm Beach and Boca Raton. She
was expecting to get a list of hotels. Her comment
was “the biggest problem is knowing what to ask for.”
Her next search was for the name of the hotel she wanted to stay at – Residence Inn Marriot Boca Radon
(sic). The system again displayed an error message informing her that a match could not be found for Boca
Radon.
Arlene corrected the typo, and this time received a page displaying information about the hotel.
Avram Baskin
Usability Review for Senior Citizens: Evaluation of AOLTravel
http://www.aol.com
Page 5
She carefully reviewed the page and confirmed the
correct address for the hotel.
She used the scroll bar to display rates that were
“below the fold”; she apparently did not have a
problem finding or using the scroll bar, although she
used the down arrow, not the elevator box
There were blocks of text about the hotel and with
the pricing information. Arlene reported that she
typically reads all of the text, unless she realizes it’s
not pertinent to what she’s trying to accomplish.
Analysis My analysis of AOLTravel was performed at a resolution of 800 x 600. I used two sets of guidelines:
!
!
General human factors guidelines, including use of color, grouping, and optimization for cognitive
processing.
A list of heuristics (Appendix I) I created for designing for senior citizens in the target audience based
on articles by Nielsen (2002), Bernard (2003), Chadwick-Dias, McNulty, and Tullis (2003), the SPRY
Foundation(1999), Fitts (1954), Smith, Sharit, and Czaja (1999), Pak (2001), Mead, Spaulding, Sit, Meyer,
and Walker (1997), Liao, Groff, Chaparro, Chaparro, and Stumpfhauser (2000).
Avram Baskin
Usability Review for Senior Citizens: Evaluation of AOLTravel
http://www.aol.com
Page 6
The analysis includes the following pages:
!
!
!
!
Welcome screen – this is not included in the detailed analysis. I look at this screen only from the
perspective of navigation, because this is the screen that initially displays when the user logs into AOL.
AOLTravel home page
The page that displays after an incorrect search term is entered
The page that displays when a successful hotel search is completed.
Welcome Screen After logging into AOL the user sees the following screen:
!
!
!
AOL Tool Bar – 1 – available on all screens. Icons change on mouse over.
Navigation Bar – 2 – provides access to functions available in AOL; available on all screens. Icons and
menu items change on mouse over.
Welcome Screen – 3 – the vertical black line on the right indicates the edge of the initial displayable area
at a resolution of 800 x 600 pixels after login.
1 3 2 The default setting is for the Navigation bar and Welcome screen to float – they can be repositioned by the
user. Both windows can be minimized, but they cannot be maximized. This may be confusing for users,
especially older users, because it does not follow typical window behavior for Microsoft Windows
applications.
The user must scroll to display the right edge of the Welcome screen – this may also be an unexpected
behavior. If the user repositions the screen, part of the menu bar will be covered. If the horizontal scroll bar
is used to display the rest of the screen there may be targeting issues (Fitts, 1954; Smith, Sharit, Czaja, 1999).
Avram Baskin
Usability Review for Senior Citizens: Evaluation of AOLTravel
http://www.aol.com
Page 7
When the user mouses over Travel Deals, the hot link is confirmed by a background color change (white to
light blue). The SPRY Foundation (1999) reported that older users may have trouble picking up colors in the
green/blue/violet range. Although blue is typically a good background color to use, it appears that this has
a low saturation and brightness level. The change may be hard to detect. My recommendation is that
whatever hue is selected, saturation and brightness should be increased and the button should bevel, so it
appears to “pop up” at the user.
AOL Travel Home Page The user’s interaction with AOLTravel begins on the Travel Main screen.
The Travel Main screen floats and it displays over
the Welcome Screen. The user has to reposition the
screen to display the menu bar. If the user
inadvertently clicks a secondary window -- in this
case the Welcome screen -- the travel screen may
disappear from view, resulting in user frustration. I
recommend having the Welcome screen
automatically minimize, and having the Travel Main
screen display the vacated space.
The Travel Main screen includes the following components:
!
!
!
Guides and Advice - 1
Travel Options – 2
Deals and Specials – 3
3 1 2 Avram Baskin
Usability Review for Senior Citizens: Evaluation of AOLTravel
http://www.aol.com
Guides and Advice The grouping is tenuous at best. Search, Browse by
Destination, Browse by Interest, Maps, Trips, &
Resources may group as “ways to get information
about trips”; it would seem that Travel Spotlight
would be better located under Featured Trips.
I recommend assigning each member of this
“group” a separate space on the screen, separated by
background color. Use the same hue, but vary the
saturation and brightness; use high values for
saturation and brightness to draw the user’s eye to
this area -- assuming this is intended to be a high
value area.
Search Arlene went directly to search, missing some
(perhaps) better ways to accomplish her task. The
search function is overly sensitive to typos. Both
times Arlene entered a search term with a typo, she
received an error message. I recommend making the
search engine a bit more forgiving – perhaps use
Google instead of the current engine. When I
entered the same typos as Arlene (Boca Radon,
Fl/BocaRaton, Fl) on Google, the system asked if I
meant Boca Raton, Fl. It would also help to make
the search engine smart, so it remembers the user’s
prior searches and bookings and makes suggestions
about deals the user may be interested in.
In addition to these changes, I recommend changing
the background color from green to a low saturation,
low brightness color --but not blue -- and changing
the color for the search button to a hue with a high
saturation and high brightness value.
Page 8
Avram Baskin
Usability Review for Senior Citizens: Evaluation of AOLTravel
http://www.aol.com
Resource Buttons These buttons do not appear to naturally go
together. Generally, only related objects are
grouped by color and shape. Browse by
Destination and Browse by Interest provide
different options for getting trip information. Maps,
Tips, & Resources is a link to Map Quest. Boards &
Chats provides access to online discussion boards. I
recommend grouping the first two buttons and the
third and fourth buttons separately. Also, change
the hue to a fovial color with a high saturation and
brightness value.
These display as buttons, but only the text is hot.
The black rectangle on the Browse by Destination
button indicates the area on each button that is hot.
The user may get frustrated by clicking on a button
and not receiving a response. I recommend making
the entire button hot, and separating the buttons
with white space. Also, provide feedback to the user
on mouse over by changing the color of the button,
and bevel the button to make it pop out at the user.
Featured Trips This would be better placed under Deals and
Specials. I recommend changing the color for the
Featured Trips header to a fovial color with high
saturation and brightness values.
Travel Options This section provides links to almost all of the user’s
possible travel needs – air travel, vacation packages,
hotels and lodging, cruises, and car rentals. This
would appear to be in the perfect place – the center
of the screen because this section is the most obvious
affordance on the screen for accessing vacation
information. There is high contrast between the
background and foreground; the links are obvious.
The one recommendation I have for this section is to
increase the leading (white space between the text
links, and to make more of the area to the right of
each link hot
Page 9
Avram Baskin
Usability Review for Senior Citizens: Evaluation of AOLTravel
http://www.aol.com
Page 10
One note has to be made here – despite the fact that this section should have drawn the user’s attention,
Arlene went directly to Search. This could be because of her past experience with the site, but it could also
be because her eye was naturally drawn to the upper left area of the screen. It might be worth a usability
test to reposition this section to upper left, and moving the search box to another section of the screen.
Deals and Specials The background color sets this section off from the
center section, and clearly groups together all of the
deals and specials. The red text used for hotels.com
may send a subliminal warning message – red is
associated with danger. I recommend changing to a
more culturally benign color – perhaps green or
orange.
It appears that the colors used for the headers Deals
and Specials, Last Minute Weekends, and Deal
Alerts are the same hue as the background (or close
to it), with saturation and brightness varied. Since
this information is of interest to the users, I
recommend changing the hue for these headers to
one that will provide high contrast with the
background.
The message in the lower half of the ad for
hotels.com changes approximately every 2.5
seconds. This may be too fast for an elderly user to
react to. I recommend increasing the time between
changes or making this a static display that includes
the message and the link.
Error Message As error messages go, this one is very clear and it is
easy to take corrective action.
! The use of red for the message itself is
appropriate. - 1
! There are clear instructions for what to do
next. - 2
! There are two places to enter a new or updated
search term. – 3
The problem on this screen is the animated,
saturated red ad for the Sopranos. This may
generate revenue for AOL or Travelocity (not a
trivial consideration) but it has nothing to do with
the purpose of this screen, which is to explain the
problem with the search and how to remedy it.
My recommendation is that this distracting ad be
removed so the user can focus on the business at
hand -- not to mention that it may not run on older
computers.
Hotel Page 3 1 2 3 Avram Baskin
Usability Review for Senior Citizens: Evaluation of AOLTravel
http://www.aol.com
This screen is to long; it requires too much scrolling.
The horizontal black line indicates the location of the
viewable area before scrolling.
I recommend splitting this screen into several
screens, with links on the above the fold part of the
screen.
The dealsonhotels.com section at the top of the
screen is a distracting banner ad. I recommend
making this area smaller, or removing it all together,
and using this area to include more content for the
above the fold part of the screen.
Use fovial colors, not blue, for areas of the screen
you want to draw the reader’s eye to, and for these
colors assign high values for saturation and
brightness.
Page 11
Avram Baskin
Usability Review for Senior Citizens: Evaluation of AOLTravel
http://www.aol.com
Page 12
Hardware Issues As might be expected, there are some significant differences in performance when AOL is accessed from a
dial-up model and a cable modem. On an older model computer with a dial-up modem like the one Arlene
originally used, it takes almost two minutes to access AOL. On her new computer dialup access is
somewhat faster, but no where near as fast a cable modem on a newer computer. With a cable modem
access time is under five seconds.
Summary There are a number of usability issues that will make AOLTravel difficult for senior citizens to use. Relative
to younger users, computer interface designers must accommodate seniors’ limited working memory,
reduced psychomotor ability, as well as problems resulting vision degradation. Solutions suggested for
AOLTravel included careful selection of colors, making it easier to target hot links with the mouse, and
reducing extraneous graphical noise on the screen. These changes will improve the user experience for
seniors, and, in the case of AOLTravel, make it more likely that visitors will make a purchase.
Avram Baskin
Usability Review for Senior Citizens: Evaluation of AOLTravel
http://www.aol.com
Page 13
Appendix: Heuristics for Evaluating Web Sites for Senior Citizens 1.
Clearly identify all links as links (Chadwick-Dias, McNulty, and Tullis, 2003; SPRY Foundation, 1999;
Bernard, 2003).
2.
Make all parts (bullets, etc.) clickable (Chadwick-Dias, McNulty, and Tullis, 2003; SPRY Foundation,
1999; Fitts, 1954; Smith, Sharit, and Czaja, 1999).
3.
When designing the site, consider that different users may wish to change the size of the text (Bernard,
2003; Chadwick-Dias, McNulty, and Tullis, 2003; Nielsen, 2002; SPRY Foundation, 1999).
4.
Make button labels clearly representative of the button’s purpose, or provide a tool tip that provides
additional information (Bernard, 2003; Chadwick-Dias, McNulty, and Tullis, 2003).
5.
Provide text summaries for complex information presented in tables (Chadwick-Dias, McNulty, and
Tullis, 2003).
6.
Avoid using web and technical jargon (Chadwick-Dias, McNulty, and Tullis, 2003; SPRY Foundation,
1999).
7.
Use domain jargon, but make the terms hot so users who do not understand the term can get an
explanation (Chadwick-Dias, McNulty, and Tullis, 2003).
8.
Provide obvious confirmation of the user’s current location (Chadwick-Dias, McNulty, and Tullis, 2003;
SPRY Foundation, 1999; Pak, 2001; Mead, Spaulding, Sit, Meyer, and Walker, 1997).
9.
Avoid pop-ups and multiple windows displaying at one time (Bernard, 2003; Chadwick-Dias, McNulty,
and Tullis, 2003; SPRY Foundation, 1999).
10. Avoid banner ads, wallpaper, and other extraneous, distracting graphical elements (Bernard, 2003;
Chadwick-Dias, McNulty, and Tullis, 2003; SPRY Foundation, 1999).
11. Keep content above the fold (i.e. avoid scrolling) (Bernard, 2003; Chadwick-Dias, McNulty, and Tullis,
2003; SPRY Foundation, 1999; Mead, Spaulding, Sit, Meyer, and Walker, 1997).
12. Use simple and clear affordances for navigation (Bernard, 2003; SPRY Foundation, 1999).
13. Use active voice (go to…, move…) for link. labels (Chadwick-Dias, McNulty, and Tullis, 2003).
14. Separate links with white space – make sure each link can be identified as a separate link (Bernard, 2003;
Nielsen, 2002; Smith, Sharit, and Czaja, 1999; Fitts, 1954; SPRY Foundation, 1999).
15. Avoid pull downs, contextual menus, and other targets that require cursor movement to small targets
(Nielsen, 2002; Smith, Sharit, and Czaja, 1999; Fitts, 1954; SPRY Foundation, 1999).
16. Indicate links are active by changing color and beveling (pop-up) when links are “moused-over”
(Bernard, 2003).
17. Provide obvious identification of links that have already been clicked (Nielsen, 2002; Mead, Spaulding,
Sit, Meyer, and Walker, 1997; Pak, 2001; SPRY Foundation, 1999).
18. Provide search engines that work with possible “typos” such as missing spaces and unexpected
hyphens and parentheses (Nielsen, 2002; SPRY Foundation, 1999).
19. Make error messages easy to see (Nielsen, 2002; SPRY Foundation, 1999).
20. Make error messages easy to understand (Nielsen, 2002; SPRY Foundation, 1999).
Avram Baskin
Usability Review for Senior Citizens: Evaluation of AOLTravel
http://www.aol.com
Page 14
21. When possible, limit the number of clicks to desired information to three or less (Bernard, 2003; SPRY
Foundation, 1999; Pak, 2001).
22. Include an explicit table of contents on the left side of all pages (Bernard, 2003; Mead, Spaulding, Sit,
Meyer, and Walker, 1997; Pak, 2001; SPRY Foundation, 1999).
23. Provide high contrast between text and background (Bernard, 2003).
24. Concentrate more important information in the center of the screen, especially if the screen is crowded
(Bernard, 2003; SPRY Foundation, 1999).
25. Avoid colored text on colored a background (Bernard, 2003; SPRY FOUNDATION, 1999).
26. Use serif fonts for text (Bernard, 2003; SPRY Foundation, 1999).
27. Use links to additional pages instead of scrolling (Bernard, 2003; Mead, Spaulding, Sit, Meyer, and
Walker, 1997, SPRY Foundation, 1999).
28. When possible, use graphical buttons instead of text links (Bernard, 2003; Fitts, 1954; Smith, Sharit, and
Czaja, 1999; SPRY Foundation, 1999).
29. Limit the number of graphics on the site to accommodate users with old, hand-me-down computers and
dial-up access to the Internet (SPRY Foundation, 1999).
30. Constantly update important content, such as pricing and medical information (SPRY Foundation,
1999).
31. Avoid colors in the green/blue/violet range (SPRY Foundation, 1999).
32. Provide a page of instructions for adjusting browser settings (SPRY Foundation, 1999).
33. Use left justified text (SPRY Foundation, 1999).
34. Avoid text that scrolls automatically (SPRY Foundation, 1999).
35. Keep design layout clear, logical, and simple (SPRY Foundation, 1999).
36. Provide a tool bar with a consistent design at the top of each page to aid navigation (Mead, Spaulding,
Sit, Meyer, and Walker, 1997; Pak, 2001; SPRY Foundation, 1999).
37. Avoid frames, or provide frame alternative sites (SPRY Foundation, 1999).
38. Provide context sensitive help (SPRY Foundation, 1999).
39. Provide easily located phone numbers in case additional assistance is required (SPRY Foundation, 1999).
40. Include context sensitive FAQs (SPRY Foundation, 1999).
41. Avoid animations – these may not run on older computers (Liao, Groff, Chaparro, Chaparro, and
Stumpfhauser, 2000; SPRY Foundation, 1999).
42. Use large buttons and icons (Fitts, 1954; SPRY Foundation, 1999; Smith, Sharit, and Czaja, 1999).
43. Make selective use of sound to provide important information, but provide text alternatives for users
who don’t have sound cards (SPRY Foundation, 1999).
44. When using sound, avoid background noise – for example, do not use background music (SPRY
Foundation, 1999).