Henry Art Museum Usability Research & Testing Report Prepared by Tiffany Lin June, 2014
Henry Art Gallery
ADVANCING CONTEMPORARY ART, ARTISTS, AND IDEAS
The Henry Art Gallery is...
• An internationally recognized museum of contemporary art • Serves a broad public audience in the Pacific Northwest, • Along with the nearly 60,000 faculty, staff, and students of the University of Washington. • Through broad community engagement with innovative exhibitions, public programs, and a rich museum collection of over 25,000 objects.
2 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Henry Art Gallery
COMMUNITY, USERS, BUDGET
• Last update to the site was made in late 2008
Website Redesign Included...
• Upgrade to match with other contemporary art museum sites • Upgrading functionality, focusing on: The Henry’s 3 Main Programs: 1. Exhibitions 2. Educational Programs 3. Permanent Collection • Targeting the return visitor and those familiar with the museum • Scope did not include branding redesign
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 3
BASELINE TESTING
Henry Art Gallery
WHAT IS BASELINE TESTING
WHEN
• Occurs at the beginning stages of a website re-design
WHAT
• Captures the current ease level of use of performance on core tasks.
• Continued benchmark tests every 2-3 years using the same objectives.
• The first of a series of benchmark tests • Beginnings of making connections between quantitative and qualitative data
WHY
• Focus on raw data, defines what needs to be redesigned • Gives a foundation to measure continued improvements Usability Research - Prepared by Tiffany Lin - June, 2014 -- 5
Henry Art Gallery
TESTING OBJECTIVES
Questions Include:
• What is the current ease of use level? • Does it inform its target users about programs and exhibits available at the museum? • Is the information useful and easily accessed?
Data Focus:
• Capturing user performance data on core tasks. • Setting a reference point for future benchmark tests. • Focusing on similar/same user performance measurements.
6 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Henry Art Gallery
PARTICIPANT REQUIREMENTS
24 Participants
All users should be Seattle based residents and returning Henry patrons
• 6 Users are K-12 educators • 6 are UW Students • 6 are parents of youth K - 9 years • 6 are 20+ adults who are engaged (visit, donate, volunteer) with other local arts organizations in Seattle.
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 7
Henry Art Gallery
SCENARIOS & TASKS
scenario
scenario
You are a HS Photography teacher, this quarter you are exposing your students to some of Ansel Adams’ photography.
A friend recently told you about Yoga classes at the Henry. task
task
Take a look on the Henry site to see if the museum has Adams’ photos available for online viewing.
What time, where, and how much are the classes? scenario
As a regular large donor to the museum your recent donation went to fund an installation called “Sanctum.”
scenario
After visiting the Ann Lislegaard: 2062 exhibit you thought your friend Mike would like the book published by the Henry on the exhibit.
task
How would you find out more; like who’s involved, when it will open, and what the installation is about?
scenario task
You want to plan a trip to the museum in May with your kids.
Make an online purchase of this book via the Henry site. Can you see if there is a non-permanent photo show at the Henry in May?
8 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Henry Art Gallery
TEST SETUP
• The test lasted 10 min for each participant, located in front of a desktop computer. • Each participant was read the task and the tester timed the participant from 1st interaction to final click. • The tester took notes with pen and paper.
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 9
Henry Art Gallery
KEY PERFORMANCE INDICATORS
UX KPI
• The time on task will be the User Experience Key Performance Indicator • Using the average of time spent to complete a task from users who are very familiar with the site as the baseline metric
Experienced User
RESULTS
0:26
0:13
0:13
1:20
0:24 0:14
0:18
Task
l Co
l
t io ec
n
S
1:55
1:17
1:49
h rc a e
y er
b Pu
D
lG ta i ig
l al
10 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Fi
uy B / nd
am r og Pr
1:57
f In
o L
e ur t ec
1:48
fo In U
om pc
Measurement from first click to final action
1:22
in
g
en v E
1:28
t
P
i nn a l
Testing Group
ng
Vi
sit
May end if user comments “give up”
Henry Art Gallery
ADDITIONAL FINDINGS
1st Click
Complete vs Gave-up/Fail
First Clicks were measured by ‘right’ or ‘wrong’ path. Many users did not understand the navigation and opted to use the search in order to look for content.
Many users spent a large amount of time searching for dates, times, location. Often unable to locate these items and feeling overwhelmed by the amount of text on the page.
24% Right 76% Wrong
Users often missed, or didn’t understand the available options.
34% Completed Task 36% Failed
4-7 Clicks
Error Counts
33%
Based on incorrect data entry, and re-entry. Unnecessary clicks or entry Use of internet or browser tools Excessive time spent on task Error messages received
Task
l Co
l
t io ec
n
S
50%
33%
50%
33%
h rc ea
y er
D
lG ta i ig
l al
Fi
uy B / nd
1-3 Clicks
50% 100%
b Pu
am r og Pr
50%
f In
o L
re tu c e
0 Clicks
50% 25%
50%
25%
50%
fo In U
om pc
i
ng
en Ev P
100%
t
i nn a l
ng
Vi
sit
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 11
Henry Art Gallery
ISSUES & RECOMMENDATIONS
Navigation Labels & Site Architecture Many users did not understand navigation and opted to use the search in order to look for content. Recommendation: Revisit and refine the site structure. Focus on slimming and focusing the main navigation items.
Page Content & Right and Left Bars Many users spent a large amount of time searching for dates, times, location. Often unable to locate these items and feeling overwhelmed by the amount of text on the page. When users attempted to filter/refine their needs ie; finding only exhibit openings, the side navigation was often completely missed. Recommendation: Utilize images with less text in main content areas. Consider a more interactive and visual interface for filtering. 12 -- Usability Research - Prepared by Tiffany Lin - June, 2014
4 main nav headings 19 sub menu items Small text and non Hierarchical presentation of important info lead to confusion, and missed info.
Henry Art Gallery
ISSUES & RECOMMENDATIONS
Logo/return home in standard location.
Calendar Interface Users who decided to look up upcoming exhibit/event information on the home page calendar quickly quit. They found the interface was confusing and the quick pace of the side scroll was not useful and was not an anticipated action. Recommendation: Reduce the scroll speed of the calendar, re-consider the buttons (size, shape, color) for navigating the calendar. Rely more on images less on text repetition. Calendar design puts emphasis on color bands, not dates
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 13
Henry Art Gallery
PAPER PROTOTYPE TEST
14 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Henry Art Gallery
WHAT IS PAPER PROTOTYPING TESTING
WHEN
• Occurs at the beginning stages of website design.
WHAT
• This is a user centered design approach where rough sketches, low to mid fidelity wireframes, and/or storyboards are created to test user interface designs.
WHY
• Paper prototypes flush out navigational and conceptual design errors by testing on and getting feedback from experts, pilot testers, and users.
• During brainstorming, testing possibilities on how the interface might look and interact with the user.
• Paper prototypes save time and money, it enables testing before coding starts and provides a quick and easy format to make many revisions based on feedback. • At this stage the whole team can be involved in the design process. Usability Research - Prepared by Tiffany Lin - June, 2014 -- 15
Henry Art Gallery
TESTING OBJECTIVES
Questions Include:
• Does the navigation labels and taxonomy provide enough information to provide users with a clear path to their desired content? • Does the website provide a ‘need to visit’ to its target users? • Does the design offer the correct affordances? • Is the information useful and easily accessed?
Data Focus:
• Capturing users first clicks. • Capturing users desire to utilize the search bar.
16 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Henry Art Gallery
PARTICIPANT REQUIREMENTS
12 Participants
All users should be Seattle based residents and returning Henry patrons
• 3 Users are K-12 educators • 3 are UW Students • 3 are parents of youth K - 9 years • 3 are 20+ adults who are engaged (visit, donate, volunteer) with other local arts organizations in Seattle.
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 17
Henry Art Gallery
TEST SETUP
Mid Fidelity Prototypes. Set up on Tabloid sized ‘screens.’ Users used their hands or pen/pencil as a mouse to navigate. The test giver took handwritten notes as the ‘computer’ moved screens based on user interaction choices.
18 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Henry Art Gallery
SCENARIOS & TASKS
scenario
scenario
You are a HS Photography teacher, this quarter you are exposing your students to some of Ansel Adams’ photography.
A friend recently told you about Yoga classes at the Henry. task
task
Take a look on the Henry site to see if the museum has Adams’ photos available for online viewing.
What time, where, and how much are the classes? scenario
As a regular large donor to the museum your recent donation went to fund an installation called “Sanctum.”
scenario
After visiting the Ann Lislegaard: 2062 exhibit you thought your friend Mike would like the book published by the Henry on the exhibit.
task
How would you find out more; like who’s involved, when it will open, and what the installation is about?
scenario task
You want to plan a trip to the museum in May with your kids.
Make an online purchase of this book via the Henry site. Can you see if there is a non-permanent photo show at the Henry in May?
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 19
Henry Art Gallery
FEEDBACK AND RECOMMENDATIONS
Version 1 : Exhibits
Version 2
This navigational support will persistently scroll with the content.
Bringing sorting and categorizing to the top. Gives users control on what they want to see.
Important details/info are placed together, they are prominent and displayed in conjunction with images of the exhibit. 20 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Some users wondered where to click to get more info in this interface. Updated the tab to look less like a text block and added “>>� cues.
Henry Art Gallery
FEEDBACK AND RECOMMENDATIONS
Version 1 : Collections
Version 2 Instead of trying to filter by artist on the collections homepage, clicking on a collection will take users to a page where filtering and viewing can happen together. An “activated� room.
This page separates the copy from the navigation. The collections are represented with a click-able image of the museum map. Usability Research - Prepared by Tiffany Lin - June, 2014 -- 21
Henry Art Gallery
FEEDBACK AND RECOMMENDATIONS
Version 1 : Events Search and categorizing up at top, giving users more control.
Version 2 Event details are presented ‘up-front’ here. This keeps users engaged, less clicks to get to their info.
Persistent nav for the calendar area. Users needed a bit more affordances for this scroll. Photos and a more dynamic layout works to point visitors to important events, and adds more interactivity. 22 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Updated the layout to give a more clear idea of how the page scroll works
Next Steps
With This Feedback, We’ll Design with Colors and Images Next
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 23
Henry Art Gallery
A VISUAL WALKTHROUGH
24 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Henry Art Gallery
WHAT IS A VISUAL WALKTHROUGH
WHEN
• A visual walkthrough happens in the ‘idea’ stages of a web site design timeline. • Testing can occur multiple times through the early to mid stages of design.
WHAT
• The walkthrough is a high-fidelity piece, shown on a digital monitor • Not interactive, this high-fi prototype asks users to give feedback on the visual and interactive elements of the design.
WHY
• A static representation of webpages gives users a chance to ‘guess’ the interaction before ‘seeing’ what the interaction is • Giving the designer a chance to understand if the visual suggests the actual intention. Usability Research - Prepared by Tiffany Lin - June, 2014 -- 25
Henry Art Gallery
TESTING OBJECTIVES
Questions Include: Main Nav: Taxonomy - Does the user understand the language?
Events Page:
Visual Cues - Does the user know where they are?
Layout - Is the information easily located?
Info - Do breadcrumbs and/or labels keep the user engaged?
Affordance - Do scrolls, page sections, hyperlinks engage the
Collections: Affordance - Do the visuals invite the user to interact in an easy way? Visual Cues - Does the user understand the map representation?
26 -- Usability Research - Prepared by Tiffany Lin - June, 2014
user to interact correctly? Info - Does the user understand how to further their search? Visuals - Can the user see the main content pieces with ease?
Henry Art Gallery
PARTICIPANT REQUIREMENTS
12 Participants
All users should be Seattle based residents and returning Henry patrons
• 3 Users are K-12 educators • 3 are UW Students • 3 are parents of youth K - 9 years • 3 are 20+ adults who are engaged (visit, donate, volunteer) with other local arts organizations in Seattle.
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 27
Henry Art Gallery
High Fidelity Prototypes. Set up on ‘actual’ desktop monitor. Users used their hands or pen/pencil as a mouse to navigate. The test giver took handwritten notes based on user interaction choices, comments, and questions.
28 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Henry Art Gallery
SCENARIOS AND TASKS
Scenario
Scenario
You are a HS Photography teacher, this quarter you are exposing your students to some of Ansel Adams’ photography.
As a regular large donor to the museum your recent donation went to fund an installation called “Sanctum.”
Task
Task
Take a look on the Henry site to see if the museum has Adams’ photos available for online viewing.
How would you find out more; like who’s involved, when it will open, and what the installation is about?
Scenario
Scenario
A friend recently told you about Yoga classes at the Henry.
You want to plan a trip to the museum in May with your kids.
Task
Task
What time, where, and how much are the classes?
Can you see if there is a non-permanent photo show at the Henry in May?
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 29
Henry Art Gallery
FEEDBACK & RECOMMENDATIONS About 50% of users could not define the difference between the two.
Users at times went here to look for workshops and classes.
Version 1 : Nav
Version 2 Navigation Suggestion : The Henry
Exhibits
Programs/Events
For Educators
Resources
- About - Upcoming - Funders & Supporters - Permanent Collections - The Henry & UW - Online Galleries
30 -- Usability Research - Prepared by Tiffany Lin - June, 2014
The Henry Store
Henry Art Gallery
FEEDBACK & RECOMMENDATIONS
Version 1 : Events
Version 2
Separation of featured area and events scroll could be clearer.
Scroll icons are unconventional Users were unsure of where to click for more info
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 31
Henry Art Gallery
FEEDBACK & RECOMMENDATIONS
Version 1 : Events Dropdown
We want users to know they can filter by more than one artist at a time. This visual didn’t give that cue.
32 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Version 2
Henry Art Gallery
FEEDBACK & RECOMMENDATIONS
Version 1 : Collections
This sort felt like an extra step, when users just wanted to quickly understand what was available at the museum.
Users now ‘enter’ the collection and can browse, search, and view in the same screen.
Version 2
Location of work invites and assists users to visit the museum.
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 33
Henry Art Gallery
RITE TESTING
34 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Henry Art Gallery
WHAT IS RITE TESTING
WHEN
• Occurs at the later/end stages of the design process
WHAT
• Stands for rapid iterative testing and evaluation
WHY
• Focus on only the smallest/easiest problems to fix
• Fast rounds of small-scale usability tests
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 35
Henry Art Gallery
TESTING OBJECTIVES
Questions Include:
• Do visual affordances give enough cues? • Does the navigation provide clear direction to content? • Is everything readable?
36 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Henry Art Gallery
PARTICIPANT REQUIREMENTS
6 Participants All users should be Seattle based residents and returning Henry patrons
• 3 Users are K-12 educators • 3 are 20+ adults who are engaged (visit, donate, volunteer) with other local arts organizations in Seattle.
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 37
Henry Art Gallery
scenario
scenario
You are a HS Photography teacher, this quarter you are exposing your students to some of Joseph Deal photography.
As an Educator you like to keep up with what’s going on at the Henry, especially and events associated with their Ed programs.
task
task
Take a look on the Henry site to see if the museum has Deals’ photos in their permanent collections and available for online viewing
Can you find out when their next Spring Educator Preview is?
scenario
As a regular patron and member to the museum you want to get into your calendar any upcoming shows that seem interesting to you. task
Can you look up whats coming up?
38 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Henry Art Gallery
TEST SETUP
High Fidelity Prototypes. Set up on ‘actual’ desktop monitor. Prototype is live and click-able using the tool InvisionApp The test giver took handwritten notes based on user interaction choices, comments, and questions.
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 39
Henry Art Gallery
FINDINGS & CHANGES
Version 1 : Explore Collections Updated the side scroll affordances. Visually, and then with buttons for navigation.
Version 2
40 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Version 3
Henry Art Gallery
FINDINGS & CHANGES
Version 1 : Exhibit Search Filter
Version 2
Added a submit button to offer multi-selection affordance.
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 41
Henry Art Gallery
Version 1 : Photo Text Block Increased font size for readability
42 -- Usability Research - Prepared by Tiffany Lin - June, 2014
Version 2
Henry Art Gallery
FINAL SCREENS
Usability Research - Prepared by Tiffany Lin - June, 2014 -- 43
Henry Art Gallery
PROCESS
The Takeaway
• Design is a highly iterative process • Tons of intuition doesn’t help identify gaps • Being too familiar with the designs means spotting failures can be difficult • Each effort after a test produced insights to a final design • Helps focus on priority tasks
44 -- Usability Research - Prepared by Tiffany Lin - June, 2014
50 -- Usability Research - Prepared by Tiffany Lin - June, 2014