B3 bohemia's – 设计多一点乐趣

“Back to Top”有害页面健康？

12 月 5, 2008

“Back to Top” links considered harmful
Jukka “Yucca” Korpela版权所有
作者：Jukka “Yucca” Korpela
译者：UCD翻译小组，波希米亚
原文地址： http://www.cs.tut.fi/~jkorpela/www/totop.html

译者序：这是一篇关于可用性方面的文章，作者在本文中列举了很多例子，对这个话题研究的很细致，从多方面考虑了这个链接的可用性问题，同时也抛出了一个问题：到底是用浏览器固有支持的功能，还是用像“Back to Top”这种功能的替代品？本文都有详细阐述。

网页上经常都有一个链接用来回到页面开始的位置，有代表性的命名就是“Back to Top”，同时可能还兼带一个箭头朝上的图标。这篇文章用以讲解为什么这种用法不好，特别是以可访问性为理由。同时也讨论了创建这样的链接一定程度上低估了带来的损害。

  • “Back to Top”（或者叫“Top of page” ，或者你所采用的）同样分散了对实际内容的注意力。对某些人而言，甚至极小的注意力分散都是令他们不安的。网页通常有很多组成部分，范围从实际内容的不同部分到纯粹装饰。又新增加了不同的元素，比如用户界面窗口组件，这样的页面对认知能力有残障的人来说就更困难了。
  • 当需要用纸打印时，“Back to Top”看起来是那么的蠢。（你可以用CSS去防止这件事，但很多作者并没有这样做。）
  • 当使用“Tab”键跳跃到下一链接时，“Back to Top”一直傻站在那（译者注：必须先从它身上踩过去，才能到达下一个链接）。按“Tab”键好比代替鼠标点击，对很多人来说是必要的，例如肌肉有残疾的人。此外，很多人更喜欢用键盘导航，因为它更快。
  • “Back to Top” 链接也妨碍朗读工具的使用。你愿意在使用语音合成器朗读页面时，在每个段落结束后都突然蹦出一句“link: back to top”吗？这样的用户工具通常都有一个链接朗读模式，只朗读链接，一个接着一个地。
  • 每个浏览器都有一些内置功能用来移动到当前页面的开始处（比如支持使用“Home”键）。就创建一个链接模仿这样的功能而言，你会把用户弄迷糊，他们会认为他们需要使用这个功能，而不是浏览器内置功能。
  • “Back to Top”的文字是有误导性的，因为用户压根就没想回到顶部。他可能认为会跟着这个链接到文章的顶部这里是意译，直译理解不准确，下一段也做了补充。 或一个位置。（对于这种情况，“To Top”和 “Start of page” 就好多了。）
  • “top” 的概念是模糊的。哪个顶部？如果你生平第一次看见“Back to Top”，你能知道它是页面顶部、站点顶部还是其他什么的顶部吗？（每天，都有数以千计的人头一次使用网站。）就这些理由，“Start of page”是更好的说法——但惯例不是这样。
  • “Back to Top”链接不是始终贯穿站点的，只在功能的表面或细节。
  • 当点击了“Back to Top” 链接时，额外的内容干扰了浏览历史。例如，当你使用“上一页”按钮时，会发现当前页面又出现了一次。

不可否认，“Home”键（或等同的键）特点就是不改变焦点。这就意味着当你按“Tab”键时，焦点被移动到随之而来的链接（表格区域）上。如果你喜欢用 “Tab”键去导航，这可能会不方便，但在这个例子中， “Back to Top” 链接会更加讨厌。另一方面，失焦行为可能有用：你可能希望跳到页面开始的地方去查看一些东西，于是从你所在的链接（或区块）出发。

以下都是浏览器基础功能的替代品，“Back to Top” 链接、““Print this page””和“Bookmark this page”链接，还有改变字号的链接或菜单。然而，这些都是不同的窗口组件，伴有不同程度上的阻碍（和一些潜在或自称的好处）。基本问题还在于网页是否应该为这个目的去创建用户界面，而不是接受用户看到的（或相反是由于用户经验丰富）浏览器的固有功能。

尽管一些用户喜欢并使用“Back to Top”链接和其他浏览器功能的替代品，但他们走错路了。很多用户显然是不知道浏览器的内建功能，那些可以帮助他们在所有网页都使用一致操作的方式。

