第 2 章 为了 UI 设计而进行的用户体验设计

第 2 章 为了 UI 设计而进行的用户体验设计——找出用户想要达成的目标

文 / 伊野亘辉 (INO Noriteru) Cookpad 股份有限公司 译 / 卫昊
URL http://cookpad.com/ mail noriteru-ino@cookpad.com Twitter @memocamera

考虑何为好的设计

在设计服务的UI 时,首先我们必须好好考虑“究竟何为好的设计”。无论使用何种服务,人们总是有意识或无意识地想要达成某种目标。这个目标可能是“获得有用的信息”,可能是“轻松确定每天的菜单”,也可能是“寻求他人对自己的认同感”。

好的服务就是可以帮助用户通过行动达成目标的服务。明白了用户的目标后再进行服务的 UI 设计是非常重要的。

本章将从对用户目标的调查、设计,重要功能的选取这两方面出发,结合 Cookpad 的 iPhone 应用开发实例来介绍 UI 的设计方法(图 1)。

图 1 使用本章介绍的方法开发的 Cookpad 应用

用户想要达成何种目标

用户使用服务到底是想达成什么目标呢?我们又该如何发现这个目标呢?有几种方法可以帮助我们明白这些问题。

最简单的方法就是直接听取用户的意见,观察他们的行动,这种方法一般被称为用户调查。以调查得到的信息为基准进行开发,自然而然就能知道如何才能开发出好的服务。

在服务开发初期,精心地进行用户体验设计,明确开发小组中大家应该完成的目标是非常重要的。如果能做到这点,可以说服务开发已经有了一个成功的开始。

用户体验设计的步骤

用户体验设计分为如下几个步骤。第 1 章提到过的产品定义文档就是通过前 5 个步骤实现的,并且最终记入用户体验设计书。

❶ 找到作为调查对象的用户

❷ 对用户进行调查

❸ 挖掘用户的目标

❹ 创建人物角色(Persona)

❺ 制作用户体验设计书

❻ 撰写脚本

❼ 从脚本中挑选出重要的功能

❽ 进行 UI 设计

进行用户调查,首先我们要寻找出会使用自己服务的人群。用户调查时可以使用用户采访和用户行为观察两种方法,根据调查得到的数据发现用户想要达成的目标,然后再根据这个目标创建一个人物角色,想象该角色在使用服务时会如何行动,并将其写成脚本。最后挑选出需要实现的功能。

从服务的着手准备到进行开发、UI 设计的这个过程中,用户体验设计作为对服务整体进行的设计,常常像指南针一样为开发指明方向。

为了发现用户的目标而进行调查

为了发现用户的目标,我们可以使用用户采访和“人种志(Ethnography)调查”两种方法。

找到用户

调查的第一步就是找到作为调查对象的用户。因为如果调查的是不使用我们服务的人群,那么就算发现他们的目标也没有任何意义。为了避免不着边际的用户体验设计,在用户调查开始之前,我们应该先找到能够作为对象的用户群。

如果制作的是智能手机的应用,那么我们就必须以使用智能手机或者将要使用智能手机的人群作为调查对象。料理相关的服务则要以平常做饭或者将要开始做饭的人群作为对象。根据服务的不同,我们还需要从年龄、性别、居住环境、工作、使用服务的环境、服务的特性等多个角度出发来发现用户群。

如果能接触到这些用户,那么请求对其进行直接调查即可。除此之外,还可以拜托自己身边的人,对他们进行调查。需要注意的是,如果选择身边的熟人作为调查对象的话,可能会因为先入之见而很难获得有效的信息,所以我们应该尽量选择日常生活中没有来往的人作为调查对象。这种对象的筛选也可以通过网络招募或者委托专门的调查公司来执行。

Cookpad 手机应用的开发,主要面向有着以下特征的用户:26 岁 ~32 岁的家庭主妇 / 已婚 / 有孩子 / 使用 Cookpad 一年以上 / 制定菜单 / 实际制作料理 / 一周使用 Cookpad 4~5 次以上 / 一周至少创建一个食谱 / 使用智能手机。这是在使用 Cookpad 服务的人群中通过直接调查得出的结果。

用户采访

