Improving Engagement for The MET Using Eye-tracking
Fall 2021 | User Experience Research
Project in a Nutshell
Metropolitan Museum of Art (The MET) is a well known, highly esteemed institution and a visitor’s favorite. Luckily, to be part of The MET experience one does not always have to visit the institution: a click to the institution’s website may give a glimpse of it.
To discover how this experience could be delivered better we have conducted an eye-tracking study with retrospective talk aloud method for Events, Primers and Exhibitions pages of The MET website.
We have discovered: although our client does an excellent job in designing their digital experiences; exhibitions, events and primer pages could benefit from some structural and interactive changes
My Role
user experience researcher
Tools
Tobii (eye tracking device), Tobii Pro Lab (eye tracking software), Miro, Figma
Timespan
2 months
Blending eye-tracking with traditional user interview methods: Methodology
Our client wanted us to focus on the usability of Exhibitions, Events and Primer pages. To get a holistic understanding of the user experience, we have decided to focus on not only “what could be done better” but also “how users interact with these pages”.
After initial alignment with the digital experiences team at The MET, we have formulated our research questions
-
How does the user find the content of interest in Exhibitions, Events or Primers pages?
-
How does the user read textual content and view the images presented?
-
Is the user distracted by anything?
In order to answer these questions more effectively, we have blended an eye-tracking protocol with retrospective talk aloud method (RTA). Thanks to that method, we were able to uncover some issues that could normally go unnoticed or unspoken of by the user.
Gathering richer data with eye-tracking
We have asked the user to silently complete the tasks while we record them because we did not want to interfere with eye-tracking data. Once the tasks were completed, users were presented with a system usability scale (SUS) questionnaire. Then we asked them to walk us through their processes as we made them watch their own eye tracking videos, prompting when necessary.
Mixing gaze patterns, gaze locations, SUS and user’s input gave us a good understanding of the pages. Our findings consisted of rich qualitative data supported by strong quantitative data.
What Did This Study Reveal About the MET Website?
Our study in general has revealed that The MET website is indeed a very user friendly system. Users have liked the content they are interacting with and MET’s system usability scale score was 78.3. Meaning it is almost an “Excellent” system.
Findings on Exhibitions
+ Navigation is easy, eyes follow desired patterns
- User interaction flow can be simplified
Participants found it easy to navigate around the exhibition pages. Eye gaze patterns followed intended visual hierarchy from the image to the titles.
Yet, we found out two common problems from our sessions:
1. Different background colors for exhibitions confuses the users to think they have some sort of difference.
2. Users were not happy to be sent to a different page when they were clicking a certain object in the exhibitions page.
"I wasn’t sure is this still the exhibition? The grey background made me think it was something different but they are actually exhibitions as well."
- Participant quote
“I wish there is a zoom-in feature or a pop-up window to view the object image and story so I won’t need to open up a page and then go back.”
- Participant quote
Our Recommendations
-
Remove color backgrounds
-
Introduce pop-up objects
Since different background colors for exhibitions confused the users, we decided to remove to make the user flow smoother. Also with pop-up object pages windows we aimed to eliminate the disruption of experience.
current design
recommendation
* Blank space and black background from the current design was removed to eliminate the confusion
recommendation
* Instead of sending users to other pages, showing object details as pop-up windows would make user experience smoother
Findings on Events
+ Images and structure works as intended, navigation is easy
- More visibility and more flexibility is required
Thumbnails helped users identify the events and generally navigation was easy for the participants. Yet, our tests revealed two points of struggle for users:
1. Eye-tracking data revealed that users do not usually pay attention to the “filters” feature of the events and prefer manual navigation.
2. Also even though the content needed to know where and when the event is going to be conducted was already on the cards, participants were not aware of it
Our Recommendations
-
Prominent filters
-
Readable cards
-
Denser scrolling
An unfolded and bigger filtering feature may create more visibility for the users. Also coming up with a new layout on the event cards would increase readability, thus catch user’s attention without making them click unnecessarily. Finally, to utilize screen real estate better a denser layout with four columns is recommended
An unfolded and bigger filtering feature may create more visibility for the users. Also coming up with a new layout on the event cards would increase readability, thus catch user’s attention without making them click unnecessarily. Finally, to utilize screen real estate better a denser layout with four columns is recommended
current design
1. Filters are presented unfolded to increase visibility
2. Additional call-to-action buttons are used to promote the function
recommendation
current design
recommendation
1. Move tags to increase visibility
2. Move location closer to the event title
3. Add date on the card to further clarify event time
current design
recommendation
* Have a four card layout to save from screen real estate and make browsing easier for users who do not utilize filters
Findings on Primers
+ Spectacular design, aesthetics and interesting interactivity
- Name is confusing and consuming the content requires a lot of attention
Participants appreciated the aesthetics and marked the browsing experience as an enjoyable and interesting one. They were not happy about these points:
1. No participant understood what "Primer" means
2. The amount of interactivity was sometimes overwhelming
3. Participants had a hard time following the content.
* Participants did not understand that this was the index for the Primer they are visiting
*Some participants thought there were too many interactive elements requiring "a lot of clicking"
Our Recommendations
-
Reconsider the name
-
Make the navigation more prominent
Although we cannot suggest a new name for the feature, we suggest that current naming should be reevaluated.
To address the issue about attention and cognitive load, we suggest a more prominent navigation along with a sticky navigation. This would help users follow the content with less cognitive load.
current design
recommendation
*A more prominent index would strengthen the map in the users' heads
recommendation
1. Adding a sticky navigation would make it easier for user to follow the content
2. Sticky navigation would expand when hovered, giving the user information about the progress
Feedback from The MET
The digital experiences team were happy to receive our presentation and gave us following feedback
-
Some findings with eye-tracking data have come as a surprise as these were not thought of before
-
Holistic approach to usability and the rich data is appreciated.
-
Recommendations were found useful and noted
Personal takeaways
At the end of this 6-7 weeks of preparation and research, I feel genuinely happy to have worked with an institution such as The MET. I am also happy for my increased competency in eye-tracking methodology. This project was also a great group exercise for all of us, and I am thankful to my teammates who worked hard with me to create, evaluate and present this study.
Thank you for reading!
interested in learning more about this project? send me an email for highlight reels or full presentation.
ciftciali94@gmail.com
