內(nèi)容簡介

可用性設計是Web設計中最重要也是難度最大的一項任務。本書作者根據(jù)多年從業(yè)的經(jīng)驗，剖析用戶的心理，在用戶使用模式、為掃描進行設計、導航設計、主頁布局、可用性測試等方面提出了許多獨特的觀點，并給出了大量簡單、易行的可用性設計的建議。

作者簡介

克魯格（Steve Krug），在本書第1版出版之前，作為一名備受尊敬的可用性咨詢師，他有20余年的從業(yè)經(jīng)驗，其客戶包括Apple、Bloomberg.com、Lexus.com、NPR（美國國家公共電臺）、IMF（國際貨幣基金組織）等。Krug先生長期舉辦可用性研習班，提供可用性咨詢。

第1章 別讓我思考

設計者應該盡量做到，當我看一個頁面時，它應該是不言而喻，一目了然，自我解釋的。我應該能明白它是什么以及怎樣使用它，而不需要花費精力進行思考。當我看到一個需要思考的網(wǎng)頁時，頭腦里浮現(xiàn)的東西都會加上一個問號。創(chuàng)建網(wǎng)站時，你要做的就是去掉這些問號。

強迫我們思考的地方

網(wǎng)頁上的每項內(nèi)容都有可能迫使我們停下來進行不必要的思考。常見的罪魁禍首就是那些很酷或自以為很聰明的名字，語義模糊不清或不那么顯而易見。另一個不必要的問號來源是那些看起來不太明顯的鏈接和按鈕。

作為用戶，永遠不該讓我花上幾秒去思考某個東西是否能點擊。當我們訪問Web時，每個問號都會加重我們的認知負擔，把我們的注意力從要完成的任務上拉開，這種干擾也許很輕微，但他們積累起來就足以讓我們抓狂。

如果你做不到讓一切都不言而喻

在一個自我解釋的頁面中，用戶需要花一點時間去理解。頁面元素的外觀，精心選擇的名稱，頁面布局以及少量仔細斟酌過的文字，它們綜合在一起將創(chuàng)造出一種接近瞬間識別的效果。如果你做不到讓一切都不言而喻，那么至少應該讓它自我解釋。

第2章我們實際上是如何使用Web的

掃描，滿意即可，勉強應付

大部分時間里，用戶在每個頁面上瞥一眼，掃過一些文字，點擊第一個令他們感興趣的或者大概符合他們尋找目標的鏈接。通常，頁面上的很多部分他們都不看。我們精心準備的文字，在用戶看來更像以每小時100公里的速度駛過的廣告牌。

第一個事實：我們不是閱讀，而是掃描

人們會花極少的時間來閱讀大部分的頁面，只是掃描一下，尋找能吸引我們注意力的信息。我們?yōu)槭裁磼呙瑁何覀儚氖绿幱诿β抵校晃覀冎雷约翰槐亻喿x所有內(nèi)容；我們善于掃描。我們在網(wǎng)頁上看到什么取決于我們想看到什么，不過我們想看到的通常只是頁面上的一小部分。

第二個事實：我們不作最佳選擇，而是滿意即可

設計時，我們假設用戶掃過整個頁面，考慮所有可能選項，然后選擇一個最好的。事實上，大多數(shù)時間我們不會選擇最佳選項，而是選擇第一個合理的選項，這就是滿意策略。一旦我們發(fā)現(xiàn)一個鏈接，看起來似乎能跳轉(zhuǎn)到我們想去的地方，那就是一個我們將會點擊它的大好機會。

為什么Web用戶不尋找最佳選擇：我們總是處于忙碌之中；如果猜錯了也不會產(chǎn)生什么嚴重的后果；對選擇進行權(quán)衡并不會改善我們的機會/*點錯了再退回來就好*/；猜測更有意思。

第三個事實：我們不是追根究底，而是勉強應付

很大程度上人們一直在使用這些東西，但并不理解它們的運作原理，甚至對它們的工作原理有完全錯誤的理解。無論面對哪種技術，很少有人會花時間閱讀說明書，相反我們勉強應付，編造出我們自己模棱兩可的故事來解釋我們的行為。

為什么會這樣：這對我們來說并不重要；如果發(fā)現(xiàn)某個事物能用，我們會一直用它。

第3章 廣告牌設計101法則

