首页

如何通过设计,降低认知负荷?

分享达人

当你使用形形色色的APP时,是不是时常不由自主地感慨“这个APP的界面太丑了”、“这个APP太难用了,连入口都找不到”,是什么原因造成这种感受呢?

认知心理学中有个概念叫做认知负荷「cognitive load」,它表示大脑在工作中记忆资源的使用量,会影响用户的信息阅读和产品使用体验。本文将从信息层级、信息结构、阅读顺序、信息密度、文案表述五个层面来探讨如何降低用户认知负荷。

一、信息层级

1. 通过颜色对比、形状大小、位置区分层级

格式塔心理学的封闭性原理告诉我们,人们在认知某个东西的时候首先看到的会是整体、而不是单独的部分。如图所示,你首先看到的是一个蓝色的字母U和深褐色的人头侧脸,其次才是构成这个形状的各种细节。

如何通过设计降低认知负荷?

从人类视觉系统成像原理来说,人类天生对于颜色对比非常敏感(彩色视觉是因为视网膜中3种视锥细胞分别感知特定颜色所致,当用户同时看到多种不同的颜色时,不同视锥细胞就会被激活眼睛感受到强烈的对比)。

因此,在设计界面时通常会通过大面积的色块对比来凸出层级更高的信息。

如何通过设计降低认知负荷?

总结来说,我们在平时的设计中常用形状大小差异和颜色对比差异来拉开信息层级。

如何通过设计降低认知负荷?

此外,由于人眼视度(舒适的垂直视场角度为-30°~25°)和用户使用不同设备时的阅读角度问题,人眼对于屏幕上不同区域的关注度有着天然的差异。

如何通过设计降低认知负荷?

如何通过设计降低认知负荷?

因此,我们在设计时若想拉开信息层级,除了使用面积和颜色对比外,也可以通过位置对比来实现,即将层级较高的信息置于舒适阅读区内。如图所示,移动端设备位于屏幕中央偏上的信息在阅读舒适度上会优于屏幕下方的信息。

如何通过设计降低认知负荷?

2. 信息层级不宜超过4个

我们知道了如何通过设计手段来区分信息层级,那在信息层级区分上是不是越多越好呢?

显然不是,信息层级过多也会增加人脑的认知负荷(整个页面显得很花哨);而信息层级过少,则页面的内容展示会比较平均、不一定能突出所有重点信息。一般来说,我们可以将信息划分为重要信息、次重要信息、一般信息和和辅助信息,也就是信息层级控制在4个以内比较合适。

如图所示,我们把聚划算的页面做高斯模糊后,里面的信息层级就一目了然了。

如何通过设计降低认知负荷?

如何通过设计降低认知负荷?

二、信息结构

1. 信息单元=信息本体+信息容器

在讨论信息结构之前,我们首先对基本的信息单元做拆解:信息单元 = 信息本体 + 信息容器,这里我们把信息本体定义为我们主动让用户感知并能辅助其进行下一步动作的信息元素,而容器定义为具有明显视觉区隔的信息承载物。信息本体一般包括图片、文案、icon、行动按钮等,而信息容器可以大到页面小到一般的模态、非模态控件。

如图所示,在典型的电商场景中商品卡片可拆分为信息本体(商品图、商品名、商品价格、利益点)+ 信息容器(卡片):

如何通过设计降低认知负荷?

2. 信息本体结构——同类信息位置相近、结构相同

熟悉格式塔原理的朋友都知道相近原则——即彼此位置相近的物体会被人们看成是一类东西。同时,保持相同的信息结构意味着视觉焦点内不同层级信息的相对位置是固定的,这样用户在快速扫视某个产品时会降低记忆负担——即无需寻找同属性的信息。反之有一定的记忆负担,不利于用户快速扫视重要信息。

如图所示,滴滴我的钱包页面5张轮播图的信息结构相同,遵循左文右图和主文案在上、辅助文案在下的信息结构。

如何通过设计降低认知负荷?

而支付宝理财页面的轮播图则有着不同的信息结构,如辅助文案和按钮在不同轮播图中的位置和大小、样式均不一样,轮播时同类属性的信息会以不同样式在不同位置切换,增加用户的眼动成本和认知负担。

如何通过设计降低认知负荷?

