[

【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图1

有一个原因可能是您对 Airbnb 的竞争对手不甚了解,甚至不熟悉。租赁 / 预订市场 “巨人” 已经在全球市场上蓬勃发展了十年,但仍未找到任何人能够承受。

Airbnb 的设计团队不断努力,为其预订平台创造了超过其他类似服务的用户体验,这在很大程度上获得了成功。

【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图2

【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图3

我输入此内容时,Airbnb 的着陆页(折页上方)

作为设计师,多年来,我一直对 Airbnb 如何应对他们的产品设计挑战并交付可转换的产品感到惊讶。因此,在本文中,我将尝试找出导致其目标网页与众不同的原因以及成功的原因


“我在设计上努力做到两件事:简洁和清晰。伟大的设计源于这些东西。” —林登领袖

使用颜色对比和阴影,用户界面基本上分为两层:包含解释文字和号召性用语(CTA)按钮的卡形成上层,而页面的其余部分被视为的背景层

【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图4

【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图5

用户界面的感知层

用户只需付出很少甚至没有的认知努力,就可以将上层(卡片)识别为可以与之交互的区域。整个页面不会使用户过载信息,因此为落在该页面上的用户确定了清晰的交互路径。

在为人类设计时,减少用户实现其目标所需的认知负担至关重要。

让我们看看如何通过使用预测技术将其与 Booking 的登录页面进行比较(在视觉清晰度方面):

更高的清晰度有助于更轻松,更受驱动地扫描信息。可以确定如何有效地设计用于人机交互的接口的两个指标是视觉复杂性原型性。这两个度量的结合会显着影响用户的美学处理,从而定义用户如何与界面进行交互。

更多的复杂性需要更多的认知负担。更大的认知负担意味着更少的用户参与度,进而意味着更少的转化率和盈利能力。

重点介绍:

Airbnb 设定了互动焦点。因此,用户已经确定必须在哪里 “睁大眼睛” 才能搜集信息。

编辑:这是我对新文章中视觉清晰度的重要性的看法:


【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图6

【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图7

Z - 模式(从读人从左至右)

人类具有自然的阅读模式,当存在视觉刺激时就会应用。顺眼自然地浏览布局后,Z-Pattern 可以补充更好的仅包含一个 CTA 的单用途网页

这种特定的模式可以 “追踪” 用户的眼睛运动,从而实现视觉元素的战略性放置。

因此,Airbnb 使用了 Z 模式。

两次。

【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图8

【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图9

Airbnb 使用 Z 模式为用户设置联络点

通过使用这种布局,Airbnb 的设计师成功建立了简洁的视觉层次。可以指出传达某种消息的兴趣区域,并引起用户的注意。在下面,您可以查看 Airbnb 的 Z 布局如何转化为关注热图:

注意热点图表明,在此特定情况下,所选区域吸引了用户的最大注意力。

如右图所示,放置卡片的兴趣区域的突出程度是英雄图像焦点的三倍,而白卡右下角的 CTA 按钮几乎是三倍比卡片本身突出十倍

外卖秘诀

Airbnb 通过吸引大多数注意力到单个动作(单击按钮)以进一步 “深入” 其产品上,从而进一步增强了预先建立的交互路径。

此处阅读有关 Z 型的更多信息


“灌注是一种技术,暴露于一种刺激会在没有意识指导或意图的情况下影响对后续刺激的反应。”

换句话说,启动记忆是在记忆或心理联想并利用它们影响他对即将发生的事情的未来行为时发生的。

【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图10

【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图11

有人在与 Airbnb 网站互动时查看的第一张图片(英雄)

几乎所有网站 / 产品都以某种方式向其受众施加 “启动” 效果。在我们的 Airbnb 登陆页面中,访问者需要通过使用图像进行关联启动。设计团队在寻找完美适合公司目标人群的图像方面做得非常出色,因此他们可以确保触发所需的情感

【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图12

【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图13

不同的目标受众,不同的英雄形象。

在左图查看房屋时,您会想到哪些字?也许像舒缓,安宁,提神,独特,无忧无虑甚至休假之类的东西?

重点介绍:

通过 “吸引” 目标受众,Airbnb 的设计师使用精心挑选的图像来激发可能与随后的预期体验相关的情感:住在一个很棒的地方度假。

此处阅读有关 NN / g 启动的更多信息


【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图14

【眼动】Airbnb如何通过目标网页设计来驱动用户的行为 - 图15

文本有两个目的:

  1. 首先验证用户访问该网站的原因 -“我应该去的地方 ”。
  2. 设置用户目标 -“现在我应该搜索我想去的地方。”

在进行消息交流时,使用简单明了的语言在 Web 设计中至关重要,因为它可以确定受众不会误解您的产品。请记住,交流是一条 “双向路”:

“我们沟通的好坏并不取决于我们说话的能力,而是取决于我们的理解能力。” —安德鲁 · 格罗夫

Airbnb 避免了不必要的行话,同时选择了目标受众会轻松理解的一组单词。

重点介绍:

文字内容经过精心选择,以尽可能少的文字内容就尽快公开特定的消息和产品的价值。所有这些都不会危害他们的听众不会理解该产品。


有洞察力的设计以人为本,并驱动人的行为和情感。Airbnb 的设计团队发现了一种非常微妙的,几乎是透明的方式来指导用户在其网站上的操作。体验的框架设计得如此精致,以至于在紧记主要用户目标的同时加快了交互速度。
https://uxdesign.cc/how-airbnb-drives-users-actions-with-their-landing-page-design-a-ux-analysis-d99effa9f536