《用户体验要素》的分解重构

《用户体验要素》一书基本是所有产品人书单里都会有的一本。我第一次知道这本书是在深入浅出课程中听蚊子老师讲用户体验的时候。相信大家对这本书印象最深的就是下面这张图了。


如果大家有看作者的第一版前言的话,里面作者提到了这张在用户体验领域广为流传的结构图的由来。这其实也是作者在经过长年累月浸淫在用户体验的积累之后的灵光一闪,他及时地记录了下来,并且分享了出来。每个人总有灵光一闪而过的时候,抓住了,也许就能在原本的境界上更进一步,错过了,也许就再也找不回那一刹那的感觉了。这也是为什么产品人要持续记录自己的所思所想的原因,短期内也许没有明显的区别,但长此以往的坚持,总有厚积薄发的时候。

虽然这张图本身结构非常清晰简洁,但这本书的整体行文,有些地方还是存在条理不清的情况。本书因为成书较早,手机端的发展还不是很成熟,内容基本都是围绕网站来描写的,但这只是表现层的区别,内在的工作流程与设计思路还是相通的。

作者在前言中也说道,这本书不是告诉你答案的,而是说的“如何提出正确的问题”。接下来我会从每一层要问自己什么问题,基本的工作流程,以及输出物,三方面来对本书进行分解重构。


战略层

首先要问自己:

我们为什么要开发这个产品?

这就又引出了两个问题:

我们要通过这个产品得到什么?

回答了这个问题,我们就可以据此描述出企业的产品目标(product objectives),即来自内部的目标,比如先赚它一个亿。

我们的用户要通过这个产品得到什么?

回答了这个问题,我们就可以据此描述出产品的用户需求(user needs),即来自外部的目标,比如从地铁站到我家要走个15分钟,不太乐意天天这么走,骑自己的自行车嘛要么怕偷,要么不想付停车费,于是有了共享单车的市场。

此处的关键词是明确(explicit),当我们能越清楚地表达我们想要什么,以及确切地知道其他人想要从我们这里得到什么时,我们就能越精确地满足双方的需求。

工作流程

1.确定产品目标

其中就有商业目标、品牌形象等等,注意这里要设置一些成功地标准,即一些可追踪的指标,在产品上线以后用来显示它是否满足了我们自己的目标和用户的需求。比如投资回报率ROI达到20%,或者用户转化率达到30%等等。

2.调研用户需求

用户细分

通过运用人口统计学、消费心态档案等等方法,我们可以把大量的用户需求分成几个可管理的部分,这就是用户细分。而这一步我们的目标就是得到和你发现的“用户需求数目”一样多的细分用户群。

不要试图设计一个适合所有人使用的产品,那样往往谁都不会来使用。

可用性和用户研究

上一步我们得到了我们产品的用户群,这一步我们通过问卷调查、焦点小组、人物分析等等方法收集必要的信息来了解用户到底是谁。

创建人物角色

上一步我们通过各种分析研究抽象出来产品用户的一些特征,将特征组合起来创建出一个虚构人物来代表用户,这就是人物角色,有时也称做用户角色卡片、人物模型等等。下图就是一个例子:


我们可以把人物角色打印出来,贴在墙上或者任何你一抬头就能看见的地方,要对产品做什么决定的时候就想想你创建的用户角色会不会喜欢这个决定。

3.创建战略文档

接下来我们就要把上述的那些结论记录在一个正式的文档中,其中不仅仅是列出目标清单,它提供不同目标之间的关系分析,并且说明这些目标要如何融入更大的企业环境中去。撰写时文档不是越多越好,应该简洁明了并切中要点。

它可以叫战略文档或者愿景文档,产品人不用拘泥于形式,不同公司有不同的叫法,只要有那么一个文档,可以让你在迷惑下一步怎么走时,回到出发点来重新审视整个产品就行。

输出物:

1.人物角色

能帮助我们前进每一步都时时记着用户。

2.战略文档

成功的用户体验,其基础是一个被明确表达的“战略”。


范围层

首先要问自己:

我们要开发的是什么?

回答这个问题就要求我们定义出产品边界产品生命周期

产品边界明确了这个项目中要完成的全部工作。

产品的生命周期让我们知道现在在做的是什么,哪些可以放到下一个版本再做。当前难以满足的需求,可以成为启动下一个版本的基础,这样就能形成一个不断循环的开发过程。

工作流程:

这一部分作者根据产品性质的不同将其分成了两部分:

功能型产品比如摩拜单车、滴滴打车等等要考虑的是功能需求;

信息型产品比如知乎、简书等等要考虑的是内容需求。

其实现在很多产品都很难把它界定成其中的一种,但这样区分可以让工作变得更有条理,即使是复合型的产品,也可以从这两个角度分别定义需求。

1.定义功能需求

哪些应该被当成产品的“功能”以及相应的组合。

比如摩拜单车,用户不需要能在手机上看到哪里有车吧,所以需要GPS定位功能;用户用完车得付给摩拜钱吧,所以得接入第三方支付等等。

2.定义内容需求

首先要定义出所有不同类型的内容,比如文本、图像、音频等等。

然后是内容的特性规模,比如文本字数、图片像素等等。元素大小的不同限制对于后台资源的消耗影响是巨大的。

最后还有更新频率,这应该来自于你产品的战略目标。比如,从你创建的人物角色来看,他们希望产品多久更新一次信息?以前很多的信息型产品,内容都是由站方提供,那时候的更新频率考验的是企业内部的人力资源,而现在内容开始由用户自己创造,所以现在考验的是运营能够吸引多少的活跃用户来产出内容。

