Web可用性設計的247條指導方針

序：Userfocus是英國一家專門從事網站可用性設計的咨詢教育訓練公司。它為我們分享了247條 Web可用性設計的指導方針，并把它們清晰的分為六個大類：首頁可用性設計、任務導向、導航和資訊架構、表單和資料輸入、可信度、寫作和内容品質、頁面布 局和視覺設計、搜尋可用性、幫助回報和容錯。如Userfocus所說，“雖然易用性系統的設計遠不止應用一些簡單的指導方針，但是它們卻可以為擷取穩定 性和好的實踐提供有意義的幫助。”

目錄：

首頁可用性設計（20條評估首頁可用性的方針）

任務導向（44條評估網站對使用者任務支援程度的方針）

導航和資訊架構（29條評估導航和資訊架構的方針）

表單和資料輸入（23條評估表單和資料輸入的方針）

可信度（13條評估可信度的方針）

寫作和内容品質（23條評估寫作和内容品質的方針）

頁面布局和可視設計（38條評估頁面布局和可視設計的方針）

搜尋可用性（20條評估搜尋可用性設計的方針）

幫助、回報和容錯（37條評估幫助、回報和容錯的方針）

首頁可用性設計

首頁元素要清晰的關注使用者的關鍵任務（避免“增加功能傾向（featuritis）”）

如果網站比較大，那麼首頁應包含搜尋輸入框

首頁要十厘清楚的提供産品（内容）分類

在首頁或首頁内一次點選展示有用的内容

資訊展示時應當是簡單的、自然的、符合邏輯順序的

在首頁展示真實網站内容的優秀示例

首頁上的連結以最重要的關鍵詞作為起始（例如：“Sun holidays”而不是“Holidays in the sun”）

在首頁提供一個最近的特色項清單，并提供存檔内容的連結

首頁導航不要過度格式化（修飾），確定使用者不會把它誤認為廣告

在首頁清晰的聲明價值取向（例如一個标志性的口号或歡迎語）

在首頁包含有意義的圖案設計，而非無關的剪貼畫或繪畫作品

導航選項按邏輯性或使用者導向方式排序（把次要的公司資訊放在底部）

首頁标題（title）可以為諸如google等搜尋引擎提供良好可見度

所有公司相關資訊安排在一個顯著區域（例如：“關于我們（About Us）”）

使用者可以了解到價值取向

一看到首頁，第一次通路的人就知道從何處開始

在首頁展示出所有主要的操作選項

首頁擁有一個易記的URL

首頁需經過專業設計，以給使用者良好的第一印象

首頁的設計要能激發使用者探索站點的興趣

首頁就要像一個首頁，不能讓使用者把它與二級頁面混淆

任務導向

網站應避免出現不相幹的、多餘的或讓使用者分心的資訊

避免過多的使用腳本、小應用程式（applets）、視訊音頻檔案、圖案和圖檔

網站應避免不必要的登記

關鍵人物路徑必須是清晰的，無幹擾的（例如：購買、捐獻）

資訊以簡單的、自然的（natural）、符合邏輯順序的方式展示

應盡量縮減每個任務需要的螢幕數量

應減量減少頁面滾動（scrolling）和點選

網站應正确的預期和提示使用者下一步可能的動作

展示圖表時，確定使用者可以看到真實資料（例如在柱狀圖上标明數字注解）

當配置設定給使用者任務時，應充分利用計算機的優勢（例如搜尋輸入的自動完成功能）

使用者可以快速完成普通任務

當必要時，應為目前任務提供資料對比功能（例如：商品比較）

任務順序應當與使用者日常工作順序一緻

網站可以保證使用者的工作比不使用它時更輕松快捷

最重要的或經常使用的主題、特征或功能應放在頁面中央附近的位置，而不是特别靠左邊或右邊

確定使用者不會重複輸入相同的資訊

重要的、頻繁使用的主題或任務應接近網站的“表面”

保持最少的錄入（例如購買過程中），并為使用者提供加速器

任何給定任務路徑應當有一個合理的步驟長度（2-5次點選）

當一個任務有多步時，網站要告訴使用者完成任務需要的所有步驟，并為使用者目前步驟所在的位置提供回報

在每個産品後面緊跟它的價格

