写在前面

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

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

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


确认在左,取消在右?

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

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


1.以视觉流的角度分析

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

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

用户的视觉流将会如下:

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

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

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

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


2.古腾堡法则

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

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

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


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

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

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

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

总结

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

1. 根据视觉流来分析,确认在右、取消在左能让用户的视觉流更加顺畅
2. 根据古腾堡法则,确认在右边,取消在左边能为用户提供更高效的任务流程
3. 根据”上一步”与“下一步“的逻辑,确认在右、取消在左能符合用户的心理预期

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

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

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

来源:tid.tenpay

“确定“和“取消“摆放顺序相关推荐

  1. element-ui中 this.$confirm修改确定取消按钮顺序和样式

    element-ui中 this.$confirm修改确定取消按钮顺序和样式 首先其他博客上说是给 this.$confirm中添加取消样式,我试过了无效 本人采用的方案是利用css的gap属性,在项 ...

  2. element-- 修改MessageBox 弹框 中确定和取消按钮顺序

    需求:修改弹框中的 取消/确定按钮顺序,及头部和底部背景颜色; 原ui效果图 需求ui效果图 方法:对取消及确定按钮自定义类名,样式重写 转载于:https://www.cnblogs.com/xin ...

  3. Python多线程顺序运行

    某些时候我们需要线程顺序运行,在网络上找了些代码,功能能实现,但是对于大量线程来说,需要手动修改多处,用户调用不便,于是自己基于网络上的一些代码进行优化,实现便于增加线程和修改线程顺序的代码. fro ...

  4. Android 桌面Google文件夹内apk摆放

    记录:Google桌面文件夹的apk 核心GMS应用是需要预加载到设备上的Google应用. 注意:在2019年12月2日或之后启动的Go设备上,合作伙伴可以决定Google文件夹中GMS应用程序图标 ...

  5. U盘安装CentOS 6.4及修改默认启动顺序

    用UltraISO+U盘装CentOS 6.4 准备: 1.我装的是32位的,因为FAT32文件系统4G大小限制的原因.CentOS 6.4的安装镜像都有两个,但是64位的DVD1大于4G,要麻烦一些 ...

  6. Flutter基础笔记

    目录 List里面常用的属性和方法: Set Map forEach,map, where,any,every extends抽象类 和 implements Flutter环境搭建 入口文件.入口方 ...

  7. 顶级c程序员之路 选学篇-1 深入理解字节,字节序与字节对齐

     深入理解字节,字节序与字节对齐 一 总述 作为一个职业的coder玩家,首先应该对计算机的字节有所了解. 我们经常谈到的2进制流,字节(字符)流,数据类型流(针对编程),结构流等说法,2进制流,0和 ...

  8. flutter 基础知识点总结

    前提:从事开发已经十年了,PC开发/Android开发/后端开发,初级/中级/高级/架构师,成员/组长/开发负责人,以及各种考证和阶段目标计划-,一路走来喜怒哀乐/酸甜苦辣都体验了. 人无远虑必有近忧 ...

  9. 【尚硅谷】Vue.js从入门到精通笔记

    目录 第1章:Vue核心 1-1.Vue简介 1-1-1.什么是Vue 1-1-2.Vue的特点 1-1-3.搭建Vue开发环境 1-1-4.创建Vue对象 1-2.模板语法 1-3.数据绑定 1-4 ...

  10. [翻译]pb技巧、代码和实用工具[程序员家园论坛]

    [翻译]pb技巧.代码和实用工具      原文: http://www.softtreetech.com/hightech/tips.htm      pb技巧.代码和实用工具      内容列表: ...

最新文章

  1. php 去除图片黑边,C#_c#扫描图片去黑边(扫描仪去黑边),自动去除图像扫描黑边复制代 - phpStudy...
  2. 一分钟学会python编程_用Python教你一分钟检验出来!不用群发_编程语言_Python课程_Python教程_课课家...
  3. 矩池云安装gdal五种解决方案
  4. Python:学习笔记之函数的参数和返回值
  5. 《硅谷钢铁侠:埃隆·马斯克的冒险人生》文摘
  6. 软件测试自我评价范文,软件测试工程师100字自我评价范文
  7. matlab变量全局化,matlab全局变量global
  8. java wed 1
  9. 漂亮的JQUERY SLIDESHOW 磨砂玻璃背景
  10. 捣鼓PlantUML
  11. 〖Python APP 自动化测试实战篇⑩〗- app自动化总结与展望
  12. css js 简单的径向菜单学习笔记
  13. Storm-电商实时交易风控系统
  14. 计算机系统在英语中的运用,在应用系统中探究计算机屏幕英语句法规律.doc
  15. c语言编写十六进制编辑器,什么是十六进制编辑器?
  16. 【点云配准-4PCS(2008)】4-Points Congruent Sets for Robust Pairwise Surface Registration
  17. SCI论文图表复现-2(十字火山图)
  18. 研究生新生的科研指南
  19. python之制作飞机大战外星人
  20. 波斯公主选驸马python代码及可视化

热门文章

  1. arcgis双标准纬线等角圆锥投影_常用地图投影之圆锥投影
  2. 算法——最好理解的动态规划之01背包详解(看完这篇再不敢说自己不知道01背包算法!!!)
  3. 包包各部位名称图解_背包学问知多少 新手背包各部分功能详解
  4. Telink IDE 泰凌微IDE C语言静态库的生成和使用
  5. 邮件系统html源码,SpringBoot系列—简单的邮件系统(附完整项目代码)
  6. AcWing 4487. 最长连续子序列 单调栈上二分 数组模拟栈的好处
  7. 站长开源工具箱V2.0网站源码
  8. 第1章 区块链是什么
  9. local class incompatible: stream classdesc serialVersionUID = -3129896799942729832, local class seri
  10. ajax status code 415,Ajax向后台传json格式的数据出现415错误的原因分析及解决方法...