1.3.1 用户不喜欢使用令人有压力的产品
笔者个人对数字不是特别敏感,记得以前给父母转账时至少要核对5遍银行卡账号,有这种行为的主要原因是笔者害怕输错银行卡账号,造成经济损失。用户在使用某个产品功能时,也会因为操作不顺畅或操作结果不符合预期而产生压力。设计师在设计的过程中要根据设计目的去合理规避或利用这些压力。
◎因可能会带来财产损失而产生压力
用户在一个页面上绑定自己的银行卡账号,输入长长的数字后,显示的结果如果没有按照银行卡上面每4位隔开的方式显示,用户就会产生心理负担,需要重新核对几次数字。用户担心自己使用该功能后会给自己带来财产损失。
支付宝App 10.1.15版本转账到银行卡页面
通过以上的例子可以看出,设计师在进行UI设计时,可以多思考做这些功能的原因,以及用户是否因这些功能提高了使用效率。例如,用户在使用支付宝转账到银行卡的这个功能时,卡号输入框内的数字会以每4个一组的方式隔开,刚好与银行卡上面的格式对应。这样用户就很容易知道已经输入的是哪些数字,没有输入的是哪些数字。不管是操作过程,还是操作结果,都和用户的心理预期同步。另外,从产品业务上来讲,这种设计也是有一定帮助的。
支付宝转账到银行卡的页面还有另一种交互方式:当用户把输入焦点放在转账金额时,页面会自动根据卡号把银行名称匹配出来,这个功能给用户带来的最直观感受是信赖。这个功能为用户的心理预期做了双重验证,首先是银行卡数字分组让用户更容易校验卡号,其次是在即将转账时把卡号对应的银行名称显示出来了。从用户的角度看,这个产品准确、安全;从产品的角度看,该设计增加了用户做转账这个决策时的动力。
◎因使用过程不顺畅而产生压力
下面通过实际的案例来分析因使用过程不顺畅而产生的压力有哪些。
案例1
页面上有一个“×”的图标,如果该图标的语义是关闭当前页面或关闭弹出框,根据弹出框设计的目的不同在页面的表现上会有所不同。如果弹出框的设计目的是提醒用户弹出框内的内容或进行轻度的操作,设计师会将“×”图标设计得突出一点;如果需要用户进行接下来的操作,设计师会将“×”图标弱化一些。
看下面两张图,网易云音乐App的版本更新提示弹出框页面上也有“×”图标,但在不同位置,该图标所承载的功能是不一样的。上图中“×”图标的功能是关闭弹出框,而下图的播放歌曲列表页面中“×”图标的功能是移除歌曲。
网易云音乐App 4.3.4版本更新提示页面
网易云音乐App播放歌曲页面的歌曲列表
下面对网易云音乐App的播放歌曲列表页面进行分析。当用户播放一个歌单的歌曲时会出现以下3种情况。
第1种情况:用户不想将歌单里面的某些歌曲列入这次播放列表时,可以点击右边的“×”图标把不想听的歌曲从播放列表中移除。
第2种情况:正在播放的歌曲的左边还有一个该歌曲是来自哪个歌单的入口,用户点击这个入口后,如果歌曲是“本地”的,则跳转到“本地列表”,如果歌曲是网易云歌单里的,则会跳转到其所在的歌单。
第3种情况:如果用户想要切换到不相邻的歌曲,点击歌曲名字即可。
所以,对同一列信息就有3种不同的操作方式,用户在操作时,会感到压力。当用户想要移除歌曲时,可能会担心点击到别的地方,所以每次使用时都特别小心。但网易云音乐App的页面处理得很好,那就是将操作热区都做得很大。如果操作热区不够大,会造成使用不流畅的问题,用户会在使用该功能时产生压力。
案例2
UI设计需要考虑用户的使用场景。例如,用户在单手操作的情况下,右手持握手机并在页面上操作时会产生哪些问题;左手持握手机并在页面上进行操作时,会不会因为左手的大拇指盖住了解释功能的文案而导致操作结果和预期有出入等。
某阅读类App调整字体和亮度时的操作页面
笔者一直强调设计的目的是解决问题,以上页面的设计方案是针对用户觉得屏幕明暗程度不合适,或者当前的文字大小不适合阅读而做的调整。这里笔者单独针对设置文字大小的设计方案提几个问题。
问题1:用户在什么场景下需要使用调整文字大小的功能?
用户把文字调小的原因是能够在一屏内看见更多的内容,此时用户所处的环境应该是安静、舒适的。用户把文字调大的原因是提高阅读的准确性。例如,用户在公交车或地铁这样不平稳的环境中,因为小文字的准确性没有大文字的准确性高,所以需要把文字调大。那么回到以上的UI设计方案中,除了蒙版背景后面能让用户看见文字调整大小后的效果外,还有别的办法让用户预先查看调整后的文字在屏幕上呈现的效果吗?
可以思考这样的设计方案:文字的大小由4个刻度表示,如“超大”这个刻度的文字就比“大”刻度的文字大。设计师在做程序的时候,要设计好文字的大小。针对不同用户使用的不同设备,到底刻度上的“超大”在用户设备上显示的是多大呢?为了使操作结果符合用户的预期,如“大”对应的是14号字,“超大”对应的是18号字,那么UI设计方案就把“大”和“超大”这两种文字分别改为14号字和18号字,这样用户就知道调整后的文字在自己设备上显示的效果了。
问题2:如果用户是单手持握手机,会带来哪些问题?
当用户左手持握手机时,用大拇指去点击右下角的操作面板按钮,此时大拇指覆盖在屏幕上,会遮挡住屏幕左侧的提示文案。用户看见的情况就如前一页中的图所示,用户可能会认为刻度条就是对应“小”“中”“大”和“超大”这4个刻度的,用手指滑动进度条时会改变字体的大小。但用户从操作的结果发现进度条并不是对应字体的大小,而是控制屏幕的明暗程度。当用户右手持握手机时,用大拇指去点击右下角的操作面板按钮,此时大拇指会挡住面板的右侧。但这种操作体验会比用左手操作更好一些,因为解释功能的提示文案在左边。文案提示了用户第1行内容是用于屏幕亮度的调整,第2行内容是用于字号大小的调整,所以用户会比较明确自己的目标和系统给的内容。
页面设计的目的是帮助用户解决问题,设计师在做方案时一定要明确一点——站在用户的角度想问题。设计师要思考自己的产品需要用户去完成什么样的任务,关注用户在这些页面上的起点、过程和终点。前面提到一个比较简单的例子是调整文字大小和屏幕亮度。用户在页面上的起点是操作滑动条和点击字体大小的按钮,这个过程伴随着操作页面元素的变动;终点是用户操作完后退出页面。这整个过程还可以继续细化。例子中的设计方案会给控件位置的设定带来一个问题,用户会认为相邻的两个元素一定存在着关联,所以会出现前面提到的用户会认为进度条是一个调整文字大小的控件。这是格式塔认知心理学上的一个常见认知误区,举这个例子的目的是强调设计师的作品不应该只停留在表现层。设计师还应该思考用户的心理,做到“我即用户”,站在用户的角度去设计更好的方案。
◎因操作结果和预期不符合而产生压力
心理学上关于人们对预期的研究有很多。设计师不管是在做UI设计还是在做功能规划,常常会参考用户的心智模型,并且一定要让提供软件的概念模型与用户的心智模型高度一致。当用户得知某个App可以在线购买商品时,用户的第一反应会认为这是一个电商类的App,这个App肯定有支付和配送的环节。这就是一个简单的用户心智模型。该App如果缺少支付、配送等环节,用户就会认为这个App不是电商类的App。
人们会根据自己过往使用App的经验,自动去“创造”出关于某一个领域或某一类实物的心智模型,并随着时间等因素的变化对这个心智模型进行修正。例如,说到海淘类的App,用户如果知道在小红书App和洋码头App上可以发布动态,当他们接触其他的海淘App时,他们的第一反应可能会是其他海淘App也应该会有发布动态的功能。
回到本节要探讨的问题,用户对产品的压力还来自操作结果和预期不符合。设计师在做方案时一定要告诉自己:如果给用户提供了一个编辑按钮,用户点击该按钮后一定是编辑所在区域的信息,而不是删除掉该区域的信息。
很多人第一次使用iPhone设定闹钟时,不知道应该怎么去修改闹钟的时间。用户尝试在默认状态下点击列表里面的闹钟,但并没有任何回应,尝试点击左上角的“编辑”按钮后,出现了比较醒目的删除按钮,每一个闹钟前面都出现了一个删除按钮,这明显和用户的任务目标是不符的,用户只能继续尝试。跳转到了编辑闹钟的页面后,还是不敢编辑,因为用户害怕返回后闹钟会被删掉,当发现闹钟不会被删掉,就可以进行编辑了。
iPhone闹钟设定页面
从产品经理的角度去猜想iPhone的闹钟功能这样设计的原因,可能是大部分用户都会设定多个闹钟并且经常删除闹钟。不过从UI和用户体验的角度来看,这个设计会给用户带来很大的压力。普通用户在多次使用后会觉得没问题,但如果这是市面上某个创业公司或小公司设计的闹钟,笔者认为用户放弃使用该产品的概率是极高的,这也是App Store上面闹钟类的应用非常受欢迎的原因。所以,设计师在进行设计时一定要考虑好操作结果和用户预期的高度匹配。笔者偶尔也会看见身边从事UI设计的朋友为了让页面统一,做出了不合时宜的设计,如把点赞的按钮变成了桃心形状的按钮。其实,在用户的认知里面,点赞的按钮应该用大拇指向上的形状表示,桃心形状的按钮一般代表的是喜欢和收藏。设计师在为某个设计方案赋能的时候,一定要让用户认知与预期统一。大拇指向上的形状和桃心的形状是两个完全不同的概念,那么点击两种形状按钮的操作结果和预期是否一样呢?
◎用户压力在设计中的应用
怎样在产品的设计方案中利用好用户的压力呢?以用户为中心的设计(User-Centered Design,UCD)也需要分场景对待。设计师需要适当地利用用户的压力去设计一些功能。在帮助用户更快地做决策的同时,提升产品的业务能力。
用户进入唯品会App中的商品详情页面并点击“加入购物车”按钮把商品加入购物车后,会收到支付时间的提醒,其文案重点体现商品只会保留20分钟,并且购物车页面上方会出现20分钟倒计时。从UI上来看,文案暗示用户购买的东西是优质商品,暗示商品保留在购物车的时间只有20分钟,用户在20分钟内不做出购买决策则会损失购买该商品的机会,这就利用了用户担心经济损失的压力。当然,从其他角度来看,唯品会这个倒计时的做法跟其自身业务有关。唯品会本身不做自营,上面的商品和天猫App上的商品不一样,不是长期存在的。如果用户把商品放进购物车而不购买,此时商家的库存是减去了的,用户一直不支付就会占用库存,导致其他用户无法下单,所以在20分钟内用户不支付货款的话,系统会自动把占用的库存还回去。倒计时的时间数字除了在减少外,还用了醒目的颜色来表示,加深对用户提醒和催促的程度。
唯品会App 6.12.9版本商品加入购物车后的页面
唯品会App 6.12.9版本购物车页面