第1章 別讓我思考

要使網(wǎng)站看上去一目了然，或者需要自我解釋。讓用戶在第一眼就理解網(wǎng)站上各個(gè)元素的作用，并且盡可能的不要讓用戶對(duì)網(wǎng)站功能產(chǎn)生疑問。

第2章 我們實(shí)際上是如何使用WEB的

我們使用WEB的三個(gè)事實(shí)：

1）我們不是閱讀，而是掃描【關(guān)于WEB使用人們會(huì)花極少數(shù)的時(shí)間來閱讀大部分頁面。我們只是掃描一下網(wǎng)頁，尋找吸引我們注意力的文字或詞語。我們在網(wǎng)頁上看到什么取決于我們想看到什么，通常只是頁面上的一小部分內(nèi)容?！?/p>

2）我們不作最佳選擇，而是滿意即可【大多數(shù)時(shí)間我們不會(huì)選擇最佳選項(xiàng)，而是選擇第一個(gè)合理的選項(xiàng)，最佳策略耗時(shí)太長，而且查看網(wǎng)頁如果在不對(duì)的情況下不會(huì)有什么嚴(yán)重后果只要返回上一頁就行了?！?/p>

3）我們不是追根究底，而是勉強(qiáng)應(yīng)付【在很大程度上人們一直在使用這些東西，但并不理解他們的運(yùn)作原理，甚至對(duì)它們的工作原理有完全錯(cuò)誤的理解，這對(duì)我們來說并不重要，如果發(fā)現(xiàn)某個(gè)事物能用，我們就會(huì)一直用它，很少去主動(dòng)尋找更好的方法?！?/p>

第3章 廣告牌設(shè)計(jì)101法則

要保證用戶們盡可能的看到并理解你的網(wǎng)站，那么你需要注意5個(gè)重要方面

1）在每個(gè)頁面上建立清楚的視覺層次【最重要的部分越突出；邏輯上相關(guān)的部分再視覺上也相關(guān)；邏輯上包含的部分在視覺上進(jìn)行嵌套】

2）盡量利用習(xí)慣用法【它們非常有用；設(shè)計(jì)師們通常不愿意利用他們；如果打算創(chuàng)新，那么你必須理解你準(zhǔn)備換用的方法的價(jià)值，值不值得用戶付出一點(diǎn)努力來學(xué)習(xí)?！?/p>

3）把頁面劃分成明確定義的區(qū)域【這一點(diǎn)很重要，可以讓用戶很快決定專注頁面的哪些區(qū)域，或者放心跳過哪些區(qū)域。】

4）明顯標(biāo)識(shí)可以點(diǎn)擊的地方

5）最大限度降低干擾，降低視覺噪聲【眼花繚亂；背景噪聲。】

第4章 動(dòng)物、植物、無機(jī)物

為什么用戶喜歡無需思考的選擇：用戶不介意有多少次點(diǎn)擊，只要每次點(diǎn)擊都是毫不費(fèi)力的，并且讓用戶堅(jiān)信自己的選擇正確。

如果我們一直在網(wǎng)絡(luò)上進(jìn)行選擇，那么這些選擇變得無需思考是讓一個(gè)網(wǎng)站內(nèi)容容易使用的主要因素。

第5章 省略不必要的文字

有力的文字都很簡練句子里不應(yīng)該有多余的文字，段落中不應(yīng)該有多余的句子。

l 可以降低頁面的噪聲

l 讓又用的內(nèi)容更加突出

l 讓頁面簡短，使用戶再每一頁上一眼就能看見更多的內(nèi)容

1）去掉歡迎詞

2）去掉指示說明

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

如果在網(wǎng)站上找不到方向，人們不會(huì)使用你的網(wǎng)站。

