我们是如何将用户的反馈转化为设计的呢?

 

我喜欢旅行和探索世界。当要定旅店的时候,我通常用Airbnb来找民宿,用Booking.com 来找便宜的旅馆。如果你要问我这两个平台的体验,我会说:

Airbnb VS Booking.com

“Airbnb就像去老朋友家。我们一边喝着茶一边聊着我们的童年趣事和生活中让人兴奋的事情。”

“Booking.com,则像被邀请到了一个很大的生日派对,我在陌生人中间煎熬,还得忍受着巨大吵闹的音乐。”

挑战

作为一个旅行爱好者和用户体验设计师,我决定挑战一下,重新定义Booking的用户体验。

我的设计程序:

  • 分析当前产品的信息架构(Information architecture, IA)
  • 访谈5位用户,并且做卡片分类
  • 重新设计用户流程和信息架构
  • 创建响应式的线框图和UI

设计程序

目前的信息架构

信息架构是组织网站或者app内容的方法。大多数时候用户感到迷惑的时候都不是因为视觉设计,而是因为信息组织缺乏逻辑。

为了更好地理解当前的信息架构,我绘制了当前的内容地图,并且用颜色标注了相关的内容。

自上而下,黄色代表迅速预定部分,红色代表推荐的目的地,蓝色代表评价及反馈,紫色是号召行动(按钮)

准备好了么?

Booking首页,桌面端

Booking桌面端信息架构

Booking 移动端

整理好内容之后,我将首页中最重要的部分做了15个卡片,可以在用户访谈中试着重新组织和排序。

之前的信息架构

用户访谈

没有用户的UX不是真正的UX。 — Hoa Loranger

访谈目标

  1. 理解用户的目标和痛点
  2. 想想重新设计的视觉语言
  3. 评估当前的首页(桌面端和移动端)
  4. 修订信息架构

初步的问题

我访问了5个用户,并做了初步的分析。

初期的问题和相应的访谈结果

开始设计

访谈完最初的几个问题,我又问了一些更具体的问题去了解用户的目标,并尝试发现他们使用Booking的感受。接着,我确定了设计中需要的颜色、空间、动效、形状等视觉语言。

  • 你为什么使用 Booking.com?
  • 什么样的情绪会让你的需求得到满足?

确定的视觉设计关键词

首页的看法

接着,我请用户访问Booking.com的首页,以观察他们的行为并询问相关的问题。

booking.com的首页

桌面端的相关问题

移动端相关问题

 卡片分类

卡片分类

卡片分类是用来帮助设计和评估信息架构的方法。在卡片分类的过程中,参与者将内容按自己的喜好进行分类(和排序)。卡片分类能够帮助你理解用户的期待、优先值,帮助建立产品的基础结构。

如何组织卡片分类讨论会?

第一步:制作卡片

  • 如果是新的网站,列出你希望有的所有内容主题的信息类型
  • 如果是已有的网站,列好最重要的内容类型

第二步:让用户分类卡片

  • 允许用户添加新的卡片,或者拿掉一些卡片
  • 如果已经有太多的分类,让用户把其中的一些组合起来
  • 让用户给每一组卡片命名

第三步:感谢用户的参与,给他们一个拥抱/糖/礼物

第四部:分析结果

  • 基于用户的评论定性研究
  • 定性研究基于:那些卡片通常会被放在一起?特定的类别中,卡片出现的频率如何?

用户流程

用户访谈中获得了大量的感受,我开始重新绘制理想的用户流程。根据不同的需求,我将用户分为两类:

  1. 知道自己要去哪里的用户
  2. 不知道要去哪儿的用户

两类用户的流程

修订的信息架构

考虑到首页是服务用户需求的信息块的集合,优秀的信息架构应该用易于理解的方法去展示、排序,以满足用户的需求,随着产品的增长还可以扩展。

所以,我去掉了首页的什么内容呢?为什么?

1,评价

原来首页上的评论部分

正如我在“理想的用户流程”中提到的,评价仅仅对那些需要缩小搜索结果、斤斤计较的用户是有用的。我明白,Booking网站有大量的验证用户的评价,这是一个巨大的卖点。但是,究竟谁会连搜索都没搜索过就去浏览一些随机的评论呢?

