多按钮共存——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的说法,在没有选择的情况下,用户更容易快速地做出决定。或者不应该说是决定,因为本来就不需要用户去判断。没有多余的按钮吸引注意力,也没有多余的按钮可以点,用户不假思索地就完成了操作。比如当“下一步”按钮独立出现时,用户往往点得很愉悦。

下图:独立出现的“下一步”

但是当按钮成对或者多个出现时,问题就来了,用户必须看完所有的按钮文字,才能做出判断,这无疑是设计师不愿意看到的。所以会在按钮上做一些引导,客户端比较常见的做法就是把最常用的按钮或者主要操作的按钮设为焦点状态。

标签:按钮,web设计,用户体验
0
投稿

猜你喜欢

  • 对python模块中多个类的用法详解

    2021-03-17 17:27:21
  • 谈PHP生成静态页面分析 模板+缓存+写文件

    2023-11-14 12:44:39
  • Python使用海龟绘图实现贪吃蛇游戏

    2022-01-03 15:21:28
  • 想学python 这5本书籍你必看!

    2023-11-20 07:41:46
  • Windows下Python3.6安装第三方模块的方法

    2022-07-18 19:08:23
  • viper配置框架的介绍支持zookeeper的读取和监听

    2024-04-27 15:32:12
  • python获取多线程及子线程的返回值

    2022-01-17 20:44:07
  • XML简易教程之二

    2008-09-05 17:19:00
  • python语言元素知识点详解

    2023-07-30 03:33:08
  • Django小白教程之Django用户注册与登录

    2022-01-14 10:30:06
  • Python进阶之使用selenium爬取淘宝商品信息功能示例

    2022-04-26 04:55:15
  • asp.net aspnetpager分页统计时与实际不符的解决办法

    2023-06-30 04:02:32
  • VScode中集成Git命令详解

    2022-09-21 00:57:55
  • Python 虚拟环境venv详解

    2021-04-12 03:44:14
  • Python+Tkinter制作专属图形化界面

    2022-10-26 23:31:19
  • 基于Python编写一个简单的服务注册发现服务器

    2022-06-11 20:23:31
  • OpenCV图像修复cv2.inpaint()的使用

    2022-07-03 05:47:57
  • Python实现多线程抓取妹子图

    2022-10-02 15:39:25
  • Python logging设置和logger解析

    2021-07-15 22:12:52
  • PHP中soap的用法实例

    2023-11-14 09:40:24
  • asp之家 网络编程 m.aspxhome.com