Catalyst Group conducted an eye tracking study to compare the usability of the layout of two popular social media ‘friends lists’. They determined that one of the designs was clearly more effective for accurately accomplishing key networking goals.
Eye tracking to evaluate ‘friends lists’
 |
Left: 1-Column (Facebook-inspired) Layout
Right: 3-Column (LinkedIn-inspired) Layout |
Despite the broad relevance and significance of the friends list, different social networking sites offer very different versions of this design element. Catalyst Group wanted to evaluate the most effective display factor for this type of information. Two prototypes were created inspired by the two leading social networking sites, Facebook and LinkedIn.
Scanning tasks
To mimic the act of scanning a list for someone you recognize without knowing specifically who they are, two ‘real world’ tasks were created; a Name Recognition Task and a Title /Description Recognition Task (searching for a design professional).
Facebook layout facilitates scanning
 |
Heat map visualizations. Left: The 1-Column Layout.
Right: The 3-Column Layout |
Overall, the Facebook-inspired/1-Column Layout was a much more effective and enjoyable way of presenting the tested information. This preference was clearly articulated by users during the RTA (retrospective think aloud) sessions, and supported by the eye tracking data. It was easy to read the single column of names straight down during the Name Recognition Task, and users were able to ignore the adjacent column containing information irrelevant to the current task. Similarly, users scanned vertically down the title/description column when searching for a design professional to work with. In the 1-Column Layout, participants could segregate names, pictures, and job titles from each other, easily find the information they needed to look at given the particular task. In the 3-Column Layout, participants were overwhelmed by the amount of information displayed, that made it difficult to focus on the information they needed to complete the task.
 |
Visualizations from two of the participants studying
the1-Column Layout. All users scanned the
information vertically. While there were occasional
glances at pictures or names (depending on the
assigned task) users followed the same general pattern
of reading down the page as they scrolled. |
Eye tracking data also revealed that virtually all participants scanned the 1-Column Layout the same way and there was very little hesitation or exploration at the start of the task. Users were able to dive right into scanning without having to experiment with different scanning strategies (a phenomenon observed with the 3-Column Layout).
The LinkedIn / 3-Column Layout was thought by most participants to be more cumbersome and overwhelming in its design – more “tiring” according to one participant. Also, participants felt much less confident that they had successfully completed the tasks with the 3-Column Layout. In other words, they did not feel certain that they had seen all the names.
 |
Representative gaze plots of the 3-Column Layout.
The effect of the ‘page fold’ line. Some users opted
to scan everything in view first, before scrolling to
view the rest of the page. Others attempted to scan
all the way to the bottom of the page and then scroll
back to the top. A few used their mouse as a guide
as they read from one block of text to the next.
Notably, some users were observed to change their
reading strategy once they started to scroll (image). |
Eye tracking of the 3-Column Layout revealed that the participants did not adopt a consistent scanning strategy for this design. Moreover, most participants had to begin by experimenting with different scanning strategies before deciding which one to use. This uncertainty was exacerbated by the need to scroll the page in order to see the full 3-column list.
Many participants found that they had lost their place on the page after scrolling and had to backtrack up the page. As a result of this research, Catalyst Group recommend that sites that rely on networking functionality consider using a version of the 1-Column Layout in order to better facilitate scanning, and create a more fluid and comfortable user experience.
Tools and methods
In order to isolate the specific function that Catalyst Group was interested in, the testing prototypes of the two friends list layouts did not contain any navigation or design elements. The content of each prototype was identical in terms of the number of names and descriptions listed – with the one exception that the Facebook-inspired interface included pictures of the individuals and the LinkedIn-inspired design only listed names and titles.
The participant pool consisted of 13 participants, all members of at least one social networking site (e.g. Facebook, LinkedIn, MySpace, or Twitter).
The two tasks created were:
- Name Recognition Task For this task, the participants were told that the lists contained zero or more names of U.S. presidents and asked them to scan the list and count the number of presidents they found.
- Title / Description Recognition Task The participants were asked to find a design professional to assist them with a project.
A Tobii T60 Eye Tracker was used for the study. Catalyst Group presented each participant with both tasks and both layouts. Participants were eye tracked during their task completion attempts and the eye tracking session was then followed by qualitative retrospective think aloud discussions to explore their experiences in greater detail. The presentation of each layout and task was rotated in order to prevent order bias.
Why eye tracking?
“We have noticed at Catalyst that we get more insightful and precise responses from users since we adopted an eye tracking/ RTA approach. Users find the research process more engaging. When they can see not only what they did but what they actually looked at it really helps them to focus on what is important. From my perspective as a usability researcher, eye tracking/RTA has made it much easier to surface the most significant issues as well as more subtle ones.” Peter Hughes, Founder & Principal Consultant
Why Tobii?
“When we were researching which system to buy, Tobii’s name kept coming up. We now have a Tobii T60 Eye Tracker and use it heavily. Tobii is very committed to their product – it shows in their customer support and the fact that they are continually improving their systems", says Peter Hughes, Founder & Principal Consultant.