狠狠撸

如何提升网站的用户体验
主讲人：微码颜江涛
2010-11-12

目录
2
第一部分：解读用户体验
第二部分：如何进行用户体验设计
第三部分：用户体验设计的实施
什么是用户体验
为什么要用户体验
用户体验如何体现
用户体验优劣举例
用户体验设计的模型
用户体验设计—战略层/范围层
用户体验设计—结构层/框架层/表现层
用户体验设计的分工/工具
用户体验设计的误区
用户体验设计的建议

第一部分：解读用户体验
3

名词解释：用户体验
? 用户体验（User Experience，简称UE）是用户在使用产物过程中建立
起来的一种纯主观感受。
? 在基于Web的系统方面，UE是一个相对较新的概念。
4
Donald Norman博士提出了“用户体
验”一词，他是一个认知科学的研究人
员，首次提出了以用户为中心设计的重
要性（用户的需求应该决定产物如何设
计）。

为什么要注重用户体验？
5
过去的设计
听客户（Client）？听用户（User）？

为什么要注重用户体验？
6
? 最起码的是要让产物有用，这个有用是指用户的需求。
? 其次是能用，所有的流程都走得通，没有致命的BUG。
? 然后是易用，操作起来很便利，这非常关键。
? 设计的下一个方向就是友好，关注用户的情感需求。
? 以上四者都做好了，就融会贯通上升到品牌。
? 记住你的用户
以用户为中心的设计（User-centered design）
——在开发产物的每一个步骤中，都要把用户列入考虑范围。
用户体验很重要，最大的理由是：它对你的用户很重要。

用户体验如何体现
用户
体验
内容
可用性
性能
功能
7
? 感官体验：呈现给用户视听上的体验，
强调舒适性。
? 交互体验：呈现给用户操作上的体验，
强调易用/可用性。
? 浏览体验：呈现给用户浏览上的体验，
强调吸引性。
? 情感体验：呈现给用户心理上的体验，
强调友好性。
? 信任体验：呈现给用户的信任体验，
强调可靠性。
能用
有用
友好
易用

?为用户设定清晰的目标，告诉用户产物能够完成什么事；
?提供及时反馈，让用户感觉到离目标还有多远；
?更高效率的设计，用户会希望能够更有效的使用产物；
?允许发现，让用户知道总有新的东西，避免枯燥感。
优秀的用户体验
8
任何在用户体验上所做的努力，目的都是为了提高效率，基本上以两种方式
体现出来：
① 帮助人们工作的更快；
② 减少他们犯错的几率。

优秀的用户体验
10
为用户设定清晰的目标，
告诉用户能够完成什么事
适时出现的提示或功能，用
得好，不但不会骚扰用户，
还是对用户的细致的关怀
（当未读邮件过多时，提示
删除历史邮件）

?经常访问中断、载入速度慢；
?破坏了原有用户的使用习惯；
?不易学习掌握；
?产物架构不够清晰；
?功能贫乏，不能满足用户更多需求；
?操作复杂；
?提示不及时，提示语气生硬，提示混乱。
糟糕的用户体验
11

第二部分：如何进行用户体验设计？
15

用户体验设计的核心
16
以用户为中心进行设计
（User Centered Design）

用户体验设计的模型
17——出自《用户体验的要素以用户为中心的Web设计》

用户体验设计——战略层
18
网站目标：商业需求，创新，或其他内部目标。
用户需求：网站外部目标，从美观/技术/心里角度等，从用户研究获取。
网站定位
?竞争产物分析
?行业领域调研
?优秀产物经验
?商业发展需求
用户研究
?用户行为特征分析
?细分用户群体
?创建人物角色
内容/方法
?用户调查/访谈记录
?用户定性和定量研究数据
?虚拟人物角色
?发展计划书
产出物

19
竞争对手分析
网站定位
行业发展趋势
商业需求分析

20
用户研究

用户体验设计——范围层
21
功能说明：“功能说明书”，详细的描述网站满足用户需求所需要的功能。
内容需求：为符合用户需求进行网站内容定位。
功能说明
内容说明
?梳理网站需求
?撰写网站需求说明书
内容/方法
?网站功能列表
?PRD（产物需求说明书）
产出物

用户体验设计——范围层
22
PRD（产物需求说明书）网站功能列表

用户体验设计——结构层
23
信息架构：设计整个信息空间的架构，方便用户能够浏览网站内容。
交互设计：设计操作流程，方便用户完成任务，定义用户和网站的交互操作。
信息架构
?用Mindmanager软件梳理网站
信息架构
交互设计
?用Visio软件绘制用户操作流程图
?用Axure RP软件制作网站交互流
程原型
内容/方法
?流程图
?Prototype（低保真原型）
?网站信息架构图
产出物

24网站信息架构图
流程图
交互原型

25
原型（ prototype ），又名线框图，顾名思义就是产物的原始模型，它是依
据抽象的概念界定和功能模式制作出的产物的最初轮廓。
它可以将抽象的产物原始概念和枯燥无味的产物文字叙述可视化，使评估人员对
被评估对象有非常感性、非常直观的认识。
快速原型的目的：
1. 快速且低成本地获得反馈 (Get feedback earlier, cheaper )
2. 在多种可能中对比试验 (Experiment with alternatives )
3. 轻松修改或者放弃设计 (Easier to change or throw away )

