Agile User Experience Design - By Vanbin Fan

敏捷用户体验设计

樊旺斌  2009  

Agile  User  Experience  Design

一、UCD思想

3

技术实现模型 用户心理模型 界面表现模型

反映了技术 反映了用户的愿景 与实现模型接近 与心理模型接近

! ☺

UCD-­‐-­‐以用户为中心的设计  

4

同理心： 对设计师很重要，他们需要很好地了解目标用户，基于目标用户的认知、情感和行为做出设计决策。

用户目标： 是用户认知、情感和行为的根基。了解用户，首先要了解用户的目标。

贯彻UCD的两个关键

主要UCD思想

1.  目标导向的活动模型  2.  用户体验要素  3.  用户体验的3层“境界”

5

6

1.目标导向的活动模型

⺫⽬目标

任务

⼯工具 软件

2.用户体验要素

7

3.用户体验的3层“境界”

8

是否让用户感到愉悦、有趣？用户有何情感反应？

功能是否易于学习，是否能被有效利用？

是否提供了必要的功能来支持用户目标？

爱用Esthe9cs

好用Usability

能用U9lity

KANO模型 满意度

实现率

基本型需求(基本因素)  -­‐-­‐“必须有”的  -­‐-­‐缺乏时，用户会很不满意  -­‐-­‐具备时，用户觉得理所当然，无所谓满意不满意

期望型需求(绩效因素) -­‐-­‐比较优秀，但并不是“必须有”的  -­‐-­‐用户不清楚自己需要什么，但是他们希望得到。  -­‐-­‐用户谈论的通常是期望型需求  -­‐-­‐越多à越满意；越少à越不满意  

兴奋型需求(激励因素) -­‐-­‐完全出乎用户的意料，会让用户产生惊喜。  -­‐-­‐当其特性不充足时，并且无关紧要时，用户觉得无所谓  -­‐-­‐当产品提供了这类需求中的服务时，顾客就会非常满意，从而提高用户的忠诚度。

9

情感化设计

10

•  本能层  •  行为层  •  反思层

3类软件需求

•  业务需求  –  反映了客户（或老板）对产品高层次的目标要求  –  项目愿景与范围文档中予以说明  

•  用户需求  –  描述了用户使用产品必须要完成的任务  –  可以在用例（或用户故事）中予以说明  

•  功能需求  –  定义了技术开发人员必须实现的软件功能  –  使得用户能完成他们的任务，从而满足了业务需求  

•  非功能需求  –  过程需求有交付、实现方法和标准等需求  –  产品需求包含性能、可用性、实用性、可靠性、可移植性、安全保

密性、容错性等方面的需求  –  外部需求有法规、成本、操作性等需求。

11

用户体验的3层“境界”

12

UI设计要解决的问题

业务分析和任务建模要解决的问题

爱用Esthe9cs

好用Usability

能用U9lity

“境界”高低 由何定？

企业内部使用 向市场销售

自主选择

必须使用

增加收入 减少成本

用户使用软件的

自由度

目的

公司对外的 门户网站

在线工具 (google,百度)

电子商务网站 (amazon, alibaba)

企业级财务软件sap

客户关系管理CRM软件 (salesforce.com)

call center呼叫中心系统软件

公司内部 项目管理系统

产品类型 ----从企业目的和用户使用的自由度对产品分类

产品类型决定用户体验的境界 � 

爱用Esthe9cs

好用Usability

能用U9lity

用户使用软件的自由度

企业内部使用 向市场销售

自主 选择

必须 使用

增加收入 减少成本

目的

小结

16

用户体验要素与“目标-任务-工具”的关系

17

⺫⽬目标 任务

⼯工具 软件

表现

框架

结构

范围

战略

3类软件需求

•  业务需求  –  反映了客户（或老板）对产品高层次的目标要求  –  项目愿景与范围文档中予以说明  

•  用户需求  –  描述了用户使用产品必须要完成的任务  –  可以在用例（或用户故事）中予以说明  

•  功能需求  –  定义了技术开发人员必须实现的软件功能  –  使得用户能完成他们的任务，从而满足了业务需求  

•  非功能需求  –  过程需求有交付、实现方法和标准等需求  –  产品需求包含性能、可用性、实用性、可靠性、可移植性、安全保

密性、容错性等方面的需求  –  外部需求有法规、成本、操作性等需求。

18

⺫⽬目标

任务

⼯工具

二、通用行事风格

主要内容

•  什么是设计  •  麦肯锡思维方式  •  试错  •  并行设计

20

什么是

设计呢？

21  

时间

业务问题 &目标分析

用户研究

用户建模

