《點石成金—網頁設計秘笈》讀書筆記

來自專欄龔捷的讀書筆記4 人贊了文章

說明：

筆記原封不動地保留了原版書的章節和標題；

章節下的正文是對該章節的概括總結，和必要的原文；

「#...#「代表原版書中有意思的例子和精彩的金句；

」【...】「代表我本人的批註；

斜體字代表書中對該正文的進一步解釋說明，並且是原文抄；

而不重要的內容和章節會直接跳過；

作者認為：只有幾乎能夠替代原版書的讀書筆記才是合格的手札。

— 讓我們開始吧 —

本書是為了一群苦於不知道如何留住訪問者的網頁設計師而寫，基於web用戶的行為特徵，講授了網頁交互設計的可用性原則。當然這些設計規則是可以打破的，只要你知道正在改造哪些規則，並且有堅固的依據支撐。。

#如果某個東西很難用，我就不會經常用它#【自由競爭市場下成立】

-原則指導-

第1章 別讓我思考——Krug可用性第一定律

Krug可用性第一定律：網頁內容需要不言而喻，或者在複雜頁面設計的情況下，做到自我解釋（ self-explanatory ）。

作者在這一章中列舉了一些會讓用戶「思考」的地方：

1）為什麼他們給它取這個名字？——往往網頁文案會在專業性與易用性之間做權衡，少量斟酌後使用的文字

2）這個按鈕能不能點擊？——按鈕需要明確向用戶展現是否可以點擊

3）我在什麼位置？——導航要清晰

4）我該從哪裡開始？——入口要清晰

5）他們把XX放在什麼位置了？——重要功能要顯而易見

6）這個頁面最重要的是什麼？——視覺重心

當我們訪問Web，每個問號都會加重我們的認知負荷。而一位富有經驗的設計師會注意到網頁上所有讓你思考的東西。

第2章 我們實際上是如何使用Web的——掃描，滿意即可，勉強應付

如果想設計有效的網頁，需要接受3個網站使用的事實：

1）我們不是閱讀，而是掃描

一般注意力會用在具有下述特徵的文字和短語上：① 與手頭任務有關；② 我們當前和接下來的個人興趣；③ 根深蒂固的觸發器：美女/免費/大減價

2）我們不做最佳選擇，而是合理即可

一旦我們發現一個鏈接，看起來似乎能跳到我們想去的地方，那就是一個我們將會點擊它的大好機會

原因：① 尋找最佳策略很難，需要的時間很長 ② 如果猜錯了，也不會產生什麼嚴重的後果。如果網頁載入速度很慢，我們會變得更慎重

3）我們不是追根究底，而是勉強應付

用戶心智模型與產品設計模型不一致，人們在使用產品的同時，並不會思考工作原理

原因：① 這對我們來說並不重要。對於我們中的大多數人來說，是否明白事物背後的工作機制並不重要，只要我們能正常使用它們即可；② 如果發現某個事物能用，我們會一直用它。我們一旦發現某個事物能夠用（不管有多難用），我們也不會太去找一種更好的方法。如果偶然發現一種更好的方法，我們會換用這種更好的方法，但很少會主動尋找更好的方法

第3章 廣告牌設計101法則——為掃描設計，不為閱讀設計

為了針對掃描式閱讀，作者告訴我們網頁設計需要注意5大點：

1）建立清楚的視覺層次

在視覺上體現內容之間的邏輯關係。一個視覺層次清楚的頁面有3個特點：

① 越重要的部分越突出

最重要的標題要麼字體更大、更粗，顏色更特別，旁邊留有更多空白，更接近頁面的頂部

② 邏輯上相關的部分在視覺上也相關——分組

把相近的內容分成一組，放在同一個標題之下，採用類似的顯示樣式，或者把它們全部放在一個定義明確的區域之內

③ 邏輯上包含的部分在視覺上進行嵌套

總之，如果一個頁面沒有清楚的視覺層次——例如，所有內容看起來都一樣重要——我們會降低掃描頁面的速度（也就是說，有視覺層次會有助於提高我們的閱讀速度），尋找關鍵的文字和短語，然後拼湊出我們感覺重要的內容和內容的組織方式，增加了工作量

#分解一個在視覺層次上有問題的頁面——例如，一個標題涵蓋了不屬於它的內容——就像讀一個病句一樣#

2）盡量利用習慣

減少用戶學習負荷，採用沒有學習曲線的方法

3）把頁面劃分成明確定義的區域出

把頁面劃分成明確定義的區域很重要，因為這可以讓用戶很快決定關注頁面的哪些區域，或者放心地跳過哪些區域

