用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字

小蜜锋    -  云代码空间

—— 技术宅拯救世界!

确定在左,取消在右?(确认框的按钮位置问题)

2013-07-24|2806阅||

摘要:开篇         确认框,顾名思义,就是对用户的关键行为进行确认。比如在Windows操作系统中,删除某个文件的时候,都会询问“确实要把此文件放入回收站吗?”,用户可以选择“是”或“否”。         大家对于确认框的感觉大抵如此,觉得非常多余,打断了我的

banner

开篇

        确认框,顾名思义,就是对用户的关键行为进行确认。比如在Windows操作系统中,删除某个文件的时候,都会询问“确实要把此文件放入回收站吗?”,用户可以选择“是”或“否”。

        大家对于确认框的感觉大抵如此,觉得非常多余,打断了我的操作。这就像我着急上厕所,却被告知要先收费一样让人不爽。不能否认,确认框是一种打断,有时甚至是打扰。

        所以这里要把握住一个原则:能不用确认框就尽量不要用。除非用户的操作具有很大的风险,一定需要他来确认一下。

确认在左,取消在右?

        根据windows多年培养的用户习惯,大家都已经默认一个原则,就是确认在左,取消在右。但是,这样做是否真的合理呢?我们今天就来探讨一下这个问题。

        如果不是误操作,相信用户做事情前都是经过了一定思考。所以当弹出确认框的时候,我们猜测大部分用户都会去选择“确认”/”是”,继续之前的操作。之后本文的探讨,都讲建立在这样一种假设的基础上,即用户是想去选择“确认”/”是”。

1.以视觉流的角度分析

        如果将“确认”放在左边,“取消”放在右边。

        我们相信大部分用户在决定采取哪一个操作之前,都会把所有可以选择的操作都看一遍,以免做出错误的操作(当然不排除会有专家级用户 选择只看自己想进行的操作)。根据从左到右的阅读习惯,用户会首先看到左侧的“确认”,然后看一下在它旁边的“取消”,了解到所有可以进行的操作后,再回到“确认”按钮上,最后点击。

        用户的视觉流将会如下:

2

        如果将“确认”放在右边,“取消”放在左边呢?

        则用户会首先看到“取消”,然后看到“确认”,这个时候用户已经看到所有的操作,直接点击“确认”,完成操作。

3

        确认按钮在左,取消按钮在右的情况,用户需要三步才可以最后确认操作。而确认按钮在右取消按钮在左的话,用户则通过二步就可以完成确认操作。

        这样来说,“确认“在右,“取消”在左,视觉上是不是更顺畅、更轻松一些呢?

2.古腾堡法则

        古腾堡图指人们在浏览页面的时候,视觉都趋向于从上到下,从左到右的眼动规律。左上角是视觉的第一落点区,而右下角是视觉最终落点区。用户的视觉中心往往在页面的左上方,而结束浏览时视线往往落在右下角,所以合理利用这个法则可以帮助用户更好地获取内容并采取行动。

4

        既然用户最终操作行为是“确认“,我们是不是就应该把“确认”按钮放在最终视觉落点区呢?这样用户既不会错过“确认”这个重要操作,也保证用户在这之前都扫描到了所有的操作。

如果把确认按钮放在左边,那么这个最重要的操作就一直在视觉的落盲点,这样是不是不合理呢?

3.”上一步”与“下一步“的操作习惯

        对于确认与取消这2个操作来说,确认意味着执行该操作,即进入到下一步;而取消按钮则是放弃该操作,即返回到上一步。

按钮的位置,映射到用户阅读和浏览从左到右的顺序,右边是前进,左边是回退。而按照现有一致性的布局,“上一步”一般放在左边,“下一步”则放在右边。

那么根据上一步和下一步按钮的逻辑来说,确认在右边,取消在左边,是不是更加符合用户的心理预期呢?

6

总结

        根据以上3点分析,结论如下

1. 根据视觉流来分析,确认在右、取消在左能让用户的视觉流更加顺畅

2. 根据古腾堡法则,确认在右边,取消在左边能为用户提供更高效的任务流程

3. 根据”上一步”与“下一步“的逻辑,确认在右、取消在左能符合用户的心理预期

以上3点均证明确认在右,取消在左,对用户来说体验更佳

        然而现实中却并非如此,可怕的windows规范已经培养了强大的用户习惯,确认按钮在左边,取消按钮在右边。这在用户的心中已经形成一个默认的原则,改变用户的习惯非常艰难。如果我们维持windows的按钮位置,用户依然要付出更多的精力去选择;如果我们站出来做一些改变,这样的改变用户是否能接受,又是否会在全网一致性上给用户造成更大的困惑……

        到底是为提高用户体验做一些改变,还是延续用户的使用习惯?这是一个问题……


参考文章:http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/


