一文看懂用户体验五要素

《用户体验要素》是美国AJAX之父Jesse James Garrett的经典之作,被称为互联网入门必读的书籍,系统介绍了产品用户体验设计的模型。原作第一版完成于2002年,距今已经16年了,本书的最初是针对网页设计写作而成,但在这16年间,从internet到APP再到移动互联网,这个理论都能适用,越来越被称为经典,可见其在当下以及可见的未来,都具有普适性。因此,学习下用户体验的五要素还是很有必要的。用户体验五要素是将产品设计的过程抽...

用户体验要素》是美国AJAX之父Jesse James Garrett的经典之作,被称为互联网入门必读的书籍,系统介绍了产品用户体验设计的模型。原作第一版完成于2002年,距今已经16年了,本书的最初是针对网页设计写作而成,但在这16年间,从internet到APP再到移动互联网,这个理论都能适用,越来越被称为经典,可见其在当下以及可见的未来,都具有普适性。因此,学习下用户体验的五要素还是很有必要的。

用户体验五要素是将产品设计的过程抽象为5个层次,与此方法论类似的还有计算机网络的5层协议,将复杂的事物抽象成分层的模型,能让人直观、清晰的获取其内在逻辑。

 

一文看懂用户体验五要素

图 1

图1所示,就是用户体验的五层模型,从下往上分别为战略层、范围层、结构层、框架层和表现层,从下到上,就是从抽象到具体,从内核到外壳,为了方便记忆,可以简称为“战、范、结、框、表”。


1.战略层(strategy)

战略层,就是用户和经营者分别想从这个产品中获得什么。

用户想要获得的,就是“用户需求”,是来自公司或者团队外部的需求,为了确定用户需求,首先要确定产品的target user。确定产品的目标用户,有以下几个步骤:

1)用户细分:将用户分成较小的有共同需求的组(人口统计学、消费心态档案等);

2)用户研究:知道用户是谁(问卷调查、访谈、实地考察、焦点小组、卡片分类等);

3)人物角色:从用户研究中提取出可以成为样例的虚拟人物。

通过使用以上几个手法,能确定出用户的需求,确定出产品在战略层的内容。

经营者想要获得的,就是“商业目标”,这是来自公司内部的需求,可以是用户数量目标、品牌宣传目的或者盈利目的。总之,老板或者团队想要获得的,也属于战略层的内容。

2. 范围层(Scope)

范围层,就是这个产品有哪些功能,这个产品都可以干些什么。

当你把用户需求和网站目标转变成网站应该提供给用户什么样的内容和功能时,战略就变成了范围。根据范围层的具体内容,可以将产品分为两大类:工具型和内容型,或者有的产品两者兼有。

工具型产品要考虑的是功能规格,对产品的功能组合进行详细描述。功能规格的描述语言应该:乐观、具体、客观。

乐观:防止做什么,而不是不能做什么。例如:论坛不允许未登录用户发言->如果用户发言时未登录,系统应该引导用户登录并返回;

具体:尽可能解释清楚。例如:论坛发言需要过滤敏感词语->发言中包含附件中词语的需要替换为*号,词库可更新;

客观:避免主观语气。例如:界面的风格应该是时尚的->产品外观应该符合企业品牌AI指南。

内容型产品要考虑的是内容需求,对各种内容元素的要求进行详细描述。

内容可以包括文本、图像、音频、视频等。在确定产品要提供的内容后,要根据用户需求、产品目标(战略层的内容)和可行性评定内容的优先级。在产品运转过程中,要安排日常的运维工作,而内容的更新频率要符合用户的期望。因此,内容的维护工作要根据战略目标来安排。如:你期望用户多久访问一次?从用户需求来看,他们希望多久更新一次。此外,还要根据不同用户准备不同特性的内容。

3.结构层(Structure)

在收集完用户需求并将其排列好优先级后,需要将这些分散的片段组成一个整体,这就是结构层:创建产品功能和内容之间的关系。

结构层分为交互设计和信息架构两个大的部分。

交互设计是:描述“可能的用户行为”,定义“系统如何配合与响应”这些用户行为。不要让用户去适应产品,而要让产品与用户互相适应,预测对方的下一步。

信息架构是:关注如何将信息表达给用户,着重于设计组织分类和导航结构,让用户容易找到。

交互设计应该至少包括概念模型和错误处理。

