Which New Facebook Homepage Increases Ad Conversions The Most? 

Facebook’s A / B Test Analyzed Through Gestalt Laws 

Norman Tran
4 min readMar 17, 2014

After reading Sabina Idler’s article on using Gestalt Laws to improve UX, I was excited to apply the framework to Facebook’s latest homepage redesigns to understand how advertisers may be impacted.

The Framework: Gestalt Laws

  • Why Use a Framework? Frameworks help speed up analysis through mental shortcuts (i.e. Porter’s 5 Forces makes analyzing a company’s strategy easier).
  • Why Gestalt Laws? Gestalt Laws are widely accepted in the design community as a framework to understand how our minds perceive and organize Gestalt — the German word for “shape” or “form.” With this understanding, we can discuss why our eyes focus on particular elements and less so on others.

The Three Homepage Versions

I want to highlight the 3 main sections (Profile, News Feed, Updates / Ads) in each of the homepages in a side-to-side comparison because later on, I’m going to describe how the use of certain Gestalt Laws can direct the viewers’ eyes for Facebook’s advantage.

Old Homepage

Consider the Old Homepage. The Profile, News Feed and Updates / Ads sections all share the same white background. So how does the viewer separate the sections on the Old Homepage? The following Gestalt Laws are used:

Law of Proximity

Red = Profile; Orange = News Feed; Yellow = Updates / Ads

According to the Law of Proximity, elements grouped closely together (aka having a high degree of proximity) are perceived as related. To emphasize this point, the Old Homepage’s 3 sections are highlighted using red, orange, and yellow, respectively.

Law of Common Fate

Red = Static; Orange = Dynamic

The Law of Common Fate suggests elements that share the same movement are perceived as as related. The News Feed (in orange) has movement enabled (infinite scroll), which contrasts with the static Profile and Updates / Ads sections (in red).

Law of Uniform Connectedness

Red = Divider Line

The Law of Uniform Connectedness suggests elements separated by lines or boxes are perceived as related. The divider line between the Profile and News Feed sections makes it explicitly clear that these two sections are separate.

If the Old Homepage is already using these 3 laws, how are the New Homepages doing? Let’s take a look.

How Do The New Homepages Compare?

In addition to using the Law of Proximity and Law of Common Fate, both New Homepage A and New Homepage B use a new Gestalt Law to further draw the viewers’ eyes towards the News Feed and Updates / Ads sections (where the ads are located). However, New Homepage A and New Homepage B use the Gestalt Law differently, as illustrated below:

My Hypothesis: New Homepage A Increases Conversions The Most

  1. Because New Homepage A’s design urges viewers’ eyes to stay fixated on the News Feed + Updates / Ads section (where ads appear), my hypothesis is ad conversion rates will increase — not dramatically but more so than the Old Homepage and New Homepage B.
  2. Though the black Profile / Chat section of New Homepage B is pretty, it actually becomes a distraction for the News Feed + Updates / Ads sections.
  3. The Old Homepage lacks the strong visual hierarchy present in both New Homepage A and New Homepage B.

*Update: Seems like my hypothesis was correct! Facebook is rolling out Homepage A. If you’re an early-stage startup looking for a scrappy UX Designer, tweet me @norman_tran

--

--

Norman Tran

I design how we design @Tradecraft. Ex @MissionU, @StanfordGSB, @IDEOTeachersGuild. Impish improviser. Junior jazz pianist. Passable poet. Alliteration addict.