替代品本身可能不是坏东西。事实上，浏览器功能可以经常使用不同方法调用。例如，在IE中到当前文章开始处，我可以用“Home”键，或者可以用滚动条滚动到顶部，或者可以使用“Page Up”键，就像很多时候需要的那样。当一个页面包含其他方法跳到开始处时，用户如何知道它做了什么？例如，它没法保证和“Home”键的效果一摸一样。事实上，它们是有差别的；比如，“Back to Top”可能没法跳到绝对顶部而只是接近的某个地方，顺便提一句，这样焦点行为就不同了。这就没法保证看上去相同的链接在不同页面上所达到的效果完全一致了。

Jakob Nielsen，可用性专家，他曾在alertbox中主张，目的地在同一页面内的链接应该尽量避免：避免页内链接 。Nielsen说这样的链接会破坏后面链接的心智模型。不过“Back to Top” 链接是个不同的例子，因为用户大概不希望加载一个新页面使得现有页面消失。然而，普遍观点认为概念清晰和简单实用无济于事：“链接最好用于引导从一个页面到另一个页面的工作，而不是指向页面内。”

如果你使用“Back to Top” 链接,相对伤害较小的方法：

<div class="toplink" align="right"><a href="#">Start of page <img alt="" src="up.gif" width="13" height="12" border="0"></a></div>

笔记：

  • 这个链接被放在一个带有class的div元素中，使它很容易被样式控制。例如，你可以略微缩小字号或增加它与下面链接之间的距离。
  • 链接文字简短（用以降低对语音浏览器的影响），尚可适当说明。
  • 箭头图标和链接的其他部分都可以点击。不要把它弄成分开的链接，不然用户使用“Tab”键跳跃时会跳两次而不是一次。
  • 箭头图标的存在可以作为一个视觉引导，当然，尽管它不是功能必须。
  • 箭头图标的alt属性为空，因为当图片不显示时它不用进行文字替换——文字链接的内容就足够提供信息了。
  • 链接的href属性值为“#”，它本身就是回到当前文章开始处。所以不同担心创建位置锚点的正确方法。然而，一个引用“#”的链接是无法改变焦点的。此外，Opera浏览器不支持这种链接，因为某些奇怪的原因；点了这中链接后没有任何效果，或许因为链接引用的是文章本身。如果你觉得其中一个会成为问题，你可以采用锚点+id的方法，放在文章主体的第一个元素里。例如，如果主体以<h1>开头，你可以使用<h1 id=”start”>。然后在链接里自然就要使用href=“#start”。（一些非常老的浏览器，例如Netscape 4，不支持使用id属性进行位置界定。或许在这种环境中混略它们更安全，特别是当这种链接仅仅是浏览器功能的替代品时候。）

在样式表里，你最好加上下面这样一条，这样在打印页面的时候就会把这些链接忽略掉：

@media print{.toplink{display:none;}}
我来第1个赞