用户采访是一种直接与调查对象见面,听取他们意见的方法。采访 1 个人大约花费 30 分钟至 1 小时,一共采访 5~10 人左右即可。人数过少的话,很难获得有效信息;人数过多的话,则会浪费太多时间。

  • 不要寻求解决方法

    在实际采访中,很重要的一点是:不要询问用户诸如“你觉得我们怎样做比较好”这样的问题。因为我们想要找出的是“用户想要达成的目标”,而不是要用户告知我们解决方法。这样说你可能会觉得很难,但是如果使用合适的问法进行调查,就可以获得非常有用的信息。

    我们也不应该把用户当作设计师去询问。即使这样问了,用户给出了某种回答,大部分也只是有局限性的意见,或者是没有认真考虑过、脱口而出的回答。

  • 需要询问的事情

    那么,我们问些什么比较好呢?例如,平常是如何使用某项服务的?什么时候会感到有压力?如果某一功能没有了,使用什么来取代它?什么时候会觉得很开心?通过类似这样的问题引导用户有意识或无意识地说出他们想要达成的事情。用户的回答中若有值得注意的地方,我们还应该追问“为什么会这样?”重复地询问原因,可能会帮助我们找到用户的根本目标。

    • 什么时候觉得开心

    • 什么时候会感到有压力

    • 使用什么作为替代品

    • 询问以上问题答案的形成原因

    在 Cookpad 手机应用的开发中,我们向用户询问诸如“什么时候觉得料理是最幸福的事情?”“制作料理时讨厌的事有哪些?”“对料理来说最重要的是什么?”“这个应用没有了的话怎么办(用什么来代替)?”之类的问题,没有实际地观察,而是让用户用语言告诉我们平常都是如何使用现有应用的。

  • 思考值得注意的行为、发言

    仅凭采访还是很难发现用户想要达成的目标的。结束一次采访后,开发小组可以进行头脑风暴,将用户发言中可能隐藏着的目标逐条写下来。从值得注意的行为或发言中,应该还可以发现 10~20 条疑似用户目标的内容。

人种志调查

人种志(Ethnography)调查是一种为了理解人们是如何生活的而进行的实地调查方法,原本使用在文化人类学等领域。在服务开发中,这种方法就是指前往用户平常使用服务的环境,观察、调查用户到底是如何使用某种服务的,这样可以真实地掌握用户使用服务时的状态。

与用户采访不同,这种调查的优点是不会掺入过多的主观因素。当然,在现场我们也可以向调查对象询问各种问题,但不是询问和用户采访中一样的问题,而是向用户请教这是什么东西或者为什么这样使用等。

用户调查的缺点

用户采访的缺点是:将用户带到某个特定的场所询问,可能会使用户的回答发生主观上的偏移。

相反,在人种志调查中,由于我们是在用户平常较为熟悉的环境中对其观察、调查,所以几乎不存在主观上的因素。相对于用户采访,我们可以更加准确地观察用户是如何行动的,以及在他们使用过程中哪里遇到困难又是打算如何处理的,等等。

不过,在 Cookpad 手机应用的开发中,主要进行的是用户采访。这是因为我们想要在有限的时间内尽可能多地听取用户的意见,而人种志调查需要一定程度上的时间和经验。总之,我们应该根据自己的开发时间和成本来选择调查的方法。

制作人物角色和用户体验设计书

完成用户调查后,我们应该根据调查而来的信息,把多个调查对象整合为一个虚拟的人物角色(Persona)。

人物角色是什么

如果根据多个对象模糊地开发服务的话,开发人员很难想象现实中用户是处于何种环境又是怎样使用服务的。为了避免这种情况,让开发人员意识到这是在针对一个具体的人物形象进行开发,我们需要创建一个虚拟的人物。像这样将多个人的信息整合后形成的一个新的整体就叫作“人物角色”。

人物角色代表了作为服务对象的特定用户群,所以在有多个用户群时,也可以创建多个人物角色。创建人物角色最为重要的是要基于调查得到的真实数据进行创建,注意尽量不要将创建者个人的想法融入到人物角色中。

而且在实际开发时,人物角色可以避免开发小组对自己开发的产品产生动摇。小组成员不会再使用各自定义的“用户”这一模糊的词语,仅仅在这一点上,人物角色就体现了它的价值。

创建人物角色

用户调查结束后,我们要将用户的行为或动机以条目的形式稍加整理,为了日后方便可以将它们一个一个写到便签上。在理想情况下,一次调查应该可以列出 10~20 个条目。

这个列表整理完成后,我们再根据行动或动机的模式和频率将数据分组,这样就能看出明显的用户行为模式和动机模式。接着,根据分组后的数据,在团队中通过头脑风暴的方法推导出用户到底有哪些目标,然后按照目标出现的频率进行排序。

