Accot-Zhai指导法:对UI设计的启示

UE视界网    ()  ()

2019-11-20 04:27:58

下拉菜单,分层菜单,滑块或滚动条涉及在隧道中操纵指针或光标。这些GUI元素的最佳设计应考虑转向法。


《费茨-翟指导法》(由HCI研究人员Johnny Accot和翟淑敏发现,但也简称为“指导法”)是Fitts法的推论。转向律是一个方程,可以预测非常常见的交互的效率。它描述了路径控制任务的特殊情况,即用户必须在具有边界或“隧道”的路径上移动指针时的方程式:

1574237236266_0.png

Accot-Zhai转向定律方程,T = a + b(A / W)

T  是整体移动时间,  a  和  b  是常数,A  是隧道的长度,  W  是隧道的宽度。

不用担心,大多数UX专业人士将永远不需要使用此方程式:可操作的主要见解是,长而窄的隧道比短而宽的隧道要花费更多的时间。


定义:转向法则预测了引导指针(例如鼠标光标)通过有界通道(例如菜单,滚动条或滑块)所需的时间。转向时间取决于隧道的长度和宽度:隧道越长越窄,成功转向需要更多的时间;


根据《指导法》,隧道是要求用户沿具有边界的路径移动光标(或在触摸屏上拖动手指)的任何用户界面控件。越过边界将产生一些后果,尽管由于这是一个常见的用户错误,所以其后果将是温和的,例如在指针位于隧道外时让计算机停止注意。涉及这种类型的交互的一些最常见的UI元素包括下拉菜单(特别是具有悬停显示子菜单的分层菜单),参数控制滑块,滚动条,视频播放洗涤器栏以及需要拖动和拖动的视频游戏元素沿直线下降。

1574237279299_1.png

在YouTube上,视频底部的播放器是遵守指导法的隧道的示例。

在大多数情况下,移出隧道边界会中断用户操作:例如,在分层下拉菜单中,如果用户将光标移到菜单区域之外,则菜单会消失(如果隧道破裂是无意)。这就是为什么隧道的宽度对于用户操纵的难易程度很重要的原因-狭窄的隧道使意外离开隧道区域变得容易。

1574237309704_5.png

macOS分层菜单显示90度转弯的路径转向任务

在MacOS上,通过分层菜单移动鼠标光标会涉及一系列线性路径控制任务,这些任务相隔90度。在主菜单中,子菜单将在悬停时打开。请注意,此L形序列中的第二步(从“ 查找”  移至其子菜单)涉及最窄的通道,这很慢,并且用户很难无误地通过。

1574237350831_4.png

macOS分层菜单显示了典型的用户对角鼠标移动模式

许多用户将尝试从“查找” 对角线移动   到子菜单中的某个项目,但是,因为这样做,他们的鼠标将越过“拼写和语法”区域  ,所以将丢失目标子菜单,而是将打开“拼写和语法”  子菜单。  。(请注意,MacOS的较早版本具有由NN / g负责人Bruce Tognazzini设计的菜单;该菜单没有表现出这种现象,而是使用了基于矢量的三角形缓冲区来允许用户沿对角线移动。不幸的是,自,Apple已还原了这种出色的交互设计。)

人们为何无法将光标保持在笔直的路径上,这与人的生理状况有关:肘部和腕部使手部运动,而不是直线。自己尝试:将手臂伸直在自己面前,然后从左向右移动手。您会注意到,即使您尝试使其保持直线运动,您的手臂在运动中也始终会带有微妙的弧度。结果,用一只手在一条长而直线上移动很难。运动时间越长,出错的机会就越大。此外,许多用户(尤其是老年人和残障人士)手感不稳定,并且所有移动用户都在使用世界各地的设备时会遇到麻烦。


使菜单更加友好

菜单是受《指导法》影响最大的UI元素之一。这里有一些设计选择,使它们易于使用。


保持下拉菜单越短越好。几乎没有任何选择的菜单可以最大程度地减少穿越狭窄隧道的时间和难度,还可以减少 大量选择的可视化搜索时间。


避免使用分层菜单,特别是深度超过两层的分层菜单。由于操舵法的限制,分层菜单本质上是一个难以设计的UI。在设计与分层菜单关联的两个通道之间总是要权衡取舍:垂直通道对应于主菜单区域,水平通道对应于用户必须遍历才能打开子菜单的子类别名称:


  • 垂直通道必须较短,但这意味着菜单中的每个项目都必须具有较小的高度,这将导致水平通道变窄。

  • 垂直通道也必须很宽,但这会导致从主菜单选项到相应子菜单的水平通道更长。

1574237399250_1.png

Costco.com分层菜单的两个视图,显示了菜单宽度与高度的权衡

Costco.com上的此分层菜单显示了固有的权衡,即优化了“转向律”效果的分层菜单,并折衷了垂直通道(左)和水平通道(右)的大小。较宽的菜单优化了  垂直  通道,以便于下推菜单,特别是对于具有多种选择的菜单。但是,通过使菜单变宽,水平通道的长度   会增加,并且在菜单上移动以访问相应的子菜单会充满错误。请注意,大多数菜单根本没有针对“转向法”进行优化,因为它们的宽度仅与最长的文本标签一样宽。

当绝对需要分层菜单时,请在鼠标悬停与显示子菜单之间使用较短的时间延迟(或使用基于矢量的三角系统以允许某些对角线移动错误)。在每个菜单项的上方和下方还应尽可能多地添加填充,以增加水平移动通道的宽度。


对于导航菜单,请考虑使用大型菜单(或方形菜单)替代下拉菜单。由于大型菜单允许在较大的2D空间内自由移动,因此不适用操纵定律(尽管菲茨定律仍然适用,因此请确保目标仍然很大)。


滑块,滚动条和洗涤器需要附加控制以提高精度

在设计其他涉及路径控制任务的UI元素(例如滑块,滚动条和视频播放头)时,请记住,使用此类控件,用户将很难获得精度。因此,对于精确的任务,请使用支持精确度的其他辅助控件来补充这些UI元素。使用滑块选择参数值时,请将滑块用作粗调控件(用于到达所需的常规区域),并提供辅助细调控件(例如带有步进器的数字输入框)按钮)以选择特定值。同样,允许用户单击滑块上的任意位置以跳至所需位置,而不是要求用户单击并拖动。这种方法使用户可以在2D空间中自由移动,而无需操纵隧道。在触摸屏上,考虑一下滑块旋钮的总体目标尺寸(至少应为1cm x 1cm),并确保用户的手指不会遮挡滑块(或其周围的任何标签)。


慷慨大方

最后,您可以向隧道中添加填充,以使其有效宽度大于其在屏幕上的可视表示。填充将为用户留出一些摆动空间,使用户可以沿隧道移动而不会掉落,因为隧道可视区域之外的偏差很小。


摘要

《指导法》指出,狭窄的长隧道比短而宽的隧道难于通行。下拉菜单,分层菜单,滑块和其他路径遵循的UI元素应经过设计,以使相应的隧道尽可能的宽和短。请记住,此类控件很难用于精确的任务,并考虑使用其他替代方案(例如大型菜单而不是下拉菜单或滑块的辅助控件)来防止由于线性路径转向交互作用而导致的错误。


责任编辑:网络UESJ网:   UE视界网,未经授权不得转载
关键词 >> UI设计

还可以输入0个字

(审核后展示)
打开目录