Assignment 3: Usability Testing Spring 2015 Angela West

advertisement
Assignment 3: Usability Testing
Spring 2015
Angela West
University of Tennessee – School of Information Sciences
Executive Summary
This assignment will analyze the website for the weather website “The Weather Channel” and
explore various problems and design elements that can be made more efficient to users. The visual
aesthetics and overall usefulness of the site will be examined in order to suggest improvements in
overall functionality.
Section 1. Scenario
The website chosen for this survey was the official site of The Weather Channel
(www.weather.com). This website is one of the top 1,000 most visited websites in the world (Alexa,
2015) and is widely considered to be the primary resource on weather-related news and events.
The website’s primary goal is to provide users with weather forecasts, but in recent years has
expanded to include various other services (namely entertainment-oriented services such as video
links). The scenarios demonstrated in the tasks chosen for this assignment were designed to mimic a
typical user’s experiences with the website. These tasks involve searching for specific weather
information and contact information.
Section 2. Methodology
For this usability test, the author of this paper recruited two participants: The first participant
was a man (aged somewhere between 26-35 years) with a Master’s degree. The second participant was
a 60+ year old woman with no post-high school education. Both users were unfamiliar with the website
being tested. Anonymity was assured and the participants were informed that they were not being
tested personally – only the website’s effectiveness was being measured. The test was performed in a
college library setting (the John Cooke Wyllie library at the University of Virginia’s College at Wise).
The tasks and script were prepared beforehand, which each participant being given three tasks
to complete within one hour. As the participants performed the tasks, the author made notes on their
actions, comments, and behavior regarding the website. Users were encouraged to work through the
tasks on their own, with no help from the survey-taker. Tasks were timed, although no time limit was
imposed. The participants were allowed to perform the tasks at whatever speed they were comfortable
with and were encouraged not to rush.
Afterwards, an optional questionnaire was distributed to the participants. Again, anonymity
was assured and both participants filled it out. This questionnaire, along with the tester’s notes, were
compiled and analyzed for this paper.
Section 3: Summary of Findings
Task 1: Look up a detailed, daily forecast for three different towns/cities in the United States.
This task was fairly straightforward, as the main focus of the website involves this particular
action. However, both subjects had a minor amount of difficulty finding the search bar due to the
immense amount of graphics and information on the main page. The older participant was slower to
find the search bar, and was unsure of what to click in order to perform the search. Below is a
screenshot of the main page of the website:
(image: The Weather Channel, 2015. It should be noted that the empty space to the lower right featured
an advertisement that did not show on the screenshot)
Both participants were able to perform this task within five minutes. Once the search bar was
located, it was then easy to type in the address and find the forecast. The search bar was located in the
same spot on every page, which made it easy for the users to search multiple locations. This task was
the quickest and easiest to complete.
Task 2: Access the weather radar and perform a “past” animation.
This is another common task on The Weather Channel’s website. Many users will view the
weather radar maps to see where storms are forming in the area, and the “past” animation is useful in
determining the current path of a storm. As this is a common and useful task, the participants were
asked to both find and access their area’s weather radar and turn on the animation.
Both users were slow to scroll down on the detailed weather page. As the screenshot below
demonstrates, users are forced to scroll through at least one and a half screens before seeing the
weather radar. Above the radar are several unrelated articles, which one participant referred to as
“Clickbait” (a type of headline/link that includes vague, sensationalized wording designed to entice
viewers to click on the article). For example, this page included articles such as “This Photo is Deeply
Troublesome,” “You’ll Feel Bad for Laughing, but it’s OK, His Dad Laughed Too!,” and “Ghost Ship
Carries Unexpected Hitchhikers.” None of these are related to weather and both participants found
them annoying and distracting.
(image: The Weather Channel, 2015)
Once the radar is found, the user must then click either it or “Weather in Motion” to bring them
to an interactive radar map. At this point, the user is presented with even more new options, such as
displaying the satellite imagery, weather stations, cloud cover, and so forth. The participants were
asked to perform a “past” animation on the radar, which is executed by clicking the “play” arrow at the
bottom of the radar screen. It took the participants one to two minutes to realize that the arrow
activates the past animation.
Overall, this task took one user around 1 minute to complete, and the other user around 3
minutes.
Task 3: Find a way to contact customer service, preferably by phone.
This task proved to be the most difficult by far. One participant searched fruitlessly for over ten
minutes before giving up and resorting to a Google search (where they found the phone number within
seconds). The other participant was less successful and did not find the information at all. One user
spent just over 11 minutes searching for this information, and the other user spent a full 20 minutes.
Participant 1, who is younger and more tech savvy, knew to go to the bottom of the main page
and look for contact information. However, the only relevant link was one labeled “Support.” This link
takes a user to a text-heavy site filled with feedback forum links and FAQs (see image below). The
“Contact support” link on the upper right leads to a pop-up window where a user can type in
feedback/questions and submit. However, no contact information is listed there.
(image: The Weather Channel, 2015)
Section 4: Problems & Recommendations
One of the most common problems encountered by the participants was the overwhelming
amount of information and graphics presented on each page of the site. Graphics, text, and animations
are frequently placed together in close proximity, which is good for casual browsing but not for precise
searches (such as the tasks that were presented to the participants). More visual blank space would
help focus the viewer’s attention to certain sections, rather than encourage their gaze to travel around
the entire screen. In an article by Gisele Muller on Treehouse.com, it states:
“We need to remember that going for a simple layout instead of a complex one is the key to
keeping readers interested. A lot of elements, images, colors and different shapes in a page can
make your site look more like an infomercial and cause your readers leave because they’re
uncomfortable.” (Muller, 2012)
As the following screenshot shows, the front page could almost be considered “cluttered” since there is
no blank space for a viewer to rest the eyes.
(image: The Weather Channel, 2015)
The participants also expressed frustration in finding specific links. As mentioned previously,
one user was even forced to resort to Google when searching for contact information. Both participants
had difficulty sorting through the “help” and “FAQ” pages, as they found the poor subject headings and
“wall of text” design to be too visually exhausting. Changing the help section, perhaps to something
similar to Amazon.com (with clearly defined sections and color-coded headings, as well as collapsible
menus) would benefit The Weather Channel’s website as well. Additionally, The Weather Channel’s
help screen is several screens long, whereas the Amazon help page is on one screen. A comparison of
The Weather Channel and Amazon’s help pages can be seen below:
(left image: Amazon.com, 2015, right image: The Weather Channel, 2015)
Section 5: Suggested Improvements
The website, while loaded with valuable information, could certainly stand a more streamlined
design. The following are possible changes that could improve the user experience:
1. Remove “Clickbait” articles. In a recent article by Khalid El-Arini (an engineer for the wildly popular
social media site, Facebook), it is stated that:
“… when we asked people in an initial survey what type of content they preferred to see in their
News Feeds, 80% of the time people preferred headlines that helped them decide if they
wanted to read the full article before they had to click through.” (El-Arini, 2014)
This indicates that the majority of people are not swayed by “clickbait” headlines and would prefer
headlines with more information. These vague headlines serve to visually clutter a page with
unrelated and irrelevant information, therefore making the site harder to read and, to some, less
professional.
2. Create visible, easy-to-find links for all users. Links were often overlooked by the participants in
this study. The overwhelming amount of information frequently meant that the users would miss
relevant links amidst the sea of unrelated graphics and text. Even the help section, which has
subject headings, proved to be time-consuming and not intuitive to the users. Clear subject
headings, more collapsible menus, and white space to draw viewers’ attention would be of great
benefit to the site and make it much easier on the eyes.
3. More visible search bar. While the search bar is visible when first visiting the site, users complained
that it wasn’t readily apparent. Perhaps a more prominent placement or a larger graphic indicating
the search bar would be useful.
4. Radar more prominent on the forecast page. While I understand the idea behind placing links in a
prominent area, the decision to put the radar below the unrelated articles is confusing. One user
assumed that the radar must be on another page before they scrolled down far enough and realized
that it was on the current page.
5. More unified color scheme. When viewing the main page, the user is confronted with a large
amount of graphics, and yet no unified color scheme to unite the elements together. Backgrounds
are white or grey with white or dark blue/black text.
Conclusion:
While The Weather Channel’s website is effective in that it contains all of the information that
the average user might need their services for, there are definitely ways that the overall usability and
functionality could be improved. Although the sample size in this study was very small, it showed that
there are issues with the website that need to be addressed, especially since both participants often
complained about the same issues.
Appendix A
Tasks
1. Look up a detailed, daily forecast for three different towns/cities in the United States.
2. Access the weather radar and perform a “past” animation.
3. Find a way to contact customer service, preferably by phone.
Appendix B
Protocol
Date: 4-05-2015
Location: UVA-Wise John Cooke Wyllie Library
Time: 3:00pm-5:30pm
Timeline:
Welcome the first participant (1 minute)
Introduce the participant to the computer/environment and read script (5 minutes)
Introduce and implement task 1, make notes (5-10 minutes)
Introduce and implement task 2, make notes (5-10 minutes)
Introduce and implement task 3, make notes (15-20 minutes)
Thank the participant and ask for questions/comments (5-10 minutes)
Offer the questionnaire (5 minutes)
Finish writing notes (5-10 minutes)
Repeat for participant 2
Appendix C
Scripts
Usability Test Script
[Welcomes participant and tells him/her to be comfortable, offers drink or restroom break before the
test begins]
Script:
Welcome:
“Hi! Welcome and thank you for participating in our research today. My name is Angela West
and I will be conducting today’s survey. I am a member of Dr. Vandana Singh’s Web Design
course at the University of Tennessee’s SIS program. This survey is designed to test the usability
and productive design of a website, and I will be asking you to perform various tasks on the
website in order to determine its effectiveness.
The survey conducted today will last no longer than an hour. Please feel free to take breaks if
needed. Bear in mind that your identity will remain anonymous and your skills will not be tested
– only the effectiveness of the website’s design. The goal is to find the flaws in the website’s
design and increase its usefulness for all users. If you encounter trouble with a certain section
of the website, it is likely that many other people will also find it ineffective and confusing.
Equipment and Tasks:
The survey will be conducted on a Dell Inspiron laptop with attached USB mouse and Wi-Fi
capabilities. The operating system is Windows 7.
The website that we will be exploring today is The Weather Channel’s website
(http://www.weather.com). There are three tasks that I will be asking you to complete today.
They are as follows:
4. Look up a detailed, daily forecast for three different towns/cities in the United States.
5. Access the weather radar and perform a “past” animation.
6. Find a way to contact customer service, preferably by phone.
These tasks are timed but please do not rush through tasks. Take them at a comfortable pace.
You are not required to perform tasks in a specific way, just whatever way feels most
comfortable for you.
As soon as you are ready, we will begin.
[Introduces the tasks again, one by one]
After the tasks are completed:
Thank you for participating today. If you would, please fill out this questionnaire about your
experience today. Answers will not be distributed outside of this course and your identity will
remain anonymous.
Debrief:
If you have any questions or comments, please let me know.
Thank you once again for coming today and have a great day.
Appendix D
Notes
(including relevant “Think Aloud” comments)
(notes presented in an informal format, just as they were written)
User seems confused by layout.
“Where do I look for..Does support mean contact?” – participant 2
User seems distracted by the amount of graphics on screen
“Too much stuff on here!” – participant 2
“This site is a mess.” – participant 1
Users both called the site “ugly”
“Clickbait” was mentioned many times by participant 1
Participant 2 hates the articles
“What happened to the weather on The Weather Channel?” – participant 1
Help page is too confusing for both participants
Both participants called the site either “busy” or “cluttered”
“Seems kind of sensationalist” – participant 1, on the articles
Both participants made disgruntled noises while trying to search for items
Task 3 is definitely the most difficult
Tasks 1 and 2 are easier but could be made better
The site could use more white space and a better color scheme
Participants are not happy with their experience
“I can’t find anything!” – participant 2, with noted frustration
Participant shows signs of irritation and frustration (particularly with task 3)
Pages are too long, not enough weather-related information per page
Lots of comments for “Where” and “How”
Site is needlessly “busy” with unrelated items
“This makes my eyes tired” – participant 2
Radar is too far down
Radar is below irrelevant articles
White space would improve readability
“Clickbait” articles are listed as main content, not as advertising, looks unprofessional
Tasks should be straightforward but are not due to layout
No obvious color scheme
Task 1 – Success, though improvements could be made
Task 2 – Success, though this process was much more frustrating than it should have been
Task 3 – Failure. The site is confusing and difficult to navigate for this feature.
Appendix E
Questionnaire
The purpose of this questionnaire is to understand the users of The Weather Channel’s website and
their experiences and comments. Your anonymity is assured and the results of this questionnaire will
be used by the tester, a student of the University of Tennessee Knoxville.
Please answer the following:
1. Age:
□ Under 18
□ 18-25
□ 26-35
□ 36-45
□ 46-55
□ 55-60
□ 60+
2. Highest education:
□ Some high school
□ High School
□ College degree
□ Graduate degree
3. How often do you use the internet?
□ Less than once a week
□ Once each week
□ Several times a week
□ Daily
□ Never
4. Have you ever used The Weather Channel’s website before?
□ Yes
□ No
5. Would you recommend The Weather Channel’s website to other users?
□ Yes
□ No
6. Do you have any comments or suggestions?
References
Amazon. (2015). Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books,
DVDs & more. Retrieved from http://amazon.com
El-Arini, K. (2012). News Feed FYI: Click-baiting | Facebook Newsroom. Retrieved from
http://newsroom.fb.com/news/2014/08/news-feed-fyi-click-baiting/
Muller, G. (2012). Whitespace in Web Design: What It Is and Why You Should Use It.
Retrieved from http://blog.teamtreehouse.com/white-space-in-web-design-what-it-isand-why-you-should-use-it
The Weather Channel. (2015). Retrieved from http://www.weather.com
weather.com Site Overview. (2015). Retrieved from
http://www.alexa.com/siteinfo/weather.com
Download