简介

如果GUI元素(例如按钮和复选框)离其作用的对象太远,则用户会忽略功能。

人机交互的最古老的原则之一是,屏幕上彼此靠近的事物被视为相关。(类似地,用户将具有相同颜色形状,一起移动更改或驻留在外壳(例如盒子)中的那些东西视为相关联。)
我在1993年的《可用性工程》一书中写了关于如何将接近性格式塔原理应用到GUI设计的书,但是在那之前很早就有文献记载。
尽管这是古老的见识,并且在无数的书籍和课程中都有介绍,但由于布局违反了接近性规则,我们经常看到用户忽略了功能。当按钮,下拉菜单,复选框或其他可操作的GUI元素离它们所作用的对象太远时,人们看不到它们。通常,用户不会意识到自己缺少的内容,而只是假设这些功能不可用。
例如,在电子商务研究中,用户经常忽略其他颜色或尺寸的产品的可用性。

iTunes违反邻近准则

一个明显的例子来自苹果iTunes软件中的屏幕,该屏幕用于将iPhone应用程序升级到较新的版本。在获得iPhone的几个月后,我仍然认为用户必须一次手动检查每个应用程序图标。
它是这样的:
GUI设计中动作和对象的紧密度 - 图1
屏幕顶部是一堆应用程序图标。在屏幕的最底部,有一个标记为1 Update Available的按钮。单击后,此按钮将更新需要更新的所有应用程序,从而避免了用户单击每个图标的需要。
但是,几个月以来,我没有注意到此按钮,因为该操作与它所应用的对象太过远了。
此外,按钮位于单独的彩色条纹中,因此它似乎位于图标所居住的空间之外,这违反了关键的视觉界面设计原则
(顺便说一下,为什么iTunes窗口在屏幕快照中如此之大,当它只包含几个图标时呢?因为同一应用程序既管理着手机的应用程序,又管理着音乐收藏。当处理数百个音轨时,您需要很大的空间。尝试在单个GUI中支持高度不同的任务并不总是一件好事。

关闭与远端按钮

有趣的是,iTunes在同一工作流的另一部分中提供了一个正确的按钮放置示例:
GUI设计中动作和对象的紧密度 - 图2
在此屏幕截图中,“ 获取更新”按钮位于其作用的图标旁边。没有忽略此功能的风险。毫无疑问您可以做什么。(遗憾的是,对话框区域的“完成”按钮也可能位于西伯利亚。实际上,一个问题是此屏幕使用对话框区域来充当交互中对话框的角色。)
主流企业网站犯了公然的可用性错误,这是可以理解的,因为其团队中的大多数成员并非以人机交互的研究生学位为基础。(这就是为什么我最近在可用性会议上增加了基础课程,例如The Human Mind。)但是,所有公司中的Apple怎么会犯这样一个基本的GUI设计错误呢?自从1984年将其推向大众市场以来,苹果一直非常擅长图形用户界面。
首先,这只是一个简单的例子,证明大个子犯了错,而且您不应该复制在畅销软件或流行网站中看到的所有内容。(最近在有关“ 大型著名网站 ”项目的研究中清楚地意识到了这一点,其中apple.com是我们测试的网站之一。但这又是另一回事了。)
其次,在苹果自己的测试中,可用性问题似乎没有那么糟糕:

  • 如果测试使用较小的窗口,则按钮将更接近图标,并且不太可能被测试用户忽略。(使用常规尺寸的显示器或单独测试功能可能会导致窗口变小,从而使用户不会与容纳整个音乐集所需的大型工作空间进行交互。)
  • 如果他们使用更多应用程序图标测试了配置,则这些图标将填满整个空间,因此该按钮将更靠近最后一个图标。

这个案例说明了古老而久经考验的GUI指南的持续重要性:几十年前发现的洞察力即使您忘记也仍然会刺痛您。iTunes按钮放错位置也显示了在用户测试期间和设计评审中包括一系列实际配置和示例数据的重要性。