从页面整体动线看,同类或关联信息会有明显的区块分隔。如下图所示,滴滴「我的」tab在页面整体动线布局上有着非常明显的区块划分来承载关联信息:

用户信息(个人信息+会员信息)→常用工具→促活福利(卡券 + 福利)→平台服务(金融服务 + 企业服务)→低频工具。

如何通过设计降低认知负荷?

从信息单元内部来看,同样会对关联信息做位置上的划分。例如一般的社区信息流卡片结构基本都是生产者信息→内容信息→互动入口。

如何通过设计降低认知负荷?

3. 信息容器结构——三角、宫格、列表

我们前面提到过信息单元=信息本体+信息容器(容器为具有明显视觉区隔的信息承载物),而信息容器的排布也有其内在的规律。

笔者体验过大量产品后,大致总结了3种较为常见的容器排布结构,即三角结构、宫格结构和列表结构,每种结构容器的排列规则会遵循一定的主次关系并根据其特点有不同的适用场景。

(1)三角结构

我们都知道三角形是多边形里最稳定的结构,其容器排布主次突出(根据主要容器与次要容器的位置关系可分为上下结构和左右结构),用户纵向的视觉迁移路径较短,一般比较适用于数量较少、且有明显优先级的场景

如何通过设计降低认知负荷?

如何通过设计降低认知负荷?

(2)宫格结构

宫格结构适用于优先级相同或相似的功能入口,一般以四宫格和六宫格为主,数量过多时容易造成视觉疲劳和信息密度过高。四宫格信息容器和六宫格信息容器如图:

如何通过设计降低认知负荷?

值得注意的是容器内也可以是宫格结构,但这种宫格结构的信息主体数量会比信息容器更多:

如何通过设计降低认知负荷?

(3)列表结构

列表结构同样适用于优先级相同或相似的功能入口,但与宫格结构不同的是列表结构的一般具有排布逻辑或规则,如按照时间线排布。

列表结构包含横向列表和纵向列表,横向列表适用于短文案卡片(比如活动或功能入口),方便用户扫视更多图片;纵向列表适用于长文案卡片,用户可以快速扫视较多文字。

如何通过设计降低认知负荷?

如何通过设计降低认知负荷?

4. 信息过多时的结构——长表单可做信息分类、分页处理

在B端设计需求中,我们经常会遇到让用户输入一堆信息的场景,这时候如果我们把所有信息都罗列在1个页面中,可能会造成高跳出率和低完成率。

表单设计领域的专家Adam Silver通过实际项目发现:将较长表单按照关联性拆解为若干部分,能有效提升用户满意度以及完成率。除此之外,Adam还总结了这种设计理念的16个优点,我们认为其中比较有价值的是这3个点:

  • 降低认知负荷,让用户更专注地完成任务;
  • 降低每一页的出错数,从而降低错误带给用户的挫败感及跳出率;
  • 配合进度指示器,能给用户一种前进的正面感觉。

市面上将长表单拆分成几个步骤做分页处理的产品比较多,如下图小红书就将店铺申请流程拆分为了填写店铺类型、经营类目、个人信息3个部分。

如何通过设计降低认知负荷?

三、阅读路径

1. 高优先级信息应置于视觉焦点容易触及的地方

我们都知道用户的阅读习惯一般是近似于从左往右、从上至下的Z字形结构,且基于人眼视度和不同设备屏幕角度的差异,人们扫视屏幕时一般会先注意到屏幕中央偏上一点的位置,因此我们在设计信息结构时也要考虑用户的阅读路径和习惯,将对用户高价值或者高优先级的信息置于视觉焦点容易触及的地方。

那什么是对用户高价值或者高优先级的信息呢?我们判断的标准是哪种信息形式(图片or文字)更能高效地传递有效信息以辅助用户决策,比如在电商产品或外卖产品中一般采用上图下文或者左图右文的信息结构,且会将图片的信息层级拉到最高,这是因为用户在快速扫视过程中仅通过看图即可看到这件商品,初步了解外卖商家卖的是什么。

如何通过设计降低认知负荷?

如何通过设计降低认知负荷?

但如果我们换一个场景,这种形式就不那么适用了,用户仅通过看图并不了解这条资讯的大致含义,因此,此时文案的优先级更高,常常采用上文下图或者左文右图的形式。

如何通过设计降低认知负荷?

如何通过设计降低认知负荷?

