如何提高产品易用性?高手总结了3个层面! 收藏

UI交互2023-03-01

本篇文章绝对不是 ChatGPT 生成的...无论从事什么行业的设计工作,产品易用性都是离不开的话题,我们都希望自己的产品可以给用户提供更好的体验。事实上,即使是同样的产品,界面和环境都相同,对于不同的用户而言,易用性也是不同的。这取决于不同的认知能力、知识背景、使用经验等。本篇文章从表达、行为、心理 3 个层面,解释产品如何自上而下的影响用户易用性感受,希望对大家有帮助。

更多作者干货:

初学者来收!交互设计中常见的7个误区 学习任何东西,最好都能重头开始,本文阅读时长大约 5 分钟。

阅读文章 >

一、写在前面 提到易用性设计,很多人第一反应是互联网软件的设计,实际上,这只会限制了设计的边界。说到易用性设计,在互联网行业还没崛起之前,宝洁公司一直是行业的标杆。举一款肥皂设计的例子,帮助大家更好的理解可用性和易用性。

可用性(Availability):这款肥皂能不能有效的清洗污渍,能不能有效的消杀细菌 易用性(Usability):这款肥皂握住的时候舒不舒服,沾水之后防滑程度怎么样,能不能让它闻起来更舒适... 映射到软件上来看,可用性指的是产品解决问题的能力,它关注的是系统是否能帮助用户解决问题。易用性则是指产品被多数用户使用时是否流畅、舒适。

二、如何提高产品易用性 和产品体验设计不同的是,体验设计是按照战略-范围-结构-框架-表现 5 个层面从下而上去进行的。而用户感受恰恰相反,它是一种自上而下的过程。用户在接触产品的时候,产品表象是最初的感受,当用户和产品有了互动之后,用户产生了行为层面的感受,最后用户会结合自己的过往认知、使用经验等产生对产品的综合感受,即心理感受。

了解了用户感受的基本逻辑后,我们可以针对不同的层次,使用一些设计原则和技巧去提高用户的易用性感受。总的来说,这 3 个层面在易用性上的侧重点不同。

表达层关注传达准确性,行为层关注使用效率,心理层关注心智构建。

下文中会具体展开...

1. 表达层 表达层关注的是传达准确性。大到产品风格,小到文本大小,产品总希望通过一定的设计手段将信息传达给用户,而所有传达的信息无外乎准确一词。对于用户来说,你传达的是用户想要的,带给用户的易用性感受就越强。具体可分为以下 5 点:看起来可访问、减少认知负荷、区分视觉权重、贴合用户环境、表达一致性。

① 看起来可访问

目前对于可访问性的定义多数指的是针对残障用户的设计,不过我所指的可访问性是用户看到产品时的第一直观感受--看起来可访问。

说通俗点,就是“看起来能不能用”,虽然“用”和“看”并没无本质上的联系。好看的产品并不等于易用性高的产品,但视觉并不是和易用性毫无关系。人们在使用产品之前,会迅速确定自己是否喜欢某个事物的外观。美观会立刻为产品赢下下载量与信任感,并且增加设计的说服力。如果你的网站或产品看起来还是 5-10 年前的设计风格,可能用户还未尝试之前,就选择了放弃体验。虽然产品的美观程度无法提高它的易用性,但能让用户感觉它更好用,所以“看起来可访问”在表达上很重要。

举例子:以下图淘宝网页为例,右图中设计风格老旧的电商网页,视觉上给人老气陈旧的印象,并不能快速的与消费者建立信任,我们可能还未浏览就已经放弃体验。相反,左图中的设计会给人更舒适的视觉感受。

② 减少认知负荷

认知负荷指的是用户完成任意一件事情时,大脑所执行处理的总量。理论上来说,一个人面临的选择越多,做出决定所花费的时间就越长,所带来的认知负荷就越大。减少认知负荷的方法有很多,《简约至上》一书提出,让交互简单易用的 4 种策略:删除、分层、隐藏、转移。

删除:删除指的根据交互流程的每个节点,合理删除不必要的内容。 分层:对内容按照一定的规律组织,该分组分组,该合并合并,把信息分成块和单元来处理复杂问题,提高用户认知效率。 隐藏:对内容进行高频和低频的拆分,强化高频内容,对低频内容进行合适的隐藏。 转移:对复杂任务进行巧妙转移,拆成好几步来完成,让每一步都容易理解。 举例子:小宇宙 App 新户信息收集页,把 4 个问题分为了 4 个步骤,减少认知负荷,确保每一步都容易操作。

