网页设计之用户确认页设计技巧

  在网站中当用户做一些删除等危险操作时我们经常使用确认页对其进行提醒,那么我们什么时候该使用确认页?


  以上的那个图,就是本文的主角:二次确认页,她的英文名是confirmation alert。

  此文的背景:当时为什么想做这个二次确认页的研究,也是由于当时做的一个项目。当时那个项目出现了很多个二次确认页。

  有很多人的意见:

  “啥?删除地址也要二次确认?不用吧”

  “这里为什么不确认一下呀?直接就提交了?填错了怎么办?”

  “删除前,怎么不加个确认呀?”

  “……”

  确认页越来越多了,在最后大家看demo的时候,又一致觉得我们太罗嗦了。

  究竟有没有一些原则和规范可以指导二次确认页的用法的?所以一边做项目,就一边进行一些分析了。最近在研究《windows vista UX Guide》,发现它里面的很多内容非常有营养,也对我之前纯原创内容进行了一些补充。于是分享分享吧,将原来的ppt做了一些摘选如下。

  内容:

  1. 什么是二次确认页(定义以及特征)

  2. 什么时候用?

  3. 形式的抉择?

  4. 一些注意事项。

  一,什么是二次确认页?

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

  


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

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

  二次确认页面的特点:

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

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

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

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

  二次确认的好处是:

  减少误点击

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

  使操作更加慎重

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

  缺点是:

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

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

  


  因此,白话大原则:

  能不用就不用;——什么时候不能用?下文。

  必要时才用;——什么是必要的时候?下文分解。

  用了就让人明白。——怎么做?别离开,我们一起讨论一下。

  什么时候用呢?

  1. 保存确认(Save Confirmation)

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

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

  2. 删除确认(delete confirmation)

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

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

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

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

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

  


  4. 重要且不推荐的操作

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

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

  


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

  例如以下的页面:

  


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

  建议如下:

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

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

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

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

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

  4.是否是频繁使用的操作:一般情况下,若频繁使用,重要性就不是特别高,而且频繁出现的确认页会让人抓狂的,这种情况下,最好不用二次确认页。

  而且确认页有很多替代的形式,能够达到同样的目的但是更加亲和,在以后的文章里会触及到。

  同时,欢迎同学们提供反面的二次确认页案例,偶的视野实在有些狭窄。:)

时间: 2024-09-02 12:41:04

网页设计之用户确认页设计技巧的相关文章

用户行动轨迹的产品设计:关于用户行动轨迹设计的思考

文章描述:用户行动轨迹设计杂思.   最近关于LBS是否有泡沫的争论此起彼伏,尤其是对Color模式质疑,甚至传出了国内某某基于Foursquare签到模式的LBS公司要大规模裁员的消息.毋庸置疑的是,LBS是整个移动互联网的基础应用之一,LBS业务模式尚处于探索期.不管现在众多的Foursquare.Color.Kuipp们的模式多么不靠谱,其中有多少的泡沫成分,并不代表LBS本身没有美好的未来,当然未来LBS的成功肯定不单纯只依赖于签到.弹性社交.问答等几个简单模式.     在LBS应用中

用户体验设计:提高用户满意度的设计思考

产品要让用户满意,最基本的条件应该是该产品符合用户的最低需求,能帮助用户解决问题.其次,满意是关于行动结果的评价.因此,当人机交互的结果符合或者超出用户预期,那么用户就会感到满意. 在学校修管理学的时候,有讲过一个管理激励的理论.管理激励是基于行为和认知科学的研究,来发现人们的需要.动机.目标和行为四者之间关系的核心理论,主要的目的是讨论如何满足人的各种需要.调动人的积极性.由此也引出了一个人们会在怎样的情况感到满意的问题. 在人机交互中,同样有满意度的概念.那怎样设计令用户满意的交互呢?或许首

用户体验设计:基于用户的改进设计

经常听到设计团队成员(或者他们的管理者)说:"我们需要一个全新的设计."这就是从错误的立足点启动了一个重新设计项目,有着错误的目标和策略. 通常,一个全新的设计将会是一个糟糕的设计,仅仅是因为全新的设计打破了用户的预期.更好的策略是从用户熟悉的设计出发,基于用户对系统如何运作的理解来改进设计. 为什么内部员工期望全新设计 你日复一日地盯着这些事情.当然你会对这个UI审美疲劳了.算算你在你的设计上花费了多少"接触小时数".如果你在一个设计团队呆了几年,你可能已经看了几

