現代網站的可用性原則

分階段設計、及早測試和經常測試可以提高網站的可用性。
現在的網站同質化太嚴重,只有提供最佳的用戶體驗才會勝出。

1.用戶瀏覽網站的習慣:

1.以訪客的目光瀏覽每個新頁面,掃視某些文本,然后點擊第一下讓他們感興趣或是大體上他們正在尋找的東西類似的鏈接。實際上,有大量網頁他們幾乎不看一眼。
2.當一個令人振奮備選項被發現時,用戶就會點擊。如果打開的新頁面沒有達到他們的預期,他們就會點擊“后退”按鈕,并繼續搜索。

  • 用戶重視質量和可靠性。如果他們看到高質量的內容,他們通常愿意忍受廣告和糟糕的設計。
  • 用戶習慣用掃視來瀏覽網站。他們通常會尋找一些幫助略過頁面其他內容的固定點或錨點來分析網頁。
  • 用戶并非總會做出最佳選擇。他們總是探尋如何快速瀏覽想要的信息,不會以一種直線的方式閱讀網站,相反,會選擇那些“既充分又令人滿意的”信息。
  • 用戶遵循他們自己的自覺。他們會靠自己的摸索而不是設計者提供的信息解決問題。
  • 用戶希望能夠進行控制。比如用戶不希望看到出乎意料的彈窗;希望使用“后退”按鈕,讓他們返回剛才瀏覽的網頁。

2.使用整體連貫的視覺設計

如果一個界面設計良好,用戶將花較少時間去學習如何使用網站。就可以有更多時間去實際使用它。
雖然頁面創意很重要,但太過于創新,導致用戶第一眼就無法理解,讓他們不得不重新學習那些他們本已熟悉的東西。引用一些通用的慣例,用戶就不需要費太大腦力去學習如何使用。

3.固定元素屬于固定位置

人們已經習慣了很多事物存在的方式,比如報紙,標題和日期出現在頂部,重要標題和作者姓名出現在報道的附近。類似的,網頁也一樣,固定元素有固定的擺放位置。

當人們訪問一個網站時,憑直覺就能理解網站的慣例,知道元素該如何操作,可以大大提高用戶的效率。達到用戶的某種預期,對網站設計來說是非常重要的,可以使用戶理解網站的工作原理。

網站設計的一般慣例:

  • 【返回主頁】一般都在左上方顯示,不管是什么頁面。
  • 【宣傳語】和【二級標題】緊靠在【網站標題】的下面,宣傳頁可以會迅速地傳達網站的用途。
  • 【搜索框】通常會出現在網站的右上方或中上方。
  • ……

4.搜索是簡單的

以前的搜索,受限于技術的原因,為了得到一個滿意的結果,需要設置一堆搜索參數。
現在的搜索,如谷歌、百度,只需用戶輸入一些內容,點擊搜索按鈕,網站就能決策出用戶想要的結果。

一個輸入框+一個搜索按鈕,用戶不需要思考就知道該如何操作界面。

input輸入框外層是一個更大的div,讓用戶在掃視網頁的時候第一眼就認得出這個元素。
不顯示高級搜索選項會讓頁面更友好,因為高級搜索會讓用戶感到困惑,研究表明,大多數用戶不知道該如何使用高級搜索。

5.鏈接要像鏈接

  • 不要讓用戶猜測一個元素是否可點擊。
  • 顏色和下劃線是鏈接最易識別的形式。
  • 可點擊的元素應該突出。
  • 鏈接可以有不同狀態,懸停hover等。

6.使注冊表單盡量簡潔

  • 通常注冊表單單獨成一個頁面,防止分散用戶填寫表單的注意力。
  • 輸入標簽放在左側時,通常右對齊。
  • 垂直排列文本框要比水平排列好一些。
  • 注冊表單不包含分散注意力的內容,通常不包含懸浮、動態和聚焦等效果。
  • 提示放在輸入框的下邊或右側。

7.“返回首頁”鏈接

頁面很長的網站,設置【返回頂部】按鈕,可省去鼠標滾動的操作,節省時間。

8.鏈接應該在同一窗口打開

從可用性角度考慮,在新窗口打開鏈接會破壞UI設計的一條基本原則:用戶應該始終能對頁面進行控制。用戶需要界面具有連貫性,用戶需要知道他們的交互活動不會被打斷。用戶希望系統有可預見性,知道系統會做出什么反應,來滿足用戶的控制。

9.需要注意的可用性檢查點