③ 区分视觉权重

视觉权重是衡量事物吸引观众眼球的一个方法,在用户不得不面对较多选项时, 对主要和次要的选项做视觉权重区分,做好设计上的归类,能够提升用户做决定的效率。一般来说,用户对权重的视觉规律呈以下特点。

尺寸越大,权重越大 形状越规则,权重越大 垂直对象比水平对象权重大 立体对象比扁平对象权重大 色彩越饱和,权重越大 对比度越高,权重越大 有纹路比没纹理权重大 阴影越大,权重越大 动态元素比静态元素权重大 举例子:饿了么 App 首页金刚区通过大小、立体上的对比来区分视觉权重,传达功能模块的重要性。而盒马 App 首页金刚区则是通过大小、实物和矢量的对比区分视觉权重。

④ 贴合用户环境

不同的用户和场景会影响表达的准确性。如果你的受众是上了年纪或者有视觉障碍的人,你可以考虑采用大号字体来提升可读性。如果你的受众是红绿色盲的特殊人群,最好不要使用红绿色来做“正确”和“错误”提示的颜色。文案表达上也是如此,避免使用生僻或专业的术语。

举例子:京东 App 贴合了不同用户的购物场景,设计了 3 种不同的展示模式-标准模式;极简模式;老年模式。标准模式下功能全面、信息丰富。极简模式下布局简单、购物便捷。老年模式下字大清晰、操作简单。

⑤ 表达一致性

一致性是 产品设计 最为基础且重要的原则之一,表达一致性指的是在一个复杂功能集合的产品中,结构布局、图标设计、颜色应用等需要保持一致。一致性会使人产生预期,当用户预计到某物的表达方式,并且产品是按照预计的表达去呈现时,产品对于用户来说就越易用。

举例子:潮汐 App 详情页的表达元素中,图片风格、框架结构、颜色配比、文字样式均保持一致性,带给用户相同的表达感受。

2. 行为层 行为层聚焦效率,效率的提升可以带来直观的易用性感受。用户完成任务花费的时间越短,带来的易用性感受就越强。具体可分为以下 6 点:选择代替输入、降低沉没成本、减少重复过程、防止用户犯错、行为一致性、智能化引导。

① 选择代替输入

输入的行为成本很高,特别是在复杂表单的录入中。行为成本高意味着用户完成一件事情需要付出更多的代价。你可以想象,10 道选择题和 10 道填空题同样放到你面前,你肯定会优先选择 10 道选择题进行录入。选择代替输入的直接结果是提高录入效率,所以在表单的设计中,对于可以选择的输入项,尽量避免用户输入。

举例子:喜马拉雅 App 在修改个人信息时,提供“一键同步微信”的选项,可以快捷带入微信的头像昵称。智行 App 个人信息页可以直接选择性别标签。

② 降低沉没成本

人们在进行某些行为决策时,不仅看这件事对自己有没有好处,也看过去是不是已经在这件事情上有过投入。设计朋友们一定对“Control+S”印象深刻,在 PS 里辛辛苦苦画了一天的图,因为异常关闭导致文件丢失,这可能是 PS 带给用户最崩溃的事情。现在 ps 已经支持恢复异常关闭的文件,降低了可能发生的沉没成本,大大的提高了产品的易用性。

举例子:哈啰 App 在进行车主认证的时,会将已上传的信息保留 14 天,用户可先提交部分信息,降低沉没成本。

③ 减少重复过程

重复的行为是无效的,所有的用户都不希望每次使用微信都要重新登录一次。一般来讲,用户初次使用产品时,所需要填写的信息是最多的,当用户已经有了一定的行为时,设计者可以根据用户已有的行为数据,减少重复过程来提高产品的易用性。常见方法有以下几点:

保存用户输入信息,下一次自动补全。 把最常用的设为默认值或模板,这样大多数人都无需更改设置。 为用户提供“一键 XX” ”再次 XX"的快捷操作。 举例子:货拉拉 App 在发货输入的时候保存上次输入的地址标签,点击地址标签自动带入,大大减少了用户每次需要输入的成本。12306 在登录时会记录已有的账号信息,选择对应号码可以快捷登录。

④ 防止用户犯错

防错不同与容错,防错原则认为大部分的意外都是由于设计的疏忽,而不是人为操作失误,通过优化设计可以把失误降到最低。即解决用户错误的最好方法就是防止用户犯错。在 交互设计 中,经常通过自检提示、视觉暗示、二次确认等方法防止用户可能出现的错误。