可以非常容易的找到網站的隐私政策，尤其是在那些要求填寫個人資訊的頁面。隐私政策應當是簡單的、清晰的

網站使用者不需要記住從一個地方到另一個地方的資訊

隐喻的使用可以被典型使用者輕松了解

資料格式應當遵循文化正常

軟體的内部工作細節不要暴露給使用者

應當迎合使用者那些之前已經養成的那些小的網際網路習慣

網站應當易于使用者浏覽，在執行前可以自己嘗試其它的功能操作

第一次到訪的典型使用者應當可以在不需幫助的情況下完成最常用的功能

當使用者回到網站時，使用者可以記得如何執行主要任務

那些新穎裝置（novel device controls）的功能應當是顯而易見的

在購物車頁面，在頁面的頂部或底部應當清晰的展示”處理結賬”按鈕

重要的操作入口（例如“添加到購物車”）應當非常清晰可見

操作按鈕（例如“送出”）應當由使用者觸發，而非在完成所有選項時系統自動觸發

指令或操作項英以按鈕的形式的展示（而非例如連結）

如果使用者在事務進行中中途退出，使用者在稍後傳回站點時可以繼續他退出之前的工作

當頁面展示大量資訊時，使用者可以排序和過濾資訊

按鈕或圖示上的圖像應當與内容相關

當使用者被系統自動登出時應當提示使用者，并且自動登出的時間間隔要恰當

不必要的功能（例如flash動畫）可以被關閉或跳過（skip）

網站應當是健壯的，并且所有關鍵功能可正常工作（例如不應有javascript頁面異常、CGI報錯或死連結）

網站通過不同程度的說明來支援新手使用者和專家使用者（例如幫助資訊、錯誤資訊）

網站允許使用者重新填寫一些資訊項（例如更改發貨位址、更改賬戶資訊）

網站允許使用者自定義操作時間參數（例如自動退出的時間）

導航和資訊架構

關聯頁面或區域間的跳轉移動應當是友善的、顯而易見的，并且可以容易的回到首頁

在絕大部分頁面都可以輕松的導航至使用者最可能需要的資訊

導航選項按照最常用邏輯或任務導向方式排序

導航系統應當是内容寬泛并層級較淺的，而非有比較深的層級

站點結構是簡單的，有一個清晰的概念模型，沒有不必要的層次

在所有頁面都可以到達網站主要部分(持久導航persistent navigation)，導航過程不會中斷

導航标簽放在頁面頂端，而且要設計成看上去可以點選的樣子

要有一個站點地圖用來提供整個站點内容的概況

在任何頁面都可以連結到站點地圖

站點地圖提供一個簡潔的網站概貌，而非主要導航的重複或各主題的簡單羅列

提供良好的導航回報(例如顯示目前位置)

分類标簽應當能準确描述該分類的資訊

連結或導航标簽包含使用者要達到目标所尋找的“觸發字眼(trigger words)”

術語和正常(例如連結顔色)應當(近似地)與網際網路習慣用法保持一緻

在網站各個組成部分中的連結樣子應當一緻

産品頁面應當包含與目前産品相似或互補産品的連結，以實作交叉營銷

導航項和連結中的用詞應當是無歧義的，并且使用術語

使用者可以排序和過濾目錄頁面(例如按價格排序或最熱門排序)

當滑鼠放在某個可點選的元素上時，元素應當有明顯變化(包括光标的變化)

重要内容可以通過不止一個連結通路到(不同的使用者有可能需要不同的連結标簽)

僅用于導航的頁面(例如首頁)可以再不滾動的情況下浏覽

觸發事件的超連結應當與連結到其它頁面的超連結(例如：下載下傳)在外觀上有明顯區分

網站允許使用者控制互動速度和順序

在網站每個頁面清晰标注退出入口，允許使用者從目前任務中推出，而不必通過一個額外的對話框

網站不可禁用浏覽器的“後退”按鈕，“後退”按鈕應當在每個頁面的浏覽器工具欄上都有顯示

使用者點選浏覽器後退按鈕時，總能回到他之前所在頁面

購物車(basket)和結賬(checkout)連結應當在每個頁面中都可以看的十厘清楚

如果網站有打開新視窗，那麼這個動作不應使使用者困惑(例如：新視窗應該是一個設定大小的對話框或并可以輕松關閉)