1）網(wǎng)絡(luò)導(dǎo)航101法則【用戶通常是為了尋找某個(gè)目標(biāo)；他會(huì)先選擇詢問還是先瀏覽；如果選擇瀏覽，他將通過標(biāo)志的引導(dǎo)在層次結(jié)構(gòu)中穿行；最后找不到想要的東西他會(huì)離開?！?/p>

2）無法承受的瀏覽之輕【感覺不到大小；感覺不到方向；感覺不到位置。】

3）被忽視的導(dǎo)航用途【告訴我們現(xiàn)在在什么位置；給我們一些固定的感覺；告訴我們?nèi)绾问褂镁W(wǎng)站；給我們對(duì)網(wǎng)站建造者的信心?！?/p>

4）WEB導(dǎo)航習(xí)慣用法【網(wǎng)站ID、欄目、實(shí)用工具、下一級(jí)欄目】

5）保持網(wǎng)站每一頁的持久導(dǎo)航都一致；應(yīng)該包括站點(diǎn)ID、欄目、回主頁的方式、搜索的方式、實(shí)用工具

6）主頁和表單可以不需要持久導(dǎo)航

7）保證有可以立刻回到首頁的按鈕或鏈接

8）提供搜索【避免花哨的用詞；避免指示說明；避免選項(xiàng)?！?/p>

9）低層次的導(dǎo)航也要重視

10）頁面名稱【每個(gè)頁面都需要一個(gè)名稱；頁面名稱需要出現(xiàn)在合適的位置；名稱要引人注目；名稱要和點(diǎn)擊的鏈接一致。】

11）你在網(wǎng)站中的位置【在導(dǎo)航中需要用明顯的視覺效果突出出來?！?/p>

12）面包屑【層級(jí)菜單，告訴你所在層級(jí)結(jié)構(gòu)的前后關(guān)系；放在最頂端；使用“>”對(duì)層級(jí)進(jìn)行分隔；使用小字體；使用文字“你在這里”將你正在瀏覽的頁面名稱加粗；不要把它們當(dāng)作頁面名稱?！?/p>

13）標(biāo)簽的優(yōu)點(diǎn)【它們淺顯易懂；它們很難錯(cuò)過；它們很靈活；它們暗示了一個(gè)物理空間。Amazon的優(yōu)點(diǎn)：正確繪制、顏色編碼區(qū)分】

導(dǎo)航中所用元素介紹：

1）站點(diǎn)ID：代表了整個(gè)網(wǎng)站，需要出現(xiàn)在頁面可視層次的首要位置

2）欄目：有時(shí)候也稱為主導(dǎo)航條，是到達(dá)主要欄目的連接

3）實(shí)用工具：是到達(dá)網(wǎng)站中不屬于內(nèi)容層次的重要元素的連接

第7章 首先要承認(rèn)主頁不由你控制

設(shè)計(jì)主頁：

l 站點(diǎn)的標(biāo)識(shí)和使命【告知用戶這是什么網(wǎng)站，做什么的，為什么我應(yīng)該在這里而不是別的網(wǎng)站】

l 站點(diǎn)層次【主頁要給出網(wǎng)站提供服務(wù)的概貌】

l 搜索【大多數(shù)網(wǎng)站需要在主頁上設(shè)置一個(gè)突出顯示的搜索框】

l 導(dǎo)讀【吸引用戶】

l 內(nèi)容更新【定時(shí)間的內(nèi)容更新顯示網(wǎng)站并非死水】

l 友情鏈接

l 快捷方式【熱門或最常訪問的鏈接可以放置在主頁最上方】

l 注冊【如果網(wǎng)站有注冊機(jī)制應(yīng)該讓用戶知道自己已經(jīng)登陸了】

l 讓我看到自己正在尋找的東西

l 推薦一些我可能會(huì)感興趣的但是還沒有尋找的東西

l 告訴我從哪里開始

l 建立可信度和信任感

如何傳達(dá)主頁信息：

1）口號(hào)