4）明顯地標識可以點擊的地方

人們在網路上所做的大多數事情就是找到下一個地方點擊，那麼明確地標識哪些地方可以點擊，哪些地方不能點擊，很重要

5）降低視覺干擾

① 眼花繚亂

② 背景雜訊，例如：

#一個設計頁面的好辦法：先假定所有內容都是視覺雜訊，然後得到證明它們不是#

第4章 動物、植物、無機物——為什麼用戶喜歡無須思考的選擇

Krug可用性第二定律：點擊幾次都沒關係，只要每次點擊都是無須思考，明確無誤的選擇

雖然考慮用戶到達目標之前要點擊的次數是必要的，但是更重要的是考慮每次點擊有多「艱難」——需要多少思考，有多大的不確定性來判斷自己是否在進行正確的選擇。

如果我們需要一直在網路上進行選擇，那麼讓這些選擇變得無須思考是讓一個網站容易使用的主要因素

#信息的味道#

#3次無須思考，明確無誤的點擊相當於1次需要思考的點擊#

#實際上，這只是另一場更大規模的、關於站點層次深度和廣度相對價值討論的一部分。一個廣度站點在每個層次可以分成許多類別，因為層次較少，所以不需要太多次數的點擊就能到達底層；一個深度站點有更多的層次，需要更多次數的點擊，但它在每個層次上需要考慮的類別選擇較少#【「點擊-選擇」之間的權衡，總之要讓整個站點無須思考】

#頁面載入速度較慢，那麼點擊次數更少會更有價值#

第5章 省略不必要的文字——不要在Web上寫作的藝術

Krug可用性第三定律：去掉每個頁面上一半的文字，然後把剩下的文字再去掉一半

我發現要在大部分網頁上去掉一半文字而不失去原來的意義很容易。不過，「把剩下的文字再去掉一半」只是為了鼓勵人們在這麼做的時候更堅定一點。【在不損失語義的條件下，文字儘可能簡練】

去掉沒有人會看的文字有幾個好處：使內容更突出，降低頁面的雜訊，並且節省空間

#有力的文字都很簡練。句子里不應該有多餘的文字，段落中不應該有多餘的句子。同樣，畫上不應該有多餘的線條、機器上不應該有多餘的零件#

-必須正確處理的幾件事-

第6章 街頭指示牌和麵包屑——設計導航

如果在網站上找不到方向，人們不會使用你的網站。

網路導航101法則：

① 瀏覽網頁，通常是為了尋找某個目標

② 決定先詢問（搜索）還是先瀏覽

對任何人來說，先搜索還是先瀏覽取決於他們的打算、匆忙程度、以及網站是否有良好的導航機制

③ 如果選擇瀏覽，將通過標誌的引導在層次結構中穿行

④ 找不到，則離開

物理世界可以找到空間位置，網頁則不能。用戶想再次訪問網站上的某個內容，不是依靠它在哪裡的物理感覺，而是記住它在概念層次上的位置，然後重新順著以往的鏈接過去。所以，書籤——儲存個人捷徑——如此重要，也是為什麼後退按鈕的點擊率占網路上所有點擊率的30-40%的原因。

主頁就像北極星，可以點擊「主頁」給一個重新開始的機會。另一方面，導航通過具體化網站的層次結構補償了空間感缺失，營造出某種位置的感覺。導航即網站本身，即指示說明，不是某個特性。

#導航與兩件事有關：從一個地方到另一個地方；告知當前所在的位置#

#通過讓層次結構可視化，導航可以告訴我們網站上有些什麼。導航表現了內容#

Web導航習慣用法：

① Logo

在Web上，用戶的移動方式主要是瞬移，需要在每個頁面上見到網站的名稱。它在當前站點結構中層次最高

② 導航

導航中最重要的元素之一是把我們送回主頁的按鈕或鏈接。讓站點Logo同時作為一個讓你回到主頁的按鈕

③ 麵包屑

#之所以稱為「麵包屑」是因為它們讓人想起Hansel扔在森林裡的麵包屑蹤跡，因為這樣他和Gretel能找到回家的路#

麵包屑與導航不同之處在於，導航告訴你在整個網頁中的位置，另一個告訴你如何到達這裡。它通常運用在擁有龐大資料庫，具有複雜層次結構的網站

④ 標籤

標籤是極少幾個將物理隱喻有效應用到用戶界面中的例子之一。它們把原來的物體分成了不同的部分，而且打開一個不同的部分很容易，通過突出的標籤就可以翻到對應的位置。（或者在Web上，點擊它）【交互—隱喻】【Tag把一個整體分割成不同的部分】

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