19 条评论

  1. 个人不喜欢这个功能.
    原因有几下几点:
    1.很少用户在用,那对于大多数用户来说,”back to top”是一视觉障碍.
    2.有替代的方式,比如home键,键盘+鼠标的操作效率要远远高于纯鼠标操作.
    3.现在很少有见到N屏长的页面,点击”back to top”不如滚动鼠标滚轮高效.
    4.即使遇到比较长的页面,使用滚轮或滑动条,可以留有一些思考的时间,回顾看过的内容.”唰”的一下top了,就成了快餐了.

  2. 我不完全认同作者的看法，这个只是个统计学问题，并不是说 back to top 是无用的，只是觉得这个词组并不够确切地反映了用户在点击它时候的实际意图，网站总体上总是把导航部分放在页面最显著的 first fold，所以回到第一屏的导航部分进行栏目切换才是用户的真实想法，top 实际上已经成为导航的代名词，所以我认为我们不需要急着批判或者废除 back to top，我们可以尝试将它改成 back to menu。

    至于干扰之说，我觉得是可笑的，UE 不是要把用户当成婴儿来看待，用户有时候是“无知”的，但他们不是愚笨的。

    我觉得比较实际的是推行从 CSS 上完善针对各种设备的方案，甚至可以简单地建立一个网页来阐述它的重要性和相关性，就像 feedicons.com 建立了 RSS Feed 图标的草根标准一样 😛

  3. 个人觉得”Back to Top”的功能可以保留,作者也是担心文案上定义不够准确.所以最终他也给出来一个比较好的处理方法.我把原来站内的”回到顶部”都替换成”回页首”了.另外我觉得用CSS针对media处理,要比一刀切更好.
    对于用”Home”键操作,这个我持保留意见.如果浏览文章习惯用键盘操作,比如方向键,空格等,这时配合Page UP,Page Down,和Home键可能更方便,前提是习惯键盘操作.不然鼠标点着点着,突然扔了按下”Home”… 不过这个纯属个人习惯问题了,对去掉这个功能而言,理由好像不是那么充分=)

  5. 我觉的对于大多数用户来说,”back to top”不能说是一种视觉障碍，但确实妨碍文章的实质内容浏览.另外“tab”导航时也是个不小的障碍。我的做法是把，“回到顶部”与文章分离。放到页面右下角的一个向上的图标。只是给用户一种辅助功能。
    “当点击了“Back to Top” 链接时，额外的内容干扰了浏览历史。例如，当你使用“上一页”按钮时，会发现当前页面又出现了一次。”觉得本博通过js实现“回页首”功能挺好，可以很好解这个问题。

  6. 不怎么认同作者的说法。

    大多数用户不知道 “home”“page Up”这些键的。
    二楼的说得对， UE 不是要把用户当成婴儿来看待，用户都很聪明的。

  8. […] 译者序：这篇文章可以说以一种轻松、有趣的方式，对“Back to Top”有害页面健康？做了一个很好的回答。作者花了很长时间收集一些实实在在的使用案例，更直观的展示了“Back to Top”在网站中的使用，同时也明确表达了自己的观点。用“细节决定成败”开篇，也突出了本文编写的精细。 […]

  9. POPOEVER的看法没有注意到文章标题上的问号啊，
    呵呵
    这篇文章更多的是“Back to Top”所面临的问题，其实也就是文字表述和UI设计的问题，并不能从根本上说“Back to Top”就是有害的。
    而且在事情应用中，并不是所有的用户都对浏览器的内置功能十分了解，所以这个功能设计的好的话还是会给用户带来很大的便利的。
    而且，现在不管CSS也好还是JS也好都可以解决“Back to Top”负面影响的。

  10. 再补充一点，关于文字表述的问题
    这个关键还是要根据“Back to Top”功能所在的页面来考虑，比如在本博客的“回页首”，在这里是一种理想的表述方式。
    但是这种表述放在某个网站的帮助页面里就不一定能带来同样的效果。

  11. @丢失的叶子，哈~ POPO回复中指的是原文作者，我是译者 =）其中你提到“并不是所有的用户都对浏览器的内置功能十分了解”我很认同，要看面向用户群的特征来采用合适的方法，一刀切就太刻板了。昨天和一个朋友聊到可用性，提起了Nielsen大师，他说大师有时候太严谨了，以至于教条了。呵呵，其实设计网站不就是给人用的嘛。而且随着时代和技术的发展，当年解决不了的问题，现在也会逐渐被解决掉的。

  12. @波希米亚
    恩恩
    很是赞同“其实设计网站就是给人用的”
    读了《一个关于“Back to Top”的小故事》
    感觉那篇文章很实用哦
    在表述某个观点时再引用实际的用例
    文章很实在也很明确的说明了观点

  13. 1、“所以回到第一屏的导航部分进行栏目切换才是用户的真实想法，top 实际上已经成为导航的代名词”。这个纯粹是你的想法。

    2、“比如在本博客的“回页首”，在这里是一种理想的表述方式。”果然是理想。我一眼看了是“回首页”，一直没理解。试点了下才发现错了。这个词造的不好。

  14. @seven 如果这个链接出现在内页，那么也许“回到文章头部”更贴合用户的意图，而在站点首页，回到顶部的意图是寻求导引提示，如果站点的导航不是放置在站点的顶部，那么设计者在页脚放上“回到顶部”也是不合逻辑的，所以我才提出 back to menu，这虽然不是每个人的意图，但是是可以通过统计学的模型去印证的，至少在目前主流的站点布局中，back to top 就是暗示用户有用的导引信息都在页面顶部的导航区域。

  16. 我就很喜欢 back to top 这个功能。 尤其是看到了网页的底部的时候，我真不愿意费劲的用滑轮。往往我就开始留意这个网站底部有没有top按钮。 别的地方不需要，但最底部一定要有，小小的一个标志，亲切实用。！！！

评论已关闭。