以訪客至上的交互設計(四)

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

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

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

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

 

廣告牌設計101法則spa

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

 

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

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

l  儘可能利用習慣用法遊戲

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

明顯標識能夠點擊的地方

最大限度的下降干擾

 

 

 

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

 

理想狀況下,用戶應該能在任何設計良好的網頁上玩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的菜單有效而聰明的把用戶快速導航到站內的新聞故事處,可是這些菜單項之間的建個線帶來了不少噪聲。把這些線變成灰色會讓這些菜單更容易掃描。

 

 

 

下圖是對比:

 

 

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

相關文章
相關標籤/搜索