3.确定需求优先级

评估需求的可行性,从技术、资源、时间等多方面综合考虑。任何不符合当前项目的战略目标的特性建议,都要通过范围定义将其排除出去。

当你把用户需求和产品目标转变成产品应该提供给用户什么样的内容和功能时,战略就变成了范围。


结构层

在这一层,我们要将关注点从抽象的决策层面,转移到更具体的因素上。将之前分析出的片段,创建一个概念结构出来。

工作流程:

1.交互设计

交互设计关注于描述“可能的用户行为”,并定义“系统如何配合与响应”这些用户行为。

用户对于“交互组件将怎样工作”的观点称为概念模型(conceptual model)。概念模型是用于在交互设计的开发过程中保持使用方式的一致性的。

比如一些阅读软件的书架页面会把背景设计成一个木书架,小说以书的视觉样式呈现在书架背景上,用户自然就知道点书就可以直接看。用户在使用产品的时候,基本上是凭直觉和习惯的,这就是选择了一种与用户直觉、习惯相符的概念模型。

2.信息架构

信息架构关注的就是呈现给用户的信息是否合理并具有意义

在以内容为主的产品上,信息架构主要的工作是设计组织分类和导航的结构,让用户可以高效率、有效地浏览网站的内容。

其中有可以通过创建分类体系、导航结构、组织原则来结构化产品信息。比如下面两张图的导航栏设计就能显著提高用户找到自己想要的信息的效率。而且在不同的层级选择的组织原则也不一样。在较高层级选择通过内容的类型来分类(用户、话题、专栏、live等),而在较低层级选择内容的主题来分类(影视娱乐、心理学、互联网等)。

输出物:

1.概念模型

2.信息架构图

视觉化地呈现结构,对我们而言,这是表述“分支、群组、组件之间的联系”的一种最高效的方式。

架构图最重要的是记录概念关系:哪些类别需要放一起,而哪些需要保持独立?在交互过程中那些步骤要怎样相互配合?


结构层设计用户如何到达某个页面,并且在他们做完事情之后能去什么地方,确定哪些类别应该出现在那里。


框架层

按钮、控件、照片和文本区域的位置。框架层确定了在页面上交互元素的位置,定义了导航条上各元素的排列方式,以达到最大的使用效果和效率。

工作流程:

1.界面设计

如果这涉及提供给用户做某些事的能力,则属于“界面设计”。通过具体的交互控件,来实现“在结构层的交互设计中”确定的“具体功能”。

这个阶段的目标就是组织好用户最常采用的行为,并且让界面元素用最容易的方式获取和使用。比如,IPhone经过这么多年的打磨,早已经形成了一套可供开发者调用的原生控件,用户也早已养成了使用习惯。因此除非你确定有更好的办法,不然不要为了创新而去改变用户的使用习惯。

2.导航设计

导航设计需要清晰地告诉用户“他们在哪儿”以及“他们能去哪儿”,因此细分出三个目标:

提供给用户一种在产品页面间跳转的方法;

传达出这些元素和它们所包含内容之间的关系;

传达出内容和用户当前浏览页面之间的关系。

下图是建行app的主页,这种圆盘形的导航方式并不如它宣称的便捷,与用户的使用习惯相悖,效率也不如传统的导航栏高,我也没有发现这种布局与建行之间存在什么重要的联系。这就不是一个成功的导航设计。


建行app主页

3.信息设计

信息设计有时是考虑怎么讲内容呈现给用户看,有时是考虑怎样把信息更有效地分类与整理。

不管是哪种,核心都是要按照用户预期的方式,让用户完成自己想干的事

输出物:

线框图

线框图(wire frame)是对一个页面中所有的组成部分以及它们如何结合到一起的、最直观的描述。

线框图重要的不是死扣细节,而是表达出应该有的关系。通过安排和选择界面元素来整合界面设计;通过识别和定义核心导航系统来整合导航设计;通过放置和排列信息组成部分的优先级来整合信息设计。


线框图

在结构层,我们看到一个较大的架构和交互的设计;在框架层,我们的关注点几乎全部在独立的组件以及它们之间的相互关系上。


表现层

在这里,我们看到的就应该是一系列的页面,由图片、文字、视频等等具体的视觉元素组成。

工作流程:

感知设计

原本表现层的设计主要就是视觉设计。得益于振动设备,基于屏幕交互的产品也开始有了触觉体验了。手机和手持游戏设备都可以通过振动来与用户互动。不同的提示音不仅可以用来通知用户,还可以使产品变得更具个性,比如qq的各种提示音。

通过排版、配色、对比、模板等等,将之前设计的一系列元素,用更加美观的方式呈现给用户。

输出物:

1.高保真原型

它就是从已选定的组件中建立起来的、一个最终的可视化产品。


高保真原型图

2.风格指南

这个汇总文档确定了视觉设计的每个方面,从最大到最小的范围内的所有元素。

风格指南的总体目标是提供足够的细节来帮助人们将来做出明智的决策。

在框架层,我们主要解决放置的事情。在表现层解决并弥补“产品框架层的逻辑排布”的感知呈现问题。


最后是干货分享时间:

《用户体验要素》思维导图:

链接:http://pan.baidu.com/s/1nvPpLrj 密码:o677

读书笔记链接,戳我戳我

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354

推荐阅读更多精彩内容