菜單的使用說明、提示、相關資訊應當在每個螢幕的同一位置顯示

表單和資料輸入

資料輸入框在适當的時候應當包含預設值，顯示要填的資料格式和輸入框允許輸入的長度

如果任務設計源檔案(例如紙張形式)，那麼界面應當與源檔案的規格一緻

網站能自動完成格式化資料的輸入(例如貨币符号等)，使用者不需要輸入類似£ 或 %的符号

表單域的标簽應當清楚的說明該輸入框希望輸入什麼

表單中的文本框應該為預期答案設定合理長度

表單中的必填項和選填項應當有明顯的區分

登陸和注冊應當用相同的表單(就像Amazon一樣)

如果完成表單需要外部資訊的話應當提前告知使用者，例如護照編号

表單中的問題項(輸入框)應當按邏輯分組，并且每組都有一個标題

表單域應包含提示、示例或樣例答案，告知使用者輸入框期望輸入什麼

如果輸入框的标簽以表單問題的方式提出，那麼這些問題應當是陳述清晰、簡單的

在表單中，相對于文本輸入框，應當優先使用下拉菜單、單選按鈕、複選框(文本輸入框不應當使用過度)

在資料輸入頁面，光标應當被放置在需要輸入的地方

資料輸入(例如日期)和輸出(例如數值機關)的格式應當被清晰标明

使用者可以在進輸入一些基本必要資訊就可以完成簡單的任務(系統可以預設補充一些不重要的資訊)

表單允許使用者盡可能久的保持一種簡單的互動方式(例如，使用者不必在鍵盤滑鼠間不停的切換)

使用者可以更改表單域的預設值

文本輸入框需指出要輸入資料的數量和格式

表單在送出前執行資料驗證

在資料輸入界面，在适當的時間執行表單域級别驗證和表單級别驗證

網站應可以輕松地更正輸入錯誤(例如，當驗證表單未完成，應當将光标放置在需要輸入的位置)

資料輸入和資料顯示應當保持一緻性

表單域标簽應當靠近輸入域(例如：标簽右對齊)

可信度

内容應當是最新的、權威的、可信賴的

網站有第三方(例如引用、第三方使用見證)來說明資訊的準确性

應當清晰标明網站的幕後有真實的組織(例如：提供一個真實位址或辦公室照片)

公司有一些認證專家(可以使用一些憑證)

網站應避免廣告，尤其是彈出式廣告

在結賬的最一開始就突出提示運送費用

網站應當避免空洞的營銷辭令(marketing waffle)

每個頁面都應當清晰顯示站點辨別，保證使用者确認他仍然在同一個網站上

通過網站可以輕松聯系到某人以擷取幫助，并可盡快得到回複

内容是新鮮的，網站應經常更新，總包含最近的内容

網站應當避免版式錯誤和拼寫錯誤

用可視化設計來補充商品和線下營銷資訊

網站組織應當有一些真實的人，他們是誠實的、可信賴的

寫作和内容品質

網站有能引起别人興趣的、獨一無二的内容

正文是簡明的，沒有不必要的說明和歡迎辭令

每個内容頁應以内容結論或内容意義啟示作為開端，正文以倒金字塔方式書寫

相對于叙述式的文本，網頁應當優先使用無序清單和有序清單

清單應當以簡短的說明作為開始，幫助使用者意識到該清單是如何與其它關聯起來的

那些最重要的清單項應當放在清單的前面

資訊應當分層次組織，從一般的到具體的，組織結構應當是清晰的、符合邏輯的

内容應當專門為網際網路(Web)建立(web pages do not comprise repurposed material from print publications such as brochures)

産品展示頁面應當包含購買須了解的資訊，使用者可縮放産品圖檔

使用超文本适當地組織内容

以主動語态書寫語句

網頁應當易于快速浏覽，充分使用标題、副标題和較短的段落

相對于文本式的語言，優先使用地圖、圖表、圖形、流程圖和其它視覺元素

每個網頁都應有描述資訊，以及有用的标題，用以支援書簽

連結及連結描述(title)應當具有描述性或推測性，不應當出現“點選我(Click here)”這樣的連結

标題不應當故作風雅、故作聰明或含義隐晦

連結文本應當與目标頁面的标題(title)相符，這樣使用者就可以在到達目标頁面時心裡有數

按鈕文本及連結文本以動詞開頭

