本文主要探討那些容易被忽略的用戶體驗基本原則,並提供實例和可用性分析,關於視覺設計、信息構建及可用性分析等方面提供實用的建議。

打造非凡的交互體驗,設計一個可用性強的網站,對任何一個設計者來說都不失為一個雄心勃勃的目標。為了使我們的網站更加接近用戶的預期,這是一個緩慢的過程,需要技巧和一系列細節性工作及一點點運氣,如何讓用戶方便、快速地找到自己需要的服務,並用最簡單的操作方法來完成操作,需要更加註重細節,細節就是您的用戶會反覆留意的東西,比如友好的界面、清晰的導航、完善的幫助系統、合理的信息架構、出色的視覺設計、優良的網站性能等。以下逐一討論那些容易被忽略的用戶體驗基本原則,並提供實例和可用性分析。

簡介

相互競爭的網站通常提供相似的功能,我們經常能感受到視頻網站同質化,團購網站同質化,社交網站同質化,門戶網站同質化,它們之間信息內容重複、服務項目雷同,但只有提供了最佳用戶體驗的那一個才會勝出。在網站設計、開發及發布過程中,通常可用性專家會幫助評估網站的易用性,收集內部反饋,測試團隊進行可用性測試。最為糟糕的是網站上線階段發現界面錯誤,需要花高昂的代價修復網站界面錯誤。因此分階段設計、及早測試、經常測試是極其有必要的。 雖說成功是 99%的汗水加 1%的運氣,但有時那 1%的運氣往往超過了 99%的汗水。網站設計最終成功與否亦是如此,設計師需要做的是注重用戶領域所包含的很多相關原則,逐步實現、測試並完善設計,達到整體目標,勤耕細作,接下來的事交給運氣。

用戶需要什麼,想要什麼?

未經解構的用戶需求在某種程度上來講是“偽需求”,不能真實體現需求,往往是表面上的需求,洞察用戶表象背後的真實需求是網站設計的第一步。有經驗的網站設計師往往在用戶的顯性需求描述基礎上,探究他們的真實問題是什麼,並打磨需求。亨利·福特曾說過,“如果我最初問消費者他們想要什麼,他們應該是會告訴我要一匹更快的馬!”,類似地,喬布斯也說過“人們不知道想要什麼,直到您把它擺在他們面前”。您需要不斷地去觀察和理解用戶的行為,用戶需要一匹更快的馬,看似顯性需求,但又恰恰正是用戶的真實需求,從這角度上講,並無偽需求一說,這取決於我們如何去理解,我們必需去理解用戶如何思考! 在《敏捷估計和規劃》一書中介紹了 KANO 模型,我們可以參考確定需求優先級,它定義了三個層次的顧客需求:基本型需求、期望型需求和興奮型需求。此文不詳述,可參考 WIKI:http://en.wikipedia.org/wiki/Kano_model

用戶如何思考?

用戶上網的習慣和逛超市基本類似,大量網頁他們幾乎不看一眼,而是掃視頁面尋找感興趣的內容。但用戶願意為高質量的內容而忍受廣告和糟糕的設計。網站設計者不應對用戶的耐心抱有較高的期待,多數用戶都掃視頁面而非閱讀,靠自己的直覺摸索,如果頁面沒有達到用戶預期,使得學習成本負荷越高、直觀性越差,用戶就會很輕易的離開,尋找替代的頁面。 一致性的視覺設計 當一個網站的視覺設計整潔連貫,高度一致時,用戶很容易不費腦力去理解如何使用網站,不一致的視覺設計,有可能會讓人感覺到欺騙,當界面設計得過於跳躍和創新,用戶可能在第一眼難以理解,不得不重新學習如何使用那些他們本已經熟悉的東西。視覺一致性可以提高產品所塑造的品牌形象,一定程度上減少用戶的認知成本。 達到“一致”的界面,並非指界面元素需要“統一”,視覺上可以有很多不同的表現手段,世界上沒有兩個相同的雞蛋,為了一致,網站信息架構很重要。具體體現在形狀、色彩、界面質感、圖標、畫風、文字描述、提示信息呈現方式等,使得網站在不同的欄目下,設計一致,而不是不同的欄目下頁面視覺差異大,一眼看上去,不象一個爹媽生出來的。

圖 1.LouisVuitton 同一個系列的包,氣質一致

圖 2.騰訊產品,導航風格一致