最有價(jià)值的位置之一是靠近站點(diǎn)ID的地方，可以放置口號(hào)?？谔?hào)是一條精煉的短句，刻畫了整個(gè)企業(yè)，總結(jié)它是什么，為什么卓越

口號(hào)是非常有效得而信息傳達(dá)方式，但是有幾點(diǎn)要考慮：要清楚、言之有物，不要含混不清；長度適中；要表述出網(wǎng)站的特點(diǎn)和顯而易見的好處，不要太籠統(tǒng)；應(yīng)該有個(gè)性、生動(dòng)，有時(shí)還很俏皮。

2）歡迎廣告

網(wǎng)站的簡介描述，在主頁的首要位置顯示

傳達(dá)信息的指導(dǎo)原則：

l 需要多大空間就使用多大空間

l 但也不要使用過多的空間

l 不要把使命陳述當(dāng)做歡迎廣告

l 最重要的是進(jìn)行測試

主頁導(dǎo)航可以不一樣

欄目描述【由于主頁要盡可能多的表現(xiàn)網(wǎng)站內(nèi)容，甚至可能想列出下一級(jí)欄目】

不同的方向【主頁通常和其他頁面的布局不同，因此它可能有必要使用垂直導(dǎo)航而不是水平導(dǎo)航，反之亦然】

用于識(shí)別的空間更多【主頁上的站點(diǎn)ID通常會(huì)比持久導(dǎo)航上的更大，】

下拉框的問題：

l 只有在點(diǎn)擊的之后才能看到下拉列表的內(nèi)容

l 如果設(shè)計(jì)師使用標(biāo)準(zhǔn)的HTML下拉菜單，他們無法控制字體、間隔和列表的樣式，以提高菜單的可讀性和視覺美觀，也沒有什么好辦法把列表分成幾個(gè)組

l 他們不好控制，列表的顯示和收縮很快，因此會(huì)影響查看效果

防止主頁的過度使用【任何共享的資源（共有區(qū)域）都會(huì)因?yàn)檫^度使用而遭到破壞；可以從其他熱門頁面推薦，或者輪流使用主頁上的同一塊空間】

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

為什么web設(shè)計(jì)團(tuán)隊(duì)討論可用性是在浪費(fèi)時(shí)間，如何避免這種情況

l 不要把自己的喜好投射到整個(gè)WEB用戶身上

l 所有的WEB用戶都是獨(dú)一無二的，所有WEB使用都是不一樣的，必須要把用戶的復(fù)雜性考慮進(jìn)去

l 不應(yīng)該討論“大部分人是否喜歡下拉框”，“而是討論這個(gè)下拉框放在這個(gè)地方是否會(huì)讓用戶有一種好的體驗(yàn)”【要在合適的位置放置合適的東西，讓用戶產(chǎn)生舒適的體驗(yàn)】

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

焦點(diǎn)小組不是可用性測試

l 焦點(diǎn)小組——一小組人（通常是5~8人）圍坐在桌子旁邊，對(duì)展示給他們的想法和設(shè)計(jì)做出反應(yīng)，這是一個(gè)小組過程，主要價(jià)值來自參與人員彼此的反應(yīng)。焦點(diǎn)小組是快速得到用戶意見和感覺的一種不錯(cuò)的方法?！境橄蟮拇_定你的目標(biāo)受眾想要什么、需要什么、喜歡什么的時(shí)候很有用，他們也可以測試出網(wǎng)站的理念是否有意義，價(jià)值主張是否吸引人。同時(shí)在測試你的網(wǎng)站功能命名，發(fā)現(xiàn)用戶對(duì)你的競爭對(duì)手的看法等方面。但這種方法不適合用來了解你的網(wǎng)站運(yùn)行狀況，以及怎樣改進(jìn)網(wǎng)站】

l 可用性測試——對(duì)一個(gè)用戶展示一些內(nèi)容（不管是網(wǎng)站還是網(wǎng)站原型，或是一些單個(gè)頁面的草圖）并且要求用戶說出：1.這是什么；2.試著用它來完成一項(xiàng)典型的任務(wù)