信息架构有两种分类体系:从上到下和从下到上。其结构可以有层级结构、矩阵结构、自然结构和线性结构。一般来说,网站都是以上多种结构的综合,一种结构为主,其他结构为辅。

1)层级结构

也称树状结构或中心辐射(hub-and spoke)结构,即节点与其他相关节点之间存在父级/子级的关系。这种结构最为常见。如图2

一文看懂用户体验五要素

图2 层级结构


2)自然结构

不会遵循任何一致的模式,适合于探索一系列关系不明确或者一直在演变的主题,如鼓励用户自由探险的某些娱乐网站。但如果用户下次还需要依靠同样的路径去找到同样的内容,则不太适合。

 

一文看懂用户体验五要素

图3 自然结构

3)矩阵结构

通常帮助那些带着不同需求而来的用户,使他们能在相同内容中,寻找各自想要的东西,如:用户可以选择通过颜色或尺寸来浏览产品。

 

一文看懂用户体验五要素

图4 矩阵结构


4)线性结构

常常用于小规模的结构,如单篇文章或专题;大规模的结构则被用于限制那些需要呈现的内容顺序对于符合用户需求非常关键的应用程序。

 

一文看懂用户体验五要素

图5 线性结构

4. 框架层(Skeleton)

框架层决定某个板块或按钮等交互元素应该放在页面的什么地方。结构层中形成了大量的需求,框架层中,我们要更进一步地提炼这些需求,确定详细的界面外观、导航和信息设计,使晦涩的结构变得实在。

在设计框架层的内容时,要遵循两条原则:遵循用户日常使用习惯和恰当使用生活中的比喻。

框架层包含界面设计、导航设计和信息设计三个方面。

界面设计为用户提供做某些事的能力。做界面设计时,要选择合适的元素,让用户一眼就能看到最重要的东西。

导航设计给用户提供去某个地方的能力。做导航设计时,要提供网页之间的跳转方法,传达元素与内容之间的关系,传达内容与页面之间的关系。

信息设计是将想法传达给用户。信息设计是将各种设计元素聚合到一起,反映用户的思路,支持他们的任务和目标。包括视觉、分组等各个方面。

5.表现层(Surface)

表现层是用户所能看见的一切,字体的大小,导航的颜色,整体给人的感觉。在这一层,内容、功能和美学汇集到一起来产生一个最终设计,从而满足其他层面的所有目标。

成功的界面设计有两个特点:

1)他们遵循的是一条流畅的路径。用户在浏览过程中有流畅感,不会被阻碍。

2)在不需要用太多细节来吓倒用户的前提下,为用户提供有效选择的、某种可能的“引导”。

始发于简书:水水菁

一文看懂用户体验五要素

PS:欢迎各位运营喵投稿,投稿请发送邮件到admin@iyunying.org,优质稿件将发布在微信公众号。

您的关注阅读就是对爱运营最大的支持!敬请关注爱运营,加入QQ群交流运营经验。查看原文链接获得更多运营知识。爱运营广州交流群:288243204,资源互换QQ群:244761257,运营者微信:rubin_han


原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35931/

(0)
交互精选交互精选
上一篇 2018-03-17
下一篇 2018-03-17