2. 视觉引导提升信息阅读率

国外的用研团队曾通过眼动热力图的AB实验发现通过在图片中加入人类面部表情的视觉引导对于信息的阅读率有明显提升作用。如图所示在第一张广告图中,用户的视觉焦点大部分集中在了婴儿的脸部,而右侧的文案则很少有用户关注,第二张图中婴儿由正脸转化成了侧脸同时眼睛看向右侧的文字,此时右侧文字的眼动热力成像明显提升。

如何通过设计降低认知负荷?

四、信息密度

1. 信息密度不宜过高或过低

这里的信息密度指的是在单位容器内(卡片、页面)所呈现的信息量,比如在1个页面中如果信息密度大,则相对屏效较高,但却容易增加用户的认知负荷;反之,1个页面中信息密度低则相对屏效较低,用户的认知负荷也相对较低。

我们来看1个关于信息密度对于阅读体验影响的案例:在美国开车,人们常常因为看不懂街边的停车牌而违停被罚款,我们可以看到左图中的停车牌上密密麻麻全是字,想要阅读根本无从下手。

如何通过设计降低认知负荷?

Nikki Sylianteng是一个华裔的设计师,当她初来乍到美国时也因此遇到了很多不便,针对这个问题她简化用户的需求,即:

  • 当前这个地方我能不能停车
  • 能(免费)停多久

于是她将文字信息做了可视化处理,通过较少的文字+色块极大地降低了停车牌的信息密度,让司机看到后一目了然。Nikki Sylianteng的这种设计被美国各地的市政部门广泛采用。

如何通过设计降低认知负荷?

在传统媒介中,一张充满文字和图片的报纸与一个时尚杂志封面的信息密度对比更加明显,给读者带来的阅读体验和认知负荷也完全不同,这也是为什么很少有人会耐心读完报纸上的文字。

关于海报与杂志设计还牵涉到图版率这一个概念,简单讲就是图片面积所占整体版面的比率,通常来说图版率越高则表现力和亲和力就越强,有兴趣的读者可以自行上网了解图版率的相关知识,在这里就不做详细阐述了。

如何通过设计降低认知负荷?

五、文案表述

1. 文案表述要符合大多数受众的需求和理解

在广告场景下,当用户被图片吸引视觉焦点后,文案表述就显得尤其重要了。这时候我们要搞清楚3个问题:

  • 我们的核心目标受众是谁?
  • 我们能给用户带来什么?
  • 用户需要付出什么?

首先,我们得搞清楚核心目标受众是谁,同一款产品来自一线城市的年轻白领和三四线城市的中年人关注点和付费动机可能完全不一样(比如同样都是手机,一线城市的年轻白领更关注颜值和性能,而三四线城市中年人更关注价格和质量)。

这时候产品的广告文案也必须依据核心目标受众的需求点来设计才能命中用户,小米手机的线下广告语在一线城市的地铁站(左图)和农村的大字报广告(右图)就采取了完全不同的描述策略。

如何通过设计降低认知负荷?

在回答完以上3个问题后还需要注意,我们的文案描述目标受众是否能够理解,因为人群不一样,其受教育程度和理解能力也会不一样。

2. 文案上避免歧义

在设计动作文案时,我们时常会受到惯性思维(常态场景下的通用做法)的影响而忽略了动作本身的意涵。

比如下图的二次确认弹窗用户取消上传和取消订单是一个对当前行为的否定,但我们习惯于用“确定”和“取消”来让用户回应是否进行某个行为(我们也可以从另一个角度理解,否定的否定就是肯定,点击「取消」按钮即继续用户当前行为,但这种理解很绕),这个时候就会带来理解上的歧义,当出现这种情况时,最好的做法就是将动作本身简单明了地描述出来避免产生歧义。

如何通过设计降低认知负荷?

作者:Chloe
转载请注明:人人都是产品经理

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

分享达人

结合理论落地项目功能,从逻辑层面思考问题。

1、从单复选组件反思功能设计问题


节前有一位读者问了一个关于单选与复选框样式选择的问题,大概是:

看到很多单选与多选的设计形式,多种多样,以前看到「圆点+圆圈」就知道是单选,但是为什么现在单选与多选的设计样式五花八门,都没有遵守前面这种规范呢?这些组件的样式到底该如何确定呢?为什么会有一种模糊不清,不知道如何使用的情况?