關(guān)于測試：

l 如果想建立一個(gè)優(yōu)秀的網(wǎng)站，一定要測試【了解它是否運(yùn)作正?！?/p>

l 測試一個(gè)用戶比不做測試好一百倍【測試總會(huì)有效果】

l 在項(xiàng)目中，早點(diǎn)測試以為用戶好過最后測試50位用戶【web在上線以前更改都是相對(duì)來說比較容易的，但是上線后要改變它們就不那么容易了，有些用戶拒絕做出任何變化?！?/p>

l 人們對(duì)招募用戶代表的重要性估計(jì)過高

l 測試的關(guān)鍵不是要證明什么或者反駁什么，而是了解你的判斷力

l 測試是一個(gè)迭代的過程【測試不是做一次就可以了，而是要循環(huán)開發(fā)、測試、修復(fù)、在讀測試的過程】

l 沒有什么比現(xiàn)場用戶的反應(yīng)更重要

簡易可用性測試

l 應(yīng)該測試多少用戶【每輪測試?yán)硐胗脩魯?shù)量應(yīng)該是三個(gè)，最多四個(gè)，第一輪測試可能會(huì)遇到幾乎所有最明顯的問題，而且要多做幾輪測試。】

l 寬松招募，曲線上升【實(shí)際上，我們都是初學(xué)者；設(shè)計(jì)出的網(wǎng)站只有你的目標(biāo)群體能使用，這通常并不是一個(gè)好主意；專家通常不會(huì)介意對(duì)初學(xué)者來說很清楚的界面。但也有例外：如果你的網(wǎng)站幾乎只有某一類用戶使用，而且招募這一類測試用戶并不困難；如果你的目標(biāo)用戶群體可以分成幾個(gè)明顯的陣營，而且這些陣營有著完全不同的興趣和需要；如果使用你的網(wǎng)站需要專門的領(lǐng)域知識(shí)】

當(dāng)你在進(jìn)行招募的時(shí)候，應(yīng)該主語一下幾個(gè)問題：

l 提供合理的激勵(lì)

l 邀請要簡單

l 避免對(duì)網(wǎng)（或網(wǎng)站背后的組織結(jié)構(gòu)）進(jìn)行預(yù)先討論

l 別不好意思請朋友和鄰居幫忙

測試什么，什么時(shí)候測試

要在WEB開發(fā)的各個(gè)階段及早進(jìn)行測試，還有經(jīng)常測試，開始設(shè)計(jì)前可以先測試一下同類的網(wǎng)站

l “理解”測試——讓測試用戶看到網(wǎng)站，他們是否能理解這個(gè)網(wǎng)站的目標(biāo)、價(jià)值主張、組織方式、運(yùn)行方式等。

l 關(guān)鍵任務(wù)測試——讓用戶完成一些任務(wù)，看他們是怎么做的。

l “小隔間”測試——在做好一個(gè)頁面時(shí)就給別人看，看他們是否能弄清頁面的意思。

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

每輪測試后，應(yīng)該盡快讓開發(fā)團(tuán)隊(duì)回顧每個(gè)人的觀察，決定接下來該如何處理

l 給問題分類

l 解決問題

常見問題

l 用戶不清楚概念

l 他們找不到自己要找的字眼【你用來組織內(nèi)容的分類不符合用戶習(xí)慣；分類符合他們的習(xí)慣，但沒有使用他們期望的名字】

l 內(nèi)容太多了【減少頁面上的整體干擾；把他們需要看到的內(nèi)容設(shè)置的更加醒目突出?！?/p>

一些問題分類指南

l 忽略“Kayak”（皮劃艇）問題【用戶暫時(shí)出現(xiàn)錯(cuò)誤，然后再不需要任何幫助的情況下回到原來的軌道。當(dāng)然如果最這樣的問題有一種簡單而又明顯的修正方法并且不會(huì)影響到其他內(nèi)容，那么盡管去修正。】