為掃描設計，不為閱讀設計

建立清楚的視覺層次

確保頁面上所有內(nèi)容的外觀—所有可視線索—清楚，而且能準確的表述頁面上內(nèi)容之間的聯(lián)系：哪些內(nèi)容相關，哪些內(nèi)容是其它內(nèi)容的組成部分。每個頁面都應該有清楚的視覺層次。一個視覺層次清楚的頁面有三個特點：越重要的部分越突出；邏輯上相關的部分視覺上也相關（相近內(nèi)容分為一組采用類似的顯示樣式）；邏輯上包含的部分在視覺上進行嵌套。

好的視覺層次通過預先處理頁面，用一種我們能快速理解的方式對頁面的內(nèi)容進行組織并區(qū)分優(yōu)先級，從而減少了我們的工作。如果一個頁面沒有清楚的視覺層次，如所有內(nèi)容看起來都一樣重要，我們會降低掃描速度，尋找關鍵的信息，這就增加了我們的工作。

習慣用法是你的好幫手

關于Web上的習慣用法：它們非常有用，適當?shù)牧晳T用法會使用戶在網(wǎng)站之間的訪問更容易；設計師通常不愿意利用它們/*為了創(chuàng)新*/如果你不打算使用習慣用法，你必須確定你在使用一種同樣清楚，同樣不言而喻，沒有學習曲線的方法，并且?guī)砗艽髢r值。

把頁面劃分成明確定義的區(qū)域

這可以讓用戶很快決定關注頁面的哪些區(qū)域，或者放心的跳過哪些區(qū)域。

明顯標識可以點擊的地方

明顯標識哪些地方可以點擊哪些地方不可以點擊很重要。如果迫使用戶去思考某些通過下意識就可以知道的東西，那么你完全是在浪費每個用戶對新站點有限的耐心和好感。

降低視覺噪聲

讓頁面不易理解的一個最大原因是視覺噪聲：眼花繚亂，背景噪聲。設計頁面時可假設所有內(nèi)容都是視覺噪聲，除非得到證明它們不是。

第4章 動物，植物，無機物

為什么用戶喜歡無須思考的選擇

用戶不介意有多少此點擊，只要每次點擊都是毫不費力的，并且能讓用戶堅信自己的選擇正確。三次無須思考，明確無誤的點擊相當于一次需要思考的點擊。如果我們需要一直在網(wǎng)絡上進行選擇，那么讓這些選擇變得無須思考是讓一個網(wǎng)站容易使用的主要原因。

第5章省略多余的文字

不要在Web上寫作的藝術

大多數(shù)頁面上的大部分文字都不過是在占地方，因為沒人打算閱讀它們。這些多余的文字暗示你可能真的需要閱讀它們來理解到底怎么回事，這使得頁面看起來難度更高了。去掉沒人會看的文字的好處：降低頁面噪聲；突出有用內(nèi)容；更簡短，不必滾屏查看。

歡迎詞必須消滅

歡迎詞就像閑聊，內(nèi)容無所謂，主要是一種社交手段而已，但大部分Web用戶都沒有時間閑聊，盡量減少關鍵詞，能減多少減多少。

指示說明必須消滅

在勉強應付失敗之前沒有人會仔細閱讀指示說明。你的目標應該是通過讓每項內(nèi)容不言而喻來消除指示說明。

第6章街頭指示牌和面包屑

網(wǎng)絡導航101法則

進入站點時：你通常是為了尋找某個目標；你會決定先詢問（搜索）還是先瀏覽；如果選擇瀏覽，你將通過標志的引導在層次結(jié)構(gòu)中穿行；最后如果找不到你要的東西，你會離開。

無法承受的瀏覽之輕

Web空間的奇怪之處：感覺不到大小；感覺不到方向；感覺不到位置。

被忽視了的導航用途

它給了我們一些固定的感覺；它告訴我們當前的位置；它告訴我們?nèi)绾问褂镁W(wǎng)站；它給了我們對網(wǎng)站建造者的信心。

Web導航習慣用法

把它們放在標準的位置可以讓我們快速定位，將它們的外觀標準化讓我們更容易把它們與別的東西區(qū)分開來。

現(xiàn)在先別看，它們就在后面