左對齊?右對齊?兩端對齊? 兩端對齊(justification)最大的問題是:當行的原始長度差異過大時,行與行之間有明顯的疏密變化。而且對英文來說,如果沒有 hyphenation,往往也很難讓行間長度差異適合兩端對齊。越來越多的瀏覽器開始實現適用於中文的兩端對齊算法,在可以啟用 CSS hyphenation(斷字)的瀏覽器,我們可以考慮使用 text-align: justify; 來達到漂亮的兩端對齊效果,但如何才是理想效果?需要綜合考慮瀏覽器兼容性,良好的斷字是美觀文本的必要條件,但正確的斷字方法是按照單詞的音節將其斷開,這樣使得用戶在閱讀時候不必讀到下一行才能拼出完整單詞,這個問題在單行文本特別長,行間距較小的時候顯得尤其重要。 排版上一定要盡量兩端對齊的原則不一定適用於現代網站,左端對齊(flush left)、右端參差(ragged right)的排版越來越常見,人們的審美觀也在發生變化。如今的互聯網上,左對齊也是文本的默認設定。純英文文本行的長度錯落有致,強制右側對齊不一定是明智之選。設計師可以綜合利用hyphens; letter-spacing, text-justify等 CSS 技巧達到美觀效果。

圖 3.利用 hyphens 實現兩端對齊

固定元素保持慣例

設計師容易在設計中讓自己的創意佔據上風,期望界面脫離傳統,具有創意無可厚非,但人們已經根深蒂固的元素,保持慣例會更為穩妥。比如

  • 網站標題(header)往往會在網站左上方显示。
  • LOGO 通常可以點擊,以回到首頁
  • 退出登錄一般會在網站右上方显示
  • 版權信息總是位於最下方 footer
  • 網站搜索框經常會出現在網站右上方或中部上方
  • 切換網站語言版本的功能經常出現在網站 header 右端並配有國旗显示更直觀
  • 搜索框必需是一個框
  • 註冊通常在頁面的右上角

讓搜索更容易

為了精確搜索或在特定範圍內搜索,網站往往提供各種不同的搜索參數。但多數用戶更為青睞不需要思考就知道該如何搜索的界面。針對搜索功能最常見的設計就是一個相對顯得寬大的輸入框,加上“搜索”按鈕組成,以提供最為方便的快捷搜索。 這裏需要注重的一個原則是,雖然我們有時必需提供高級搜索功能,但較好的用戶體驗是,即使用戶沒有提供額外信息的情況下,搜索功能也應該是正常能夠工作的。比如:

圖 4.當用戶未選擇任意一個 within 下拉列表內容時,搜索照常工作

我們提倡僅在必要時使用下拉菜單,雖然下拉菜單占較少的屏幕空間,但其缺點也是明顯的,例如選項可見性較低,下拉菜單所包含的內容項太多時將造成困擾。然而根據 Jacob Nielsen 對下拉菜單的研究,他認為下拉菜單並不一定要很小,“巨型”導航下拉菜單效果也不錯。近年來,mega menu 成為在網頁設計中成為一種趨勢,尤其是在电子商務網站,如果運用得當,它確實能有效幫助到用戶快速獲取信息,大的二維下拉麵板可以對導航選項進行清晰,組織良好的導航分組,將用戶從不得不進行的滾動中解脫出來。運用是否得當成了設計的關鍵。 巨型菜單的優勢:

  • 所有選項一目瞭然
  • 可通過分隔線、富文本、圖標、圖片修飾等視覺上手段更加清晰地組織菜單結構

圖 5.利用圖標,分隔線,文字加粗等手段使 mega menu 更易讀

巨型菜單的劣勢:

  • 未展開前的 mega menu 不易被用戶發覺
  • 大量的菜單選項佔據了屏幕空間,遮住了一部分內容
  • 縮小瀏覽器尺寸或在小屏幕手持設備上不易看到全部菜單內容
  • Load 巨型菜單速度有影響
  • Accessibility 方面,fly-out 菜單很容易導致可訪問性問題,代碼書寫需要更小心謹慎

圖 6.縮小窗口后 mega menu 显示不完整,滾動條出現

圖 7.窗口高度縮小后 mega menu 显示不完整

需要注意的是:

  • 不能無節制地堆放過量菜單選項,降低友好度
  • 激活 Mega menu 較好的作法是加一個倒三角小圖標,暗示用戶鼠標經過可展開更多內容。因為 Mega menu 本身不象一個按鈕能更直觀能告訴用戶此處可點擊
  • 避免菜單太難使用,鼠標指針輕微失去焦點,就得從頭開始。
  • 避免使用多個下拉級別,多個層級的導航必須進行水平滾動,不夠友好
  • 避免在 Mega menu 內加“搜索”功能
  • 避免在 Mega menu 區域內右上角加“關閉”按鈕,這本身並不是必需的,關閉菜單較好的設計方案是將鼠標移開一定的距離才能關閉它,Jacob Nielsen 的另一個建議是鼠標移開 0.5 秒后,菜單在 0.1 秒內消失

單選框、複選框文字可點擊