从“以用户为中心的设计”到“用户参与式设计”

中介交易 SEO诊断 淘宝客 云主机 技术大厅 UCD中常用的用户研究方法--问卷.一对一访谈.焦点小组等,更多是将用户作为研究的客体,通过用户语言表述的观点,了解用户的期望.需求.而北欧和北美近几十年.尤其最近十几年在工业设计领域,逐渐兴起的用户参与式设计(participatory design,PD),倡导将用户更深入的融入到设计过程中,培养用户的主人翁意识,激发并调动他们的积极性和主动性. 以诺基亚.摩托罗拉等传统移动通信产品制造商为代表的实践者,以及以IDEO.frogdesign等第

微信开发 网页授权获取用户基本信息_应用技巧

微信公众平台最近新推出微信认证,认证后可以获得高级接口权限,其中一个是OAuth2.0网页授权,很多朋友在使用这个的时候失败了或者无法理解其内容,希望我出个教程详细讲解一下,于是便有了这篇文章. 一.什么是OAuth2.0 官方网站:http://oauth.net/   http://oauth.net/2/ 权威定义:OAuth is An open protocol to allow secure authorization in a simple and standard method

用户体验设计案例:用户体验就是设计

文章描述:实例告诉你为何体验就是设计. 我最近又重新点燃了对钢笔的强烈爱好,发现自己的书写装备收藏中又出了几个新品.由于其中一些相对昂贵,我决定向北卡罗来纳的一家小型的皮革制品制造商订购.价格公道,评论也表明其做工很好.网站十分简洁,商品才是其重点. 可是到了要付款的时候,我却被转到了 PayPal 的网站上,我跟这家公司的交互体验也就此被打断了,这不是因为这家笔筒制造商做错了什么,而仅仅是因为 PayPal 的界面和用户体验跟前者太不一样了.付款页面犹如一台时间机器,把我带回了至少 10 年前

用户交互设计:网站用户满意度题目设计

网页制作Webjx文章简介:关于用户满意度问题的设置. 网站日常运作中,为了收集不同产品的用户反馈意见,可以在各产品的页面挂出意见反馈入口,能够帮助产品经理间接地倾听用户的声音,实时了解他们使用产品的痛点.获取改进需求.与此同时,可以在反馈问卷中加入满意度的题目,一定程度上把用户的感受量化,当反馈意见量大无法快速消化时,量化的满意度题目能更快速地促进产品改进. 在用户反馈问卷中设置满意度题目,有利有弊,优势是如前所诉,能够快速把握部分用户的感受,也能够长期连续获得部分用户对产品的评价:不足主要是

谈迅雷看看的设计及用户体验点滴

很多网页设计师认为自己做好设计就可以,其他的事可不用理会和学习,那就大错特错了!一个优秀的设计师,必须深入了解产品本身.相关交互结构及用户体验等常识!这样设计师设计的东西才能深入产品中去,避免不犯错误!设计来源生活和思考,同样作为一个网页设计师,要不断地学习.思考.分析产品才能设计出更好的作品! 这里主要以迅雷看看产品为例,谈设计及用户体验的点点滴滴!希望对刚跨入网页设计这行的童鞋们有所帮助! 主要两个方面讲: 1.了解产品需求设计(以迅雷看产品为例) 2.交互设计与视觉设计 首先讲下第一方面:

网页设计中的图标的使用技巧与资源合集

  提到图标设计,似乎每个设计师都有话说,但是要做好图标设计真的那么容易么?今天这篇文章针对网页设计领域的图标设计进行了相对全面的梳理,从设计技巧到设计资源一应俱全,但愿能帮上你! 图标是每一个现代UI中不可或缺的组成部分,它们不仅能协助UI布局组织内容,而且轻量级的图标融入界面也不会喧宾夺主.不仅手机和平板的APP UI中会大量用到各种图标,而且iPod和智能手表的界面中也是如此,这正是因为图标具备快速直观传达信息的能力. 在网页设计刚刚兴起的时代,小图标就已经被早期的网页设计师和开发者投入使