我发现许多人都有一个习惯,就是喜欢把某个具象的内容抽象化,把某个具体的问题概念化。

比如认为单选就应该是「圆圈+圆点」的形式,但似乎从来也没有任何明文规定单选就必须是这样的形式,只不过大家看得多了,就习惯认为是这样,觉得就是这样规定的,但其实并没有过这样的规则。

要知道,样式常常根据功能在变化。比如功能优化了,样式也需要进行修饰,并不是说这里有一个单选操作,就必须是「圆圈+圆点」的形式给用户选择。无论是在电脑还是手机上,都是一样的道理。


这样去处理问题,常常会把实际的业务问题给处理没了,最后变成控件选择的问题,而不是功能本身的问题。

比如普通的弹框,也是一种单选状态,为什么不也改成下图右边这样的呢?不就是操作路径长,点击起来麻烦,多此一举,而且也不好看么?

即便真的在某个场景下,非得使用上图右边的单选形式,那么把样式改成下图这样,又有何不可呢?

只不过常规的「圆圈+圆点」被使用得多了,大家形成了共识而已,但并不代表它就是一种标准。


如果有一个规则规定说,单选必须是「圆点+圆圈」,那么各位目前所设计的绝大部分组件都将不能使用,包括各类菜单或开关。比如下图这样的 action sheet 就不应该存在,而它的出现也是因为功能属性、设备迁移、操作形式等内容的演化所呈现的结果。

这就是大家在处理设计问题时,习惯做一种概括,希望能复用于绝大多数场景而导致的错误情况,没有落实具体问题具体分析的原则。


包括这位读者的问题,也是希望能够明确单选与复选样式的选择问题,以便往后能够更有条理的使用。但可惜并不是这样,从上述我举的控件例子可以看出,单选形式早就已经变了模样,而多数人并没有注意到,还在认为单选与多选就应该是圆圈与方框的形式。

设计工具/方法论,确实是有部分指导作用,但不能作为绝对性或权威性的内容来吸收,应该辩证地去看。

而之所以在移动端延伸出许多自定义组件(形式并没有遵循所谓的市场常见规范),正是因为业务与功能的多样性导致的结果。

样式的选择不单单是看到的那部分,它还可以任意变化地处理,无论是单选或者是多选,不该被样式套牢了。而它的决定因素应该是内容。


比如,iOS 闹钟的铃声选择,有许多可选项。

但是因为内容的明确性,大家都知道,闹铃只能选择一种,不会同时有 2 个铃声响起来(当然也可以这么做),所以即便闹铃的单选形式再如何变化,大家也都知道它是单选的,这就是功能决定了操作形式的例子。


类似于,再如何变化选择样式,无论是圆圈、方框,或只有勾,甚至是其他情况,大家也都知道它就是单选。

而之所以用勾或圆点表示被选中状态,只不过是人的一种正常认知意识,即使改成三角形,只要能说清楚是被选中状态,那也不是不行,只不过三角形没有勾来得清晰罢了,而并不是因为有什么特殊含义。

所以只要梳理出符合自己产品的「单多选」样式,形成规范即可。一些人会感到模糊不清的原因是它本来就没有所谓的标准,又何来的清晰呢?


写到这,想到之前有读者问:什么时候该遵循设计规范,什么时候不该?

要知道,设计规范本身就是基于某个具体产品内容所构建的一个整合标准,为了规范化存在共性的功能形式。而对于共性的判断也应该是从功能来定义的,比如返回都在左上角类似的,但是一定么?

单拎出来说什么时候该遵循,什么时候不该遵循,是很概念化的一个问题,不可能存在一个具体话术标准,说什么时候应该,什么时候不应该的。


如果我回答,符合规范中已有的形式的,就遵循,不符合的就不遵循。那就是一句典型的废话了。但除此之外,我也就不知道如何解答了,除非你把规范和具体问题发给我,我可以跟你一起讨论讨论。


写这篇文章的时候,看到一位朋友发的信息:

为什么手机刷新都喜欢下拉?因为神经科学研究表明,这个动作,更容易让人产生对不确定性和惊喜的期待,原理和赌场的老虎机类似。


很多人都会习惯性给一些操作或交互形式做类似这样的定义。