任务分析 (当前情况下，用户是如何实现目标的？)

任务设计 (用户如何更好地达到目标？)

基于任务的用户故事

增量版本计划

界面设计

基于软件的用户故事

设计就是不断分析问题、解决问题的过程

22

设计就是不断分析问题、解决问题的过程

23

通常，设计是由头脑中的某个成形

的备选⽅方案开始的

对问题的不断探索

有助于验证解决

⽅方案的有效性 随着时间推移，对

问题的分析逐步

被有效的解决⽅方案所代替

设计 就是分析问题、并为之提供解决⽅方案的过程 就是从备选⽅方案中不断做出决策的过程

“需求”与“设计”的区别 就在于你是否做出了决策。如果做出了决策，你就是在做设计；如果没有，你所⾯面对的就只是需求

24  

麦肯锡思维方式

•  以事实为基础  软件设计所基于的“事实”是：市场、用户  客户就是上帝、用户总是对的  市场研究、用户研究  

•  以假设为导向  用户不是设计师  要主动引导用户，而不仅仅是被动迎合用户  

•  严格的结构化  MECE：Mutually  Exclusive  Collec1vely  Exhaus1ve    相互独立-­‐完全穷尽：横向到边、纵向到底、粒度分层  无重复、无缺失、结构条理  用最高的条理化和最大的完善度理清你的思路。

25

试错

26

时间

不确定性

“试错”在敏捷思想中的体现

27

迭代: 反复求精

模糊 清晰

每次构建一点点……

增量: 逐块构建

并行设计

28

♀ 美女

小结

29

三、敏捷设计过程

31

敏捷宣言 “人”以及“人与人的互动”    

Individuals  and  interac5ons    胜于    over

“过程”和”工具”    processes  and  tools

可运行的软件  Working  so:ware  

胜于    over  

面面俱到的文档  comprehensive    documenta9on  

客户合作  Customer  collabora5on

胜于    over  

合同谈判  contract  nego9a9on  

响应变化  Responding  to  change

胜于    over

遵循计划  following  a  plan

32

敏捷宣言背后的原则 1.  产品设计开发过程中最重要的是：通过及早并频繁地交付有价值的软件来赢得客户的满意。

2.  要欢迎改变需求，即使是在开发的后期。敏捷过程中的“变”，是为了让客户保持竞争优势。

3.  交付要频繁，交付的软件要可运行。交付周期从数周到数月不等，但间隔的时间要尽量短。

4.  在整个项目过程中，开发人员必须每天都与业务人员一起工作。

5.  项目组所选的人要积极。然后，给予他们工作所需要的环境、支持和信任。

6.  面对面交谈是开发团队内部和开发团队间传递信息最有效率和效果的方法。

7.  可运行的软件是衡量进度的首要指标。

8.  敏捷过程提倡可持续的开发。出资人、开发者和用户应始终保持稳定的步调（迭代周期）。

9.  对技术的精益求精以及对设计的不断完善，将会提高敏捷性。

10. 尽量去掉不必要做的工作——这就是“简洁”的艺术。

11. 最佳的架构、需求和设计产生于自组织的团队。

12. 团队要定期反思“如何能变得更有效率”，然后对自己的行为进行相应的优化和调整。

33

设计  规划

技术实现

测试评估

产品设计的基本套路

34

团队分工

设计  规划

技术实现 测

试评估

产品团队 技术团队

相关人员  •  业务分析人员  •  交互设计师  •  视觉设计师  

职责  •  为下一迭代所涉及

的功能收集用户信息  •  设计下一迭代所设

计到的功能  •  为当前迭代中所涉

及功能的技术实现提供支持  

•  评估上一迭代完成的功能  

相关人员  •  技术开发人员  •  界面制作人员      职责  •  实现当前迭代过程

中所涉及的功能  •  与产品团队合作，

获取构建软件的细节信息  

敏捷开发过程的生命周期

35

设计规划

测试

评估

用户故事

技术

实现

迭代开发 迭代设计

测试评估

增量设计

测试评估

版本间 增量发布

战略设计

测试评估

产品/项目

具体

抽象

用户体验要素与敏捷生命周期的关系

36

表现

框架

结构

范围

战略

设计

规划

测试

评估

用户故事

技术

实现

迭代开发 迭代设计

测试评估

增量设计

测试评估

版本间 增量发布

增量设计

测试评估

产品/项目

用户研究的上游是业务建模

37

中层关注流程：

中层关注流程：

中层关注流程：

高层查看报表

一线用户关心一件件具体的任务

用户A

用户B

以事实为基础，以假设为导向 从经验和假设出发快速确定研究框架 深⼊入了解⽤用户，逐步以事实取代假设