1.不要改變用戶窗口的大小。認為自己比用戶更清楚軟件環境該如何配置是非常不合情理的。
2.不要使字體太小。防止閱讀困難。留白來使每行字符在50-85個之間。
3.鏈接文本要清晰。鏈接文字應該用來描述所指向的目的地,避免含糊的描述。
4.去除死鏈接。不要把用戶引入死路。
5.校對。確保文字在顯示時不會出現問題。
6.檢查功能。測試每個功能是否達到預期的結果。
7.使表單盡可能簡潔。

  • 選擇合適的表單元素(選擇按鈕、復選框、輸入區域、文本區域)
  • 提供充足的空白和邊距以便輸入內容
  • 移除不必要的區域
  • 為每個輸入區域提供描述性標簽
  • 有必要時文本框可以添加提示信息
  • 不強迫用戶使用嚴格的輸入格式
  • 提供有用的、信息補充的錯誤提示信息

8.Javascript不起作用時展示效果也要優雅。通過測試,確保這種情況仍然能完成服務器端的有效檢驗。
9.不要忘記保護性設計。如404頁面,同過一個有用的404頁面把用戶引導回來,可以導向主頁,也可以向用戶推薦感興趣的頁面。
10.提高網站性能。減少HTTP請求、盡可能使用CSS sprite、優化網站圖片、壓縮Javascript和CSS文件,這樣網頁可以載入更快,占用更少的服務器資源。
11.提供聯系方式。提供聯系方式可以增加用戶對網站的信任。

10.重要的易用性法則和原則

7 ± 2原則
人腦處理信息的能力是有限的,通過把信息分成塊和單元來處理復雜問題。研究發現,人短期記憶每次能處理5-9件事情,所以經常被作為把導航菜單元素限制在7個以內的依據。

2秒鐘法則
這是個松散的原則,用戶在使用系統時等待反應的時間不應該超過2秒。

3次點擊法則
如果用戶3次點擊后仍然沒有找到他們想要的信息,他們就會離開網站。突出了清晰的導航、符合邏輯的結構和易于理解的網站層級的重要性。大多數情況,與點擊次數是無關的,如果用戶始終知道自己現在在哪、從哪里來、到哪里去,對系統如何工作有個全面的理解,那即使點擊10次也沒問題。

80/20法則(Pareto定律)
Pareto定律也稱為“少數關鍵定律”或“因素稀疏定律”,表明80%的結果,由20%的原因產生。這是商業中一條經典的經驗法則(80%的銷量來自20%的用戶),對20%的用戶、活動、產品或過程的定位,能為你帶來80%的利潤,使你對它們的注意程度最大化。

界面設計的8個黃金法則

1.努力做到連貫;
2.允許頻繁使用系統的用戶使用快捷方式;
3.提供信息反饋;
4.為關閉這一動作設計對話框;
5.提供簡單的設計處理;
6.允許簡單的撤銷操作;
7.提供控制感,支持內部控制點;
8.降低短期記憶載荷。

