“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”這種功能的替代品？本文都有詳細闡述。

網(wǎng)頁上經(jīng)常都有一個鏈接用來回到頁面開始的位置，有代表性的命名就是“Back to Top”，同時可能還兼帶一個箭頭朝上的圖標。這篇文章用以講解為什么這種用法不好，特別是以可訪問性為理由。同時也討論了創(chuàng)建這樣的鏈接一定程度上低估了帶來的損害。

“Back to Top”（或者叫“Top of page” ，或者你所采用的）同樣分散了對實際內(nèi)容的注意力。對某些人而言，甚至極小的注意力分散都是令他們不安的。網(wǎng)頁通常有很多組成部分，范圍從實際內(nèi)容的不同部分到純粹裝飾。又新增加了不同的元素，比如用戶界面窗口組件，這樣的頁面對認知能力有殘障的人來說就更困難了。
當需要用紙打印時，“Back to Top”看起來是那么的蠢。（你可以用CSS去防止這件事，但很多作者并沒有這樣做。）
當使用“Tab”鍵跳躍到下一鏈接時，“Back to Top”一直傻站在那（譯者注：必須先從它身上踩過去，才能到達下一個鏈接）。按“Tab”鍵好比代替鼠標點擊，對很多人來說是必要的，例如肌肉有殘疾的人。此外，很多人更喜歡用鍵盤導航，因為它更快。
“Back to Top” 鏈接也妨礙朗讀工具的使用。你愿意在使用語音合成器朗讀頁面時，在每個段落結束后都突然蹦出一句“l(fā)ink: back to top”嗎？這樣的用戶工具通常都有一個鏈接朗讀模式，只朗讀鏈接，一個接著一個地。
每個瀏覽器都有一些內(nèi)置功能用來移動到當前頁面的開始處（比如支持使用“Home”鍵）。就創(chuàng)建一個鏈接模仿這樣的功能而言，你會把用戶弄迷糊，他們會認為他們需要使用這個功能，而不是瀏覽器內(nèi)置功能。
“Back to Top”的文字是有誤導性的，因為用戶壓根就沒想回到頂部。他可能認為會跟著這個鏈接到文章的頂部這里是意譯，直譯理解不準確，下一段也做了補充。 或一個位置。（對于這種情況，“To Top”和 “Start of page” 就好多了。）
“top” 的概念是模糊的。哪個頂部？如果你生平第一次看見“Back to Top”，你能知道它是頁面頂部、站點頂部還是其他什么的頂部嗎？（每天，都有數(shù)以千計的人頭一次使用網(wǎng)站。）就這些理由，“Start of page”是更好的說法——但慣例不是這樣。
“Back to Top”鏈接不是始終貫穿站點的，只在功能的表面或細節(jié)。
當點擊了“Back to Top” 鏈接時，額外的內(nèi)容干擾了瀏覽歷史。例如，當你使用“上一頁”按鈕時，會發(fā)現(xiàn)當前頁面又出現(xiàn)了一次。
不可否認，“Home”鍵（或等同的鍵）特點就是不改變焦點。這就意味著當你按“Tab”鍵時，焦點被移動到隨之而來的鏈接（表格區(qū)域）上。如果你喜歡用 “Tab”鍵去導航，這可能會不方便，但在這個例子中， “Back to Top” 鏈接會更加討厭。另一方面，失焦行為可能有用：你可能希望跳到頁面開始的地方去查看一些東西，于是從你所在的鏈接（或區(qū)塊）出發(fā)。

以下都是瀏覽器基礎功能的替代品，“Back to Top” 鏈接、““Print this page””和“Bookmark this page”鏈接，還有改變字號的鏈接或菜單。然而，這些都是不同的窗口組件，伴有不同程度上的阻礙（和一些潛在或自稱的好處）?；締栴}還在于網(wǎng)頁是否應該為這個目的去創(chuàng)建用戶界面，而不是接受用戶看到的（或相反是由于用戶經(jīng)驗豐富）瀏覽器的固有功能。

盡管一些用戶喜歡并使用“Back to Top”鏈接和其他瀏覽器功能的替代品，但他們走錯路了。很多用戶顯然是不知道瀏覽器的內(nèi)建功能，那些可以幫助他們在所有網(wǎng)頁都使用一致操作的方式。

替代品本身可能不是壞東西。事實上，瀏覽器功能可以經(jīng)常使用不同方法調(diào)用。例如，在IE中到當前文章開始處，我可以用“Home”鍵，或者可以用滾動條滾動到頂部，或者可以使用“Page Up”鍵，就像很多時候需要的那樣。當一個頁面包含其他方法跳到開始處時，用戶如何知道它做了什么？例如，它沒法保證和“Home”鍵的效果一摸一樣。事實上，它們是有差別的；比如，“Back to Top”可能沒法跳到絕對頂部而只是接近的某個地方，順便提一句，這樣焦點行為就不同了。這就沒法保證看上去相同的鏈接在不同頁面上所達到的效果完全一致了。

Jakob Nielsen，可用性專家，他曾在alertbox中主張，目的地在同一頁面內(nèi)的鏈接應該盡量避免：避免頁內(nèi)鏈接 。Nielsen說這樣的鏈接會破壞后面鏈接的心智模型。不過“Back to Top” 鏈接是個不同的例子，因為用戶大概不希望加載一個新頁面使得現(xiàn)有頁面消失。然而，普遍觀點認為概念清晰和簡單實用無濟于事：“鏈接最好用于引導從一個頁面到另一個頁面的工作，而不是指向頁面內(nèi)。”

如果你使用“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屬性為空，因為當圖片不顯示時它不用進行文字替換——文字鏈接的內(nèi)容就足夠提供信息了。
鏈接的href屬性值為“#”，它本身就是回到當前文章開始處。所以不同擔心創(chuàng)建位置錨點的正確方法。然而，一個引用“#”的鏈接是無法改變焦點的。此外，Opera瀏覽器不支持這種鏈接，因為某些奇怪的原因；點了這中鏈接后沒有任何效果，或許因為鏈接引用的是文章本身。如果你覺得其中一個會成為問題，你可以采用錨點+id的方法，放在文章主體的第一個元素里。例如，如果主體以<h1>開頭，你可以使用<h1 id=”start”>。然后在鏈接里自然就要使用href=“#start”。（一些非常老的瀏覽器，例如Netscape 4，不支持使用id屬性進行位置界定?；蛟S在這種環(huán)境中混略它們更安全，特別是當這種鏈接僅僅是瀏覽器功能的替代品時候。）

在樣式表里，你最好加上下面這樣一條，這樣在打印頁面的時候就會把這些鏈接忽略掉：
@media print{.toplink{display:none;}}

? 波希米亞（轉載請保留原文鏈接）

原文：http://blog.b3inside.com/userexperience/backtotop-considered-harmful/