以訪客至上的交互設計（四）

閱讀過Steve Krug 所著的《Don't make me think》-訪客至上的的網頁設計祕笈，從中學到了不少交互設計方面的知識，在這裏和你們分享。

以前寫過一章，「咱們是如何使用Web」的，今天咱們來講一下廣告牌/banner設計的要點。

上次講了第一個：在每一個頁面「創建清楚的視覺層次」和「儘可能利用習慣用法」

此次繼續：把頁面劃分紅明肯定義區域，明顯標示能夠點擊的地方，下降視覺噪點。

 

廣告牌設計101法則

未掃描設計，不爲閱讀設計

 

若是用戶們都是一覽而過，那麼，你須要注意如下5個重要方面，來保證他們儘量地看到了，並理解了你的網站：

l  在每一個頁面創建清楚地視覺層次

l  儘可能利用習慣用法

l  把頁面劃分紅明肯定義的區域

l  明顯標識能夠點擊的地方

l  最大限度的下降干擾

 

 

 

把頁面劃分紅明肯定義的區域

 

理想狀況下，用戶應該能在任何設計良好的網頁上玩Dick Clark的25000美圓金字塔遊戲（給訂「水管工人用品」的類型，遊戲一方將提供「扳手、切管機、防脫落褲子…」來讓對方猜出這個類別。）在網頁上上四處掃視以後，他們應該能指着頁面上的不一樣區域說出：「這是我在這個網站能進行的活動」，「這是到今日頭條的連接」，「這是這個公司銷售的產品」，「他們正在向我推銷的東西」，「到網站其餘部分的導航」。

                       

把頁面劃分紅明肯定義的區域很重要，由於這個可讓用戶很快的決定關注頁面的哪些區域，或者放心的跳過哪些區域。對網頁掃描所進行的幾項初始眼動研究代表，用戶很快就會肯定頁面哪些部分包含有用信息，而後對其餘部分看都不看——就像他們未曾來過同樣。

 

明顯標識能夠點擊的地方

由於人們在網絡上所作的大多數事情就是找到下一個地方點擊，那麼明確的標識哪些地方能夠點擊，哪些地方不能點擊，這很重要。

 

例如，在議員Orrin Hatch 2000年落選總統選舉時的主頁上（Orrin Hatch 先生在可用性歷史上至少貢獻了一個腳註，由於他是（據我所知）第一個讓網站可用性成爲影響選舉問題的總統候選人。在2000年大選的第一次共和黨候選人電視辯論上，他對 喬治W.布什 說：「我得說，州長先生，和你的網站相比，在個人網站上很容易就能找到全部的內容，{輕笑}，你當網站至關難用，對用戶不友好」（他的網站確實更容易使用））的確呈現了不少內容，可是什麼地方是能夠點擊的，仍是全都不能點擊讓人並不清楚。該頁面上有18個連接，只有兩個經過其外觀能夠明確知道可以點擊：一個是標有「Click here to CONTRIBUTE！」的大按鈕，另外一個是帶下劃線的文字連接「FULL STORY」。

 

其餘鏈接都是彩色的文字。但問題是，這個頁面的全部文字都是彩色的，因此沒法一眼看出哪些是連接。

 

這並非很嚴重的問題。我相信，用戶肯定點擊哪些並不會花很長時間，但若是你迫使用戶去思考某些經過下意識就能夠知道的東西，例如什麼地方能夠點擊，那麼你徹底是在浪費每一個用戶對新站點有限的耐心和好感。

 

www.orrinhatch.com

（下圖爲2000年選舉時的網頁）

 

 

（下圖爲如今的網頁）

 

 

 

另外一個反面例子就是drkoop.com（C.Everett Koop 的健康站點）上的搜索框。

 

每當看到它的時候，隊會讓我思考，由於執行搜索的按鈕看起來實在不像按鈕——儘管它提供了兩個很好的視覺暗示：包含「SEARTH」(搜索)字樣，這是對於搜索按鈕來講極其完美的兩個用詞之一（另外一個是「Go」，可是隻有在你已經將「搜索」用在輸入框標籤上的狀況下。），並且他是搜索輸入框旁惟一的目標。

 

他甚至還使用了一個小小的三角箭頭，這是Web習慣用法「點擊這裏」的指示器之一，可是箭頭所指的地方在文字以外，彷佛表示它是指向一個別的東西，而習慣用法應該是指向可點擊的文本。

 

若是把箭頭移到左邊也許能除去我腦殼中的問號了。

 

 

下降視覺噪聲

讓頁面不易理解的一個最大的緣由是視覺噪聲，實際上有兩類視覺噪聲。

 

1. 眼花繚亂。一些網站頁面給個人感受就像在 PCH（Pupblisher’s Clearing House）的來信中當心穿行，生怕不當心粘錯了表格訂閱雜誌同樣。（PCH 一年一度給不少人發送訂閱普通雜誌的信件，在這些信件裏也有供填寫並參加抽獎的位置，但要看過搜有的雜誌才能找到中獎規則，不當心就會填錯，誤定了雜誌。）

若是頁面上全部的內容都在嚷嚷着但願獲得個人注意，那麼效果可能拔苗助長：滿眼都是促銷信息！滿眼都是驚歎號和搶眼的顏色！一大堆大喊大叫正在進行。

 

1. 背景噪聲。有些頁面就像是在開雞尾酒會同樣。雖然沒有一個地方會形成過度的干擾，可是這些很小的噪聲太多也會讓人以爲厭煩。

 

例如，MSNBC的菜單有效而聰明的把用戶快速導航到站內的新聞故事處，可是這些菜單項之間的建個線帶來了不少噪聲。把這些線變成灰色會讓這些菜單更容易掃描。

 

 

 

下圖是對比：

 

 

用戶們對複雜性和干擾的容忍度不同，一些人不在意眼花繚亂的頁面和背景噪聲，但不少人在意。當你設計頁面的時候，這樣作多是一個好方法：先假定全部內容都是視覺噪聲，除非獲得證實它們並非視覺噪聲。