举例子:支付宝在登录时输入框无内容或输入内容不完全时,注册按钮处于禁用的置灰状态,通过视觉暗示防止用户犯错,在返回时,弹出弹窗,通过二次确认的方法防止用户犯错。

⑤ 行为一致性

大脑是一台识别模式的机器,它能把曾经做过的事情做得更好。在产品内有很多交互操作的逻辑本质是相同的,不用为这些相同的交互操作设计多种逻辑或方案。和表达一致性一样,当用户对某种行为有了一定预期后,就会期望产品按照预期的方式执行,一致的交互行为便可以提高用户的易用感受。

举例子:字节旗下的汽水音乐 App,切换歌曲的交互区别了传统的音乐软件,采用和抖音相同的交互模式,通过上滑完成切换,确保了行为的一致性。

⑥ 基于行为的智能化引导

这是一种基于算法的易用性提升,在大数据、人工智能等技术支持下,产品具备的主动满足人各种需求的属性。当用户对某个功能/内容做出一定的行为时,系统会根据用户的行为做出一些引导。合适的引导不仅仅能够提高产品的易用性,还能够帮助产品取得更多转化。

举例子:咸鱼 App 猜你喜欢模块,根据历史行为推荐相关的商品内容。小宇宙 App 根据用户的收听内容,推送相同爱好的听众也喜欢听的其他播客。

3. 心理层 心理层关注的是心智的构建。所有以人的感受为终端的本质上都是心理学,心理层次相对内容和行为层较为抽象,对易用性的提升并不会很直接,但了解一些易用性心理,能够帮助我们更好的进行设计决策。

① 贴近心智模型

心智模型是存在于用户头脑中对一个产品应具有的概念和行为的知识。这种知识可能来源于用户以前使用类似产品沉淀下来的经验,或者是用户根据使用该产品要达到的目标而对产品概念和行为的一种期望。简单说,用户在使用产品之前会根据过往的经验对产品有一定的预期,我们做出的产品越符合用户的预期,用户就会感到越简单、越易用。

《Adout face 4:交互设计精髓》一书中提出实现模型、心理模型、呈现模型的概念,可以很好的解释用户在试图使用数字产品时到底发生了什么。其中,实现模型映射技术,心理模型映射用户的愿景,呈现模型代表软件的运行机制。

如果把实现模型比作一个不规则的形状,心理模型比作一个圆。那么呈现模型越趋于这个圆,用户的易用性感受就越高,反之则越低。若想设计出贴合用户心智的产品,常规的设计思路是要求设计者具备研究者的能力。在进行设计工作之前,进行大量的研究,包括用户的行为习惯及使用场景,同过 Persona 和 Scenario 确定的大部分用户场景。并系统化的把研究转化为设计方案。

举例子:windows 系统关闭网页的操作大多在右上角,mac 系统的关闭是在左上角,这是两种不同的实现模型。如果我们经常使用 windows 系统,养成了右上角关闭的心理模型,那么切换为 mac 电脑使用时,mac 的实现模型会和我们的心理模型有较大偏差,呈现模型就会较差,从而导致用户会习惯性的犯错。

② 创造认知规律

人在识别物体时会寻找规律,发现规律有助于快速处理接收的感官信息,快速建立用户心智。即使本无规律,人眼和大脑也会尝试创造规律。也就是说,规律性越强的产品,对于用户来说就越易用性就越强。

简单来说,设计师设计产品时,需要有一定的规律来引导用户,这样可以帮助用户更有效率更舒适地使用产品,另一个角度,产品设计应该有一定的控制度和局限性,不能让用户完全天马行空地操作。如果产品设计没有一定的规律,用户就会自己创造规律,那时产生的用户操作就会是 设计师 无法预知无法掌控的了。

相反,当用户的大脑处理了某些规律时,与规律相悖的事物就会引起用户的警觉。比如一个静态页面中出现某个动态的消息,一排灰色文字中出现某个带颜色的文字等等。

举例子:传统的认知规律中,红色的灯光具有警示性,产品设计中利用了这一认知规律,使用小红点暗示新消息的提示。用户在感官中接受到小红点的信息后,会本能的认为有新消息的提示。

三、总结 易用性感受是因人而异的,随着互联网行业的发展,人们对易用性的标准也在提高。身为设计师,我们要不断洞察用户的需求,在设计执行时,综合利用以上策略,带给用户更优质的易用性感受。以上就是对提高产品易用性的分享,感谢大家耐心阅读,笔芯~


让你的品牌快速脱颖而出,抢占市场份额,提升销量
免费获取方案及报价
*我们会尽快和您联系,请保持手机畅通