标題和副标題應當是簡短的、直截了當的、具有描述性的

遣詞造句及用到的概念應當為典型使用者所熟悉

有序清單從1開始，而不是0

第一次使用的縮寫詞彙應當加以說明

文本連結應當足夠長以便于了解、又應當足夠短以保證最少換行(尤其被用作導航清單時)

頁面布局和可視設計

網線數應當适于目标使用者和他們的任務

布局可以幫助使用者把注意力集中在下一步要做的東西上

在所有頁面，最重要的資訊(例如經常用的主題、特色和功能)放在螢幕的第一個滿屏

網站在不水準滾動的情況下就可以使用

可點選的元素(例如按鈕)，應當設計成明顯可點選的樣子

不能點選的元素

按鈕或控件的功能從他們的标簽或設計上就可以明顯看出來

可點選圖檔包含多餘文本标簽(Clickable images include redundant text labels (i.e. there is no ‘mystery meat’ navigation))

超文本連結可以輕松被辨認(例如下劃線)，而不需要大面積掃視。

網站字型使用應當具有一緻性

控件和它所具備的操作之間的關系是顯而易見的

圖示和圖形是标準的和(或)直覺的(具體的和為人熟悉的)

在每一個頁面上都應有一個清晰的視覺“起點”

網站的每個頁面共享一緻的布局

網頁為列印格式化，或者有一個為列印準備的版本

按鈕或連結能顯示出他們被點選過了

圖形使用者界面(GUI)元件(例如單選按鈕和複選框)應當被适當地使用

所用字型應當是可閱讀的

網站應當避免使用斜體字，并隻為超文本添加下劃線

資訊密度和留白應當有一個良好的平衡

網站看上去應是讓人愉悅的

網頁應避免出現“滾動障礙物(scroll stoppers)”(标題或其它頁面元素給使用者造成在頁面頂部或底部的錯覺)

網站應當避免大量使用大寫文本

網站應當有一緻性的、清晰可識别的外觀和感覺，以吸引使用者

深藍色避免使用在細節地方(Saturated blue is avoided for fine detail)(例如文本、細線和符号)

借助顔色組織和分組頁面元素

網站圖形不應當與banner廣告混雜不清

對于重要的主題分類加重顯示(em)

在标準寬度的浏覽器視窗中，内容頁面一行不要太短(小于50字)也不要太長(大于100字)

頁面依據栅格設計，所有頁面元素和部件水準對齊、垂直對齊

有意義的文本标簽，令人印象深刻的背景配色，邊框和留白的恰當使用，這些一起來幫助使用者把網頁元素分别出不相關聯的功能區域

網頁配色合理搭配，避免過于複雜的背景設計/li>

較為獨立的網頁應當避免雜亂不相幹的資訊

标準頁面元素(例如頁面标題、站點導航、頁面導航、隐私政策等)可輕松找到

組織logo放置在每個頁面的相同位置，點選logo後傳回最合情理的頁面(比如首頁)

吸引人注意力的特色元素(例如動畫、醒目的色調、明顯的字型大小差異)應當保守的使用，并隻在恰當的地方使用

圖示(icons)要在視覺上和概念上有所區分，但又要與頁面和諧。

相關資訊和功能集中放置，每一組可以在一個視野浏覽到(大約直徑為4.4厘米的螢幕區域)

搜尋可用性

預設搜尋應當是可以直覺地配置(沒有布爾操作符no Boolean operators)

在搜尋結果頁面向使用者展示搜尋到的内容，并且在該頁可以編輯檢索詞并重新送出搜尋

檢索結果應是清晰地、有用的、并依據相關度分級

檢索結果頁面應清晰告訴使用者檢索到多少條記錄，每一頁顯示的記錄數可以由使用者配置

如果沒有傳回結果，系統依據使用者輸入的檢索詞存在的可辨認問題提供建議和可選輸入項

搜尋引擎可以優雅地處理空檢索串的情況

最常用的檢索串可以獲得有用的結果

搜尋引擎應當提供模闆、示例或提示來幫助使用者高效使用它

網站應當包含一個功能更強大的搜尋頁面，幫助使用者更加完善他們的檢索(可以把它叫做“修改檢索 revise search”或“精确檢索 refine search”，而非“進階檢索 advanced search”)

