UX Research & Design ︎ March-May 2022
Cooper Hewitt - Improving Information Accessibility and UX Efficiency by Using Eye Tracking Analysis
Abstract Cooper Hewitt Museum, with one of the most diverse and comprehensive design collections in existence, is the only museum in the United States devoted exclusively to historical and contemporary design.
Using Tobii Eye Tracker to observe the position of the eye on the interface, this project analyzes users’ eye attention on the ‘Current Exhibitions’ and ‘Welcome to Cooper Hewitt’ pages on the Cooper Hewitt museum website. To make the information more accessible and readable for users, we provided recommendations to improve the readability of current exhibition page, increase the discoverbility of all exhibition objects, simplify the interaction of the landing page of digital exhibition.
Client
Cooper Hewitt
Cooper Hewitt
Tools
Tobii Pro Lab
Tobii Pro Lab
Team
Yifan Wang,
Steph Meltzer,
Hao Ni,
Fariah Qasim
Yifan Wang,
Steph Meltzer,
Hao Ni,
Fariah Qasim
Responsibility
UX Researcher and Designer
UX Researcher and Designer
OBJECTIVE
- To understand how users are interacting with and browsing the content on the ‘Current Exhibitions’ and ‘Welcome to Cooper Hewitt’ pages on the website.
METHODOLOGY
To improve the user experience of Cooper Hewitt Museum website, we chose Eye tracking analysis as our research methodology.
Eye tracking is a technology that measures eye movements and makes it possible to know where a person is looking, what they are looking at, how long their gaze is in a particular spot, and the paths the eye is taking on a page.
OVERALL RESEARCH & ANALYSIS PROCESS
1. RECRUITING PARTICIPANTS
For our study, we recruited a total of 8 participants that were 18 years or older. We tried to recruit participants who were interested in art and design, and they had experience using websites for cultural institutions such as museums to explore online exhibitions, find information on exhibitions, collections, and museum-hosted events, and reserve tickets for planned visits. This pie chart illustrates our participant group in terms age.
For our study, we recruited a total of 8 participants that were 18 years or older. We tried to recruit participants who were interested in art and design, and they had experience using websites for cultural institutions such as museums to explore online exhibitions, find information on exhibitions, collections, and museum-hosted events, and reserve tickets for planned visits. This pie chart illustrates our participant group in terms age.
2. DESIGNING TASK SENARIO
For our testing sessions, we focused on testing four major experience: exploring current exhibitions, diving into exhibition details, browsing digital exhibitions page and finding the Cooper Hewitt history. Based on these ux interactions, we designed the following 4 task senarios:
THE 4 TASKS
For our testing sessions, we focused on testing four major experience: exploring current exhibitions, diving into exhibition details, browsing digital exhibitions page and finding the Cooper Hewitt history. Based on these ux interactions, we designed the following 4 task senarios:
THE 4 TASKS
- Your friend is visiting you. She is very interested in Flowers. You heard about an exhibition that will be on display through July and showcase drawings of flowers. Find more information about this exhibition.
- You want to look at the collections of that exhibition. Pick one of your favorite objects from the collections from that exhibition and find when it was gifted to Cooper Hewitt.
- You found there’s a digital exhibition on Cooper Hewitt’s website as well. You are interested in Film. Explore what they display related to Film.
- Your friend asks you more about Cooper Hewitt since you will be visiting together. You want to find more information on the museum and you want to know when it was built and who built it.
3. USER TESTING WITH EYE TRACKING
For our testing sessions, as each participant carried out the tasks, the session was recorded via a screen recording software. Once the participant finished completing the tasks, the recording of their session with the eye tracking movement was played back to them and we asked them to voice out loud what they were thinking while they were completing the tasks. This is what we call an RTA or Retrospective Think ALoud.
For our testing sessions, as each participant carried out the tasks, the session was recorded via a screen recording software. Once the participant finished completing the tasks, the recording of their session with the eye tracking movement was played back to them and we asked them to voice out loud what they were thinking while they were completing the tasks. This is what we call an RTA or Retrospective Think ALoud.
RESULT ANALYSIS & RECOMMENDATIONS
System Usability Scale (SUS) Score
The website scored a 57.5 for the System Usability scale score. The SUS is a scale to evaluate the usability of systems compared to industry standards. Based on research, an SUS score above a 68 would be considered above average. The SUS score for the Cooper Hewitt website indicates that there is room for improvement for the website.
1. The User Experience of Current Exhibitions Page
How do users direct their attention between different visual elements within current exhibitions?
How do users direct their attention between different visual elements within current exhibitions?
FINDING 1.1
On current exhibition page, users felt the textual elements were overwhelming due to the lack of contrast and the length.
On current exhibition page, users felt the textual elements were overwhelming due to the lack of contrast and the length.
The heatmap show that the user scan through the titles, and barely read the text.
One participant complained about the readability of this page during the RTA session:
One participant complained about the readability of this page during the RTA session:
“…it's like yelling at you – you want to look at all of them.”
And because of the title and the date of the exhibitions are with the same font weight, one user mentioned that she did not find the date at the beginning, and she could not figure out what to to focus on.
“I’m trying to figure out what I want to focus on… and I scrolled back up because I was trying to find the date information.”
RECOMMENDATION: Make the exhibition cards more digestible using segmenting
1. We recommend to separate the date information from the exhibition title and make them visually distinct, by using a different font weight.
![]()
Because when users are scanning through the page, they try to find key information, and the date of the exhibition is one of the keywords they are looking for. By making the exhibition title and the date information distinct from each other, we hope it could help to increase the readability of the current exhibition page.
2. We recommend to reduce the body text on this page.
![]()
Because the heatmap result shows that people barely looking carefully at long paragraphs at this page. With the new layout that is more concise and clearer, users can learn about the basic information about the exhibitions more easily, without being too overwhelmed to the content.
1. We recommend to separate the date information from the exhibition title and make them visually distinct, by using a different font weight.
Because when users are scanning through the page, they try to find key information, and the date of the exhibition is one of the keywords they are looking for. By making the exhibition title and the date information distinct from each other, we hope it could help to increase the readability of the current exhibition page.
2. We recommend to reduce the body text on this page.
Because the heatmap result shows that people barely looking carefully at long paragraphs at this page. With the new layout that is more concise and clearer, users can learn about the basic information about the exhibitions more easily, without being too overwhelmed to the content.
FINDING 1.2
- The secondary navigation has no contrast with the headers below.
- There is no feedback for users to understand which category of Exhibition they are currently browsing.
We found that the secondary navigation has no contrast with the headers below. The eye tracking recording on the right shows that this participant looked at the secondary navigation but did not notice there was a current button. There is no feedback for users to understand which category of Exhibition they are currently browsing.
One participant said during the retrospective think aloud session:
One participant said during the retrospective think aloud session:
“I double checked if I was in the Current – but it didn't highlight or anything.”
RECOMMENDATION: Use better contrast so users may easily orient themselves
1. We recommend to highlight the page the user is currently viewing in a contrasting color.
![]()
2. We recommend to change the font weight of secondary navigation to differentiate from the Exhibition headlines
![]()
Because the secondary navigation section is too close to the exhibition titles, and when they are in the same font weight, it could cause readability problems. By making the revisions, the navigation is able to be distinguished from the following exhibitions and show the page users currently located at clearly.
1. We recommend to highlight the page the user is currently viewing in a contrasting color.
2. We recommend to change the font weight of secondary navigation to differentiate from the Exhibition headlines
Because the secondary navigation section is too close to the exhibition titles, and when they are in the same font weight, it could cause readability problems. By making the revisions, the navigation is able to be distinguished from the following exhibitions and show the page users currently located at clearly.
2. The User Experience of Exhibition Details Page
How do users locate more comprehensive information related to exhibition objects?
How do users locate more comprehensive information related to exhibition objects?
FINDING 2
Users had a hard time discovering how to view all the objects in the exhibition.
Users had a hard time discovering how to view all the objects in the exhibition.
During the test, many of our participants failed to find the link where they can view all exhibition objects. This collection is one of the most important contents that Cooper Hewitt Museum put efforts on, but a lot of people didn’t even notice the link because it is hidden in a secondary information stack.
One participant mentioned that he wished he could see more a detailed page of objects when he saw the “Exhibition Highlight”:
One participant mentioned that he wished he could see more a detailed page of objects when he saw the “Exhibition Highlight”:
“…I wish they had more of a detailed page of almost everything that they display.”
Also, several users did not acknowledge the orange links on the right at all.
RECOMMENDATION
We recommend to move the orange link ‘View all Exhibition objects’ above the section of ‘Exhibition Highlights’.
We recommend to move the orange link ‘View all Exhibition objects’ above the section of ‘Exhibition Highlights’.
By simply change the position of the “View All Exhibition Objects” link, it is easier for users to understand that there are more objects to explore besides the objects in “Exhibition highlights”.
We hope this could increase the chance that users would discover and explore all the collections that Cooper Hewitt Museum put so much effort on.
We hope this could increase the chance that users would discover and explore all the collections that Cooper Hewitt Museum put so much effort on.
3. The User Experience of Digital Exhibition Page
How do users navigate and explore the digital exhibition?
How do users navigate and explore the digital exhibition?
FINDING 3.1
The horizontal scroll does not make for an ideal browsing experience.
The horizontal scroll does not make for an ideal browsing experience.
When users were exploring the digital exhibition page, most people got lost and didn’t understand the structure of this page. They could not figure out how many different categories or topics does this website has because they are not listed in a simple way.
One participant commented on the horizontal slider when she was asked to find an exhibition that related to film:
One participant commented on the horizontal slider when she was asked to find an exhibition that related to film:
“…the Film is on the 4th, but maybe I don’t have the patience to continue to the 4th part.”
RECOMMENDATION
We recommend to transform the current layout to a vertical grid.
We recommend to transform the current layout to a vertical grid.
By altering the layout to a vertical grid, it is very clear that how many topics the website covers. Also, in order to reinforce the information hierarchy, we moved the introduction of the “Will Smith Street Couture” to another position, so that it will not confuse the users whether the box is a separate topic or not.
FINDING 3.2
Users miss the opportunity to view all exhibition objects of digital exhibition.
Users miss the opportunity to view all exhibition objects of digital exhibition.
Because the digital exhibition page is actually an external website out of the Cooper Hewitt Museum main website, using the same wording for “menu” confused a lot of the participants. Most people didn’t think of clicking the menu when they were exploring the website. Not because they didn’t notice it, but due to the reason they had the expectation that this menu would pop up the same menu window as the main site. Thus, many users did not have the chance to explore all the collections on the digital exhibition site.
One participant said when he finally figured out the menu was different:
Besides, instead of functioning as a menu, this menu button actually functions as a search engine with filters and categories. Thus, we think it would be more accurate to reword the name “menu”.
One participant said when he finally figured out the menu was different:
“ These menu options are nothing like what I had before [on main site] – it's the options for the page.”
Besides, instead of functioning as a menu, this menu button actually functions as a search engine with filters and categories. Thus, we think it would be more accurate to reword the name “menu”.
RECOMMENDATION
We recommend to replace ‘MENU’ with ‘View All’.
We recommend to replace ‘MENU’ with ‘View All’.
This simple change will not only make it differentiated from the main site menu, but also elaborate the actual function of this button.
CONCLUSION
Out of the 31 problems we found from our testings, we picked some problems to provide revising recommendations.
OVERALL FINDINGS:
Current Exhibitions：Improve the readability of current exhibition page
Exhibition Details：Increase the discoverbility of all exhibition objects
Digital Exhibitions：Simplify the interaction of the landing page of digital exhibition, increase the discoverability of all exhibition objects
DILIVERABLES:
Presentation Deck - A report in a slide-deck form that summarizes the study goals, approach, findings, detailed feedback, and recommendations.
Problem List - A document outlining each usability problem with its corresponding page on Cooper Hewitt website.
Highlights Reel Video - A video reel containing our findings with supporting video recordings of users during the usability test.
OUTCOMES
Client: “Illuminating, and everything you mentioned is so valuable.”
The client was impressed with our findings and recommendations. They thought the eye tracking analysis report and heatmap was eye-opening to see how few people over to certain pages. Also, our feedback for the digital exhibition page is very valuble for making the site to V2, with a very simple but effective change.
“I cannot express how valuable these findings and recommendations are.”
