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.
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
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
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
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
- 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.
- Though the black Profile / Chat section of New Homepage B is pretty, it actually becomes a distraction for the News Feed + Updates / Ads sections.
- 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 ☺