多按钮共存——don’t make me think
作者：死猫 来源：Tencent CDC Blog 发布时间：2010-01-11 20:20:00
之前在一个web系统的设计中，和另一个设计师讨论，“保存”和“取消”按钮该怎么设计。我的观点是，保存是比取消更常用的按钮，也是用户的主要目的（用户不会为了取消来使用表单），所以在视觉上，保存按钮应该比取消按钮更醒目，这样更容易被用户先看到，从而提高用户的效率。
下图：Google analytics系统中，Apply以按钮的形式表现，cancel以链接形式表现
后来碰巧看到Luke Wroblewski写的“Primary & Secondary Actions in Web Forms”这篇文章。作者把“提交”、“保存”，“继续”这样的按钮定义为主要动作。因为它们是用户操作表单的主要目的，而“取消”、“重置”、“撤销”这样的按钮定义为次要动作，因为这些动作不是操作表单的主要目的，并且它们的点击效果是负面的。
作者一共设计了6种视觉形式，并通过眼动仪来测试哪种表现最好。结果有点出乎我的意料，视觉上不区分主要动作和次要动作的设计方案，用户完成表单的速度最快。但即便如此，作者仍然建议采用视觉提示更明显的方案：“按钮+链接”。
想更进一步讨论下，为什么会有这个问题。按照don’t make me think的说法，在没有选择的情况下，用户更容易快速地做出决定。或者不应该说是决定，因为本来就不需要用户去判断。没有多余的按钮吸引注意力，也没有多余的按钮可以点，用户不假思索地就完成了操作。比如当“下一步”按钮独立出现时，用户往往点得很愉悦。
下图：独立出现的“下一步”
但是当按钮成对或者多个出现时，问题就来了，用户必须看完所有的按钮文字，才能做出判断，这无疑是设计师不愿意看到的。所以会在按钮上做一些引导，客户端比较常见的做法就是把最常用的按钮或者主要操作的按钮设为焦点状态。
0
投稿猜你喜欢
- 首先,这片文章纯粹是我的个人经验之谈,适用于我常见的环境及项目中。个人建议,数据库字符集尽量使用utf8(HTML页面对应的是utf-8),
- Application对象 Application对象是个应用程序级的对象，用来在所有用户间共享信息，并可以在Web应用程序运行期间持久地保
- 树型结构在我们应用程序中还是很常见的，比如文件目录，BBS，权限设置，部门设置等。这些数据信息都采用层次型结构，而在我们现在的关系型数据库中
- 当数据库的数据量读写频繁的时候，我们就要考虑把数据库的读写分开，以提高数据库的使用效率，(当然还有其他用处比如，备份数据)，这个时候我们就要
- AJAX初体验之上手篇AJAX是这两年蛮热的东西，我也凑凑热闹，前些天去找了些教程学学，下面就按整个处理过程把自己学的东西写写，不过，因为是
aspjpeg组件官方下载地址：http://www.persits.com/说明： 1、aspjpeg能对图片水印进行透明度调整- 下面这个函数使用FSO对象来判断服务器上的某个文件是否存在：<％Private Function Dir(byVa
- 去掉数据重复 增加两个字段 alter TABLE T_Employee Add FSubCompany VARchar(20); ALTE
- 使用MySQL，安全问题不能不注意。以下是MySQL提示的23个注意事项：1.如果客户端和服务器端的连接需要跨越并通过不可信任的网络，那么就
- 今天一个同事报告一个问题，表都不能使用了,检查了一下，发现问题 db2 => select * from testACTNO ACTK
- 本文介绍了在js和asp中使用FileSystemObject（fso）来： 创建、添加或删除数据，以及读取文件； 移动、复制和删除文件；创
- 好多次在不同场合，都听到有同行提到“做产品比做设计更有前途”，或者“别做设计了，做产品吧”类似的观点。我不认为它们之间有什么可比性，因为这么
- 如果不是因为总监审查严格，一定要求这个细节解决掉，也许我也不会去深究根源性的解决办法，再此感谢MTIME负责而严格的同事。首先描述一下问题：
- URL 编码是什么东东呢？看看我从网上抄的定义： 引用: url编码是一种浏览器用来打包
- 对于网站设计者而言，时常处理大批量的文件是难免的，特别是图片和一些文本文本文件，更是经常处理。而由于网站大量文件的关系，对于同类
- 在网上查找大量资料，经过自己的不懈努力，终于测试成功了。原来要在服务器上安装mysql odbc 3.51 ，还有数据库用户名及密码，用下面
- 当浏览者进入你的网站首页时或提交某些表单时，会弹出网站声明或提交说明等文本信息框，引导浏览者使用你的网站。实现这个功能我们是用Dreamwe
- 在IE下，获取Param的时候有个诡异现象（不知道算不算bug）。为了清晰起见，下面用最简单的HTML和JavaScript来说明。有这么一
- 把昨天做的高级查询界面完善了一下，支持动态添加多个查询条件、定义逻辑关系，支持整形、浮点、字符串、日期、布尔值、自定义选择列表的录入，通过E
- 表示文字链接最清楚的方式是“蓝色文字+下划线”，这是在浏览器发展过程中形成的。这个问题大家都说过很多次了，我也曾经说过。然而，这样的规范却总