Web設計師使用術語持久導航（全局導航）來描述出現(xiàn)在網(wǎng)站每個頁面上的一組導航元素。持久導航應該用令人舒服的語氣說“導航部分在這里，其中一些可能會根據(jù)您所處的位置有所變化，但它總會出現(xiàn)在這里，也會總是以同樣的方式為您服務”

僅僅讓導航部分在每一頁以一致的外觀出現(xiàn)在同樣的位置，會讓你立即確認自己仍然待在這個網(wǎng)站上，讓它在整個網(wǎng)站保持一致意味著你只需要了解它一次。持久導航應包含五個元素：站點ID、欄目、回主頁的方式、搜索的方式、實用工具。

頁面名稱，或者說為什么我喜歡在洛杉磯開車

路牌標志很大；他們在合適的位置。關于頁面名稱：每個頁面都要有頁面名稱；頁面名稱要出現(xiàn)在合適的位置（涵蓋該頁內(nèi)容的位置）；名稱要引人注目；名稱要和點擊的鏈接一致。

你在這里

在Web上知道自己所處的位置可以通過突出當前的位置來做到，不管是在導航條還是菜單上。你在這里指示器最常見的失敗之處就是它們太不明顯，保證它們突出的一種方式是采用多種視覺區(qū)別，例如使用不同顏色加粗體。

面包屑

面包屑（層級菜單）告訴你從主頁到當前位置的路徑。它們提供了一種方便一致的方式讓你可以：回退一個層次或去主頁。最佳實踐：把他們放在最頂端；使用“>”對層級進行分隔；使用小字體；使用了文字“你在這里”；將最后一個元素加粗（最后一個元素是當前頁面名稱）；沒有把它們用作頁面的名稱。

喜歡標簽的四個理由

它們不言而喻；它們很難錯過；它們很靈活；它們暗示了一個物理空間。標簽的圖形要營造出以下效果：激活的標簽頁位于其它標簽頁之前，這是讓它們和標簽相像的最大要點，比它們那與眾不同的標簽外形更重要。激活的標簽頁必須有一種不同的顏色或外形作為對比，并且必須與它下面的空間在物理上鏈接起來。為站點的每個欄目使用一種不同的標簽顏色，并把這種顏色用在頁面其它導航元素上，讓它們渾然一體。當你進入網(wǎng)站時，有一個標簽已經(jīng)選中。如果進入網(wǎng)站時沒有選中的標簽，那么最初幾秒鐘我注意不到標簽的存在。

后備箱測試

如果這個頁面設計良好，看過網(wǎng)頁之后應能毫不猶豫的回答：這是什么網(wǎng)站（網(wǎng)站ID）；我在哪個網(wǎng)頁上（頁面名稱）；這個網(wǎng)站主要欄目有哪些（欄目清單）；在這個層次上我有哪些選擇（本頁導航）；我在導航系統(tǒng)的什么位置（你在這里指示器）；我怎么搜索。

第7章 首先要承認，主頁不由你控制

設計主頁

主頁要完成的任務：站點的標識和使命；站點層次；搜索；導讀（精彩內(nèi)容）；內(nèi)容更新；友情鏈接；快捷方式（最常訪問的內(nèi)容）；注冊；讓我看到自己正尋找的東西；還有我沒尋找的；告訴我從哪里開始；建立可信度和信任感。

第一個受害者

主頁要傳達整體形象，越快越好，越清楚越好，在我第一次進入一個網(wǎng)站時，主頁回答我頭腦里的四個問題：這是什么網(wǎng)站？我能在這里做什么？網(wǎng)站有些什么？為什么我應該在這里而不是其他地方？

如何傳達

主頁上的每一樣東西都有助于我們理解這個網(wǎng)站是做什么的，但這個頁面上有兩個重要的位置，我們希望能從這兩個地方找到清楚的陳述：口號。當我們看到一個和站點ID相關聯(lián)的短語時，就知道這是口號，然后我們會把它當做整個網(wǎng)站的描述；歡迎廣告，是網(wǎng)站的簡要描述，在主頁的首要位置顯示。/*APP在歡迎界面?zhèn)鬟_*/

下拉框的問題

你必須把他們找出來；它們難以掃描；它們不好控制。下拉框?qū)τ诮M織按字母順序排列的項目來說最有效，例如國家，但當我們不知道自己在找什么名稱時，下拉框的效率就很低了。下拉框最大的好處在于節(jié)省空間。

