前端人需要懂些-用户体验

528 阅读8分钟

好的用户体验,会帮助人们工作更快;减少他们犯错的几率!

用户体验为什么如此重要?

我们每个人都是各个产品的用户,我们在生活中时时刻刻在体验的不同的产品。我们可谓是对他们爱恨交加。这些产品时而会让我们使用起来备受鼓舞,时而令我们感受到沮丧。当你发现你工作一天,是一直在和你使用的工具作斗争的时候,你会异常沮丧。

相信大家都会遇到这样的一些产品,你认为你的操作是正常人类的操作,但是它就是没有按照你对它的期望那样,给你正确反馈。这样会让你异常头疼沮丧。进而影响自己的心情乃至生活。

比如银行的ATM提款机,在旧版的系统界面中,是没有设定自由提取金额的,只有固定的100、200、500、1000、2000、2500等选项,以及“取消”“确认”按钮,这就会造成一个问题:比如客户查询余额只有4800元,并且要全部提取出来,聪明的人会存入200元,然后取两次2500元,也可以按下述步骤操作:

插卡>输入密码>选择语言>点击“取款”按钮>选“2500”>点击“确定”按钮>取出钱>点击“继续取款”按钮>选“2000”>点击“确定”按钮>取出钱>点击“继续取款”按钮>选择“200”>点击“确定”按钮>取出钱>点击“继续取款”按钮>选“100”>点击“确定”按钮>取出钱>退卡

在取款高峰期、或商业中心,一个人取款就要耗费这么长的时间是不可思议的。虽然这是一个比较特殊的情况,但是足以证明可以改善的空间有多大。在新版的ATM提款机上修改了界面和功能,增加了自行设定提款金额功能,修改后的步骤就是:

插卡>输入密码>选择语言>点击“取款”按钮>选“其他金额”>输入“4800”>点击“确定”按钮>取出钱>退卡

无论是在体验上,还是在等待时间上,都会让客户更加满意,这样的例子数不胜数。

上一篇也引用这个例子。

用户体验要素

考虑用户体验,把它分解成各个组成要素,从不同的角度了解他,这样你才能确保你控制了决策所造成的全部后果。

大家肯定对Ajax非常熟悉, 用户体验要素这本书就是Ajax之父创作的一本偏向于产品设计的一本书。书中提到了关于用户体验要素-五要素。

用户体验要素-五要素

作为互联网公司的一名程序员,用户、商业、技术时时刻刻的在围绕着我们。这三者之间的复杂关系,我们应该去归纳去思考。本篇文章文章会简单介绍一下用户体验要素之核心五要素,五要素包含了对用户、商业、技术三者全面的思考。

网站看起来如何,它怎样进行运转,它让你执行什么。这些决策都是互相依赖的,它告知并影响用户体验的各个方面。

image.png

接下来,就结合个人理解简单的介绍一下,用户体验要素-五要素。

战略层(strategy)

image.png 图中明确指出了。战略层包含的两个关键的点:用户需求、网站目标(企业目标)。

我们在做项目的时候,或者设计自己的项目的时候,我们应该去问两个问题:“我们通过这个项目要获得什么?”和“用户通过我们的项目能获得什么?”。明确这两个问题之后,我们基本上就可以做出自己的一个MVP出来了。而且不会跑偏。

详细举例来说。 电商网站;用户需求就是用户想要买到商品,网站目标就是项目卖出商品。

范围层(scope)

image.png

“范围”二字可以理解为2层含义:

  • 需要开发的产品功能的范围;
  • 项目时间规划的范围。

范围层可以简单的理解为“用户需求”,但其实应该是更具象一点的东西,即通过“用户需求”推导出的产品内容需求和功能规划。

比如,有些电商网站提供了一个功能,使用户能够保存之前使用过的邮寄地址,这样他们可以很方便的再次使用它。我们在规划产品功能的时候,就需要考虑我们本产品是否应该包含该项功能,这就是范围层应该考虑的问题。

结构层(structure)

image.png

结构层是一个将实际需求从抽象转为具象的中间层,这里包含“交互设计”与“信息架构”2个方面。

1. 交互设计

这里的交互设计解决的是范围层界定的功能以什么样的方式呈现的问题。书中提到了三种交互模型。

image.png

概念模型

简单来说就是模拟现实生活场景,比如:点击键盘给你一个震动或者声音的反馈,以及电商平台的加入购物车,采购生成订单等。尤其现在的B2B功能类产品saas等,更多的业务逻辑均来自线下工作,交易方式等去考虑,因此更注重易用性,次易学性。

本能模型

人类历史积累下来的行为习惯、心理机制,就好像赌博为什么使人上瘾就是因为他的快速回馈,人类在进步的途中是需要短期快速回馈来避难的。还有汽车门早就可以做到关门消声、苹果电脑触控板的振动反馈等。这些都是人类长期积累下来的本能需求以及反馈。

场景模型

这个和现有的成长、工作、生活环境有关,拿互联网产品来说,上面提到的下拉刷新、上拉加载、关注收藏、加入购物车等,已经形成统一的观点。

我们不用明确的将概念模型告诉用户,概念模型是用于在交互设计中开发过程中保持使用方式的一致性。这一点我们要尤其注意。

2. 信息架构

信息架构研究的是人们如何认知信息的过程,对于产品而言,信息架构关注的就是呈现给用户的信息是否合理并具有意义。

信息架构的目的是梳理复杂的产品功能,确保用户体验的逻辑,落地到实处的话可以理解为功能节点的关联流程图。

这个可以拆分用在之后体验优化的很多环节:比如用户体验地图、节点漏斗优化等。

书里列举了一堆结构化的方式:自然结构、矩阵结构、线型结构等等,个人觉得了解一下就好了,具体还是要根据产品进行自定义的。

框架层

image.png

相较结构层,框架层的颗粒度更加细化,在框架层我们需要仔细思考每个具体页面的框架与信息设计,再落地说就是要出个高保真原型出来。

具体的框架与信息设计定义不同的功能安放在对应合适的容器框架中,依然还是由范围层界定的产品功能及优先级来决定的。

基本遵循的原则就是:让用户优先看到他们需要的内容和我们想让他看见的内容。

现在主流的几种大容器框架设计:大卡片feed流、无框式、线性列表等。

定义整体的产品框架设计是非常核心的体验设计亮点,大家可以从将此与前几层偏抽象的内容呼应起来,使框架设计变的有理有据。

用户体验5要素你用对了吗?

具体的信息设计除了注意信息表达的优先级、拓展性与一致性之外;实战经验告诫大家一定注意区分运营配置位与产品功能区的信息设计。

表现层

image.png

表现层,更多体现的是交互设计师的能力,也就是根据人类感知来合理设计排布与交互。视觉层并不是只给高保真原型图上个色、画个插图这种操作。书中提到了人类的五种感知,通过五种感知来进行产品表现层方面的设计。

image.png

感知设计,这里我们应用到日常项目中可以理解为通过良好视觉化表达达成2个重要意义:信息获取、品牌识别。

总结

了解完五要素后,其实只有一些简单的印象,下一篇文章,希望通过示例来简单的对五要素有个使用。