ux学习之路:《用户体验的要素》

我们的目标是:user-centered!


战略层:关注点都是一样的——user need用户需求与product objective产品目标。

在我们开始写第一行程序、画第一个像素之前,我们首先要弄明白两个问题的答案:

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

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

大部分产品失败的原因就是因为在还没有明确这两个问题的答案之前就操之过急。历史一次又一次地告诉我们,速度太快是要出问题的。无论是六十年前的人民运动,还是二十年前什么都是“第一个”的雅虎。

Explicit!

产品目标必须能够通过口头表达出来,否则一千个哈姆雷特会做出一千种不一样的东西。

品牌识别brand identity

品牌形象是在无意之中形成的,而且是在产品设计者精心安排下的结果,这使得品牌无法不被用户所注意。品牌形象不只是视觉上的表现,如商标、色调和字体设计之类的,更是概念系统或情绪反应之类。

成功目标

一些可追踪的目标,能够帮我们判定项目各阶段的决策该如何筹划,衡量用户体验工作是否取得了预想的成果。

印象数和转化率

用户需求

用户细分

       人口统计学(demographic):性别、年龄、教育水平、婚姻状况、收入等。

       消费心态档案(psycho graphic profile):人们对产品有关的事物的观点。

可用性和用户研究

       现场调查:用户行为的调研。

       任务分析:具体流程的跟踪。

       用户测试:请用户测试产品。

              卡片排序法:给用户一沓索引卡片,每一张卡片附有信息元素的名字、描述,一张图像或内容的类型。然后用户根据小组或类别,依照自己感到最自然的方式将卡片排列出来。

创建人物角色:创建若干符合用户人群的代表角色,在设计产品时,始终想着:如果是xxx的话,ta会希望这样吗?

决策

在拟定决策时有一群人经常被忽略——普通员工。

战略文档应该让所有参与者知晓。


范围层:功能规格。

在范围层,我们从战略层面的抽象问题:“我们为什么要开发这个产品?”转为“我们要开发的是什么?”

范围蠕动(scope creep):每一个额外的要求看上去没有增加太多工作量,但它们越滚越大冲向山脚,你的整个项目就会失去控制地膨胀,结束时间遥遥无期。

内容管理系统(Content Management System, CMS): CMS的必备功能取决于你将要管理的内容的性质。内容元素是否要根据每一个用户的喜好或访问终端来动态组合?如果要,那么CMS就必须要能完成这一类高级别的复杂输出。

具有讽刺意味的是,那些很少去想象产品新方向的人,恰恰是参与创建和设计产品最深入的人。当你把所有的时间都投入到维持现有产品时,你经常会忘掉哪些是真正的限制条件,而哪些是为了简化产品而曾经做过的选择。出于这个原因,汇集企业各个部门的成员或不同类型的用户代表来进行头脑风暴会议,是一种打开设计者思路、让他们考虑以前从未想到的可能性的、非常有效的工具。

specific具体:量化地定义一些功能来避免主观性。

内容性:应该提供每一个特性规模的大致预估:文本的字数、图片的像素大小、下载的文件字节等元素的大小等。

留意那些看上去有可能需要改变战略的特性建议,它们在制定愿景文档期间并不明显。但是任何不符合当前项目的战略目标的特性建议,都要通过范围定义将其排除出去。

但是如果有这样一个特性,它不在项目范围内,也超越了任何一个限制条件,但听起来像一个不错的想法,那么此时你可能要重新审视某些战略目标。


结构层:交互设计(功能型产品)or信息架构(信息型产品)

与其针对机器的最佳工作方式来设计系统,还不如设计一个对用户而言最好的系统。

任何一个交互设计都要牵涉处理“用户错误”。第一个防止错误的方法,是将系统设计成绝对不可能犯错的那种;第二个避免错误的方法就是使错误难以发生,而在错误发生之后,系统应该帮用户自动改正错误——但是千万不能向word那样过度修正。

结构化内容:

信息架构需要创建分类体系,我们可以使用以下两种方式来建立分类体系:从上到下或从下到上。

从上到下(top-down):从产品目标和用户需求开始进行结构设计。从广泛到细节,然后对号入座。缺陷:可能导致重要细节被忽略。

从下到上(bottom-up):根据对“内容和功能需求的分析”而来。将网站发布后存在的资料放到最低级别,然后将它们归纳到更高的级别中,从而逐渐构建出能反映我们产品目标和用户需求的结构。缺陷:可能导致框架太过精细,缺乏灵活度。

有些人喜欢以“用户到达某一地点的点击数”作为衡量网站结构质量的指标,然而,结构质量最重要的标准,不是“整个过程一共需要多少步骤”,而是“用户认为每一个步骤都是合理的”,并且“当前步骤是自然地延续了上一个步骤中的任务”。

网站需要持续的维护,但是满足新的需求不应该导致重新考虑网站的整体结构。一个高效结构的有点就是具备“容纳成长和适应变动”的能力。

受控词典:具有一致性的用户语言。创造并遵守一个反映了用户语言的受控词典是防止企业内部的专用术语侵入网站的最佳方法,那些专用术语只会让你的用户感到confused。

类词词典:与简单列出所使用词汇的清单不同,类词词典会提供常用的、但未纳入该网站标准用于的词汇以供选择。在类词词典中,可以添加内部专用术语、俚语或缩写词等。此外,类词词典还可能包含词汇之间的类型关系,提供更广义、狭义或相关词汇的建议。