第8章 農(nóng)場主和牧牛人應該是朋友

為什么Web團隊討論可用性實在浪費時間，如何避免這種情況？

有人天性有一種把個人喜好投射到整個Web用戶身上的傾向，認為絕大多數(shù)Web用戶喜歡我們所喜歡的，我們通常認為大部分Web用戶和我們一樣。

農(nóng)場主和牧牛人

在個人情緒表面之上，還有另一個問題：職位情緒。由于各自職位不同，Web團隊的成員對于好的網(wǎng)站設計由什么組成有著非常不同的看法。

普通用戶的神話

一旦因個人和職位不同而造成的沖不分勝負時，討論常常會轉(zhuǎn)化為尋找某種方式（不管是專家的意見、研究、焦點小組還是用戶測試）來確定絕大部分用戶喜歡或不喜歡什么，找出所謂的普通Web用戶，這里唯一的問題是，沒有什么普通用戶。所有的用戶都是獨一無二的，所有的Web使用都是不一樣的。有的用戶喜歡Flash，有的不喜歡。不喜歡的用戶實際上是不喜歡使用不當?shù)腇lash。

對于信仰爭論的解藥

不要問這樣的問題：大部分人喜歡下拉框嗎？正確的問題應該是：在這個頁面，這樣的上下文中，這個下拉框以及這些下拉項目和措辭會讓使用這個網(wǎng)站的大部分人產(chǎn)生一種良好的體驗嗎？

第9章 一天10美分的可用性測試

讓測試簡單

有時可用性測試能平息團隊爭論看，但通常它的作用是證明他們爭論的問題根本沒有那么重要。他們會發(fā)現(xiàn)，如果沒人能理解網(wǎng)站的價值主張，那么使用水平還是垂直的菜單沒有多大區(qū)別。

焦點小組不是可用性測試

在一次焦點小組研究中，一小組人（5~8人）對展示給他們的想法和設計做出反應，這是一個小組過程，主要價值來自參與人員的彼此反應。焦點小組是快速得到用戶意見和感覺的一種不錯的方法。

在一次可用性測試中，一次一個用戶展示一些內(nèi)容，并且要求用戶說出：這是什么并用它來完成一項典型任務。可用性測試告訴你人們是否確實能使用你的網(wǎng)站。

關于測試的幾個事實

如果想建立一個優(yōu)秀的網(wǎng)站，一定要測試。測試會提醒你，不是每個人的想法都和你一樣，和你用同樣的方法使用網(wǎng)站。測試一個用戶比不做測試好一倍。早點測試一位用戶好過最后測試50位用戶。人們對招募用戶代表的重要性估計過高。

測試的關鍵不是要證明什么或反駁什么，而是了解你的判斷力。測試能做的就是給你提供有價值的參考，加上你的經(jīng)驗和判斷能夠讓你更容易的在A和B之間做出更明智的選擇。測試是一個迭代的過程。沒有什么比現(xiàn)場用戶的反應更重要。

應該測試多少用戶

每輪測試的理想用戶應該是三個，最多四個。前三個用戶很可能會遇到幾乎所有最明顯的問題，只測試三到四名用戶也便于在同一天完成測試和總結(jié)。如果一次測更多用戶，你會得到更多筆記，沒時間處理，可能之前的問題沒修正還會影響他們發(fā)現(xiàn)新的問題。

寬松招募，曲線上升

利用你能找到的任何人（滿足最低要求），然后曲線上升。設計出的網(wǎng)站只有你的目標群體能使用，這通常并不是一個好主意。專家通常不會介意對初學者來說很清楚的界面。

在哪里測試

測試對象坐在顯示器前，協(xié)助人員告訴他做什么，并且提問。攝影機指向屏幕，把測試對象看到的內(nèi)容錄下來。在旁邊的房間里，感興趣的團隊成員可以進行觀察。

測試什么，什么時候測試

關鍵是要在Web開發(fā)的各個階段及早進行測試，還有經(jīng)常測試。在你開始設計網(wǎng)站之前，就應該測試一下同類網(wǎng)站，總結(jié)哪些地方效果好，哪些地方效果不好，這是非常有價值的，就像有人免費給你建立了一個已經(jīng)能用的原型。如果你測試同類網(wǎng)站之前沒主導過用戶測試，那么這會給你一個完全沒有壓力的機會來試驗一下，這也給了你一個鍛煉心理承受能力的機會。

