Roger的狂想世界

首先本書說明了上網的人是如何瀏覽網頁的，這似乎跟我們想像有很大的差距，因為我們覺得「用戶會盯著每個網頁，仔細閱讀我們精心製作的文字，領會我們頁面的組織方式」，事實上大部分時間用戶看網頁就像「高速公路看廣告牌一樣」，沒時間仔細閱讀，當然也不會用心思考。因而，我們必須為「掃瞄」而設計。


做到這點須注意以下幾點：

1. 盡量符合用戶習慣的設計，讓人接受陌生的東西需要代價，除非我們覺得這個代價是必須的。
2. 在頁面把越重要的東西越突出，建立清楚的視覺層次。
3. 可以點擊的地方必須突出，讓人明顯知道可以點擊。
4. 把頁面劃分成明確定義的區域
5. 省略多餘的文字

導航顯然是網站最重要的部分，「如果在網站上找不到方向，人們就不會使用你的網站」。現在WEB導航的習慣用法基本形成了，雖然還會繼續演化下去，但基本元素以產生：網站LOGO、網站欄目、返回主頁、搜索、實用工具或幫助。


網站LOGO，通常是頁面左上角，出現在頁面可視層級的首要位置，可以採取兩種方式：讓它成為本頁最顯眼的內容，或者讓它涵蓋頁面所有其他元素，當然網站LOGO設計的好壞對人產生心理影響就不用說了。


網站欄目，也稱導航條，站點層級結構的最頂層。導航條很多時候可以包容二級導航（下拉菜單的方式）。很多時候標籤的設計是導航採用的很好表現方式，Amazon.com幾乎把它發展到完美的狀態。


用標籤的方式設計導航時要注意幾點：

1. 進入網站時，有一個標籤已經選中
2. 正確繪製，激活的標籤頁要位於其他標籤頁之前
3. 顏色區分，可以讓每個欄目使用一種不用的標籤顏色，並把這種顏色用在頁面其他導航元素上，讓它們渾然一體

搜索功能，如果有提供搜索功能的網站，要記住一個簡單的公式：一個輸入框、一個按鈕、還有「Search」（搜索）兩個字，不要弄的太複雜。比如把「搜索」換成「查找」、「快速查找」、「快速搜索」、「關鍵字搜索」都會讓用戶產生思考。如果必須為搜索框提供選項（縮小搜索範圍）一定要三思，謹慎提供選項，以便以何種方式提供最為合理，還有就是要保證這些選項的確有用，否則會挫傷用戶心理。


值得注意的是，很多網站到了二級頁面以下，導航便會變了支離破碎，隨意發揮。這個問題非常普遍，以至於很難找到良好的三級導航的例子。事實上，用戶在底層頁面上花的時間通常和花在頂層頁面上的時間相同。除非我們一開始就自頂向下進行導航設計，否則以後很難添加，也很難保持一致性。這就意味著我們在討論主頁的顏色方案之前，擁有顯示網站所有潛在級別的導航的DEMO設計非常重要。要做到這點，必須設計師和相關策劃人員緊密結合，設計師必須提前知道整個站的概貌和細節內容。


有一點，設計師常常忽略，就是記得為每個頁面加個名稱。好像每個拐角處有一個路牌一樣，隨時讓駕駛者知道在哪裡，無需思考。頁面的名稱應該出現在涵蓋該頁內容的位置，要引人注目，在大多數情況下，它應該是該頁面最大的文字。


總之，一個擁有良好導航系統的網站，一眼就能告訴用戶這些信息：

• 這是什麼網站？（網站LOGO）
• 我在哪個網頁上？（網頁名稱）
• 這個站主要欄目有哪些？（導航欄目清單）
• 在這個層次上我有哪些選擇？（頁面導航）
• 我在導航系統的什麼位置？（頁面裡的「你在這裡」的指示符號）
• 我怎麼搜索？

首先要承認，主頁不由我們控制。因為每個人都有個一個看法，如果要使每個人都滿意，那麼就算最優秀的主頁設計也無法達到。因此設計主頁時不可避免地要做一些折衷。但有一件事情不要忘記——傳達整體形象，即一眼可以讓人感受到這個站是幹什麼的。越快越好，越清楚越好。


所以當瀏覽者進入主頁時，我們好不費力（幾秒鐘讓人瞭解）地告訴他四個問題：

• 這是什麼網站？
• 網站上有些什麼？
• 你能在這裡做什麼？
• 為什麼你在這裡，而不是在其別地方？

那麼如何傳達這些信息呢：