單選框、複選框的設計疏忽通常是未設置 id 和 label 的 for 屬性,從易用性和 accessibility 角度而言,for 屬性都是不能缺少的,for 屬性可以關聯控件元素的 id,使文本也可點擊選中,擴大了選中焦點區域。HTML5,可以使用 for 屬性,或是把表單控件放在 label 元素裏面兩種方法來實現該關聯。但使用 for 和 id 找到控件元素的方法要比將控件放在 label 標籤內的健壯性好很多。使用 aria-labelledby 屬性跨瀏覽器和 accessibility 的健壯性要比使用標準的控件元素放入 label 標籤下的方法強。所以建議還是第一種方法。

圖 8.不妥的設計,使得用戶較難判斷單選框對應於哪一個選項

圖 9.點擊文字即可選擇該複選框,增大了可點擊區域

鏈接

永遠不要讓用戶去猜測一段文本是否可點擊。最為穩妥的作法是顏色和下劃線的組合使用,使得超鏈接很容易辨識。同時不能犯的錯誤是,通過顏色和下劃線設計非鏈接文本,這樣會給用戶帶來困惑。當我們無法即用顏色,又用下劃線標識所有的鏈接時,我們也要盡量在固定的區域內,使用一樣的鏈接風格,比如不能有些鏈接有下劃線,有些鏈接沒有,有些鏈接是不同的顏色等。 其次要注意鏈接文本要清晰,準確描述它所指向的目的地,避免使用含糊的描述。 比如工商銀行的首頁上幾乎每個字都是鏈接,這種情況下不可能採用全部鏈接帶有下劃線的作法。

圖 10.“企業網上銀行登錄”下的文本都是鏈接,好的作法是紅線所指處的鏈接與“用戶登錄”區域塊鏈接表現一致,用黑色

圖 11.非鏈接用了灰色文本,[詳細]是可點擊鏈接,設置成與整站統一鏈接顏色黑色更為合適

圖 12.矩形欄目塊狀內,“客戶服務”是鏈接可點,而“貴賓尊享”是非鏈接,合適的作法是給“客戶服務”同時加下劃線,以示區分,減少用戶的困惑

註冊表單盡量簡潔

沒有人喜歡填表單,設計高效的網頁表單的原則是,盡量使用較少量強制性的輸入框,避免增加用戶負擔。不應在註冊頁面上放置廣告,閃爍圖片等效果分散用戶注意力。

圖 13.太多分散用戶注意力的內容,對用戶專心完成註冊沒有幫助

文本排版應優雅

文本排版在網頁設計中是相當重要的一部分。CSS3 的@font-face 使得頁面可以嵌用自定義字體,頁面文字显示將更豐富多彩,表現力更強。實現優雅的文本排版,我們需要注意以下:

  • 文本大小:太小的文字使得長篇文章閱讀起來很困難
  • 行距:保持適合的行間距增加文字可讀性
  • 留白:文字的周圍提供充足的空白,使用戶不會感到太壓抑
  • Line-height 屬性值不應該用 px 作為單位

圖 14.line-height 設置成絕對值(px)時,當字體增大時有可能出現重疊的問題

清晰的導航

通常有以下幾種導航的作法,在設計中我們可以綜合考慮使用。

全局導航:類似於網站地圖,突出整體網站結構,大而全 本地導航:針對某個欄目內的導航 上下文導航:針對具體的頁面內的導航 麵包屑導航:二級導航模式,用來定位用戶當前所處的位置

圖 15.Amazon 採取混合導航,樹狀導航,欄目內搜索,全局導航及麵包屑

不要忘記保護性設計

我們應該總是設想,用戶不按常理出牌,不會按您的預期使用您的網站,或是誤用。所以我們一定要有保護性設計,比如,刪除一個文檔如果沒有確認提示,又沒有提供恢復功能,這將給用戶造成難以接受的後果;再如,如果用戶在輸入註冊信息時關閉瀏覽器,在沒有詢問之前不要拋棄他們的數據;或是,當用戶請求的一個頁面不存在時,需提供一個有用的 404 頁面。

圖 16.盡量讓 404 頁面信息更有幫助,同時 404 也可以設計得很獨特,展現網站個性

及早測試

“早期測試一個用戶要比後期測試 50 個用戶好”。可用性測試總會產生有用的結果。基本的檢查點可以包括以下:

  • 死鏈接
  • 校對文本
  • Javascript 不生效時,網站展示效果仍要優雅
  • 404 頁面是否缺失
  • 跨瀏覽器兼容性檢查
  • 導航是否清晰
  • 文字表述是否親和

總結

界面設計的原則很多來自於經驗和啟發,並在不斷的探索討論過程中,建立與用戶之間的信任感,不斷進行易用性測試。雖然我們不可能做一個普適的設計,比如移動設備、手機之間的差異與電腦就大很多,低端機、智能機、觸摸屏手機各有不同,但基本總結通用的易用性原則是:

1. 盡量簡潔連貫;

2. 提供信息反饋;

3. 允許簡單的撤銷操作;

4. 降低短期記憶載荷和學習成本;

5. 及時測試;

6. 信息架構合理。

 

作者:張 群, 軟件工程師, IBM China