相关推荐

  • 用户体验至上 三星Pay与苹果Pay谁更胜一筹?

    文\孟永辉如今,移动支付市场早已过百家争鸣时代,深耕细作成为当下移动支付市场的主旋律,阿里和腾讯便是这主旋律的代表。虽然两大巨鳄占据移动支付市场大部分份额,但终端市场的支付竞争依然存在。苹果与腾讯就因为App端微信赞赏功能抽成的事情闹出矛盾,原因是两家公司对赞赏抽成的比例及支付渠道存在分歧。由此也不难看出,移动支付市场潜力巨大,想要成为移动支付大潮的弄潮儿,领略潮流之下的无限风光不仅需要强大的研发实力,还要有对市场运行趋势和规律的精准把...

    2018-03-30
  • 交互设计的门类 & 英国综合类院校及艺术院校在如何定义交互设计?

    艺麸大大带你了解英国交互类TOP院校要知道你离名校并不遥远别走神,好好看完哦~随着科技日新月异的发展,让交互设计一时成了“网红专业”,很多学平面设计或视觉传达的童鞋们纷纷转专业到交互设计大本营。然而各大顶尖院校对于交互设计的专业命名也是“五花八门”,如,服务设计、交互设计、用户体验设计等。交互本来就是一个艺术与科技的完美结合,国内很多院校都不能将其做的很突出和优秀,这就导致了出国学习交互设计成为许多人的想法。那么你有多了解交互设计呢?我...

    2018-04-19
  • Sketch 这几招你肯定不知道

    1.精确调整元素属性在点击元素属性旁的箭头时按住 alt 键可以以10px 倍进行调整,按住 option 键则是0.1px 倍。2.用对齐工具对齐锚点Sketch 中的对齐工具不仅可以对齐群组和图层,还能够对齐锚点,非常方便。3.导航栏文本状态调整与其为导航栏每一个状态都重新做一下,不如将导航栏中的所有元素转为一个符号(symbol),这一个符号中调整样式即可。如果要隐藏文字图层的话只需要在符号的对应文字中输入空格键即可。4.直接拖动...

    2018-04-26
  • UED专访 | 众建筑:未来城的边缘

    📌 编辑 | 裴盛📌 采访| 杨紫惺 李思远 李佳琪📌 视频 | 裴盛EXCLUSIVE INTERVIEWUED × 众建筑玻璃框景中,映出木构的筋骨红砖青瓦间,闪烁金属的光芒古老与现代在这座“新生”四合院中交织年轻的的思想碰撞出新时代的活力观察生活、测试构想、生产建造踏进“众建筑”,寻觅空间的更多可能点击观看专访视频UED × 众建筑专访视频 ©UED1“三人成“众”“众建筑”,既是对其由三位合伙人共同创立的直观描绘,更符号化地表达...

    2018-02-07
  • 即将开课!6周,快速玩转axure,同时提升产品和交互能力

    前段时间,一位朋友因为原型不太过关,被老板委婉提醒了。我这位朋友的状况不是特例,原型是产品经理最基础的技能,如果不过关,后果太可怕了!最后给老板留下的印象:这人产品能力不行,每天加班就为改原型,产出太低。想成为靠谱、高薪的产品经理?第一步得提高Axure原型能力!起点学院&腾讯课堂联合打造给产品经理的Axure课程已有1868位同学学习,学习效果显著Axure零基础也能学,学完画出规范原型产品思维和交互贯穿全程,学完告别画图经理通过6周...

    2018-04-08
  • 交互设计工作坊探秘 | WTM 2018 实录

    重构购票流程的信息架构假期将至,你打开再熟悉不过的订票网页,輸入出发日期、目的地、人数,选择了最合适时段的火车票,预定、付款,整个过程不超过 3 分钟。关闭网页后,你甚至不会记得支付后的画面到底显示了什么,因为这一切流畅的就像呼吸般的自然。4 月 14 日,我们邀请到了春秋航空的高级交互设计师——程琳琳,带领一群对交互设计有热情的伙伴们,以欧洲铁路局的项目为范本,一起重现购票流程的信息架构,让大家了解这流畅的购票交互设计是通过什么方法一...

    2018-04-28
  • 交互设计文档怎么写? | 设计基础

    摘要交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员有一致的工作目标,而有良好体验的交互稿,还能够便于各方理解,提高后期开发对设计的还原度,提高各方工作效率。对于一个设计团队来说,统一的文档规范和设计规范,不仅能够减少合作方的学习成本,提升设计师和设计部门影响力。即使产品不同需求不同设计师不同...

    2018-02-09
  • 2018年04月04招聘岗位

    招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,15750516333 13948455099促销员20名,要求:年龄20-40岁,时间15-20天,底薪(80一120),提成+提成工资多劳多得!加微信15849572346了解工作内容,今日下午3点面试掌上明珠全体员工欢迎你的到来!招聘电话:158495723468876688内蒙古泽强医药有限公司招聘职位及岗位需求:一、人力资源专员具体要求:1、年龄2...

    2018-04-08
  • 关于Axure8.0中继器的使用1

    废话少说,请开始你的表演!!!1.拖入一个中继器,将中继器多余的行删除;2.在中继器中添加三列(可以直接双击编辑),分别命名:name、sex、age;3.双击拖入的中继器会跳转类似动态面板的“(中继器)(page2)”新页面;4.在(中继器)(page2)中再添加两个和已有矩形大小一直的矩形,分别命名:name、sex、age;关于中继器的准备工作完毕,因为中继器需要存放动态数据,所以需要在页面增加动态数据的输入入口。5.回到拖入中继...

    2018-03-10