閱讀過Steve Krug 所著的《Don't make me think》-訪客至上的的網頁設計祕笈,從中學到了不少交互設計方面的知識,在這裏和你們分享。web
以前寫過一章,「咱們是如何使用Web」的,今天咱們來講一下廣告牌/banner設計的要點。網絡
上次講了第一個:在每一個頁面「創建清楚的視覺層次」和「儘可能利用習慣用法」oop
此次繼續:把頁面劃分紅明肯定義區域,明顯標示能夠點擊的地方,下降視覺噪點。網站
廣告牌設計101法則spa
未掃描設計,不爲閱讀設計設計
若是用戶們都是一覽而過,那麼,你須要注意如下5個重要方面,來保證他們儘量地看到了,並理解了你的網站:3d
l 在每一個頁面創建清楚地視覺層次blog
l 儘可能利用習慣用法遊戲
l 把頁面劃分紅明肯定義的區域get
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習慣用法「點擊這裏」的指示器之一,可是箭頭所指的地方在文字以外,彷佛表示它是指向一個別的東西,而習慣用法應該是指向可點擊的文本。
若是把箭頭移到左邊也許能除去我腦殼中的問號了。
下降視覺噪聲
讓頁面不易理解的一個最大的緣由是視覺噪聲,實際上有兩類視覺噪聲。
若是頁面上全部的內容都在嚷嚷着但願獲得個人注意,那麼效果可能拔苗助長:滿眼都是促銷信息!滿眼都是驚歎號和搶眼的顏色!一大堆大喊大叫正在進行。
例如,MSNBC的菜單有效而聰明的把用戶快速導航到站內的新聞故事處,可是這些菜單項之間的建個線帶來了不少噪聲。把這些線變成灰色會讓這些菜單更容易掃描。
下圖是對比:
用戶們對複雜性和干擾的容忍度不同,一些人不在意眼花繚亂的頁面和背景噪聲,但不少人在意。當你設計頁面的時候,這樣作多是一個好方法:先假定全部內容都是視覺噪聲,除非獲得證實它們並非視覺噪聲。