Fitt`s定律

提供根據目標的距離和大小,預估除快速移動到目標區需要的時間。在定位目標區時,存在一個速度和精度的平衡,目標越小或距離越遠需要的時間更久。
如鼠標從A點移到B點的表現,即內容越容易點擊到,它的點擊率越高。

到金字塔法則

把摘要放在文章前面的一種寫作方法。這種方式使用了新聞業中著名的“瀑布效應”——新聞作者視圖讓讀者即刻知道他們要報道的主題。
文章以結論開頭,接著是關鍵詞,最后是次要的背景資料等。
網絡用戶需要即時的滿足,到金字塔對于提高用戶體驗非常重要。

11.給用戶一個5萬英尺的視角來看你的程序

用戶第一次訪問網站時,可能會感到無所適從,除了有效的展示信息,還應該仔細考> 慮一些組織內容的方法。

信息架構(Information Architecture,簡稱IA)
信息架構就是對網站的內容進行組織,以達到最佳的信息傳遞效果。

12.心智模式和象征物

心智模式又叫心智模型。所謂心智模式是指深植我們心中關于我們自己、別人、組織及周圍世界每個層面的假設、形象和故事。并深受習慣思維、定勢思維、已有知識的局限。

考慮一下用象征物來展現你的服務。象征物是一種介紹你的產品或服務的捷徑,幾乎不需要解釋,好的象征物已經把你的產品或服務和用戶頭腦中的信息(或心智模型)結合起來。

如購物車是一個很方便的象征物,它可以在你瀏覽網站的時候保存你購物的列表。跟現實中在商場購物的形式一樣。

13.組織網站的內容

人們腦中會有日常生活中事物如何發揮功能的“路徑圖”,如早上聽到鬧鐘后起床、吃早餐、讀報、洗澡、穿衣,如何開車去上班。

  • 把內容分成語義相關聯的組
  • 利用元數據優化網站搜索結果(如一篇博客的元數據包括作者、發布日期、瀏覽次數和評論數等)。允許用戶用元數據對網站的內容進行搜索和排序,這將為他們提供可以操作的內容列表,進一步逼近他們的目標。

如視頻網站的“精選”,“熱搜”視頻分類。

14.提供站點地圖

站點地圖可以是一個頁面或欄目,以直觀的方式展示網站上可以訪問的頁面子集。

15.使用幫助

最直接的向用戶介紹網站的方式。
不過一般用戶會忽略用大塊文本對服務進行描述的使用幫助,可以有其他方式來表現:

  • 白板
    白板提供一種可視化的引導用戶的方法。
    展示一張圖片,它顯示了在包含數據的情況下你的網站看上去是什么樣子。用戶看完之后就知道該怎樣與網站進行交互。
  • 產品介紹和內嵌幫助
    可以考慮把產品介紹融入到界面的各個部分。比如多欄布局,使網站包含這類文檔變得比以往更容易。用戶對某個功能有疑問,他們不需要離開當前頁面就可以獲得答案。

16.建立信任

正面的用戶體驗等同于對網站本身的信任。
如何建立信任?
想一下生活中所有你信任的東西,問自己為什么信任它們。考慮一下可信度、透明度、慷慨程度。
尊重你的用戶,顯示出你對他們的信任和專注的感激之情。

17.不要讓用戶毀掉自己的用戶體驗

用戶會測試你的應用程序的極限:

  • 如果用戶可以刪除內容,請提供一個可恢復的功能。
  • 如果用戶可以再輸入信息的時候關閉瀏覽器,在沒有詢問之前不要拋棄他們的數據。

要考慮用戶不會按照預期的方式使用網站,因此盡量不要使結果無法讓人接受。

18.不要要求太多而給予太少

應該遵循一條原則:不要破壞任何事情。
任何作為用戶瀏覽器一部分的功能,都不能偏離用戶使用網站的經驗。

  • 不要屏蔽用戶的“后退”按鈕。
  • 不要限制用戶為網站加書簽的功能。
  • 不要在非必要的情況下修改用戶已瀏覽和未瀏覽的鏈接的顏色。

19.及早測試、經常測試

所謂的TETO原則應該被應用到每一個設計項目,因為可用性測試經常會為布局的問題和難題提供至關重要的參考。
測試不要太晚、測試不要太少,也不要為錯誤的理由進行測試。測試又有正當的理由,大多數設計決定都是局部的(理解這一點很重要)。你不能準確無誤地回答一個布局是否優于另一個布局,因為你需要從特定的視角進行分析(要考慮需求、股東和預算等因素)。

一些需要記住的要點

  • 根據Steve Krug的觀點,測試一個用戶一定要比一個用戶都不測試好,在早期測試一個用戶要比在后期測試50個用戶好。根據Boehm第一定律,錯誤最常發生在需求階段和設計階段,越晚發現這些錯誤,修改的代價越高。
  • 測試是一個反復的過程,這意味著你設計一些東西,測試它,修正它,然后繼續測試它。你可能會發現一些在第一輪測試時被忽略的問題,因為用戶的注意力已經被其他問題吸引。
  • 可用性測試總是會產生有用的結果。他們既指出了功能上和交互性上的錯誤,也指出了主要的設計瑕疵,它們從以上這兩個方面為你的設計提供了有益的見地。
  • 根據Weinberg定律,一個開發者不適合測試自己寫的代碼。這也適用于設計師。在為一個網站工作了數周之后,你已經再也無法憑借肉眼識別任何問題。你知道一個網站是如何構建的,因此你非常清楚它怎樣工作。你具有獨立測試者和訪客所不具備的背景知識。

底線:如果你想做一個非常棒的網站,你必須進行測試

20.最后需要考慮的事情

  • 雖然創意是個好東西,但是不要讓創意蓋過了設計本身。不要把界面設計的太過新穎,以至于一般的網絡用戶難以意識到該如何使用它。
  • 創建可以預見的網站,設計用戶期望的東西。不用試圖使用未來網站的特色,除非它對完成舊的任務具有明顯的優勢或更加直觀。
  • 用戶會快讀瀏覽網頁,不會停下來看那些設計者花了很多小時精心雕琢的細節。如果你能夠使他們更加容易地從一處跳轉到另一處,或幫助他們找到自己需要的東西,他們會更加欣賞你的工作。記住,很多用戶僅僅希望把使用網站當做日常事務的一部分。
  • 在投入視覺設計之前,花一些時間規劃你的用戶將如何使用網站(界面設計),他們會如何在網站上進行導航(導航設計),以及網站將會如何與他們進行交流(信息設計)。
  • 總是通過路標告訴用戶他們在網站中的位置。知道自己方位的用戶更容易建立目標感。
  • 沿用導航管理。如果用戶不清楚他們能夠去哪里,在進行導航的時候會遇到困難。在設計導航的時候,不要停在第一個層級:為每個網頁都設計全局導航、本地導航和上下文導航。通過讓內容按語義關聯進行分組,來幫助用戶找到他們正在尋找的內容。
  • 總是預想用戶不會按你的預期使用你的網站。設想一下他們會如何誤用你的網站,不要讓誤用造成難以接受的后果(比如,在沒有提供“恢復”選項的情況下刪除一個文檔)。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容