1. 口號，即靠近網站LOGO的地方。一條精煉、個性、生動的口號可以讓人立即聯想網站的內容。但也有例外，如果某個公司的品牌已達到家喻戶曉的地步，可以省略口號。
2. 歡迎廣告，即對網站的簡要描述，在主頁首要的位置顯示，不需要滾動屏幕就能看到。
3. 應從哪裡開始？
   當進入一個新站後，瀏覽者快速掃瞄主頁之後，應該明白無誤地知道：
   • 如果想搜索，可以從這裡開始。
   • 如果想掃瞄，可以從這裡開始。
   • 如果想掃瞄本站最精彩的內容，可以從這裡開始。

在設計首頁時，注意幾個問題：

• 主頁的導航可以與下級的導航有點不同，但必須要有內容和視覺上的一致。
• 可以不用下拉框就不用，因為那是隱藏的信息。

對設計爭論不休，似乎是個永久而又十分令人痛苦的事情。解決這個問題，很多時候，是上司或者老闆說了算，「老闆說咋樣就咋樣」。


其實可以對網站進行「可用性測試」，除此之外，沒有更好的辦法。爭辯只會浪費時間和團隊的精力，而通過測試將討論對錯轉移到什麼有效、什麼無效上，更容易緩和爭論，打破僵局。而且測試會讓我們看到用戶的動力、理解、反映的不同，從而讓我們不會再堅持認為用戶的想法和我們的想法一樣。


如果想建立一個優秀的網站，一定要測試，測試一個用戶比不做測試好一倍，早點測試一位用戶好過最後測試50位用戶！這點我們做的不多，國內也似乎不重視這點。網絡公司一般對程序流程的測試要比對界面體驗的測試看的重要的多。


那麼如何測試？

1. 在項目的每個進程中都可以測試，不必要等項目結束。項目最初的時候，必須有人（項目負責人或設計師，或多人討論，設計師表現出來）使用團隊的集體技巧、經驗、創造力和判斷力來創建一些版本（哪怕是一個很粗糙的版本），然後仔細觀察人門對它的看法和使用方法。
2. 每輪測試的理想用戶數量是三個，最多四個。前三個用戶可能會遇到幾乎所有最明顯的問題，而且更重要的是要多做幾輪測試，及時修正問題。這裡說明的是，測試用戶幾乎是任何懂得上網的人都可以，並不一定要與網站的目標人群想符合。
3. 測試設備，只需要一間辦公室會會議室、兩把椅子、一台電腦、一台攝像機（可以屏幕錄製軟件代替）就可以了。我們可以把攝像機的信號傳到附近的一個辦公室（甚至一個小地方）裡，以便開發團對的每個人都能進行觀察而不會干擾測試用戶。
4. 任何人都可以發起測試。任何人都可以觀察測試。
5. 測試的項目：
   「理解」測試。就是讓測試用戶看到網站，然後看他們是否理解這個網站，理解網站的目標、價值主張、組織方式、運行方式等。
   關鍵任務測試。讓用戶完成一些任務，然後觀察他們是怎麼做的。
   
   
   還有種最為簡潔的「測試」方式，就是做好了一個頁面，就立即給別人看，看他們是否理解，當然這種我們都做到了，呵呵！

如何處理測試出現的問題？

1. 給問題分類。回顧大家看到的問題，決定那些需要修正。
   測試中可能出現的幾個問題：
   用戶不清楚概念。他們看著網站和頁面，要麼不知道網站說什麼，要麼理解有誤。
   他們找不到自己要的字眼。這就意味我們組織的內容和分類不符合用戶的習慣，或者沒有他們期望的名字出現。
   內容太多了。有時候，他們要找的內容就在上面，但是他們找不到。這就需要減少頁面干擾，把他們需要看到的內容設置醒目，讓它們從可視層級中突出。
2. 解決問題。通過測試，站在用戶角度看自己的作品，這樣的體驗常常能為問題提供全新解決方案，或者可以讓我們有一種新的眼光看原來的問題。團隊不必對完美的解決方案達成一致，只要確認下一步做什麼就可以了。
   
   
   值得申明的是，成功的網頁需要巧妙的平衡，一個微小的變化都可能帶來不小的影響。有時候，真正的挑戰不是我們如何修改我們發現的問題，而是修改這些問題後，同時不破壞已經正常運行的部分。特別是，當把某部分調整得突出的時候，是不是把其他內容重要性降低了。

• 讓用戶在我們網站是做什麼的，最大限度明白簡易
• 告訴用戶想要知道的
• 盡量減少步驟
• 花些心思
• 知道用戶有哪些問題，並給予解答
• 為用戶提供協助
• 容易從錯誤中恢復
• 如有不確定，要記得向用戶道歉