2,召唤行动按钮(CTA)

CTA对商业和市场的成功是至关重要的。作为用户体验设计师,仅仅做一个吸引眼球的CTA按钮,随处朝用户大喊大叫是远远不够的。CTA更像是一个提议,要握住用户的手,在适当的时候做一个难以抗拒的演讲。最终,他们都会说,“好吧,我预定。”

所以,我针对CTA做了几个小的改动,让它们适时出现:

  • 预定以获得折扣——当用户搜索、预定的时候
  • 转发给朋友以获得现金返现——当成功预定的时候
  • 下载app——当使用移动设备的时候

3,推荐目的地

推荐目的地

推荐目的地对那些不知道要去哪的用户是有用的。问题是,当他们点击某个推荐的旅游目的地的时候,是否想马上看到酒店的列表呢?

我们为什么不提供旅游指南呢?
其实Booking网站有非常棒的旅游指南,可以找到很棒的目的地的信息,像“可做的事”、“最佳游览时间”、“平均价格”、“天气”、“交通”、“美食”等等。
我建议把旅游指南提前,而不是埋藏在一堆随机的链接中。当用户点击一个目的地的时候,我们首先提供旅游指南,然后再引导他们去预定旅馆。你可能会说用户需要两次点击才能够定旅馆,但是,点击次数仅仅是个花哨的技巧。现实中,用户并不在意点击了更多次,只要每次点击都很有趣,就会保持乐趣和自信继续下去。

修改后的信息架构

修改后的信息架构

 

线框图

当说到响应式设计的时候,每个人都说要“移动优先”。是的,我同意小的屏幕要展示大量内容是有挑战性的。但是我们不应该让“移动优先”的思维方式成为“将所有内容移动化”的罪魁祸首,因为桌面端不是个巨大的移动设备。(这篇文章值得读:Mobile First, Desktop Worst.

所以,我根据不同的使用习惯和多样的设备分别设计了移动端和桌面端,

桌面端和移动端的线框图

移动端和桌面端的相关元素

视觉设计

下面是我的视觉设计稿。我要谢谢那些被我征求意见烦过的朋友们。

1,头部

第一版

第二版

2,卡片布局

卡片布局

3,可信性

徽章图标

响应式设计

由于新设计的首页非常简洁,可以方便的适应各种设备,我仅仅针对卡片的部分做了微小的调整。在桌面端我加上了左右的箭头,用户可以点击查看更多的卡片;移动端则把这些按钮去掉了,因为用户更习惯滑动浏览。

最终效果图

桌面端修改前后对照

桌面端 旧 / 新 对比

移动端前后对照

移动端 旧/ 新 对比

InVision 原型

反思

用户体验设计师不仅仅是用户体验的生产者,更是用户反馈的翻译者。

用户体验设计是我的酷爱。我喜欢的是和用户交谈,解决他们的问题,给人们的生活带来愉悦。业余的时间中我在案例分析中获得了很多的乐趣。谢谢一路陪我走过的朋友和导师们。我会坚定的向着优秀的用户体验设计师前进!

 

 

via:Booking.com — UX Analysis and Responsive Redesign
Written by: Renee Lin

ixd

山工艺交互设计工作室。本专业培养学生具备敏锐的洞察能力,能够发掘用户及市场的需求;严谨的调查分析能力,能够通过社会调查方法分析数字产品的用户体验及市场表现状况;优秀的设计能力,能够把握当前界面、交互设计的潮流,掌握交互设计的艺术及技术能力;良好的沟通协作能力,能够和市场、开发人员流畅、协同合作;一定的文献检索、资料查询能力,掌握初步的科学研究方法。学生不仅学习具体的交互设计方法,又能在实践练习中将理性思维和艺术设计融合为一体,成为综合性、高素质的交互设计专业人才。 作品、文章投稿以及设计事务咨询请联系 ixd@designdaily.cn

发表评论

电子邮件地址不会被公开。 必填项已用*标注