現在網頁設計師除了把頁面做的漂亮以外,越來越註重“用戶體驗”,就是要做“別讓用戶思考”的網頁,使網站真正做到“可用性”。望結合幾年的工作經驗,粗談這方面的壹些問題,和大家共勉!
壹、人們如何瀏覽網頁
首先本書說明了上網的人是如何瀏覽網頁的,這似乎跟我們想象有很大的差距,因為我們覺得“用戶會盯著每個網頁,仔細閱讀我們精心制作的文字,領會我們頁面的組織方式”,事實上大部分時間用戶看網頁就象“高速公路看廣告牌壹樣”,沒時間仔細閱讀,當然也不會用心思考。因而,我們必須為“掃描”而設計。做到這點須註意以下幾點:
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、解決問題。通過測試,站在用戶角度看自己的作品,這樣的體驗常常能為問題提供全新解決方案,或者可以讓我們有壹種新的眼光看原來的問題。團隊不必對完美的解決方案達成壹致,只要確認下壹步做什麽就可以了。
值得申明的是,成功的網頁需要巧妙的平衡,壹個微小的變化都可能帶來不小的影響。有時候,真正的挑戰不是我們如何修改我們發現的問題,而是修改這些問題後,同時不破壞已經正常運行的部分。特別是,當把某部分調整得突出的時候,是不是把其他內容重要性降低了。
總之,我們要做壹個“好”網頁:
——讓用戶在我們網站是做什麽的,最大限度明白簡易
——告訴用戶想要知道的
——盡量減少步驟
——花些心思
——知道用戶有哪些問題,並給予解答
——為用戶提供協助
——容易從錯誤中恢復
——如有不確定,要記得向用戶道歉