用户体验的要素—以用户为中心的Web设计
1.用户体验为什么如此重要
用户体验不但关注产品将被用来做什么，而且关注产品如何工作。
换一种说法是否更好：我们不但要了解产品被用来做什么，也要了解它如何工作，才能知道它是如何影响用户体验的
用户体验指“产品如何与外界发生联系并发挥作用”，也就是人们如何“接触”和“使用”它。
这种定义是否过于具象化，主要关注交互和行为的过程，而不包含感受、情绪、情感？
拥有更多的“产品特性”，只能保持短时间的竞争优势。随着功能不断膨胀，网站越来越复杂、笨重、难用，最后就失去了吸引力。仅有功能是不够的，必需用一种能够帮助人们理解和接受的方式呈现出来。
什么是用户体验？（太大，需要另外讨论）什么是好的用户体验？
好的体验是协调一致、直观明了、愉快的体验。成功的用户体验就是能事先知道用户的期望。
2.用户体验包含哪些要素
要考虑用户有可能采取的每一个行动的每一种可能性，并且去理解在这个过程的每一个步骤中用户的期望值。
如何考虑全面？如何估计期望值？
根据网页的双重性，划分为：
描述软件界面类型的网页，关注任务，操作被纳入一个过程，网站是工具；
作为超文本信息空间的网页，关注信息和信息的意义，网站是用户可以穿越的信息空间。
其实就是功能层面/表现和内容层面/表现？
表现层–surface 由图片、文字等组成的视觉呈现。视觉设计（Visual Design）
框架层–skeleton 内容的设计布局。信息设计（Information Design），促进理解的信息表达方式；软件–界面设计（Interface Design），安排好用户与系统功能产生互动的界面元素；信息空间–导航设计（Navigation Design），允许用户在信息架构中穿行。
结构层–structure 系统结构和导航，功能的组合方式。软件–交互设计，定义系统如何响应用户的请求；信息空间–信息架构，内容元素的分布。
范围层–scope 特性和功能。软件–创建功能规格（Functional Specification），对产品功能组合的详细描述；信息空间–内容需求（Content Requirement），对内容元素要求的详细描述。
战略层–strategy 经营者对网站的期望目标（Site Objective）；用户想从网站得到什么（User Need），他们想达到的目标将怎样满足他们所期待的其他目标。
每一层都是根据它下面那个层面来决定的。目标→功能/特性→架构/导航→交互→视觉。如此划分用户体验的要素，是站在供给方即网站和设计者的角度出发的。
3.战略层：网站目标和用户需求
战略应该是设计用户体验流程中的起点。回答“我们为什么要建这个网站？”网站失败最常见的原因，是没有人试图回答两个非常基本的问题：
我们要从这个网站得到什么？(Site Objective)
用户要从这个网站得到什么？(User Need)
Asking a question before solving it
网站目标需要有成功标准(Success Metric)，可追踪的指标。
如果想要用户喜欢并使用我们的产品，必须要了解“他们是谁”以及“他们的需求是什么”。
- who they are
- what they need
- what they like
如何确定用户需求？
用户细分（User Segmentation）:将用户划分为更小的群组，每一群用户都是由具有某些共同关键特征的用户组成。
维度是什么？哪些特征对我们而言是重要的？细分之后需要排定需求的优先级？
- 人口统计学（demographic）标准
- 心理描绘图（psychographic）
- 用户对技术和网页本身的观点：如每周花多少时间使用？喜欢跟计算机打交道吗？
- 用户对网站相关的知识：新手or熟手
- 用户的社会或专业角色，如学生、白领
当不同群体目标矛盾时：要么选择针对单一用户群设计，而排除其他用户群；要么为执行相同任务的不同用户群提供不同的方式。
可用性和用户研究
- 可用性：寻求使产品更容易使用的方法
- 用户研究：收集必要信息来认识用户是谁，然后才能知道用户需要什么。问卷、访谈、焦点小组，适于收集用户的普遍观点与感知；测试和现场调查，适于理解具体的用户行为，以及和网站的交互信息。
- 现场调查（Contextual Inquiry）：用于了解在日常生活情境中的用户行为。
- 任务分析（Task Analysis）：仔细地了解用户完成任务的精确步骤。认为每一个用户与网站的交互行为都发生在执行某一任务的环境中。
- 用户测试（User Testing）
- 卡片排序法（Card sorting）：用于探索用户如何分类或组织各种信息元素。帮助我们了解用户对网站信息的看法。
- 人物角色（Personas）：能够代表整个真实用户需求的虚构人物。从用户研究中提取出可成为样例的虚构人物。帮助我们更好地理解用户需求。
4.范围层：功能规格和内容需求
我们的现状：不停地增加产品的功能特性。有固定的工作流程，但是没有日程安排，没有里程碑，项目看不到尽头。因为根本就没有人知道这个项目的范围，又怎么能知道它应该在什么时候结束呢？
范围蠕变（scope creep）像滚雪球，每一个额外的要求看上去并没有增加太多的工作量，但当它们汇集到一起的时候，整个项目就会失去控制的膨胀，结束时间遥遥无期。
功能和内容
软件开发中，范围层确定的是功能需求或功能规格（functional specification）文档。功能需求是项目初期阶段的需求，描述系统应该做什么；功能规格是在末期的规格说明，描述系统真正完成了什么。内容需求的更新频率介于用户期望值和有效资源之间的一个合理的中间值。
5.结构层：交互设计与信息架构
####结构层定义
交互设计，关注于描述“可能的用户行为”，关注将影响用户执行和完成任务的选项，同时定义“系统如何配合与响应”这些用户行为，为用户设计结构化体验；信息架构，关注如何将信息表达给用户的选项，涉及多学科，包括组织管理、分类、顺序排列，内容呈现相关的学科。
两者都强调一个重点：确定各个将要呈现给用户的选项的模式和顺序。理解用户、用户的工作方式和思考方式。
####信息架构
信息架构把一个结构应用到设定好的“内容需求清单”，着重于设计组织分类和导航的结构，让用户可以高效率、有效地浏览。作用是指引、教育、通知、说服用户。
创建分类体系的方法：至上而下–从对网站目标与用户需求的理解进行结构设计；自下而上–从对内容和功能需求分析开始，逐渐构建能反映网站目标和用户需求的结构。
至上而下适合前期规划和设计，至下而上适合对已有网站进行总结梳理
####结构方法
信息架构的基本单位是节点（node）。常见的结构类型：
- 层级结构（hierarchical structure）/树状结构/中心辐射结构（hub-and-spoke structure）：父级/子级关系
- 矩阵结构（matrix structure）：允许用户在节点之间沿着两个或更多的“维度”移动。能帮助需求不同的用户。
- 自然结构（organic structures）：对探索一些列关系不明确或一直在演变的主题很适合。
- 线性结构（sequential structures）：顺序是关键。
6.框架层：界面设计、导航设计和信息设计
结构层定义了网站用什么方式来运行，是一个较大的架构和交互的设计；
框架层定义了用什么样的功能形式来实现，关注点几乎都在不同的页面和页面组件上。
界面设计（interface design）——框架和界面控件的设计，可交互元素的布局。【让用户真正接触具体功能，可以do sth】
导航设计（navigation design）——用于呈现信息的界面形式，引导用户移动的元素的安排。【让用户可感知网站的结构，可以go to somewhere】
信息设计（information design）——呈现有效的信息沟通，考虑传达给用户的信息要素的排布。【传达想法给用户，用户可以know sth】
对设计者而言，IA是结构，导航是结构可视化。对用户而言，IA是隐性的，可感知；导航是显性的，可使用
| Designer | User | |
| IA | structure | invisible, feel |
| Nav. | structure visualization | visible, use |
####界面设计
让用户一眼就能看到最重要的东西。一个良好的界面是要组织好用户最常采用的行为，同时让这些界面元素用最容易的方式获取和使用。
如何确定哪些是用户最常采用的行为？
设计网页界面完全就是做这样一些事：为用户想完成的任务选择正确的界面元素，通过一种能迅速理解和易于使用的方式，把他们放置到页面上去。
“哪个功能应该在那些页面上完成”，是结构层的交互设计的主要工作；“这些功能在页面上如何被实现”，则是界面设计范围内的事。
####导航设计
目标：①提供用户一种在网站间跳转的方法；②传达元素和他们所包含内容之间的关系；③传达内容和当前浏览页面之间的关系。
Navigation System
- 全局导航global navigation，提供了覆盖整个网站的通路。
- 局部导航loval navigation，提供在这个架构中到“附近地点”（父级、兄弟级、子级）的通路。
- 辅助导航supplementary navigation，提供全局导航或局部导航不能快速到达的相关内容的快捷途径。
- 上下文导航contextual navigation/inline navigation，嵌入页面自身内容的一种导航。
- 友好导航courtesy navigation，作为一种便利途径来使用，如联系信息、反馈表单和法律声明等。
- 远程导航remote navigation，如网站地图（通常不会显示超过两个层级的导航）和索引表。
####信息设计
用一种能反映用户的思路和支持他们完成任务和目标的方式来分类和排列信息元素。信息设计和导航设计结合到一起，执行的是一个重要的功能——指示标识（wayfinding）。帮助用户很快的得到一个心理图像，在哪儿，能去哪儿，哪条路离目标更近。
####线框图
线框图是整合在结构层的全部三种要素的方法：通过安排和选择界面元素来整合界面设计；通过识别和定义核心导航系统来整合导航设计；通过放置和排列信息组成部分的优先级来整合信息设计。
7.表现层：视觉设计
设计应该强化结构，使用户可用的选项清楚明了。
评估视觉设计简单方法：视线首先落在什么地方？那个设计要素第一时间吸引了注意力？它们对于战略目标是很重要的吗？用户第一时间注意到的与他们的目标是背道而驰的吗？
表现层需要考虑对比和一致性，配色方案和排版(color palette，typography)，设计和成品和风格指南。
8.要素的应用
改善用户体验其实就是大量收集亟待解决的非常细微的问题，思考清楚这些问题到底属于哪个层次，它的改变对其上层、下层会有哪些连锁反应。
创建任何一种用户体验的挑战是**“比用户自己更准确的理解他们的需求”**。
by 00
Jesse James Garrett提出用户体验要素已有10年之久了，这个模型逻辑清晰，简单易理解，为我们提供了一个思考的框架，在用户体验概念与产品设计的实践之间架起了桥梁。
下面是JJG在今年UX London接受访谈时回顾 The elements of user experience 的一段话：
It’s been a decade since you released the Elements of User Experience diagram. What’s it like looking back on it now, and would you change anything?
Jesse James Garrett: There really isn’t much in Elements I’ve felt the need to change. Everything there is still important. I’ve been surprised by the durability of the Elements model, because I created it to solve a problem that seemed to be particular to that moment in the evolution of the field. Everybody had to explain everything about UX, because the practice was so new. What I didn’t count on was that ten years later, there would still be so many people to educate!But even among experienced practitioners, I think it’s been a valuable touchstone, to establish a common frame of reference for discussions about our work. I love the various riffs on Elements people have put out over the years, from George Olsen in 2003 to Richard Dalton in 2007 to David Sherwin in 2010. Some people have thought I’d be upset by what they’ve done, but it’s actually really gratifying to see people pick it up and do their own thing with it. It’s a tool, it’s no good if it’s not useful to you, so you should reshape it to your purposes.
更多的访谈内容，请围观这里。
