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.

Wait, I can do what? (A study of Amazon and Netflix on-demand video services)

by Catalyst Group

This report shares findings on the user experience for Netflix and Amazon On-Demand movie services. Follow the process of Catalyst Group from stated objectives through observations and insights. Read Article »

eReader Showdown – Kindle 2 vs. Sony eReader

by Catalyst Group

This report compares the user experience of the Amazon Kindle 2 versus the Sony eReader, looking at aspects such as physical design, interface design and shopping experience. Catalyst Group details their objectives, methodology, insights and observations. Read Article »

Google vs. Bing – Search Engine Preference

by Catalyst Group

This study compares user impressions of the Google and Bing search engines. Catalyst Group shares feedback from participants and eye tracking data regarding advertising space. Read Article »

Putting the "trust" back in Bank & Trust

by Catalyst Group

Catalyst Group performed both quantitative and qualitative research to compare consumer perceptions of "trust" in terms of banks. Specific institutional websites were compared using eye-tracking studies and interviews. Read Article »

Online Dating: Usability Study Report

by Catalyst Group

This study evaluated two top online dating sites for usability - eHarmony and Match.com. Users shared their experiences and perceptions of the two sites in interviews and eye-tracking research was conducted. The results were interesting and pointed out issues with technology facilitating emotional connection and chemistry between users. Read Article »

Extra Credit: An Eye Tracking study of Credit Card Websites

by Catalyst Group

This study takes a look at three major financial services websites: chase.com, capitalone.com, and discovercard.com. The goal was to gain some understanding of what company makes it easiest (and most difficult) for users to complete the crucial task of “applying for a new credit card”. The study was structured to gather and compare eye tracking data during task completion relating to several metrics. Read Article »

Beyond Red and Blue: Insights into the Design of Presidential Candidate Websites

by Catalyst Group

So much has been made of the role of the Internet in the 2008 presidential election. In particular, the Obama campaign made some impressive claims about the success of BarackObama.com in fund-raising and organization of supporters. Even on the most superficial level, the two candidate sites have a lot in common in terms of structure and content. But, to our eyes, there are many differences in terms of the design approaches taken by the two organizations. We wondered how ordinary voters might see these differences, so we conducted a comparative usability study of the two sites. Read Article »

Site Design Should Reward Frequent Users

by Catalyst Group

This report takes a look at interface design challenges and opportunities of catering websites for new and repeat users. Read this article for practical, experience-driven advice and tactics for building websites that survive and succeed. Read Article »

Screen Size Matters: Best Practices for Designing Websites to Match Browser Resolution

by Catalyst Group

Designing your website for various screen resolutions can be tricky but warrants serious consideration. Catalyst Group present different methods for addressing screen resolution, including optimization techniques for a hybrid approach. Read Article »

Net Rage: A Study of Blogs and Usability

by John Franklin, Catalyst Group

Catalyst’s proprietary test of the usability of blogs sheds light on a variety of user-experience related design challenges associated with blogs’ potential to become a mainstream medium for Internet users. Read this white paper to learn more insights gained from this usability study. Read Article »