l 抵制添加的沖動(dòng)

l 不要太看重人們對(duì)新功能的要求

l 抓住夠得著的果子【恍然大悟型、 便宜型】

進(jìn)行變更的建議：

哪怕一個(gè)微小的變化都會(huì)帶來不小的影響，有時(shí)候真正的挑戰(zhàn)不是修正你發(fā)現(xiàn)的問題，而是修正這些問題同時(shí)不破壞已經(jīng)正常運(yùn)行的部分。

每個(gè)月進(jìn)行一次可用性測試，只要一上午。

第10章 可用性是基本禮貌

做正確的事，為用戶考慮周到

用戶的好感儲(chǔ)存器

l 它因個(gè)人特質(zhì)而不同

l 它依情況而定

l 你可以重新填滿它

l 有時(shí)候一個(gè)錯(cuò)誤就能清空它

降低好感的幾種情況：

l 隱藏我想要的信息

l 因?yàn)闆]有按照你們的方式行事而懲罰我

l 向我詢問不必要的信息

l 敷衍我，欺騙我

l 給我設(shè)置障礙

l 你的網(wǎng)站看上去不專業(yè)

提高好感度的幾種情況：

l 知道人們在你網(wǎng)站上想做什么，并讓它們簡單易懂

l 告訴我我想知道的

l 盡量減少步驟

l 花點(diǎn)心思

l 知道我可能有哪些疑問，并給予解答

l 為我提供協(xié)助，例如打印友好頁面

l 容易從錯(cuò)誤中恢復(fù)

l 如有不確定，記得道歉

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

支持可訪問性才是正確的做法

現(xiàn)在就能正確實(shí)施的五件事：

1）改正讓所有人感到混淆的可用性問題

l 經(jīng)常測試，然后不斷消除讓每個(gè)人都混淆不清的地方。

2）讀一篇文章【國內(nèi)暫時(shí)不用】

l Guidelines for Accessible and Usable Web Sites：Observing Users Who Work with Screen Readers（網(wǎng)站可訪問及可用指南：屏幕閱讀器用戶觀察）

3）看一本書【略】

l Joe Clark《Building Accessible Websites》

l Jim Thatcher等《Constructing Accessible Websites》

l John Slatin和Sharron Rush《Maximum Accessibility：Making Your Web Site More Usable for

Everyone》

l 一張CD《The WebAIM Guide to?Web Accessibility Techniques and Concepts》

4）開始使用級(jí)聯(lián)樣式表

l對(duì)格式的控制沒有限制

l 靈活性

l 瀏覽器之間的一致性

l 序列化你的內(nèi)容

l 允許你重新定義文字大小

5）去摘夠得著的果子【不太適用了】

l 為每張圖片增加一個(gè)alt文本

l 讓你的表單配合屏幕閱讀器

l 再每一頁的最前面增加一個(gè)“跳轉(zhuǎn)到主要內(nèi)容”的鏈接

l 讓所有的內(nèi)容都可以通過鍵盤訪問

l 如果沒有充分的理由，不要使用JavaScript

l 使用客戶端（而不是服務(wù)器端）的影像地圖

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

當(dāng)好人遇不到好的設(shè)計(jì)決策（哇，這標(biāo)題放到小說里可能有很多人會(huì)想歪）

詢問不必要的信息可能產(chǎn)生的三個(gè)嚴(yán)重后果：

l 無法得到真實(shí)的數(shù)據(jù)

l 到的完整表單更少

l 是您的網(wǎng)站形象下降

要記住下面三個(gè)原則：

l 只讓我提供完成此次事務(wù)所需要的信息

l 不要要求填寫過多可選信息，容易讓生產(chǎn)生不快

l 告訴我提供自己的信息能得到的回報(bào)

網(wǎng)站的外觀效果不能夠影響到其功能，否則就會(huì)流失客戶。