Airbnb网站改版设计案例分析手把手级别

Airbnb 作为全球最大的房屋租赁网站,它的网站页面改版非常值得我们借鉴,并且能够保持多年来超棒的产品转化,请看今天的分享。

 

转自:我们的设计日记

作者|Thanos Timitriou

翻译|№哒╭╯小●怪兽♥、超可怕的外星人、white_风铃

 导语 
Airbnb 在全球市场蓬勃发展了十年,但仍然没有人能够与之抗衡,甚至没有一个是 Airbnb 的竞争对手。它绝大部分的成功源自 Airbnb 的设计团队为其预订平台创造用户体验的不断努力,这种体验超越了其他类似的服务。
▲ 在我写这篇文章时,Airbnb的登录页
作为一个设计师我经常在思考,Airbnb设计团队是如何应对他们在产品设计上的挑战,并保持多年来的产品转化。因此,在这篇文章中,我将分析是什么原因使他们的登录页面与众不同,并且还如此成功。
 
 视觉清晰和极简主义 

“我在设计中努力追求两方面:简洁和清晰。好的设计往往是从这两方面中诞生的。”——林登·里德尔

通过运用颜色对比和阴影,用户界面基本上可以分为两层:包含说明文字和唤起按钮,卡片形成上层,而页面的其余部分被视为背景层。

▲ 用户界面的感知层

用户不需要花多大力气,就可以将上层卡片视为可以与之互动的区域。整个页面不会让用户负担过重的信息,因此可以为进入该页面的用户设计一条清晰的交互路径。

在为大众设计时,减轻用户完成目标所需的认知负担是非常重要的。

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

通过VisualEyes插件测量预订页和登录页(首屏)的光学清晰度

清晰度越高越有助于我们识别信息。可以决定如何有效地为人机交互界面设计的两个指标是视觉复杂性和原型性。这两个指标的结合会极大的影响用户的视觉感受,从而影响用户如何与界面进行交互。

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

 

 预设路径 

Airbnb已经设立了互动焦点;因此用户已经确定了他们为了搜集信息而必须“睁大眼睛”的位置。

The Double Z-Pattern 双Z模型

▲ z字型布局(人们从左到右阅读)

有一种自然的阅读模式,当视觉刺激出现时,就会使用这种模式。从眼睛自然扫描的视觉动线来看,Z字型布局更适合运用在一个包含CTA(“call-to- action”的简写,又名行为召唤按钮)按钮的简单目的网页。

这种特别的模式可以“追踪”用户眼球的运动,从而可在战略层面上帮助决策视觉元素的放置。

Airbnb正在使用z字型布局为他们的用户设定视觉焦点

通过利用这种布局,Airbnb 设计团队实现了建立出一个简洁的视觉层次。传递特定信息的区域被精准定位并吸引用户注意。下面你可以查看 Airbnb 的Z布局如何转化为注意力热图。

▲ 注意力热图是在 Figma 中用 VisualEyes 插件生成的

如右图所示,卡片所处的区域,比主图的焦点突出了三倍,而白色卡片右下角的CTA按钮得到的注意程度几乎比卡片本身突出了三倍。(hero image:首屏)

关键点

Airbnb设计团队增强了预先建立的交互路径,将用户大部分注意力引向产品所需的简单动作——按钮以便“更加深入地了解”他们的产品。

 

 “引爆”受众,激发情绪 

启动是一种技术,即暴露于一种刺激影响响应后续的刺激,没有有意识的指导或意图。

换句话说,当一个人的记忆或者心理联想被用来影响他未来对即将到来的事情的行为时,启动效应就发生了。

▲ 第一张首屏有人浏览时,与Airbnb的网站互动

几乎所有的网站/产品都以某种方式向其受众施加“启动”效应。在我们的案例中,Airbnb 的登录页,游客是通过图像的使用受到联想启动。设计团队在寻找完全符合公司目标群体的图片方面做得非常出色,这样他们就能确保所需的情感被激发出来。

▲ 不同的目标受众,不同的首屏

当你看到左边图片上的房子时,哪些词语会在你的脑海中闪现?也许是一些舒缓的,平静的,清新的,独特的,无忧无虑的,甚至是休闲的?

通过“引爆”他们的目标受众,Airbnb 的设计师们使用精心挑选的图片来激发人们的情绪,这些情绪可能与随后的预期体验有关:在一个棒极了的地方度假。

 

 简单、有力且有效的语言 

这个文本框有两个目的:

1.验证用户最初访问网站的原因:“我在我应该在的地方”。

2.设定一个用户目标:现在我应该搜索我想去的地方。

在网页设计中,使用简洁清晰的语言来传递信息是必不可少的,因为这样可以确保你的用户不会误解你的产品。记住:沟通是一条“双行道”。

我们的沟通能力不是取决于说的有多好,而是我们被理解的程度——安德鲁·格罗夫

Airbnb避免使用不必要的行业术语,他们会选择目标用户可以清晰理解的词语。

关键要点

要精心选择文字内容,用简短的文案尽可能快的传达信息和呈现产品价值,确保这一切能让用户更好的理解内容。

 最后 
有洞察力的设计是以人为本的,并且驱动着人的行为和情感。Airbnb团队发现了一个非常微妙几乎不可觉察的方式来引导浏览他们网站用户的行为。精心设计的体验框架使得用户在保持主要目标的同时增加了交互性。

 

本站所有素材均来自网络,如果侵犯了您的版权,就随时联系我们的客服。你还可以关注我们的微信公众号与微博公众号随时获取我们最新动态。
UI社 » Airbnb网站改版设计案例分析手把手级别

良凡设计-专注高端品牌企业官网建设--UI社官方推荐

立即查看 咨询客服