檢索結果頁面不顯示重複結果(無論是能感覺到的重複還是實際的重複)

檢索輸入框應當足夠長，可以應對常用檢索詞的長度

檢索應當覆寫整個站點，而不是站點的一部分

如果網站允許使用者建立複合檢索，那麼這些檢索應當是可儲存，定期被執行的(這樣使用者就可以跟蹤動态資訊的最新動态)

檢索界面應當放置在使用者期望的地方(一般是頁面的右上區域)

檢索框及他的控件應清晰列出(多檢索框可能會難以了解)

站點既可以滿足那些想随便浏覽的使用者，也可滿足想搜尋的使用者

在檢索結果頁面應當明确目前檢索的範圍，并且使用者可以限制這個範圍(如果該任務需要的話)

結果頁面顯示有用的元資訊(meta-information)，例如文檔的大小、建立的日期、檔案類型(word、pdf等)

搜尋引擎提供自動的拼寫檢查，并提供複數詞和同義詞查找

索索引擎提供相似檢索選項(例如 “更多相似” 連結)

幫助、回報和容錯

常見問題解答或線上幫助提供循序漸進地指導，幫助使用者完成最重要的任務

在恰當的地方和恰當的時間可以輕松擷取幫助

提示應當是簡潔的、表達清楚的

使用者不需要求助于使用者手冊或其它外部資訊來使用站點

網站有一個定制的404頁面，該頁面包含如何找到要找頁面的提示，并包含首頁和和檢索頁面的連結

網站在必要時(例如校驗時)提供良好的回報資訊(例如進度提示或一些資訊)

使用者在選擇商品時可擷取到幫助

使用者在執行由潛在“危險”操作(例如删除什麼)之前提供使用者确認

使用者确認頁面是清晰地

錯誤資訊包含先一步該做什麼的清晰訓示

在送出購買的前一個時刻，網站向使用者清晰地展示概覽頁面，這個頁面應當與購買确認頁面區分開來

當使用者需要在不同的選項(例如在一個對話框)前抉擇時，這些選項應當是明确的

在網站響應時間時産生的不可避免的延遲應當告知使用者(例如授權信用卡交易時)

錯誤資訊以非嘲弄的語氣書寫，并且不要責怪使用者的錯誤

頁面可以快速加載(5秒或更短)

網站提供對使用者輸入或其他操作的及時回報

在加載比較慢的大頁面應當提示使用者(例如：“正在加載……”)，最重要的資訊應當首先顯示

當使用工具提示條(tool tips)時，應當提示對使用者有用的額外幫助，而不是簡單的重複圖示、連結或字段域标簽中的文本

當給使用者一些幫助提示時，告訴他們要做什麼，而不是避免做什麼

網站在适當的地方向使用者展示如何做常見任務(例如：提供網站的功能示例)

網站通過提供回報資訊(例如“您知道嗎?”)，幫助使用者了解怎樣使用網站

網站提供上下文敏感幫助

幫助應當是直截了當的，用直白簡單的方式表達，避免使用行話和流行語

當一個任務成功完成後，網站提供清晰地回報資訊

必要時重要提示資訊應當在螢幕上保留，使使用者有足夠時間記錄下這些資訊

遵循“菲茨法則”(控件之間的距離和控件的大小應當是适宜的，大小與距離成比例)

目标對象間有足夠空間，防止使用者點選了多個目标或錯誤的目标

可點選元素之間至少有兩個像素的距離

當網站發生錯誤時，應當是顯而易見的(例如，當表單未完成，高亮未完成的表單域)

網站提供适當的選擇方式(例如下拉清單)來代替使用者輸入

網站應努力把防止使用者出錯的工作做好

網站在糾正使用者錯誤輸入前提示使用者(例如，google的“您是不是要查找…”)

網站應當確定任務不是令人困惑的

錯誤資訊應當用直白的語言描述，并給與問題足夠的解釋

使用者在一個任務中可以推遲解決錯誤至一個較晚的時間

如果有必要的話，網站提供錯誤資訊更多的細節

可以非常容易撤銷(或取消)、重做(Redo)操作

譯者：IIduce，轉載請務必以連結形式注明來源。

譯文位址：http://css9.net/247-web-usability-guidelines/

原文位址：http://www.userfocus.co.uk/resources/guidelines.html