发现手眼配合规律,帮助用户更快更轻松到达目标
之前我们从四个方面介绍了人脑的认知特征:
- 人脑具有神奇的识别能力,但人脑的记忆能力很差。
- 人的思维分为系统一和系统二:系统一反应很快,但是很“笨”;系统二是“聪明”的,但是很“懒”。
- 通过重塑,人脑可以变得更聪明。
- 因为系统二“太懒”,人脑是不理性的。
此次我们来讨论:大脑怎样指挥手眼协调?
比如:当你在电脑或手机上点击一个按钮或链接时,是否有所困难?当你在屏幕上让鼠标到达菜单或链接时,是否难以控制?
你或许说:不会呀,没什么困难!
你该站在用户立场想一想。假如用户喝多了,或者因为紧张、愤怒或害怕,手会有点颤抖;用户若是患有帕金森综合症,双手不停颤抖;有关节炎的用户,手掌和手臂运动可能不听使唤;还有更常见的,用户刚买了新鼠标、新手机,还不熟悉操作……
所以,研究手眼配合是有意义的。
关于手眼配合的规律,有两个看似无聊的定律。
一、菲茨定律
菲茨定律(Fitts’ Law)指的是:目标越大、离起始位置越近,用户就能越快指向它。
很无聊是不?“对象越大、离我越近,我自然越容易接近它。”你会说。
是的。菲茨定律还指出了更无聊的两点:
- 目标越近或目标尺寸越大,指向所需时间的减少越不明显。例如,你把小目标加大两倍,点击到目标的时间自然减少了,但你若再将目标放大两倍,点击到目标的时间并不会再减少一半。
- 因为鼠标不能超出屏幕边缘,所以边缘的目标很容易被点到,因此屏幕边缘的目标可以视为比实际尺寸要大得多。
由于菲茨定律,你在设计用户界面时,可以有些注意事项。
1. 目标要够大
按钮、菜单、链接等要足够大,以便让用户容易点击。
不要做成细小的目标,像下图这样。

2. 有效区域要够大
用户点击时,实际有效区域至少要与看到的一样大。不要展示挺大一个按钮,但实际很小的区域可以点击,点击有效区域至少应该覆盖整个可见范围。
下图为某平台和微信公众号后台的垂直菜单可点击区域。在这个细节上,微信完胜。

某手机输入法创造了一个很好的案例。它经过数据跟踪发现,大部分用户在点击虚拟键盘时,都会点击键盘靠下的位置。因此,它将点击有效区域向下移动2像素,使用户点击准确率显著提升了20%。

此外,复选框、单选框和切换开关等控件的文字标签,应该像控件本身一样可点击,以便帮用户扩大点击区域。
3. 目标之间的距离要够大
按钮、链接等控件之间,要留出足够大的空间,以便用户正确点击。
将重点目标放在靠近屏幕边缘的位置,以便用户快速点击。
4. 使用弹出菜单或饼状菜单
如有可能,可使用弹出菜单或饼状菜单。它们的打开位置在指针附近,用户能够更快的移动到菜单项。

相反,Mac的顶部菜单是一个愚蠢的设计。无论应用的窗口大小,主菜单一定在屏幕顶部,移动起来非常吃力,这对于大屏幕用户尤其痛苦。
二、导向定律
另一个手眼协调规律,叫做导向定律(Sterring Law)。它是菲茨定律的一个延伸,看上去也是一个无聊的常识,意思是:指针在受限路径移动并到达目标时,路径越宽,用户就能越快地到达目标。

右键菜单是导向定律的典型应用场景,必须将指针保持在一个菜单项中才能再向右移动到子菜单,否则菜单会切换到菜单项的上一个或下一个选项。每个菜单项越窄,菜单就越不好用。
下图的右键菜单真是让人崩溃。

某家针对老年人的旅游网站,发现用户很难通过右键菜单选择旅游目的地。可用性改进之后,显著加宽了菜单项,使用户能够更容易、更快速地选择感兴趣的旅游目的地。

小结
本节告诉你用户手眼配合的规律:菲茨定律和导向定律。 总而言之一句话:让用户的点击对象更大、更近、路径更宽。
