别让用户发呆—设计中的防呆策略

生活中总会有些状况让我们无所适从摸不着头脑:面对一排电灯或空调的按钮,哪个才是控制我想要的?开锁时掏出一把钥匙,哪个才是正确的?拿起U盘插入电脑,朝那个方向才是对的?……类似的犹豫充分说明,你呆住了。现在,是需要“防呆设计”来拯救你了。

生活中总会有些状况让我们无所适从摸不着头脑:面对一排电灯或空调的按钮,哪个才是控制我想要的?开锁时掏出一把钥匙,哪个才是正确的?拿起U盘插入电脑,朝那个方向才是对的?……类似的犹豫充分说明,你呆住了。现在,是需要“防呆设计”来拯救你了。

防呆定义

防呆(日语:ポカヨケ;英语:Fool-proofing)是一种预防矫正的行为约束手段,运用避免产生错误的限制方法,让操作者不需要花费注意力、也不需要与专业知识即可准确无误完成正确的操作。广义来讲,防呆就是如何设计一个东西,而使错误发生的机会减至最低的程度。避免工作错误的发生,进而达到“第一次就把工作做对”之境界。

防呆与设计

最常见的防呆设计在电脑中,为了让普通用户在组装电脑时不会出错,相关零组件大都有形状相符的防呆设计。生活中也不乏防呆设计的应用,下面这款2013年iF获奖作品微笑钥匙(Smile Key)就通过防呆设计解决了关于钥匙的4大难题。自然的弧度,更加贴合拇指和食指,用着更舒服;更容易分辨钥匙的朝向—再不用去记忆哪面是正确的朝向,自然贴合拇指与食指的那面,便是正确的;钥匙平放的时候,因为这弧度,更容易被拿起来;钥匙上面有数目不等的凸起小颗粒,用于区分谁是谁,比如说,1个小颗粒是办公室的,2个是自家大门的。这在晚上看不到的时候尤其方便,再不用一串钥匙挨个尝试了。

防呆设计经常使用感官替换的方式来进行设计。如下面这款杯盖,通过视觉替代触觉进行防呆。可以感应杯中液体的温度显示不同的颜色。通过视觉的警示提醒人们此时的饮品很是烫口,避免一时糊涂拿起就喝了。

再如下图所示的路边的压痕,则刚好相反,通过触觉代替视觉提醒对驾驶到路边的车辆进行防呆提醒:你的车辆已经偏离主行车道了。通过行驶过程中车辆的颠簸感,比视觉引导更有效的指示驾驶员尽快调整方向。

防呆设计的重要目标是避免错误。喝咖啡留到桌子上是不是很懊恼?那就别让这个错误发生:来自设计师Kim Keun Ae的创意,防污渍咖啡杯在杯子的腰线上开了一条环状凹槽,于是,顺着杯子边沿淌下的咖啡渍,流到这里就会横向发展,再不会继续往下弄脏桌子~

另外,防呆还会通过设计在适当的时候对用户进行提醒,帮助用户完成任务。来自设计师Risako Matsumoto(松本理紗子)的创意平衡花瓶也利用了防呆的理念:优雅的提醒你浇花。一根木头支架,一头嵌着花瓶,另外一头则是可以移动的配重滑块,整个结构通过挂钩固定在墙上,形成一个类似天平的结构。当花瓶中的水减少,支架就会开始倾斜,水减少得越多,也就倾斜得越厉害,从而醒目地提醒你,它该加水了。

夜间的提醒也很重要。停电了,却怎么都找不到蜡烛?澳大利亚工作室Den Studio带来的荧光蜡烛(Blackout Candle),通过防呆设计试图解决这个问题:它采用了特殊材质的石蜡和发光粉混合制作,白天发光粉吸收光的能量,晚上发出荧光;其次,造型方正,在底部有个小开口,刚好可以塞进去一盒火柴——于是,即便突然的停电让你措手不及,但是找到了蜡烛,你就能找到火柴~

从上面几个案例中可以总结出防呆设计的原则:“避免错误,无需思考”,细化如下:

1.即使有人为疏忽也不会发生错误──不需要注意力。

2.外行人来做也不会错──不需要

3.不管是谁、无论何时都不会出差错──不需要专门知识与高度的技能。

从用户层面分析,防呆设计就是以非专业、无的用户角度出发,通过设计引导这类用户正确的操作。工业设计如此,交互设计也不例外,下面就是笔者对交互中的防呆策略的一些思考。