你可以進行兩種測試：理解測試，就是讓用戶看到網(wǎng)站，然后看他們能否理解這個網(wǎng)站，網(wǎng)站目標、價值主張等；關鍵任務測試，讓用戶完成一些任務，然后觀察他們是怎么做的。通常讓用戶執(zhí)行一些他們有權(quán)選擇的任務時會得到更有用的結(jié)果（找一本想買的書比找一本14元以下的書好得多）當人們執(zhí)行蒼白呆板的任務時，不會進行感情投入，也不會盡可能運用個人知識。

越早把設計思想展示給用戶越好，從你的第一章草圖開始，設計師通常不愿意展示尚未完成的作品，但用戶更原因評論一些看起來還沒有完成的東西。由于這還不是一個精雕細琢的設計，用戶不會被實現(xiàn)細節(jié)所吸引，從而可以把注意力集中在要點和措辭上。

立刻回顧測試結(jié)果

給問題分類，回顧大家看到的問題，決定哪些問題需要修正；解決問題，找出修正這些問題的方法。記住，這是一個循環(huán)的過程，因此團隊不必對完美的解決方案達成一致，你只要確定下一步做什么就可以了。

常見問題

用戶不清楚網(wǎng)站的概念；他們找不到自己要找的字眼，這意味著你用來組織內(nèi)容的分類不符合用戶的習慣或沒有用他們期望的名字；內(nèi)容太多了。

一些問題分類指南

忽略皮劃艇問題，用戶暫時出現(xiàn)錯，然后又在不需要任何幫助的情況下回到原來的軌道。如果用戶關于在哪里找到他們需要的內(nèi)容的第二次猜測總是對的就可以了。抵制添加的沖動，當用戶沒有理解某些內(nèi)容時，大部分人反應是添加一些內(nèi)容，正確的解決方案往往是去除某個讓人混淆的內(nèi)容。不要太看重人們對新功能的要求，他們只是在告訴你他們的喜好而已。

別把孩子也潑出去了

哪怕一個微小的變化都會帶來不小的影響，真正的挑戰(zhàn)不是你發(fā)現(xiàn)的問題，而是修正這些問題的同時不破壞已正常運行的部分。只要進行改變，就要仔細考慮它將會影響哪些內(nèi)容。特別是，當你把某些部分調(diào)整的更為突出時，想想看是不是降低了其他內(nèi)容的重要性。

每個月一個上午：我們就要求這么多

我認為每個Web團隊應該在每個月花一個上午時間進行可用性測試，一個上午你可以測試3~4位用戶，然后在午餐時間進行總結(jié)，就是這樣。

第10章可用性是基本禮貌

為什么你的網(wǎng)站應該讓人尊敬

我發(fā)現(xiàn)每次進入一個網(wǎng)站時，我們都從一個好感儲存器開始。在網(wǎng)站上遇到的每個問題都會降低好感儲存器的高度。如果你對待用戶的態(tài)度很惡劣，把他消耗殆盡，用戶就很可能會離開網(wǎng)站。好感儲存器的特點：它因個人特質(zhì)的不同而不同；它依情況而定；你可以重新填滿它。

降低好感的幾種方式

隱藏我想要的信息；因為沒有按照你們的方式行事而懲罰我；向我詢問不必要的信息；敷衍我，欺騙我；給我設置障礙；你的網(wǎng)站看上去不專業(yè)。

提升好感的幾種方式

知道人們在你的網(wǎng)站上想做什么，并讓它們簡單明了；告訴我我想知道的；盡量減少步驟；花點心思；知道我可能有哪些疑問，并給予答案；為我提供協(xié)助，例如打印友好頁面；容易從錯誤中恢復；如果造成不便，記得道歉。

第11章可訪問性、級聯(lián)樣式表和你（略）

第12章救命！老板想要我……

當好人遇到不好的設計決策

幾乎任何設計想法，不管它多么糟糕，經(jīng)過努力也能在適當環(huán)境下可用。只要你確定你知道你在改造這些規(guī)則，而且至少你認為你有充分的理由改造它們就行了。www.sensible.com