咨询热线:0571-86812863
在线咨询
技术观点
化繁为简 详解网站中确认页的设计思路
 二次确认页,英文名是confirmation alert,在目前的诸多网页设计中,确认页越来越多了,用户体验非常的不便。究竟有没有一些原则和规范可以指导二次确认页的用法的?本文就二次确认页的一些问题,做了分析研究。

  一、什么是二次确认页?

  二次确认页其实就是Confirmation Alert,属于Alert家族中重要的一员。

  

  英文定义:A confirmation is a modal dialog box that asks if the user wants to proceed with an action.

  翻译成汉语大概就是:一个确认页是一种询问用户是否想继续执行某个动作的对话框。

  二次确认页面的特点:

  直接出现在用户刚刚发起的某个操作之后。

  询问并确认用户是否想要继续之前的操作。

  一般会包含一个简单的问题和两到三个操作。

  二、什么时候用到二次确认?

  二次确认的好处是:

  1、减少误点击

  2、避免动作中断时的损失(保存确认)

  3、使操作更加慎重

  4、安全性(有的二次确认还需要用户输入密码)

  缺点是:

  1、干扰了正常的操作流程,不恰当的多余的二次确认面还会让客户心生厌烦。

  2、在一些鼓励的流程中,二次确认页还会形成巨大的漏斗效应,直接造成客户流失。

  

  因此,有以下三个原则:能不用就不用;必要时才用;用了就让人明白。

  那么,什么时候用二次确认呢?

  1. 保存确认(Save Confirmation)

  例:填写表单中途离开,邮件写了一半关闭浏览器,文档未保存状态下点关闭。

  确认的目的:避免误操作或损失。

  2. 删除确认(delete confirmation)

  例:开心网账户的删除(不能恢复),删除好友或文件等。

  注意:并不是所有的删除都需要确认,例外情况有如:频繁的操作(如删除邮件),不重要的删除或者恢复成本较低。

  3. 其他重要且后果不可逆的操作

  例:淘宝的确认收货并同意放款,百度有啊的撤销退款协议。

  确认的目的:告知后果使操作谨慎,避免误操作。

  

  4. 重要且不推荐的操作

  确认的目的:通过确认让用户更改选择。

  最典型的例子莫过于淘宝的“评价确认”:

  

  二次确认页的特征既然是存在两个以上的操作选择,所以当只存在一种选择的时候,无论页面长得再怎么像确认页,也不是。

  例如以下的页面:

  

  大家都很关心的问题:到底该如何判断要不要确认页呢?

  建议如下:

  1. 若不存在两个以上的动作选择——不要使用确认页,可以是成功提示,或者错误提醒,设计成不需要用户操作的样子。

  2. 若存在两个以上的选择,但是90%的用户都会选择默认的选项——二次确认也是可以考虑去除的。可以加注一些提示来避免那5%的用户出现损失,但是不要用一个确认页去干扰这90%的用户。

  3. 考虑重要性和恢复成本:

  重要但是恢复成本低的,和不重要但是恢复成本高的,不建议使用二次确认,提供撤销操作更人性化。

  重要且恢复成本高的,最好二次确认,避免损失和误操作。

  4.是否是频繁使用的操作:一般情况下,若频繁使用,重要性就不是特别高,而且频繁出现的确认页会让人抓狂的,这种情况下,最好不用二次确认页。而且确认页有很多替代的形式,能够达到同样的目的但是更加亲和。

 三、二次确认页的形式:

  从设计角度划分:

  1. 系统弹出框

  

  2. lightbox(浮出层)

  解释:Lightbox的效果类似于WinXP操作系统的注销/关机对话框,除去屏幕中心位置的对话框,其他的区域都以淡出的效果逐渐变为银灰色以增加对比度,此时除了对话框内的表单控件,没有其他区域可以点击。

  

  3. 邮箱验证及手机验证码等替代形式

  比如,要删除开心网帐号时,开心网会发一封邮件,点击邮箱里的链接来确认一定要删除。这种形式适用于比较重要的不可恢复的场合。

  手机验证码确认的形式一般和资金相关,也用于比较重要的操作。

  从内容和功能角度划分 (这段资料来自于《windows vista UX guide》,为避免偶英文翻译有误,保留原文名称)

  

  1.Routine confirmations(常规确认)

  Confirm that the user wants to proceed with a routine, low risk action.

  确认用户想要继续一个常规的,低风险的操作。

  如图:

  

  2.Risky action confirmations(风险操作确认)

  Confirm that the user wants to proceed with an action that has some risk and can’t be easily undone.

  确认用户想要继续一个有风险并且不容易撤销的操作。

  图:

  

  3.Unintended consequence confirmations(未预期的确认)

  Confirm that the user wants to proceed with an action that has unexpected or unintended

  consequences.

  确认用户想要继续一个可能会导致意料外的结果的动作。

  很多时候,确认页是建立在用户有明确的操作意向的时候,这种情况下,也许用户对后果是有预期判断的:删除就意味着后果就是删除。而若删除命令同时会导致别的意料之外的结果产生,那就是unintended consequence confirmation。

  典型的例子:在多标签浏览器环境中,关闭浏览器,一般就会弹出一个确认框。

  图:

  

  4.Clarifications(澄清式确认、探询式确认)

  Clarify how the user wants to proceed with an action that has potentially ambiguous or unexpected

  consequences.

  搞清楚用户想如何继续一个行为,而这个行为可能会导致预期外结果。

  就好像在岔路口,导游说:好,我们继续走吧。你可能想反问一下:怎么走呢?向左还是向右?因为你担心右边可能会有打劫的埋伏。

  UX guide建议除非确实认为这个行为可能会出现的多种结果中,不然就不需要这种澄清式的确认。

  5. Security confirmations(安全确认)

  Confirm that the user wants to proceed with an action with security consequences.

  确认用户想继续执行一个会出现安全问题的动作。

  这个大家很常见了吧:

  

  6. Ulterior motive confirmations(别有用心的确认——汗,翻译成这样好像不太好吧)

  

 四、二次确认页的替代方案:

  如果不喜欢二次确认页,那么有别的方法可以取代吗?

  1. 防止出错——设置任务,用户在进行破坏性的操作前有前置任务需要完成。

  比如,在我们最近的一个项目中,用户在点击某个button时,那个命令是需要被确认的,否则一旦误点击会造成不可恢复的后果。但是在点击下这个button后,用户是需要填写一个表单的。在提交表单时,我们就发现没有必要再用一个二次确认。因为用户在填写表单的过程中是可以思考和反悔的,他既然愿意花时间和精力去填写表单,证明他确实想明白了。

  2. 提供撤销操作(Undo)——gmail的undo

  图:

  

  3. 提供反馈,让不期望的结果显著化。

  图:在支付宝的直接付款页面,点击radio button后已经使用提示告知了后果,因此点击下一步就不需要再次确认了。

  

  4. 消除选择——往往需要被确认的是因为有两个或多个response(后续动作),可以认真想一下,是否一定有多个选择,如果仅仅剩下唯一一个了,那么就不需要询问了。

  如果需要被confirm的选项不是很重要,干脆拿掉它。我特讨厌有些网站给你一个长长的表单,下面有两个button,一个提交一个清空。往往会不小心点击了清空,结果刚才忙活了半天的东西都没有了。要避免这种情况,当然你可以在我点击清空时给我一个确认,不过我更加期望把这个button拿掉。

  五、设计形式的选择:

  自从有了浮出层,越来越多的web 2.0的网站抛弃了系统弹出框。开始使用lightbox(浮出层),当然,他们各有优劣,不能一概而论。

  比如以下这种情况:

  

  系统弹出层可以允许我挪开确认窗口以阅读“需要被确认的内容”。

  而如果使用浮出层,会出现这样的效果:

  

  挪都挪不开,怎么确认?当然你可以把需要被确认的内容放到浮出层上,前提是有足够的信息承受量。

  做了一张浮出层与二次确认页 两者的优劣点表,供参考:

  

 六、二次确认页注意事项:

  1、时机——确认是必要的时机

  2、形式——是不是采取了合适的形式(有哪些形式?),注意不要用二次确认页鱼目混珠,有很多网站把成功页面做成像二次确认页一样,居然还有个感叹号来警示用户“操作已经成功”……

  3、文案

  4、icon

  5、出错控制——:二次确认页应该给出建议性的下一步操作,默认的动作。

  6、结构——这个页面不需要太多创新,最保险的方式就是照顾用户已有的习惯,用主流的结构去呈现。

  文案太重要了:

  1. button的文案——需要让用户思考。

  很多时候我们发现一个页面很莫名其妙,很不容易理解,仔细看看,原来是文案没有传达清楚。

  如果二次确认页面也出现含糊不清,模棱两可的文案,那是最糟糕的事情。

  大家看得明白下面三个二次确认页的区别吗?——资料来自《windows vista UX guide》

  

  三者的区别在于button引导文案,先使用官方资料:

  第一个二次确认页面:windows认为是不合理的二次确认页,因为它起不到该起的作用,因为用户本身就是通过点击“uninstall”操作看到这个页面,当他看到button上的文案还是“uninstall”的时候,他几乎不会去阅读二次确认的问题和描述,直接就会点击“uninstall”。而windows认为二次确认页至少是需要用户思考一下再做操作的(不然还真的没必要)。——Do make me think。

  第二个二次确认页面:windows认为是合适的,使用yes和no作为button的文案,用户在点击前,至少会思考一下yes和no分别对应的后果,因此他会去看描述。

  第三个二次确认页面:windows认为也是靠谱的。一个简单的anyway作用很大……体会一下。

  Yes/No和OK/Cancel的button文案搭配大家似乎在英文站点上司空见惯了。好像是可以相互替代的是吗?

  

  现实生活中,某个人负责写二次确认页面文案,但是button上显示的文案有时却得走"规范",统一使用YES或者OK(比如),至于点击了button到什么页面是由设计师和工程师决定的。就会导致以上矛盾的情况:button和文案牛头不对马嘴,点击后却又是另外的情况……

  2. 页面的文案——足够的信息讲明白后果。

  

  你会经常被这种页面搞得很苦恼,你确定吗?你真的确定吗?你考验我的智力还是判断力还是耐力?

  ICON可不能乱用

  

  icon很美观,似乎很多设计师总是想用一个icon点缀一下二次确认页。即使不是二次确认页(向左侧的这个可怜的成功页面,却被用了警示的icon,实在匪夷所思)