交互中的防呆

简单地说,防呆设计就是如何去防止错误发生的方法。人们总是在怪罪一件错误的发生,而较少去动脑筋想想如何去设计一些方法来避免错误的发生。所以我们需要正视错误,面对错误,想方设法的避免错误或缓解错误。在交互设计中,用户可能的错误正是我们应该预防的方向,我们可以参考防呆设计的思路,通过设计,引导用户正确的操作。

1.限制操作

想象一下:点击某个功能按钮,然后提示不能使用,应该怎么怎么样先……此时你是否会呆住:既然不能用,为啥要放出来做烟雾弹?所以,当用户当前状态不能进行一些操作时,把这些操作隐藏起来吧。给予用户适当的行为约束——为用户封闭掉不正确的道路。下图所示,如果浏览器中已安装Evernote Web Clipper,该页面对应按钮显示为灰色不可用状态,避免用户重复安装。

根据用户的使用状态,对应进行功能项的展示和隐藏,是有效避免用户误操作的常用手段。由状态所限制操作的设计在很大程度上预防了用户可能发生的操作失误。

另外,通过有趣的形式提醒用户达到限制也是一个友善的防呆做法。Feathers是一个第三方Twitter 客户端,点击那个可爱的 Twitter 鸟发推。随着用户逐渐输入内容 Twitter 鸟会逐渐变绿,防止用户输入超过140 个字符限制。

2.预见错误

给予用户必要的预判性错误提示——在用户出错发呆之前,告诉用户,这样走可能会出错。

当用户在午夜提到“明天”时,siri会询问用户具体的时间,以防用户错误的做出对明天的定义。

当电量不足时,Dropbox会自动停止正在进行中的照片上传动作。这个贴心的设计让用户避免了因上传而耗尽电量手机关机的囧态。

当用户的一个行为很可能会引发预见性的错误,越早提示用户,并给出可行性的建议,错误越容易被接受和改正,用户的损失也就越小。

3.跳出空白

空白页面一定是空白的吗?NO。单纯的空白页面会让用户焦躁不安:发生什么了?我现在该怎么办?……无路可走的焦虑肯定是很难受的,为避免这种心理,我们需要给到用户适当的出口,让用户在空白页面也有路可走。

例如在空白页面,提供用户解决办法,或提供给用户其他出口,引导用户接下来的操作,让用户不在空白页发呆,帮助让用户快速离开空白。

又或者,给用户以与众不同的空白页,让用户可以在空白中思考。Clear中,当用户删除所有list或新建一个空白项时,页面展示出一些有意思的语句,让用户不再空白。

4.步骤状态

在一些复杂的操作时,用户会产生一定的心理疑问:什么时候才是个头呢?此时,为了避免用户发呆,需要告诉用户操作所处的状态和接下来的操作步骤。

对用户在这个页面需要做什么、已经做了什么有清晰的划分,对现在需要进行的、当前所处的操作阶段予以高亮显示吸引人进行操作;对于还未进行到的操作阶段也预先做了一个介绍,很清晰的介绍了完整的任务流程。

另外,对状态的巧妙标识也是防止用户发呆的一个有效途径。操作过多,用户可能已经遗忘了一些状态,比如浏览网页时哪些看过哪些未看过。Opera 在新开网页标签上设计了折角处理,提醒用户这个页面还未浏览。

无确切进度时,随着时间的增加改变wording,以提醒用户当前页面仍在努力加载,避免用户误认为页面卡住。

5.唯一操作

不具备专业的知识、对操作的流程没有预期的普通用户,在一些流程复杂的交互操作前总会或多或少的迷茫。如何降低这种迷茫?解决方法就是让用户单次只需执行唯一操作,不要把复杂的选择题抛给用户,让用户发呆。

例如在电脑杀毒这个相对复杂的任务中,一次只提供给用户唯一明显按钮,避免用户在选择时左右为难。把简单留给用户,把复杂留给自己。用户只给用户唯一的推荐,别让用户思考。

6.想你所需

用户在操作时不会保持高度的谨慎和耐性,所以必要时要帮助用户思考。帮用户想他没想到的,帮用户想他所需要的。如新浪微博使用邮箱做为登录名,用户在输入@ 后,将会出现输入建议,输入建议里有常用邮箱的后缀以辅助输入。此时用户就可以直接选择无需输入。