顶 1踩 0收藏
文章评论
    发表评论

    个人资料

    • 昵称: 小蜜锋
    • 等级: 高级设计师
    • 积分: 7088
    • 代码: 757 个
    • 文章: 360 篇
    • 随想: 211 条
    • 访问: 1261 次
    • 关注

    标签

    设计模式(4)java(9)命名规范(2)广告创意(1)愤怒的小鸟(1)游戏(5)jsp(1)配置(1)Surface(1)windows(1)javabean(1)设计方法(1)开发工具(2)web(4)大数据(2)GPU(1)硬盘(1)内部结构(1)黑客(1)窃取(1)编码(1)解决方法(1)php(28)mysql(9)数据库备份(1)数据库还原(1)命令(2)数据库(1)安装(1)2012(2)世界末日(3)仙剑5前传(1)默哀(1)电源(1)女生(1)装饰器模式(2)古剑奇谭(1)电脑桌(1)史上最牛(1)编程语言(2)小米(3)电视机顶盒(1)营销策略(1)Android(8)手势(1)诺亚方舟(1)Eclipse(1)汽车(1)操作系统(1)软件(1)互联网(5)大事记(1)设计师(2)壁纸(1)古剑奇谭2(1)古剑奇谭网络版(1)云计算(2)服务器(1)框架(2)Socket(1)jquery(1)构造函数执行顺序(1)火车票(1)3D(1)数据中心(2)正则表达式(2)Web前端(1)开发框架(1)系统瘫痪(1)12306(2)cpu(1)javascript(2)开发日记(15)体育馆管理系统(15)网页设计(1)CSS3(3)腾讯(3)小游戏(1)interface(1)平板(2)面试(2)设计(5)摄影(2)数据挖掘(1)钢琴谱(1)情人节(1)陈欧体(1)程序员(3)漫画(1)UserAgent(1)iPhone(2)NoSQL(1)ui(9)越狱(1)指南(1)abstract(1)css(3)git(2)八核(2)三星(1)linux(11)数据类型(1)html5(2)UML(2)perftools(1)创意(1)logo(1)色谱(1)响应式(5)Metro(2)虚拟机(1)jvm(1)垃圾回收(1)left(1)join(1)连接查询(1)溯源系统(1)Override(1)SAE(2)WordPress(1)指针(1)链表(1)系统分析师(1)中间件(1)corba(1)static(1)无线(1)监控(1)iPad(1)Apache(2)比特币(2)命名规则(1)手机支付(1)curl(3)笔记(1)导航(1)thinkphp(1)异常导致本地路径泄漏(1)web设计(1)网络安全(1)诗句(1)4K对齐(1)代码库(1)色彩(1)动画片(1)struts2(3)漏洞(5)确认框(1)心情驿站(1)ArscEditor(1)resources.(1)apktool(1)AppKey(1)新浪微博(1)app(5)广告(3)赚钱(1)响应式布局(1)html(1)淘宝(2)微信(1)重构(5)缓存(1)破解(1)后门(1)七夕(1)SEO(2)概念设计(1)面向对象(1)bootstrap(1)性能(2)优化(1)iis(1)爬虫(1)采集(1)算法(2)文本相似度(2)cto(1)js(1)fsockopen(1)扁平化设计(2)网页(1)心情(7)小米电视(1)开箱(1)励志(2)招聘(3)命名(1)notepad++(1)python(1)配色(3)扁平化(4)ps(2)搞笑(2)创业(3)渲染(1)电影(1)模板(1)微博(1)企业家(1)公司(1)总结(1)前端(1)运营(1)变形(1)svn(4)教程(3)搜狗(1)泄密(1)双11(1)天猫(1)UC(1)启动界面(1)光棍节(1)双十一(2)物流(1)备份(1)更新(1)插入(1)插件(2)jsTree(1)(1)海量数据(1)分辨率(1)草图(1)手绘(1)速度(1)文本处理(1)实习(1)感想(1)文件(1)简历(1)65.49.2.17(1)yum(1)解决办法(1)阿里云(2)推广(1)来往(1)春运(1)LBS(1)gb2312(1)utf-8(1)log4j(1)详解(1)收购(1)私服(1)TortoiseGi(1)post(1)异常(2)flappyBird(1)应用创新大赛(1)宙斯杯(1)学习方法(1)xp(1)退役(1)安全(1)技术贴(1)flash(1)刷机(1)京东(1)电商(1)Tomcat(1)JDK(1)免费(1)长投影(1)图标(1)Photoshop(1)云端集成开发环境(1)软件开发(1)可视化(1)工具(2)OpenSSL(1)Heartbleed(1)vsftp(1)中国知网(1)学术论文(1)免费下载(1)开发(1)手册(1)速查表(1)追随战略(1)sdk(1)文章(1)发布(1)文件管理(1)沙画(1)动效(2)原型(1)感悟人生(1)哲理(1)Bash(1)类图(1)知识管理(1)Console(1)调试命令(1)rpm(1)报错(1)挂载(1)数据盘(1)云主机(1)产品经理(1)原型设计(1)mql4(1)mt4(1)ea(1)程序化交易(1)CURLOPT_PO(1)阿里云​(1)CentOS6(2)OpenSSH(1)漏洞修复(2)升级(1)安骑士(1)链克(1)

    站长推荐