浏览器使用体验随想之二：新页标签究竟应该出现在哪里？

浏览器, 随想, 新页, 体验

用户体验的细节：新的页标签究竟应该出现在哪里？
浏览器使用体验随想之二
article by nwgale.com 田飞

在之前的一篇文章中我写道非线性浏览行为习惯者的苦恼是新窗口(并不是马上需要阅读)总是引起重复点击页标签的问题。由于很多用户习惯先积累一定量的页面(通过新弹式窗口或者新弹出式页标签) 再进行阅读。那么，本文中想重点讨论一下，页标签究竟应该出现在什么地方，才有利于用户迅速的找到他想先读的那个页标签？

首先我用firefox做了测试，发现，新窗口总是出现在标签栏最后面(最右端)，而且新开页面总是覆盖了原来的页面。

这样合理吗？

众所周知，一个浏览器包含多页标签是未来浏览器的趋势，我之前也描述过一种常见的浏览行为习惯，那就是

当我打开一个包括多个链接的页面 (后文中称为母页面) ，OK，我同看到若干个感兴趣的链接，分别将其称为A, B, C, D，这时候用户的行为会有两种：(这里只提其中一种)
......
2). 同时点击A, B, C, D四个链接，弹出四个窗口(或者四个页标签)，看完一个关一个。问题是，我同时打开A链接时，A跳到了前面，挡住了母页面(就是包括这四个链接的那张页面)。我又不得点击母页面的标签到达母页面，再点B链接，B页又挡住了母页面，我又重复点击母页面的标签以便继续点击C链接......

http://nwgale.com/blog/wp-content/gallery/ue/untitled-1_liulan_0.jpg

在用户习惯使用多任务任标签页式浏览器(如firefox/傲游/IE也开始支持多标签)的今天，浏览器里同时存在若干页标签的情况很常见。

假设包含链接的页面(下文我称之为母页) 在最前面（最左端），而新弹出的页标签总是出现在最后面，这样，当出现上面我描述的情境时，由于用户需要从最右端的新页标签返回点击最左端的母页标签，这时产生的距离就比较远。（上图）当然，由于鼠标的位置不一定在新页标签上，因此这里所说的距离只是一种眼动距离或者心理距离，但是根据测试的一些现有结果来看http://nwgale.com/blog/wp-includes/js/tinymce/plugins/wordpress/img/trans.gif，当标签页的数量达到一定量时，标签栏的空间是有限的，排布不下的页标签将会被隐藏到左右两侧，这样一来，用户如果想从最后一个标签页返回到第一个标签页时，还需要先点击左右两侧的箭头来显示更多页标页，再点击标签才能打开想要返回的页面。(下图)（注意在我之前描述的情境下，从最后一页返回第一页这种行为是反复出现的）

http://nwgale.com/blog/wp-content/gallery/ue/untitled-2.gif

这就是问题所在。

如果我们同时打开一个母页上的若干链接，从点击事件发生的时间维度上来看，由于最先打开页面的标签是最早时间发生的，所以它离我们的时间距离是最大的，因此，我认为最先打开页面的标签应该被设计在最远的地方，而最后打开的页面标签由于时间距离比较近，则应该是紧挨着当前页面标签，以插入的形式挤进来。

再扯远一点，前两天在一个用户体验的会议中，中科院心理研究所的樊春雷博士介绍了一个概念叫做“记忆力经济”，按我个人的理解，它是指单位时间内，相同影响力的行为中，最近发生的事件会产生更强的效应。与注意力经济不同，这个概念关注的是时间维度对用户心理产生的影响。所以，从行为上来看，最后点击的目标，是用户当下想要关注的事件，因此，新页面出现在母页面最近的位置应该更合理。

以上我谈论仅仅是页标签位置设计的左右关系，接下来的问题是，标签栏应该在上方还是下方？

在现在的浏览器中，有一些是可以被设置成下方，一些则是固定在上方。

由于windows系统的多任务早默认的是在下方，所以在单窗口模式的IE浏览器中，很多人习惯于在下方寻找页面标签，我不知道是什么时候最早浏览器的标签栏被设计成上方的，也不知道这是基于什么样的用户研究而产生的设计(如果有人知道的话能够分享一下，感激不尽)，我印象中，99年时使用MAC的OS系统中，任务栏是在上方，好像有过这种体验，但是感觉并不很好。

由于下面的结论不是基于某种理论或者用户调查而得出的，仅仅是以个人现有知识积累的推演，因此只做一家之言，也许某天可以在合适的项目过程中加入用户测试来验证。

首先声明，我支持标签栏设计在下方。

其一，从视觉心理认知来看，我们习惯于平衡。举个例子，我们在学习绘画的最初阶段，会被告知一些构图的基本法则，比如多样的统一，比如平衡... 一般来说，重的物体在下方，我们会觉得比较平衡----比如，底盘重的车会比较平稳。（反之，如果我们想设计据有冲击力的视觉画面，通常会打破平衡法则）
再讲回来，页标签与其它的button或者menu是不同的，它是具有代名词性质的，我们都知道，页标签背后隐藏的是一个页面，所以我们下意识的会认为，页标签就是页面。标签栏上排列了若干页标签，就意味着标签栏是一条装载了大量页面信息的“栏容器”，信息量积累会使我们觉得标签栏比较重，因此，安排在下方的标签栏会比上方的标签栏使人觉得“更平衡”和“更安全”。

这是我支持标签栏在下方的原因之一。

其二，我们点击页标签的目的一般有两个：选择页面或者关闭页面。
选择页面暂且不提，如果是想关闭页面的话，又有一个前提，通常时我们已经阅读完该页面的时候。OK，按照页面content从上向下排列的原则，我们读完一个页面的时候，目光通过会移动到浏览器的下方，这时候，在下方寻找页标签的机率会大比上方(假设用户并不了解产品的规则)，同时，在下方寻找页标签的眼动距离要小于上方查找。

通过这两点来看，设计在下方的标签栏是否会更符合人机要求呢？

最后陈述我的观点：在页面标签体验过程中，标签栏在下方，且新页面标签紧挨着母页标签的浏览器，是相对比较优化用户体验的方案。

针对此篇文章我测试了IE, FireFox, MaxThon, Opera, TheWorld 五款浏览器，其中TheWorld和MaxThone能够定制标签栏在下方或者上方；

只有TheWorld即能做到标签栏在下方，且新页面标签紧挨着母页标签。

--------------------------
以下是另一个话题：
刚才我讲到，当我们点击页标签时，通常有两个目的驱动：选择页面或者关闭页面。
为了验证我的观点，我用几个浏览器做了设计，结果如下：
http://nwgale.com/blog/wp-content/gallery/ue/do.gif

在这个图里我们应该能看到，ie, maxthon, theworld 都是把“关闭”放在第一位的，而在页标签里究竟哪个选项的权重是最高的呢？

我认为那此权重最高的选项，应该被设计在最容易点到的地方，同时，这个选项菜单里的选项不必太多，主要考虑的是在页面上点击右键得不到的选项（比如关闭，比如收藏），我就曾经见到过有用户在网上询问maxthon如何才能减少页标签选项的问题。

总结来看，页标签选项菜单的原则是：