根据用户场景设计用户想不到的需求是防呆设计的较高境界。当你使用手机竖屏浏览时想将内容放大你会怎么做?没错,将屏幕翻转至横屏显示,之后触控放大。谷歌翻译对这一场景进行了延伸设计:当翻译完句子后,如果将设备横屏旋转其界面会自动全屏并放大,方便展示给旁边的人观看。这个贴心的细节提前考虑到用户使用翻译的场景,帮助用户省去一步操作。

替用户思考,帮用户想他们所想不到的,不局限与让用户停止发呆,还要让用户意想不到。

结语

防呆设计就是如何去防止错误发生的方法,让非专业、无的用户可以第一时间完成正确操作。最后,总结下防呆在交互设计中的应用。

避免错误

1.限制操作:将暂时不可用的操作隐藏起来;

2.预见出错:将用户可能的错误提前展示,比事后诸葛要好;

3.跳出空白:别让用户止步与空白,空白应有更广的发挥空间;

无需思考

1.状态指引:让用户了解当前的状态和未来的进程,防止用户迷失;

2.唯一操作:复杂的任务流中不要让用户过多选择,简单唯一就好;

3.想你所需:用户是匆忙的,我们要替用户想到他们想不到的事情。

总之,我们应该抛开自己的高级用户视角,在用户可能“发呆”的各个时刻精雕细琢。深入挖掘用户行为习惯和心智模型,真正从用户的角度去分析使用上可能会出现问题,通过系统的设计去尽量避免错误的发生——把简单留给用户、把复杂留给自己,让发呆成为不可能。

翻译:cdc_tencent

原作者:暴雪

转载地址:站酷

(0)

相关推荐

  • 你的设计有依据吗?详解用户体验设计中的规律与逻辑

    这篇文章主要讲解用户体验设计中的规律与逻辑,让设计不再是纯感性的产物从而减少工作中的沟通成本."好的设计,当它变得好时是不可见的.只有当它设计的不好的时候,我们才会看到它,可以将它想成房间里 ...

  • 用户体验设计中结果页设计的几点思考

    8月初从电商行业跨度到互金领域,在视觉改版中体验了很多的产品,其中对结果页的再设计有了一些新的思路与总结. 无论是电商还是互金行业,用户对支付过程中的体验是至关重要,这直接影响到了最终转化率.一般来说 ...

  • 用户体验设计中的分步导航

    设计大型电商网站或者复杂的在线服务时,你很可能需要设计一套系统,来梳理顺序与结构.把它设计得简单直观,让用户顺利通过,是提升转化率的关键.沿途所有的挫败都可能导致他们离开,去选择其他的产品. 易用的分 ...

  • 在移动界面设计中应用费茨法则

    在人机交互理论中,费茨法则是非常基本的准则.无论是桌面界面设计还是笔记本的界面设计,都要遵循这一定则,对于日益复杂的移动设备来说,这一法则是否依然适用?我们一起来探索一下. 首先,来了解一下什么是费茨 ...

  • 如何进行用户体验设计

    用户体验设计从用研到开始发布上线,有一个非常周密的设计流程,过去我们做PC桌面产品,一年发一个年度版本,设计时间比较充裕,但在讯息万变的多屏,跨终端的移动互联网时代,就有些拖节奏了,下面,我将以我自己 ...

  • 怎么在Microsoft Office Access的“查询设计”中设置输出全部字段

    Microsoft Office Access是一个常用的数据统计应用程序,它是我们办公.学习中不可多得的好帮手.不少小伙伴还不太熟悉有关的操作技巧,因此常常存在困惑.比如:很多用户不知道如何在查询设 ...

  • UI设计中字体的应用

    我们在一直赶路,有时候要停下来,好好想想,沿途的风景我们好好欣赏过了吗?我们的基础知识牢固吗?我们有总结沉淀吗? 你说你是不是外貌协会的,反正我是的.想啥呢,我是说设计.在设计中,我们大多数人也都是不 ...

  • 2018年12条移动端用户体验设计趋势

    在移动应用领域,事物正飞速发展.要想在用户体验设计领域获得成功,设计师必须有远见,并为即将到来的新挑战做好准备. 为了简化这个任务,我列出了2018年最重要.最有影响力的趋势,而且很有可能远不止如此. ...

  • 【译】UI设计中使用插图的十大理由

    在过去的几年里,UI插图一直是最流行,最持久的设计趋势之一.一起来讨论下在网站和移动UI设计中运用插图的原因. 插画是什么? 基本上,插图是对特定概念.文字或过程的视觉解释,旨在支持.澄清甚至扩展人们 ...