《用户体验要素》这本书,按照产品的整个生命过程,清晰展示了关于用户体验的五个要素。
从用户体验出发,产品设计五要素分别是:战略层、范围层、结构层、框架层、表现层。
首先是产品设计五要素的整体框架图:
五要素解读:
为做出一款产品,我们依据Why-How-What黄金圈法则,从内到外将问题拆分为一下3类:
1. 为什么做?—— “我们为什么要开发这个产品?”(战略层)
我们的产品目标是什么?我们的目标用户是谁?我们为用户解决什么问题(需求)?
2. 做什么?—— “我们要开发的是什么?”(范围层)
我们的产品定位是什么?功能型产品,还是内容型产品?相应地应该拥有哪些功能和内容?
3. 怎么做?——“我们如何达到上述抽象层面所确定的问题?”(结构层、框架层、表现层)
我们的产品具体做成什么样子?要如何呈现给用户?
可以看到,从前两层到后三层,我们的关注点从抽象的决策和范围问题,转移到更能影响最终用户体验的具体因素上,下面分别具体介绍这五个体验要素。
(一) 战略层
成功的用户体验,其基础是一个被明确表达的“战略”。知道企业和用户双方对产品的目标和期许,有助于促进各方面战略的确立和制定。
这一层我们要回答两个问题:
- 我们要通过这个产品得到什么?
- 我们的用户要通过这个产品得到什么?
相对应的,我们就要确定企业的产品目标和用户需求。
(1)产品目标
比如说,替公司赚钱或是省钱;用户量积累到什么级别;还有王健林的那句“比方说我先挣它一个亿”。当然,产品目标的确立应该要建立在了解其影响力的基础上。
一个基础目标就是品牌识别:
- 一方面,是较为浅层的视觉设计,即:商标、色调和字体设计。
- 另一方面,更深层的,是用户在与产品交互时,(有意或无意)刻印在用户脑海中关于企业的品牌形象。
为了衡量产品目标是否实现,也需要设立一些成功标准:
- 好的标准,既能够与用户行为绑定,又能通过某些设计影响用户行为。
(2)用户需求
比如说,淘宝的购物车功能,用户希望可以与亲朋好友共享购物车的商品,就是一个用户需求。
研究用户需求要关注用户群体的差异性,明确人群是谁和他们的对应需求是什么,警惕“我们即用户”的思维误区。
这里我们只简单列出一些可以进行用户研究的方法:
1.市场调研方法:如问卷调查、焦点小组等,用来收集用户普遍观点和感知
2.现场调查:了解日常生活情景中的用户行为
3.用户测试:用来测试(低/高)保真原型,观察用户反应
经过研究后,进行用户细分,将用户划分成较小的、有共同需求的小组。对于典型用户,通过创建用户画像,即:将代表用户真实需求的虚拟人物,与人物照片、个人资料、以及用户需求等关联。
(二) 范围层
当把产品目标和用户需求转变为产品应该提供给用户什么样的功能或内容时,战略就变成了范围。
范围层的意义在于:为产品设立边界,让参与者更能明白做出来的产品是什么样的,也避免给产品不断加入新功能,造成产品冗余。要知道,增加需求可比克制需求要容易的多。
这一层,我们要回答:我们要开发什么?
(1)功能型产品
(2)功能型产品
- 以功能型产品来说:做什么功能?不做什么功能?哪些功能先做?哪些功能可以放在后续版本迭代时再做?
- 针对内容型产品,也有类似的要求。
这时就牵扯到,当功能太多时,确立需求优先级的问题。这时,可以利用战略层的用户画像可以将虚拟人物放到一个故事中,确定用户的使用场景。
(三) 结构层
在定义好用户需求并排列好优先级之后,我们对最终产品会拥有什么特性已经有了清楚的图像。但是,这些需求如何将分散的片段组成一个整体,就是结构层的问题,即:确定概念结构。
这部分包括两方面:“交互设计”和“信息架构”
(1)交互设计考虑的是跳转逻辑,即:针对用户操作,产品要怎样反应来配合用户操作。
这里就设计及到一个“概念模型”的概念,就是说:将产品的某个特性处理成用户熟悉的概念。如:电商中购物车的概念模型就来自于超市的购物车,对应可以给它“放东西、拿东西出来”,电商中的购物车也就拥有“添加商品、从购物车删除”这样的形式。
这里要注意两方面的问题:
- 不用将概念模型明确传达给用户,譬如:网站想向真实杂志那样,设置“翻页”界面。
- 不要轻易打破用户默认的思维习惯,譬如: 微博发送新内容的“添加”按钮从页面最下菜单栏的中间,切换到首页的右上角。
(2)信息架构考虑的是内容的分类组织方式,让用户能够高效、有效地游览内容。
这里涉及到结构化内容,可以把一个个产品内容当做一个节点node,然后将这些节点有序的组织起来。
具体的结构方式有:层级结构、矩阵结构、自然结构、线型结构等,我们可以根据自己的产品特点来进行针对性的设计。
(四) 框架层
在框架层,确定详细的界面外观、导航和信息设计。
(1)界面设计:为用户提供“做某事”的能力,即实现确定的“具体功能”。
对可交互控件选择合适的位置布局,这些控件能够让用户容易理解和接受,从而帮助他完成任务。
(2)导航设计:为用户提供“去某个地方的能力”。
简单来说,就是帮用户找到方向感。《Dno't Make Me Think》一书中,Steve Krug 拿用户在购物商场依据商场导航系统寻找商品的一系列体验流程做类比;但另一方面,网络不同于物理空间,在网络中,用户本身就是“迷路的”。因此,我们要通过导航设计,具体化网站的层次结构,来弥补用户缺失的空间感,营造出“位置”的感觉。
导航有明显的两个用途:帮助我们找到想要的任何东西,告诉我们现在身在何处。
- 除此之外,它还有以下功能:
1. 告诉我们这里有什么,即:通过让层次结构可视化,实现导航体现内容
2. 告诉我们如何使用网站,即:良好的导航机制会告诉你,从哪里开始,你能进行哪些选择
3. 它给了我们对于网站建造者的心,即:规划的当的导航会给用户留下好印象
(3)信息设计:考虑的是如何把设计元素粘合到一起,为用户呈现出有效的信息沟通。
页面布局是将信息设计、导航设计和界面设计放置到一起,形成一个统一架构的地方。使用线框图是对一个页面所有组成部分、以及它们如何组合到一起、最直观的描述。
线框图和原型的区别:
线框图
是产品设计的低保真呈现方式。它有三个简单直接而明确的目标:
- 呈现主体信息群
- 勾勒出结构和布局
- 用户交互界面的主视觉和描述
线框的视觉特性:通常只需要使用线条、方框和灰阶色彩填充(不同灰阶标明不同层次)就可以完成。
原型
制作原型的目标非常明确:
原型必须是可交互的,并且尽可能贴合最终用户界面的高保真模型。按钮被按下时,相应的操作必须被执行,对应页面也必须出现,尽可能地完整模仿产品体验。
原型的视觉特征:
(五) 框架层
是最贴近用户的层次,关注感知设计,即:感知呈现问题,满足用户的感官(视觉)感受。