⽤用户研究需要持续进⾏行 不可能⼀一蹴⽽而就

什么是用户研究？

38

39

目标导向的活动模型

⺫⽬目标

任务

⼯工具 软件

40  

坑 (为了能栽花)

挖坑

挖坑⼯工具

我需要

我可以选择

例如：

41

云彩层

风筝层

海平面

游鱼层

蛤贝层

用户目标层

概要目标层

子功能目标层

•  相当于业务过程中的基本业务过程（EBP, Elementary Business Process），即：一人一时一地点

•  有最小的业务价值

•  用户在达到该目标后，是否可以高兴地离开？是否可以坐下来喝杯咖啡休息一下？

•  用户目标应通过一人、一次处理完成（2~20min）

目标的5个层次

42

刨根问底！

云彩层

风筝层

海平面

游鱼层

蛤贝层

有最小的业务价值

Why?

How?

版本规划

时间

必要功能

少量选项

更多选项

活动 1 活动 2 活动 3 活动 4

版本1

版本2

版本3

•  根据业务价值和用户活动，将密切相关的特征分组 •  按照重要程度和时间将任务排序，生成任务模型 •  第一个版本需要支持所有必要的活动，后续版本要逐步改善对活动的支持

任务

44

严格的结构化

45

相互独立，完全穷尽 MECE：Mutually Exclusive ,Collectively Exhaustive

• 无重复、无缺失、结构条理 • 横向到边、纵向到底、粒度分层 • 用最高的条理化和最大的完善度理清思路

任务分解—界面内容&操作

•  此时只提取界面中的内容&操作，不考虑具体的界面实现方式。

46

[案例]DVD租赁-­‐-­‐线框图1

47

高优先级 低优先级 电影海报  显示DVD封面，帮助用户确认自己看到的是正确的页面  

电影名称及描述  显示电影名称、上映年份、内容简介、

主演、导演及美国电影协会的评级。从每位主演和导演的姓名都可以链接到他的简介。关键是要帮助用户决定他们是否将它加入队列。如果这个电影有预告片，那么设置一个预告片链接。先让用户预览页面（3.1），如果用户注册“好

友”功能，那么就要显示“介绍朋友”链接，并链到交友页面（4.5）。  

加入租赁队列  要有加入队列的按钮。如果电影已经在队列中，显示“已在队列中”按钮，一

旦点击，用户将进入推荐内容页面。  

电影信息  框中显示关于电影的信息，包括流派、语言、DVD花絮等。由电影信息指南了解

更多细节信息。  

用户支持  显示平均用户支持率，或者显示用户的评分（如果有的话）。如果单击，就可更新用户的支持率。也允许用户表明他

们对该电影并不感兴趣，那么你就应该将该数据从推荐算法体系中去除。

推荐导航  链接到“概览”、“专家评论”、“会员评论”、“同样喜欢该片的会员”。点击任何一个链接，都会载入相应页面，见线框图1.2.1-­‐1.2.3。  

推荐理由  显示推荐算法得出的结果，电影名称可以链接到相应的电影页面，并允许用户修改所选电影的支持率。  

好友推荐  如果用户注册了好友功能，那就要显示内

容指南中所描述的好友推荐。另外，也要在内容指南中显示促销信息。  

用户评论  先列出前3个“最有帮助”的评论，接下来显示3个最近评论。重叠现象不太可能出现，

因为最有帮助的评论只是暂时性的。评论的形式要遵循内容指南中描述的摘要模板，并要链接到写评论的页面（2.2）  

专家评论  列出专家评论，并带有星级、专家姓名、出版社名称，以及“更多”的链接。专家姓名和出版社名称链到专家页面（6.1），“更多”链接将用户带到专家简介中列出的第三方页面。

全局导航  标准的全局导航条。当观看电影时，浏览标签始终处于被选中状态。  

搜索框  标准搜索框。输入搜索关键字，点击

“搜索”，就可以将用户带到搜索结果页面。  

辅助性导航  标准辅助性导航，显示用户姓名，并链接到账户信息、购买电影和帮助页面。点击用户姓名时会显示一个菜单，包含

退出账户和加入租赁队列的选项。   目的：给用户足够的信息，以让他们决定是否要将一个电影加入到他们的租赁队列中。    

页码：1.2

页面：电影细节页面  

场景：用户已登录，还没有添加队列。  

作者：Dan  Brown

项目：NeVlix改版设计  

版本：2.2（2006.06.11）

[案例]DVD租赁-­‐-­‐线框图2

48

[案例]DVD租赁-­‐-­‐线框图2

49

完！