使用受控词典和类词词典对于建立包含元数据(metadata)的系统特别有用。将搜索引擎与类词词典连接起来,再加上元数据,就能让搜索引擎变得更聪明。搜索引擎使用类词词典来区分“禁用词”与“首选词”;接着从元数据中查找“首选词”。与搜索结果为零相反的是,用户在得到高精准、高相关的搜索结果的同时,甚至还能获得一些用户可能感兴趣的相关主题的推荐。

架构图(architecture diagram):记录概念关系:哪些类别需要放在一起,而哪些需要保持独立?在交互过程中哪些步骤要怎么相互配合?

作者创造了一个名叫“视觉辞典(visual vocabulary)”的工具,用以图解网站结构。详见http://www.jjg.net/ia/visvocab/chinese.html#page


框架层:信息设计,界面设计(功能型)——人机互动,导航设计(信息型)——屏幕上元素的组合

界面设计——提供用户做某些事的能力

习惯和反射是我们与这个世界交互时的基础,让你的界面与用户早已养成的某些习惯保持一致很重要,但是更重要的是,界面要与它自身保持一致。

界面设计可以采用各种各样的技巧,一个简单的技巧,就是在这个界面第一次呈现给用户的时候,仔细考虑每一个选项的默认值。

导航设计——提供用户去某个地方的能力

要让用户在你的网站中时时保持方向感,导航系统(navigation system)不能只是单一的全局导航。常见的几种导航还有:

局部导航:提供用户到这个架构中“附近地点”的通路,在一个严格的层次结构中,局部导航可能只提供一个页面的父级、兄弟级和子级通路。

辅助导航:提供全局导航或局部导航不能快速到达的相关内容的快捷途径。这样用户需要转移他们的浏览方向时,不需要从头开始。

上下文导航:当用户阅读文本时,他们可能需要一些额外的信息,与其让用户求助搜索引擎,不如放一些与之阅读内容相关的链接。比如:在阅读Python学习笔记(三)的时候,以免造成困惑,可以将Python学习笔记(二)Python学习笔记(一)作为上下文导航。

友好导航:提供给用户他们通常不会需要,但是能够提供便利的链接,比如联系信息、反馈表单和法律声明。

信息设计——传达想法给用户

线框图:

线框图是整合在结构层中的全部三要素的方法:通过安排和选择界面元素来整合界面设计;通过识别和定义核心导航系统来整合导航设计;通过放置和排列信息组成部分的优先级来整合信息设计。把这三者放到一个文档中,线框图就可以确定一个建立在基本概念结构上的架构,同时指出了表现层的设计应该前进的方向。


表现层:创建感知体验

鉴于对于网页或者应用软件设计来讲,视觉、听觉和触觉是主要的感官体验,而在这之中,听觉又是最重要的,所以首先讨论视觉设计。

评估一个产品视觉设计的简单方法之一,是提出这样的问题:你的视线首先落在什么地方?哪个设计要素在第一时间吸引了用户的注意力?它们是对战略目标来讲很重要的东西吗?或者用户第一时间注意到的东西与他们的(或你的)目标是背道而驰的?

(你可以试着从远处走过来看这个界面)

人视线的移动方式大多是无意识的、本能的移动。如果我们的设计是成功的,那么用户眼睛的移动轨迹应该有以下两个重要的特点:

首先,它们要遵循一条流畅的路径。如果人们评论一个设计是“拥挤”或“局促”的,这表明这个设计确实没能顺利地引导他们在页面上移动。所有元素都在试图引起他们的注意。

其次,引导应该支持用户试图在此刻通过与产品交互去完成的某个目标或任务,要不要分散他们的注意力。

幸运地是,作为设计师,我们已经发展出了各种各样有效的视觉手段,来吸引或分散注意力。

1、对比和一致性

对比是我们用于吸引用户注意的一个主要工具。一个没有对比的设计,会被看成一个灰色的、平凡的东西,导致用户视线游离、注意力分散。对比的功能有,把用户的注意力引到界面中的关键部分,帮助用户理解页面导航元素之间的关系,传达信息设计中的概念群组。


a——左上,b——右上,c——左下,d——右下

a中没有任何元素突出,b和c中标注了一些关键元素,过度对比会导致视觉上的混乱(d)。

2、一致性

当两个设计元素有“差异”时,用户会思考:“为什么这些不一样?是有什么我需要注意的东西吗?”为了避免不必要的误解,我们应该重视元素的“一致性”。

基于栅格线(grid-based layout)是来自平面设计的一种技术,对网页也同样有效。这个方法通过使用“母版”来确保设计的一致性,各种布局都是根据这个模板来创建的,不是每一个布局都要使用栅格的每一个部分,但是每一个元素在网格上的位置应该是统一和一致的。


但是因为不同设备屏幕分辨率千差万别,把栅格应用到屏幕交互式产品上不会像平面设计一样简单。不可掉入“坚持使用栅格系统”的漩涡之中。

内部一致性与外部一致性

内部一致性指的是产品的两个不同地方能够反映出相同的设计方法。

外部一致性指的是同一企业的其他产品能够反映出使用了相同的设计方法。


写在最后:

看完全书,最大的感受是,光有高屋建瓴的知识体系是远远不够的,关于用户体验的每个细节,我们都需要在一次次的实践中仔细琢磨体会。

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

推荐阅读更多精彩内容