Eye Tracking Study: Friends List Layouts

This eye tracking report from May 2009 looks at the usability and design of friends lists on social networking sites Facebook and LinkedIn.

Our goal for this study was to deploy our Eye Tracking service in an extremely focused manner – directed at a particular step in the core workflow of a site. We decided to look at friends lists because of the layout variations that exist and also because these pages represent a very important aspect of the core value of these sites – i.e. the ability to scan a list of people for a recognizable name or relevant title.

The results were pretty clear and the study represents a good example of how Eye Tracking can help to make concrete design decisions that can have significant business benefit.

Introduction

Many “Web 2.0” and Social Networking sites provide the ability to make new connections through your existing network to people you either already know or want to get to know. For example, on Facebook you might use this function to reconnect, on a personal level, with old friends or classmates. LinkedIn, a pioneer of online business networking, allows you to expand your business network by connecting with other potential clients, customers, vendors, or industry peers that your existing contacts can introduce you to.

As a result, the page that provides the list of friends or connections is a crucial step in the usage of these sites. From the user’s perspective, if I cannot easily use these lists to identify new connections, I will be less likely to find the service useful and appealing, and will use the site less regularly. From the site owner’s point of view, I will be interested in doing everything possible to facilitate the expansion of each user’s network, because the more connections my users have the more likely they are to rely on my site to communicate with their network. This means making sure that the list presentation and design is as usable as possible given the specific functions that this page needs to serve.

Despite the broad relevance and significance of the “friends list,” different sites offer very different versions of this design element. In other words, there does not yet seem to be complete agreement in the design community regarding the most effective display for this type of information. So we at Catalyst Group undertook an Eye Tracking and Usability study to compare two popular friends list layouts to determine if one was clearly more effective than the other. We were particularly interested in what insights the Eye Tracking data would provide in the focused context of this study.

What We Tested

Testing Prototypes
In order to isolate the specific function that we were most interested in, we created testing prototypes of two friends list layouts that did not contain any other navigation or design elements. These prototypes were inspired by the two leading social networking sites: Facebook and LinkedIn. 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 name and title. For the remainder of this report, we’ll refer to the LinkedIn and Facebook designs as the 3-Column Layout and the 1-Column Layout, respectively.

Tasks
In order to simulate “real world” use of the two tested interfaces we created tasks that would mimic the act of scanning a list for someone you recognize without knowing specifically who they are.

• Name Recognition Task:
• For this task, we told participants that the lists contained zero or more names of US presidents and asked them to scan the list and count the number of presidents they found.
• Title/Description Recognition Task
• Here, we asked participants to find a “design professional” to assist them with a project.

This is an excerpt from a May 2009 report, download the full version in pdf format here.

This content was provided by Catalyst Group. Visit their website at www.catalystnyc.com.