创建人物角色至少需要设定如下属性。

  • 姓名

  • 脸部照片

  • 年龄、性别

  • 职业

  • 简单的人物形象

  • 在何种环境中使用服务

  • 想要达成的目标

其中,“想要达成的目标”要划分为下面三种。

情感目标

情感目标指明了用户想要通过使用服务产生什么样的情感(每个人物角色大约 1~2 个)。

【例】

能够切实体会到应用就像是自己专用的料理手册

功能目标

功能目标通过描述用户使用服务“可以完成什么”来指明服务的功能(每个角色大约 4~7 个)。

【例】

  • 找到用家里现有的材料就可以轻松制作出的料理

  • 轻松地从收藏食谱中找出自己想要的食谱

  • 轻松地比较多个食谱

  • 可以学习非千篇一律的、新颖的食谱

人生目的

人生目标描述了用户希望通过持续使用服务,自己可以成为什么样的人。这是与人生观相似的、需要长时间来达成的目标(每个人物角色约 1 个)。

【例】

想要成为可以亲手为家人制作美味料理的母亲、妻子

在 Cookpad 手机应用的开发中创建的人物角色如图 2 所示。

※ 可以给 Cookpad 中的食谱添加书签的功能。

图 2 Cookpad 手机应用开发中的人物角色

从用户目标提取而来的功能列表如图 3 所示。我们列出了在用户调查中值得注意的行动或动机,按照出现频率将它们排列。然后针对其中“轻松地从收藏食谱中找出自己想要的食谱”这一目标,实现了“整理我的收藏夹”功能,让用户可以简单快捷地达成目标。

图 3 从用户目标提取而来的功能列表

制作用户体验设计书

用户体验设计书是指将至今为止创建的多个人物角色及其想要达成的目标整合成一张工作表,我们只看一眼这张表就可以确定使用该服务的用户想要达成的目标和用户相关信息。因为开发小组内部经常共享这份设计书,所以开发人员在遇到问题时常常会回到这里寻找原因。

即使是在开发的过程中,我们也应该经常去确认自己正在开发的产品是否可以提供我们所设计的用户体验。

Cookpad 手机应用开发时使用的用户体验设计书如图 4 所示。

{%}

图 4 Cookpad 手机应用开发时使用的用户体验设计书

撰写脚本

用户体验设计书完成之后,我们需要编写一篇文章来描述每个人物角色是如何使用服务的,这篇文章就是脚本。不同的人物角色在何时、何地、想要达成何种目的、以何种方法使用服务是撰写时要注意的问题。通过写出脚本,我们可以更容易地挑选出重要的功能或想象出 UI 设计中所需的交互性。同时,以脚本(故事)形式向小组的成员或者其他人说明服务,还会起到事半功倍的效果。

不要忘记将“用户体验设计书”中所记录的、达成目标的方法也写入脚本中。在开始阶段,不要过于在意具体的实现方法或者是否可以实现,重要的是自由发挥想象力去编写。撰写脚本时不妨当作人物角色是在使用魔法工具达成目标吧。

实现的具体方法在实际的开发阶段去寻找即可,现阶段我们主要的任务是写明白用户是如何达成目标的。需要注意的是,关于用户的使用情况,不要以我们自己的想象、而是以调查而来的实际数据为基础进行撰写,长度大约控制在一张 A4 纸的程度。

至此,脚本的撰写就告一段落了。

【例】

下午 3 点,我看了看冰箱,用现有的食材作关键字搜索出几个似乎挺好吃的食谱。我还尝试用其他的食材多搜索了几次。这款应用根据以前我保存的记录还自动挑选出了相似的食谱……

根据脚本挑选功能

然后我们就要根据完成的脚本,挑选出服务必要的功能了。脚本中应该描述了人物角色在何时、以何种方法行动,根据人物角色的行动实际进行模拟,写出必要的功能。必要时通过在小组中进行头脑风暴来完成这项工作也是不错的选择。

我们没有必要添加没有写在脚本中的功能,根据优先次序大胆舍弃不必要的功能也是需要勇气的。如果真的存在不得不添加的功能,则很有可能是用户体验或人物角色的设计有问题。这时,请回到用户体验设计书重新考虑,是不是遗漏了某些必须要达成的目标之类的。如果不在这个阶段认真修正的话,后面不符合条理的情况可能会越来越多,到了正式开发阶段也许就会导致开发的失败。

Cookpad 手机应用挑选的功能(食谱搜索部分)如下所示。

  • 关键字搜索

  • 搜索关键字自动补全

    • 补全经常搜索的关键字

    • 推荐经常搜索的关键字的组合

  • 常用关键字历史

  • 搜索关键字的历史

  • 排除关键字搜索