26
低保真纸质原型低保真网页原型

27
是对产物较简单的模拟，它基本停留在产物的
外部特征和功能构架上，可以通过简单的设计
工具迅速制作出来，用于表现最初的设计概念
和思路。
它通常被用于设计过程初期的需求
收集和分析，简单的产物原型可以
作为设计开发人员与用户的沟通载
体，帮助用户表达其对产物的期望
和要求，但通常不能实现与用户的
互动。
适用场合及目的低保真原型

用户体验设计——框架层
28
界面设计：设计合理的信息展示方式，方便用户理解。
导航设计：界面元素的设计，方便用户浏览信息。
界面设计
导航设计
?用Axure RP软件设计单个页面的
页面布局及页面之间的交互。
内容/方法
?Prototype（高保真原型）
产出物

29
高保真页面原型

30
高保真原型设计是高功能性、高互
动性的原型设计，它可以忠实展示产
品/界面主要或全部的功能和工作流程
，具有完全的互动性，使用户可以像
使用真实产物一样完成各种任务。
高保真产物原型的开发通常要消耗
大量的时间和精力，它往往被用于
需求分析之后的细节设计和使用性
评估来发现产物在互动性和工作流
程方面的使用性问题。
适用场合及目的
低保真与高保真的区别

用户体验设计——表现层
32
视觉设计：对文本、图形网页元素以及导航的图解，但又不只是”美化”那么简
单，这里还会包括很多品牌气质的塑造。其目的是要传递一种信息，是让产物产
生一种吸引力。

第三部分：用户体验设计的实施
33

用户体验设计的分工
34
需求功能定义交互设计视觉设计 DEMO
UE设计师（原型）
实现
PM OR TEAMLEADER 软件工程师
前端设计师（前端代码）
UI设计师（视觉）

用户体验设计的工具
35
Axure RP
快速原型制作软件 - 线框
图，原型，规格文档
Visio 2007
绘制流程图等多种绘图工
具，使用Web控件模板同
样可以绘制Web原型
Visio2007
Mind Manager
思维导图软件，用于思维
发散，需求整理
Snagit 10
强大的截图编辑软件，方
便在图形上绘制箭头，添
加注释说明等
Snagit

Axure RP——快速原型工具
36
Axure RP网站快速原型工具，可以快速的验证需求，并向开发团队清晰表达设计要求。
作为一款绝佳利器，它在产物的策划与原型设计阶段的优势是无可替代的。

用户体验设计的误区
37
认为UE设计不太重要，又很浪费钱
认为用户界面不过就是“字体和颜色”
其实用户界面包含一些深层次的问题，例
如用户学习使用产物的时候是否感到费力、
产物功能是否能够满足用户的目标，用户
完成任务的效率如何
认为在没有足够资源的情况下可以放
弃UE设计
一个没有有效UE设计界面的产物就像一
个没有窗户和门的仓库：货物就在里面，
但没有人能够拿到
认为UE设计只是凭空生成的灵感体现
UE设计工作是一种工程性的工作。以科学
为基础，需要明确的要求，要考虑候选设
计方案，同时它还有限制条件，需要综合
考虑，还需要测试、评估和修正
UE设计可以承担一些传统上分配给设计师
和工程师的任务来缩短时间，有可能节约
在必要解决用户问题而修正时花费的时间。

用户体验设计的建议
38
预算限制的项目（Project With “OK” Budgets）
小公司没有额外的资源来雇佣专业的UE设计师来进行UE设计，比起招聘一个全职的
UE设计师，训练现有雇员（尤其是Web设计师、产物策划、项目经理）学习UE设计
的原则和方法，或则是直接外包必须的UE工作可能更加的合适。在软件或服务的最初
版本提供一个强壮的用户体验可以在同类产物中跳出来获得用户的青睐。
较长时限的项目（Project With Longer Timeframes）
简单逻辑来看，给传统的网站增加一个环节将增加其开发的时间，时间必须分配给UE
设计一部分。但是UE设计师理论上可以承担一些传统上分配给Web设计师和工程师的
任务来缩短时间，有可能节约在必要解决用户问题而修正时花费的时间。
用户体验设计关键是态度
用户体验的提升需要全员参与，而不是某一个部门的事情，用户体验最关键的还是态
度，这和做人一样，多替他人着想你会变成一个好人，多替用户着想你的产物就会变
成好的产物。

推荐优秀站点
淘宝网（http://www.taobao.com/）
支付宝（https://www.alipay.com/）
Amazon（ http://www.amazon.com/）
Google（ http://www.google.com/）
豆瓣（ http://www.douban.com/）
人人网（ http://www.renren.com/）
白社会（ http://bai.sohu.com/）
Yahoo ( http://www.yahoo.com/ )

推荐优秀UE博客
41
淘宝UED （http://ued.taobao.com/blog/）
搜狐UED （http://ued.sohu.com/）
腾讯UED （ http://cdc.tencent.com/）
网易UED （ http://www.ued163.com/）
支付宝UED （ http://ued.alipay.com/）
百度泛用户体验（ http://www.baiduux.com/blog/）
UCD团队博客（ http://ucdchina.com/）

42
Thanks For Listening!
END
MSN：tony_yan2010@live.cn

狠狠撸

如何提升网站的用户体验

Convert to study guideBETA

More Related Content

如何提升网站的用户体验

Editor's Notes