Navigate back to the homepage

How Airbnb drives users’ actions with their landing page design — a UX analysis

Thanos Dimitriou
December 19th, 2019 · 4 min read

There is a reason you are not familiar with many -maybe not even one- of Airbnb’s competitors. The renting/booking marketplace “giant” has thrived in the global market for a decade and still hasn’t found anyone that can stand up to it.

A considerable amount of that success derives from the ongoing effort of Airbnb’s design team to create a user experience for its booking platform which surpasses that of other similar services.

1 IZjdrKKyfEVfKTvs5OP2Xw

Airbnb’s Landing Page (above the fold) as I am typing this


As a designer, I was always astonished of how Airbnb approaches their product design challenges and delivers a product that converts, for years now. So in this article, I’ll try to identify what makes their landing page different and why it is successful.

. . .

Visual Clarity and Minimalism

“I strive for two things in design: simplicity and clarity. Great design is born of those things.” — Lindon Leader

Using colour contrast and shadows, the user interface is basically structured as two layers: The card, which contains the explanatory text and the Call-to-Action (CTA) button, forms the upper layer, while the rest of the page is perceived as the background layer.

1 Ls9JB0Z S6vfGexSBysd0w

Perceived layers of user interface


With little to no cognitive effort, users can identify the upper layer (card) as the area with which they can interact. The page as a whole does not overload the users with information, hence framing a clear interaction path for users who land on it.

Reducing the cognitive load the user needs for achieving his goals is of the utmost importance when designing for humans.

Let’s see how it compares to Booking’s landing page, in terms of visual clarity, by using predictive technology:

1 Ub5Pm3nXTfwu6UL0UBvekw

Measuring optical clarity of the landing pages (above the fold) for Booking.com and Airbnb via VisualEyes plugin


More clarity contributes to easier and driven scanning of information. Two metrics that can determine how an interface is efficiently designed for human interaction is Visual Complexity and Prototypicality. The conjunction of those two metrics affects the aesthetics processing of the user significantly and, thus, defines how he will interact with the interface.

More complexity requires more cognitive load. More cognitive load means less user engagement and, sequentially, less conversion and profitability.

Key Takeaway:

Airbnb has set an interaction focal point; therefore users have already determined where they will have to “lay their eyes” in order to forage information.

. . .

The Double Z-Pattern

1 wySJzlx8dJ f7QUtcWSWOg

The Z-Pattern (for people that read from left to right)


Humans have a natural reading pattern, which is applied when visual stimuli are present. Following the natural flow of eye-scanning a layout, the Z-Pattern complements better single-purpose webpages that contain only one CTA.

This specific pattern “traces” eye movement of the users, thus allowing for strategic placement of visual elements.


So, Airbnb used the Z-Pattern.


Twice.

1 6me0bD81k1ws4bddMU0qUw

Airbnb is setting focal points for their users, using the Z-Pattern


By utilising this layout, Airbnb’s designers achieved to establish a concise visual hierarchy. Areas of interest that convey some kind of message are pinpointed and brought up to the user’s attention. Below you can view how Airbnb’s Z-layout translates into attention heatmaps:

1 Ag9usfzEBW0CW12OH5OP w

Attention Heatmaps generated in Figma, using the VisualEyes plugin.


Attention heatmaps suggest that the selected areas are drawing the most of the user’s attention in this particular instance.


As it is shown on the right image, the Area of Interest, in which the Card is placed, stands out three times more than the focal point of the hero image, while the CTA Button on the bottom right of the white card is almost three times more prominent than the card itself.

Key Takeaway

Airbnb augments, even more, the pre-established interaction path, by driving most of the attention to the single action -clicking the button- needed in order to “dive deeper” into their product.

Read more on the Z-Pattern here.

. . .

Priming

“Priming is a technique whereby exposure to one stimulus influences a response to a subsequent stimulus, without conscious guidance or intention.”

In other words, priming takes place when taking one’s memories or mental associations and using them to influence his future behaviour towards an upcoming matter.

1 S4MtyYBKZ7AqoPYcx5g6uw

The first image (Hero) someone views when interacting with Airbnb’s website


Almost all websites/products apply the “priming” effect to their audience in some way. In our case, the Airbnb landing page, visitors are subject to associative priming with the use of imagery. The design team is doing an excellent job in finding images that fit the company’s target group perfectly, so they can ensure that the desired emotions will be triggered.

1 irjG1Fxz XsrqPMyxVvwog

Different target audiences, different hero images.


Which words pop in your mind when viewing the house on the left image? Maybe something like soothing, peaceful, refreshing, unique, care-free or even vacation-material?

Key Takeaway:

By “priming” their target audience, Airbnb’s designers use carefully-picked images to spark the emotions that could be associated with the subsequent expected experience: Staying in an awesome place for their vacation.


Read more on Priming from NN/g here.

. . .

Simple, strong and effective language

1 cu0jGzHUDE eh p2e0R 1w


The text serves two purposes:


  1. Validate the reason a user visited the website in the first place — “I’m where I was supposed to.”
  2. Set a user goal — “Now I should search for places I want to visit.”

Using simple and clear language when communicating messages is essential in web design, as it establishes that your audience will not misinterpret your offering. Remember that communication is a “two-way street”:

“How well we communicate is determined not by how well we say things, but how well we are understood.” — Andrew Grove

Airbnb avoids unnecessary jargon, while choosing a set of words that their target audience will comfortably understand.

Key Takeaway:

Text content was carefully selected to disclose a specific message and the value of the product as quickly as possible, with few words in the play. All that without endangering that their audience will not understand the offering.

. . .

Conclusion

Insightful design is human-oriented and drives human actions and emotions. Airbnb’s design team found a very subtle -almost transparent- way to direct users’ actions on their website. The framing of the experience was so delicately designed that it accelerates interaction while keeping the primary user goal in mind.


Thanks for tuning in!


Give me a shout: Twitter | Instagram | Linkedin | Portfolio

Thanks to Jim Raptis.

More articles from VisualEyes

How to interpret Clarity Score and Maps

Hey there fellow designer 🎨 In this article, we will try to interpret a few Clarity Scores and Clarity Maps and understand the insights we…

November 29th, 2019 · 2 min read

How VisualEyes can lead the design evolution

VisualEyes  is a next-gen design tool that combines leading neuroscience research with AI to accurately predict how people will react to…

November 28th, 2019 · 1 min read
© 2019–2020 VisualEyes
Link to $https://www.visualeyes.design/Link to $https://twitter.com/visualeyeshq?lang=enLink to $https://www.instagram.com/visualeyes_hq/?hl=enLink to $https://dribbble.com/VisualEyesHQ