但这么定义是不对的,因为这相当于前面说的,把业务给解释没了,成了形式上的讨论。而为什么会使用下拉、以及下拉会有什么情况,包括它所解决的问题,都没有任何的分析。

比如,下拉之所以让人上瘾,并不是因为「刷新」本身。下拉只是一种交互行为,它的出现也只是为了解决早期刷新按钮占据屏幕空间的问题,希望通过下拉进行刷新,以隐藏掉屏幕上的刷新按钮,给屏幕留出更多可用空间。

而采用下拉是因为它更符合人的直觉 —— 往下拉能看到更多新的内容。


但是人之所以会对下拉上瘾,并不是因为下拉这个行为,而是因为下拉能看到更多信息。下拉本身只是解决了屏幕空间的问题,而人其实是对内容上瘾。

比如我在腾讯新闻里看 NBA 的资讯,通常只会直接上滑,看下面的内容,看完了就关了,不会进行下拉刷新。

因为在腾讯新闻里,下拉刷新的新闻并不是的内容,更多是今天或今天之前的信息,不刷新反而是刚刚更新的资讯,那么下拉刷新虽然也是刷新,但是刷新出来的内容是旧的,也并不吸引我,反而成了我要避免的操作,因为只要一下拉,的资讯就会被旧的资讯挤掉,要刷掉进程重新打开 App 才会重新再显示的。

所以就不能简单的定义说「下拉刷新是一个容易让人上瘾的操作」,而是要关注内容,如果刷新的信息都是旧的,或者是用户没兴趣的,那即便刷新了,也不会引起用户的注意,也更不可能让用户上瘾了。


2、标题文案溢出使用「…」合理吗?


读者:

呆呆,这个图的卡片列表里,标题用省略号合适吗?

(因为原图涉及读者项目隐私,所以重画了个草图。)

又是一个没有业务背景的问题。不过这个问题比较简单,可以展开来说一下。


通常,我们会在各类产品里面见到诸如「标题超出部分用省略号显示」这样的设计,譬如上面这图。

于是,许多人在自家产品的设计过程中,遇到此类情况,被开发问到时,也会搪塞一句:文案要是超出就「…」显示吧。

大多数遇到这种情况的,都是因为之前没考虑好,才临时想了这个解决办法。

而很多时候,一些产品之所以用「…」显示,并不是因为单纯地文案溢出,可能是专门设计过的。

所以,如果简单地认为「…」就是解决溢出而使用的方法,那就有问题了。


下面举几个例子。

有些产品,我们几乎看不到列表视图里的标题是有省略号的。

因为这类产品的目的就是让用户读到完整的标题信息,对眼前的内容好做判断,从而考虑是否点进去看详情。

所以在设定的时候,界面中标题字数的规定,与界面样式就已经提前规划好了,可能在后台设置就限定死字数,要求运营人员上新时要统一界面的展示形式。

这种情况下,一般就不会再有省略号的问题,譬如一些知识付费类产品。

比较典型的还有 TED 演讲视频的标题,在《设计体系》这本书里专门提到了这个案例。

对于 TED 来说,演讲标题的信息优先级是最高的,所以他们宁可保留所有标题文案,也不对文案做截断用「…」显示。

因为对标题做截断是很容易的,而难的是把一个演讲主题提炼成一句简短句子,所以他们为了展示更清晰的标题,宁可在界面上保留长标题,甚至为长标题的显示而专门设计相符合的展示形式。

反过来,他们也因为这一点而确定了界面上标题字数的上限,确保文案不会超过界面显示的最大临界值。


包括一些资讯类产品,在标题上也会做限制,以满足最大化呈现且不使用省略号。意思是:假设界面上文案范围定了 30 个字符,那么配置的时候就必须 30 个字符以内把内容表达清楚,且必须完全显示在界面上。

所以经常看到一些 UGC 产品之所以会限制标题字数,原因除了常见的标题不能过长之外,还有一点是为了在列表页就能显示完整。

各位在设计这类产品功能时,也要注意到这一点,而不是随意说一个「字符不能超过 50 吧」。

而有些产品的内容列表,之所以频繁使用省略号,它的目的是为了引导用户点击用的。

这类形式一般出现在营销号发的文章里,多是营销人员自己为了文章点击率而做的。很少会有一款产品的所有内容都是这样的,除非是一些内容产品,运营方是企业自己,为了让产品上的内容有更多人点击而这样去设计,当中可能涵盖了广告,以此赚取广告费。

