超长竖排tab引发的问题

tab的交互行为主要有两种:
1、单击切换页面
2、悬停切换页面
在小块区域的信息展示上,悬停切换的优势在于“快速响应”,并且假设“滑过我就是想看我”,而人眼恰恰可以接受小范围内信息的瞬间变化(反复切换)。但,在大范围区域内,如超过半屏而且信息较多,则人眼将难以在多次瞬间切换的过程中,对大量信息进行快速扫描。
单击切换的优势在于“确定性”,特别是在大块区域上,用户可能更需要一些耐心来阅读,而且这种确定性可以保证以下一点:
用户不必担心由于不小心滑过其他tab而打断当前的阅读。
这种问题在某些“超长悬停切换tab”上更容易显现:

如上图,假如黑色箭头的起始点是光标当前所在位置,而用户此时要去点击箭头指向位置的链接。那么,在光标的直线移动过程中必然会滑过图中的红色方框部分。如果采用悬停切换,则必造成红框所在的tab被激活,从而触发页面切换,打断了用户的动作,这种体验非常之不爽。
不仅最下面的tab如此,只要光标所在位置比较靠前,则大跨度的直线移动都很容易触发其他的tab。

当然,也有安全区域,这取决于“用户兴趣点的位置”与“tab边界”的夹角。如下:

上图蓝色箭头围成的就是当前情形的安全区域,太小了不是么?

总结,像上面这种”超长竖排tab”,为了避免错误,还是采用单击切换比较好。

相关文章

Leave a comment

3 Comments.

  1. Plvybl Excellent article, I will take note. Many thanks for the story!

  2. @臭鱼 是的,当然可以,也可以是“等待0.5秒”和“点击”两种触发方式。不过这个时间差可能需要测试一下。因为这个tab实在是比较长,总之不要吓到慢条斯理的用户,也不要让心急的用户抓狂就好。

  3. 光标悬停0.5秒才相应是不是也可以呢?

Leave a Reply


[ Ctrl + Enter ]