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

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

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

防呆定义

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

防呆与设计

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

1

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

2

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

3

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

4

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

5

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

6

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

1.即使有人为疏忽也不会发生错误──不需要注意力。
2.外行人来做也不会错──不需要经验
3.不管是谁、无论何时都不会出差错──不需要专门知识与高度的技能。

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

交互中的防呆

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

1.限制操作

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

7

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

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

8


 

2.预见错误

    给予用户必要的预判性错误提示——在用户出错发呆之前,告诉用户,这样走可能会出错。
    当用户在午夜提到”明天”时,siri会询问用户具体的时间,以防用户错误的做出对明天的定义。

9

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

10

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

3.跳出空白

    空白页面一定是空白的吗?NO。单纯的空白页面会让用户焦躁不安:发生什么了?我现在该怎么办?……无路可走的焦虑肯定是很难受的,为避免这种心理,我们需要给到用户适当的出口,让用户在空白页面也有路可走。
    例如在空白页面,提供用户解决办法,或提供给用户其他出口,引导用户接下来的操作,让用户不在空白页发呆,帮助让用户快速离开空白。

11

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

12


 

4.步骤状态

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

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

13


14


 

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

15

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

16


 

5.唯一操作

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

17

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

6.想你所需

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

18

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

19

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

结语

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

避免错误

1.限制操作:将暂时不可用的操作隐藏起来;
2.预见出错:将用户可能的错误提前展示,比事后诸葛要好;
3.跳出空白:别让用户止步与空白,空白应有更广的发挥空间;

无需思考
1.状态指引:让用户了解当前的状态和未来的进程,防止用户迷失;
2.唯一操作:复杂的任务流中不要让用户过多选择,简单唯一就好;
3.想你所需:用户是匆忙的,我们要替用户想到他们想不到的事情。

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

原文地址:cdc.tencent.com
作者:暴雪

 


相关文章

  • php 获取用户IP与IE信息程序

    php 获取用户IP与IE信息程序 function onlineip() { global $_SERVER; if(getenv('HTTP_CLIENT_IP')) { $onlineip = getenv('HTTP_CLIENT_IP');...2016-11-25
  • php简单用户登陆程序代码

    php简单用户登陆程序代码 这些教程很对初学者来讲是很有用的哦,这款就下面这一点点代码了哦。 <center> <p>&nbsp;</p> <p>&nbsp;</p> <form name="form1...2016-11-25
  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • php ajax注册验证用户名是否存在代码

    这是注册程序是一款当用户输入完用户名是,就会自动去数据库中查询用户要注册的用户名是否己经被注册了,如果是返回提示否则提示可以注册。 conn.php文件 代...2016-11-25
  • php有效防止同一用户多次登录

    【问题描述】:同一用户在同一时间多次登录如果不能检测出来,是危险的。因为,你无法知道是否有其他用户在登录你的账户。如何禁止同一用户多次登录呢? 【解决方案】 (1) 每次登录,身份认证成功后,重新产生一个session_id。 s...2015-11-24
  • js检测用户输入密码强度

    一个用Javascript检测用户输入密码强度的效果代码,以下代码主要是从以下四个方面检测用户输入的密码的强度的,有兴趣的朋友可以自己添加或修改成自己想要的形式! 1. 如果输入的密码位数少于5位,那么就判定为弱。 2. 如果...2015-10-23
  • MySQL验证用户权限的方法

    知识归纳因为MySQL是使用User和Host两个字段来确定用户身份的,这样就带来一个问题,就是一个客户端到底属于哪个host。 如果一个客户端同时匹配几个Host,对用户的确定将按照下面的优先级来排 基本观点越精确的匹配越优先...2015-11-08
  • mysql误删root用户恢复方法

    装完数据库清理一些默认账号的时候不小心把root删除了,flush privileges 之后的新 root 忘了grant任何权限,查看mysqld选项里面有个 &#8722;&#8722;skip-grant-tables复制代码 代码如下: #/usr/libexec/mysqld --verbos...2015-03-15
  • PS怎么设计T恤 PS制作T恤教程

    PS怎么设计T恤?很多人都想要在T恤上有自己喜欢的图案,那么自己设计T恤的图案是方法之一,本次为大家带来了详细的ps设计T恤教程,有兴趣的同学快来看看吧。 1、打开PS,新...2016-12-31
  • photoshop夹心饼干主题促销网页横幅设计教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说说设计夹心饼干主题促销网页横幅实例的教程,各位想知道的使用者们,那么就快来跟着小编一起看看教程吧。...2016-09-14
  • c#实现51单片机频率计的代码分享(数字频率计设计)

    c#实现51单片机频率计的代码分享,大家参考使用吧...2020-06-25
  • photoshop设计蜘蛛侠纹理文字效果制作教程

    今天小编在这里就来给给各位photoshop的这一款软件的使用者们来说一说设计蜘蛛侠纹理文字效果的制作教程,各位想知道具体制作步骤的使用者们,那么大家下面就来跟着小编...2016-09-14
  • photoshop设计墨西哥亡灵节万寿菊文字特效制作教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说一说设计墨西哥亡灵节万寿菊文字特效的制作教程,各位想知道具体制作方法的使用者,那么下面就快来跟着小编一...2016-09-14
  • sqlserver 普通用户运行错误解决方法补充

    本方法作为Windows2003服务器安装及设置教程——MSSQL安全篇一(将MS SQL SERVER运行于普通用户下)的补充,成功解决了不能将sqlserver运行在普通用户的权限下的问题。...2016-01-27
  • b2c网站购物车的设计思路

    对于大部分B2C网站来说,购物车是网站的咽喉之地,订单是白花花的银子,所有银子都必然流经购物车,购物车不能有失。优秀的购物车设计至少需要完成两项使命:一是方便用户多买...2016-09-20
  • photoshop设计七夕情人节主题立体字制作教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说下设计七夕情人节主题立体字的制作教程,各位想知道的具体的使用者们,那么下面就快来跟着小编一起看看吧。 ...2016-09-14
  • 坚守网页设计师的贞操

    这是每个努力的网页设计师都将面临的问题。 早上的一个小调查,让我不能继续沉默。 调查的起因,是公司要求对一个网页三番五次的修改,甚至提供了客户认为比较满意的...2016-09-20
  • 网页设计中应防止的十个错误

      在许多糟糕的网站中,我们可以找出100条错误。现在,让我们将问题集中到最严重的10条上。仅仅防止这些错误,你的网站将会远好于你的众多的竞争对手。   1、没...2016-09-20
  • Illustrator设计从中间切开的猕猴桃效果绘制教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说设计从中间切开的猕猴桃效果的绘制教程,各位想知道具体制作步骤的,那么就快来看一看小编给大家分享的...2016-09-14
  • Illustrator设计简洁漂亮星系海报绘制教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一下设计简洁漂亮星系海报的绘制教程,各位想知道具体绘制方法的使用者们,那么下面就快看看小编在这里给大...2016-09-14