不过这类内容的设计已经让用户开始反感,所以如果不是特殊情况,最好少这样去做。

当然,还有同类型的,一般出现在页面面积小且需要展示更多信息的集合类视图,比如:

这种形式的设计,就是因为页面上想展示的信息太多,以至于通过这类合集来展示某个模块里的内容,营造出一种很丰富的感觉。

也就是利用「…」引导用户点击,表示信息没有展示全,如果要看,就点开详情,进二级页面。


还有一些产品的省略号,纯粹就是大家理解的,溢出就省略号显示。

比如同样是资讯或内容类,以文字为主的产品,虽然标题超出范围用了省略号,但用户基本也已经知道是什么内容(上面那个集合类视图也是一种),且还有摘要引读。


比如下图:

这种标题字符限制在了两行以内,多余字符用「…」展示,基本上已经是一句完整的话,能让人大致了解这条信息的意思。并且还有部分摘要,已经足够用户判断是否对它有兴趣,如果没兴趣,直接刷走也无所谓。

包括一些电商类产品,用户多以商品图片为主要决策因素,商品标题作为辅助信息,优先级不高,所以标题溢出是否省略号显示也无所谓。

这其中有一个特殊情况,就是有些产品的标题即不展示全,同时又没有省略号,比如淘宝的商品搜索结果页面。

因为这类列表实质是一个产品卖点集合的浓缩词,不是完整的一句话,多余字符展示或者不展示,都不会有太大影响,所以也不重要。


当中我比较反感的还要数农药了。

好友邀请的列表视图里,常常看不全昵称,因为好友会有游戏昵称,微信备注会展示在游戏昵称后面,以至于要点到游戏关系里先看全昵称,再到匹配界面邀请好友。

既然已经区分了微信好友与游戏好友,为什么昵称上面不也加以区分呢?

当然,经常玩的好友可能没这个必要,毕竟头像或昵称都可以很快识别出来,但是偶尔一起玩的好友通过这样的识别方式就比较难了。

这里就是简单提一句。


通过上面提到的一些例子,以及不同场景下标题省略号的处理方式,相信大家对这块的理解会比之前更深。

同样,对于开篇读者提到的问题,更符合的情况可能类似于知乎这种,有完整句子,所以标题是否省略号处理也就没太大影响。

但具体的还是要结合业务详情仔细考量。

而标题内容的展示是否要用省略号处理,优先要看这条信息的业务权重,以及是否会影响用户决策。

所以各位在设计这类内容标题是否要用「…」显示时,也要注意判断自己的产品特性符合哪种类型,而不是随意一句话,说「超出就省略号显示好了」。


3、怎么判断输入框里放不放清空按钮?


最近收到两个问题,正好都与输入框有关:一个是怎么判断输入框要不要放置清空按钮;另一个是输入框超过限制后,是禁止用户继续输入,还是允许超出但会警告提示。

在一定程度上,这两个问题的分析逻辑是类似的,所以放到一起聊正合适。


先看第一个问题:怎么判断输入框里要不要放置清空按钮?


原问题是这样的:

呆呆,我最近在优化公司的产品,遇到一个问题,就是 PM 想在聊天输入框里加一个「清除按钮」,可我觉得不太合适,但是说不出原因,只能说没见过在聊天框里加清空按钮的。这个问题要怎么判断呢?


我们一般会在搜索、手机号输入框里看到类似的清空按钮,比如输错了就点一下,清空后再重新输入。但是很少会在聊天框里看到清空按钮,为什么呢?

主要是「时效性」…算了,这种概念词用多了,发现现在人都不会讲话了。说白话就是「要快」。

无论在登录注册还是搜索的场景下,除了内容本身之外,最注重的就是效率。


譬如有个数据大概是说,用户登录注册花的时间超过某个范围,转化率就会对应逐步降低。而率,就是让用户能快速登录注册账号,使用产品功能。所以设计师们会在登录注册的操作流程里抓住可提率的每个细节,输入框使用效率就是其中之一。

搜索也是一样,当用户有明确目的使用搜索框时,关键词就是用户当下最关注的信息,如果输错,再一个个删除,显得麻烦,所以清空按钮能在这里提高用户的操作效率,甚至 iOS 的搜索组件也会自带一个清空按钮。如果是电商产品,率是能间接提高成交率的。