准备设计 UI

从脚本中提取出必要的功能后,我们就可以进行 UI 设计的准备工作了。尽量不要在 UI 体验设计结束前考虑 UI 的设计和安排等,一步一个脚印才是重要的事情。

制作纸质模型

接下来我们以脚本和主要功能为基础,考虑一下如何实际安排 UI。实际的交互方式或主要功能随着脚本的不断修改也要有所改变。以脚本为基础,参照用户的实际使用环境和行动来安排功能,可以让我们设计出更好的UI。

包含布局在内的 UI 设计并没有统一的标准答案。拿不定主意的时候,我们可以把所有的可能性都列出来,以撰写的脚本为基础,思考哪一种设计能让用户最轻松地达成目标,然后进行选择。

纸质模型的好处是可以重复地修改,所以在开始时我们不用把纸质模型画得很漂亮,而是把重点放在如何将之前挑选出的主要功能以最容易使用的形式表现出来。

纸质模型完成后,我们可以亲自试用,也可以请周围的人来试用。如果得到了反馈,就需要反复修改模型。例如可以将某些功能和其他功能分成一组,或者可以对多次重复显示的 UI 进行整合。

Cookpad 手机应用开发时,在正式使用 Photoshop 设计 UI 前,为了满足用户的目标,纸质模型反复制作了数十次,直至所有的功能和布局都安排地更为流畅。在完成到一定程度之后,又再次邀请了用户调查中的几名用户来试用(照片 1)。

{%}

照片 1 Cookpad 手机应用的纸质模型

总结

进行 UI 设计时最重要的是始终将“好的服务=可以达成用户目标的服务”这件事放在心上,认真地进行调查,最后再进行设计。需要将调查结果制作成设计书的形式,能让开发小组在任何时间都可以查看。这样可以避免在开发的过程中,开发人员被各种各样的用户想法所迷惑,随时随地改变计划或者完全不知道成员分工的情况。让我们一边参考通过假设写出的用户体验设计书,一边进行 UI 设计和开发吧。

本章所写的方法是根据文后的参考文献,在服务设计实践的基础上反复实验而得出的结论。服务开发中有着各种各样的设计方法,不能说哪一种是唯一正确的选择。有的方法仰仗一个人的才能,有的方法围绕功能进行开发,最重要的是能否开发出好的服务。其他的方法在各种书籍中都有记载,大家可以自行参考,应该可以找到符合自己公司或团队的设计方法。

参考文献

Alan Cooper、Robert Reimann、David Cronin,《About Face 3 交互设计精髓》, ASCII MEDIA WORKS 出版社 , 2008 年

目录

  • 版权声明
  • 编委会
  • 分栏目录
  • 编委点评
  • 第 3 回 扁平化设计
  • 特辑 1 UI 设计实践
  • 第 1 章 开发人员所追求的 UI 设计
  • 第 2 章 为了 UI 设计而进行的用户体验设计
  • 第 3 章 准确高效地实现!UI 设计的技巧
  • 第 4 章 提高 UI 设计成果的验证技巧
  • 第 5 章 为多元化环境提供相应的 UI 设计
  • 特辑 2 Web 支付入门
  • 第 1 章 支付的基础知识
  • 第 2 章 信用卡的基础知识
  • 第 3 章 信用卡支付的信息安全
  • 第 4 章 实现 PayPal 支付
  • 第 5 章 实现 WebPay 支付
  • 第 6 章 实现在 iOS/Android 应用内支付
  • 特辑 3 “边做边学”数据可视化
  • 第 1 章 数据可视化的基础知识
  • 第 2 章 D3.js 的导入和设定
  • 第 3 章 实现地理数据可视化的方法
  • 第 4 章 实现人际关系数据可视化的方法
  • 特约文章 Gradle 让构建更高效
  • 第 3 回 Android Studio 速评 !
  • 第 3 回 使用 serverspec 构建测试驱动基础设施架构
  • 第 22 回 如何开发使用 Coro 的简易网络爬行器
  • 第 8 回 从 Go !开始的 AOP
  • 第 9 回 抢先看 Web Components
  • 第 8 回 使用 RDBMS 顺利处理图的方法
  • 第 8 回 数据缓存性能设计的要点
  • 第 8 回 使用 Fluentd + FnordMetric 进行实时数据可视化
  • 第 17 回 从 Pecolodge 来看 HTML5+Canvas 的开发要点
  • 图灵访谈 赵望野:前端工程师的困惑