主頁要完成的任務：

具體目標

① 標識和使命。告訴用戶這是什麼網站，是做什麼的

② 站點層次。通過導航給出站點層次

③ 搜索

④ 導讀。內容推介&功能推介，吸引用戶來讀

⑤ 內容更新。告訴讀者不是死水一潭

⑥ 友情鏈接。放置廣告，交叉推廣，合作品牌的鏈接

⑦ 註冊

抽象目標

① 讓用戶看到自己正在尋找的東西。讓用戶想要的任何東西顯而易見

② 還有用戶沒有尋找的。提供也許會感興趣的內容

③ 告訴我從哪裡開始

④ 建立可信度和信任感。主頁將是你的網站給他們留下好印象的唯一機會

主頁首要任務是——在一眼之內——傳達整體形象，通過整體結構告訴人們：

① 這是什麼網站？

② 網站上有什麼？

③ 我能在這裡做什麼？

④ 為什麼我應該在這裡，而不是在別的地方？（？？？）

那麼如何傳達呢？

口號是一條精鍊的短句，刻畫了整個企業，總結了它是什麼。做到這點，需要滿足：

① 清楚、言之有物

② 長度適中，不少也不多

③ 表述出網站的特點和顯而易見的好處

④ 甚至有個性、生動，有時候還很俏皮

已經家喻戶曉的網站可以沒有口號

書中接下來還討論了導航和下拉框，但沒有特別值得記錄的。下拉框最大的有點是，節省空間。

#如果我不清楚這個網站是做什麼的，又如何決定要搜索什麼#

-確定你沒有做錯的幾件事-

第8章 農場主和牧牛人應該是朋友——為什麼Web設計團隊討論可用性是在浪費時間，如何避免這種情況

公司內部人員（市場、設計、開發）不該爭論Web用戶喜歡什麼，因為這些爭論背後隱藏了他們自身的喜惡和信仰，並有投射到整個Web用戶身上的傾向，認為絕大多數Web用戶喜歡我們所喜歡的。往往這些「信仰大戰」並不會改變他們原來的看法。

唯一正確的辦法是直接做「測試」。使用團隊的集體技巧、經驗、創造力和判斷力來創建一些版本（甚至是MVP），然後仔細觀察人們對它的看法和使用的方法。

第9章 一天10美分的可用性測試——讓測試簡單，這樣你能進行充分的測試

焦點小組和可用性測試是不同的。

焦點小組：在設計之前展開、5-8人小組、展示想法和設計、快速得到用戶意見和感受、抽象；

可用性測試：一次1人、展示原型、要求用戶完成一項典型任務、具體。

如果想建立一個優秀的網站，一定要測試，不斷的迭代式測試。哪怕對錯誤的用戶做一次失敗的測試，也會讓你看到一些改善網站的重要方面。通常這樣的測試不會超過10min，但被測網站的工作人員通常會記上好幾頁的筆記，甚至還會詢問是否可以對這次測試進行錄像。

#任何在開始時就有助於防止犯錯的方法都很划算#

理想下的可用性實驗室：一間位於單向玻璃後面的觀察室、兩部攝像機錄製用戶反應和目標對象、具有統計意義數量的測試用戶

具有科學研究意義的測試成本很高，書中提出了精簡的可用性測試：

關於控制測試用戶人數。3~4個最佳，可以遇到幾乎所有最明顯的問題。人數少可以快速推進迭代，修正完第一輪問題後，進行第二輪測試，發現新的問題。

關於招募用戶。測試對象並不重要。利用你能夠尋找到的任何人（滿足最低要求），然後曲線上升。邀請形式要簡單：「我們需要一些人來看看我們的網站，並給我們一些反饋。這很容易，大約花費45分鐘到一個小時的時間，而且你將得到____美元的報酬。」

#每個人都喜歡簡潔（是指真正的簡潔，不是把一大堆內容藏到下一級頁面那種簡潔）#

關於何時測試。在設計之前，就應該測試競品，或組織方式或功能上風格類似的網站，這相當於有人免費給你建立了一個已經能用的原型。

關於測試什麼。讓用戶執行一些他們有權參與選擇的任務。比如，「找到一本你想買的書，或者一本最近買過的書「就比」找一本14美元以下的烹飪書「要好得多。

#要求你把心裡的想法說出來，告訴我們你是怎麼想的，這對我們有很大幫助#

立刻回顧測試結果。在每輪測試之後，你應該儘快讓開發團隊回顧每個人的觀察，建議你在一個上午進行3-4輪測試，然後在午餐時間進行簡短的總結。第一步，給問題分類；第二步，解決問題