这里的输错,也有两层意思,一个是用户在输入过程中发现错字,比如登录注册时,发现手机号输错了,一个个删除反而没清空重新输入来得快,因为删了之后,号码要重新背一遍,具体到某个数字,然后接着输,特麻烦。

或者搜索内容时,发现有错别字,删除某个字再重新输入,反而没有清空重新输入来得快,毕竟输入法有串联关键词组的功能。


另一个是反馈的结果不符合用户的心理预期。比如输入手机号已被注册,或者搜索结果不满意要重新输入关键词,使用一键清空都是比较的。

而且输入之后,系统需要给用户呈现结果,如果结果不满足用户预期,还会存在短时间内多次输入与清空的情况。那么,无论是错字还是对结果不满意,清空按钮都可以非常便捷地帮助用户一键清除上次输入的字段,让用户更快速地重新输入新字段,从而提高用户的操作效率。

于是,我们会把这类场景下的「清空」说成是「一键清空」,主要是因为方便。而它的作用就是,在出错的场景下,更快捷地给用户重置的操作。


反过来,各位可能要说:那聊天框不满足这个条件么?


我们接着看聊天输入框。

我们知道,聊天输入框的内容不是固定的,它是根据对话内容而变化的,用户甚至需要花时间持续输入并纠正自己的用词,以及话术的准确度。过程中,如果输入的内容多,而且又是即兴的,耗费的时间与精力也是很大的,清空后也难以再恢复。

它不像登录或搜索,固定的输个数字串或关键词,它是一段完整内容。虽然也会有某一句话或者某个词输错的情况,但是一键清空的操作成本太低,对应着聊天框的高输入成本,一键清空的存在与之并不相符。

于是,这里就引出了一个概念,叫做「输入成本」与「修改成本」。

清空按钮对应的,就是低修改成本,因为简单点击一下,就清空了。它所适用的场景就是低输入成本的情况,也就是前面提到的登录注册或搜索 —— 输入的内容相对固定,且可能反复。

对于登录、搜索等指向性比较明确的输入框来说,用户在乎的是输入和反馈的效率高不高。一键清空操作能带来效率上的提升,而且操作后带来的损失成本是很低的。因此,一键清空操作在这个场景下,对用户来说是安全且的。

但是在聊天场景下,一键清空作为低修改成本的作用是不适合的,因为这时候输入成本比较高。

用户在聊天输入框内表达清楚自己的想法是为了让对方理解,达到交流的目的,这样的内容是不确定的。而且在聊天输入出错情况下,我们有多种操作方式让用户重输,比如键盘快滑定位,触摸定位错字等,都比一键清空重新输入的成本低很多,而它所谓的「便捷性」在这里意义也就不大了。


于是乎,在衡量输入框是否需要清空按钮时,我们首先要知道,清空按钮是低修改成本,那么如果输入框的输入成本比较低时,我们就会使用清空按钮,来提高操作效率。而当输入成本比较高时,一键清空的操作就显得配不上这个输入框了。所以,它在聊天框里就没有存在的必要了。

包括其他非固定内容的输入框,也是一样的道理。


接着,延伸出第二个同学的问题:输入框超过限制是禁止用户继续输入,还是允许超出但会警告提示?


相信各位读完上面的,再看这个问题,应该也能分析出原因了吧?逻辑跟上面的也差不多。

也看输入成本,比如是固定内容的手机号,我们正常会禁止多余输入,因为这样用户更容易判断手机号是否正确。

如果是短长文,说明用户可能是手打字超出限制,这时候如果禁止输入,用户不好在输入框里做内容删减或修改,也会打断用户的输入流,毕竟还没写完就限制了,那得先删掉前面的,再来思考后面怎么写,会乱。而且如果是复制的,禁止输入的话,超出部分就被截断了,也要先删减,再继续复制剩余部分,非常麻烦。除非先在别处删减到限制字数内,再复制过来,但这样又增加了用户的操作成本。

如果允许输入但警告提醒,那么用户就可以根据自己已经输入完的内容做删减修改。


所以对于这个问题,我们从这个视角出发,也能了解一二,就是通过适用场景与输入成本来分析。


当然,以上所有内容更偏向于通用性说明,针对具体业务还需要具体分析。


文章来源:站酷   作者:呆总、

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档