可用性測試常見的用戶問題：

① 用戶不清楚概念。要麼不理解網頁，不知道它們說的是什麼，要麼理解有誤

② 他們找不到自己要找的字眼。要麼組織內容的分類不符合用戶的習慣，要麼分類符合他們的習慣，但沒有使用他們期望的名字

③ 內容太多了。首先，減少頁面上的整體干擾；其次，把他們需要看到的內容設置得更加醒目，讓它們從可視層次結構中更加突出

④ 交互不可能是完美的。如果做不到不言而喻，只要用戶在第二次猜測總是對的，就已經可以了。因為有些含混之處總是沒有簡單的解決方法。例如，通常至少會有1-2個項目不太適合放在網站的頂級分類當中。因此，一半的用戶可能會在Lifestyle的列表下尋找電影，而另一半的用戶會先在Arts裡面尋找。不管你怎麼做，都會有一半用戶在第一次猜測的時候出錯，但每個人都會在第二次猜測之內找到

⑤ 抵制添加的衝動。當在測試時清楚地看到人們沒有理解某些內容時，大部分人的第一反應是增加一些內容，例如一些注釋或一些指導說明。而正確的解決方案往往是去除某個（某一些）讓人混淆的內容，而不是增加另一些干擾

⑥ 不要太看重人們對新功能的要求。人們常說：「如果它能做XX就更好了。」這樣的說法常常被看作是在要求新的功能。如果你仔細詢問，常常會發現，他們已經找到一個很好的網站，能做XX，也不大可能會切換到這裡來，他們只是在告訴你他們的喜好而已

在測試結束後，優先改善兩類問題：

① 恍然大悟型。當大家看到第一位用戶試著勉強應付的時候，問題和解決方法都很明顯的那種驚喜

② 低成本實現型。1）毫不費力的；2）性價比高的

設計就是做平衡。

修正這些問題，同時不破壞已經正常運行的部分。只要你進行改變，就要仔細思考它將會影響哪些其他的內容。尤其是，當你把某些部分調整得更為突出的時候，想想看是不是把其他內容的重要性降低了

大的方面和外界影響

第10章 可用性是基本禮貌——為什麼你的網站應該讓人尊敬

除了網站簡潔清楚，我們要增加用戶對網站的好感度。當網頁難用時，會損耗用戶的好感儲存器，甚至一個錯誤就能徹底清零。雖然每個人的好感儲存器的高度天生不同，但關鍵是，不要指望它的值會很高。

降低好感的幾種方式：

① 隱藏我想要的信息。最常見的情況是隱藏客戶服務的電話號碼、運費和價格

② 因為沒有按照你們的方式行事而懲罰我。格式塔規則有利用用戶處理數據，如信用卡號碼 010-287-2973

③ 向我詢問不必要的信息。用戶很介意個人信息，如果網站要求的信息超出當前任務時，會讓用戶覺得很厭煩

④ 敷衍我，欺騙我。厭惡虛偽的假意的關心。「您的來電對我們來說很重要」

⑤ 給我設置障礙。節省用戶時間

⑥ 你的網站看上去不專業。布局組織凌亂

相對的，提高好感的幾種方式：

① 知道人們在你網站上想做什麼，並讓它們明白簡易。

② 告訴我我想知道的。

③ 盡量減少步驟。

④ 花點心思。

⑤ 知道我可能有哪些疑問，並且給予解答。保持更新和坦率，並且是真正的常見問題

⑥ 如有不確定，記得道歉。如果障礙是不可抗力，記得及時道歉，讓他們明白你知道你在給他們造成不便

第11章 可訪問性、級聯樣式表和你

（關於技術問題的討論）

第12章 救命！老闆想要我......當好人遇到不好的設計決策

#可用性專家們有一個技術術語來形容這種現象，我們把它叫做「餿主意」#

在網路上填寫任何錶單的人都會問自己：「為什麼他們要我提供這項信息？真的需要提供這些信息才能得到我想要的？」如果答案是不，則接下來的問題便是：「他們要這些信息幹什麼？」

詢問不必要的信息可能產生3個嚴重後果：

① 您常常無法得到真實的數據

② 您得到的完整表單更少

③ 使您的網站形象下降

由此引出3個原則：

① 只讓我提供完成此次事務所需的信息

② 不要過多的可選信息

③ 明確告知填寫信息後能得到什麼反饋

在上網的絕大部分時間裡，人們並不希望被粘著，他們只想完成某些工作

#圖片大，載入時間長#

— 完 —