泛議切實可行的網絡表單可用性規范

　　轉載自：

　　

An Extensive Guide To Web Form Usability

作者：Justin Mifsud

 

　　小的水平有限，詞不達意，忘見諒～!肯定漏洞百出，請隨便恥笑指正～!

　　泛議網絡表單可用性規范

　　以下做法與你將讀到的內容完全背離，那就是為你的表單點綴漂亮的按鈕，顏色以及排版甚至充沛的jQuery插件，這些都無助於可用性。事實上，這麼做你只是(通過沒有歸整過的方式)實現了表單可用性的三分之一。

　　在這篇文章中，我們將提供便於你執行且切實可行的規范。這些精心編排制作的規范是來源於可用性測試，實施現場測試，網絡站點追蹤，視線追蹤，網頁在線分析及客戶支持部門獲取的客戶投訴。

　　為什麼網絡表單可用性如此重要

　　ISO 9241標准將網站可用性定義為“高效，有效地滿足特定用戶在某個環境中達到特定目的。”當使用一個站點時，用戶有一個特定目標。如果設計的好，站點會達到這個目標並與站點背後的機構目標一致。表單經常是存在於用戶目標以及(站點)機構目標的中間，因為，盡管人機交互不斷發展，表單依舊是用戶在站點操作的主導樣式。事實上，表單經常被認為是完成目標進程中最後和最重要的環節。

　　讓我們通過討論表單使用的三大主要方式來解釋這個觀點。就像Luke Wroblewski在他書中(Web Form Design： Filling in the Blanks網絡表單設計：填補空白)所陳述的，每個表單都因三大主要原因中的某個要素而存在：商業，社交或者生產力。以下表格將這些要素轉換成了原因背後的用戶/商業目標：

　　以上表格內容參考自Luke Wroblewski’s Web Form Design： Filling in the Blanks

　　綜上，表單和可用性的關系有兩方面：

　　1. 表單是用戶能否達成使用目標的關鍵點。

　　2. 表單應幫助用戶便捷地完成目標。

　　本文關注於第二點，因為一個易用表單會自然而然提升整站使用性，繼而關系到第一點。

　　構成網絡表單的6個組成部分：

　　網絡表單是設計師和用戶的關鍵點和糾結點。長久以來，用戶已經形成了對表單視覺及操作行為的預期。 他們通常希望網絡表單有以下6個組成部分：

　　1. 標簽

　　告訴用戶相應輸入區域的意思。

　　2. 輸入區域

　　輸入區域讓用戶可以提出反饋意見。 這包含了文字輸入區，密碼輸入區，多選項，單選項，滾動條等等。

　　3. 行為

　　是指鏈接或者按鈕，當用戶點擊，執行一個操作，比如提交表單。

　　4. 幫助

　　為如何填寫表單提供幫助。

　　5. 信息

　　針對用戶輸入給出反饋。用戶會得到確認(比如表單被成功提交的提示)或否定(‘您所輸入的用戶名已被使用’)。

　　6. 確認

　　這些措施保證了將用戶提交的數據確認為可接受參數。

　　Skype的注冊表單包含了所有6個部分。

　　通過三方面實現表單可用性

　　盡管在布局，功能，意圖上存在不同，所有的表單都包含3大部分，就如Caroline Jarrett and Gerry Gaffney在他們書中(Forms That Work： Designing Web Forms for Usability表單實現：為可用性設計表單)所記：

　　1. 關系

　　表單建立了用戶與(網絡平台)機構之間的關系

　　2. 對話

　　表單建立起用戶與機構之間的對話

　　3. 外觀

　　基於表單的外觀，建立起關系和對話

　　對於一個易用表單，應該包含這3部分。讓我們依次來看， 配合方便執行的實用規范，繼而理解怎樣讓表單真正易用。

　　第一部分：關系

　　“沒有人是孤立的”，17世紀英國詩人，諷刺作家，律師以及牧師John Donne曾經說過。的確，人類因各種關系而豐富，愛慕的，友好的，專業的或商業的。表單的意義在於建立或者提升用戶與機構之間的關系。當這部分做糟糕時，關系就會被終結。

　　有一些顯現出的原理需要被牢記心中：

　　1. 關系建立在信任的基礎上

　　所以在你的表單中建立信任是非常關鍵的。這可以通過標志，圖像，顏色，排版以及文字來實現。用戶會切實感受到表單來自一個(可信賴的)坦誠機構。

　　2. 每種關系都有一個目的

　　在浪漫緩和的關系中得到愉悅或在商業關系中達到財務盈利目的。問問你自己，你的表單有什麼目的?

　　3. 基於表單名稱展現意圖

　　名稱會提示用戶該表單是關於什麼且為什麼用戶必須填寫。

　　4. 相互了解

　　就像在某種關系中一樣，相互了解對方是非常重要的。充分了解用戶且經常考慮你的問題是否恰如其分，是否適時。這會給你的表單灌輸一條自然流程。

　　5. 選擇適當的語言並移除多余的文字

　　了解用戶會幫助你選擇適當的語言並移除多余文字。它會幫你創建一個可平衡你的需求和用戶需求的界面。

　　6. 不要問超出表單范疇的問題。

　　在某種關系中，你會對那些問了越界問題的人產生懷疑(排斥)。這種情況同樣發生於在線模式。充分考慮相關參與者繼而決定什麼信息是真正需要的。

　　7. 行為和表面的突然變更

　　這會讓用戶感到不安。 同樣的，永遠不要在表格中或者表格填寫的2個步驟中安插突然變更。

　　了解你的用戶。讓注冊用戶方便登錄，讓新用戶方便注冊。Debenhams勉強區分開了這2者的不同。

　　另一方面Amazon為注冊用戶和新用戶簡化了流程。

　　第二部分：對話

　　一張表單就是一場對話。就像真正的對話，表單承擔起了雙方的雙向溝通，在這裡，是指用戶和(在線平台背後的)機構。事實上，那些填寫了表單的用戶是在嘗試與機構溝通。

　　比如，對於社交網絡，用戶會通過填寫表單向他們想加入的機構發出信息。在處理請求時(不管是自動的或是手動的)，(站點)機構會(以標簽方式)問用戶一些問題，比如他們的姓名，郵件地址等等。 當接受(或拒絕)的時候，(站點)機構會通知用戶結果，至此完成整個對話流程。

　　至此得到一些有用的規范：

　　1. 表單是對話不是審問

　　就像之前提到的，表單是一場對話，不是一場審問。 咄咄逼人的標簽用詞會激怒用戶，而且(如果他們並沒因此離開)他們可能會給你你想要的答案，而非事實。

　　2. 標簽必須符合邏輯

　　對應於對話的自然流程，標簽必須符合邏輯。比如，當問了用戶一大堆其他問題後再來問他的姓名會不會很奇怪? 一些相關的復雜問題應該放到表單後端。

　　3. 組合相關信息

　　比如個人詳情。 從一部分問題轉到另一部分問題的流程應效仿一場(真正的)對話。

　　Yahoo的注冊表單用紫色標題和細微線條高效群組了相關內容。

　　Constant Contact群組了相關內容，但它把不同的組分太開，導致用戶迷惑。

　　4. 一次聊一個話題

　　在一場真正的對話中，每個標簽都應該一次只針對一個問題， 幫助用戶對相應輸入區域作出反應。

　　5. 自然停頓

　　在對話中的自然停頓是指在哪裡安排留白，怎樣群組標簽，是否要把表單打散成多頁。

　　6. 移除龐雜(元素)

　　在任何(真正的)對話中，人們都會因背景噪音而抓狂。 所以請把可能阻礙用戶填寫表單的雜亂元素移除，比如橫幅或者不必要的導航。

　　Dropbox提供了一個讓注冊表單看起來不錯的好例子。留白區域看起來不錯，而且頁面非常整潔。

　　第三部分：外觀

　　1. 標簽

　　a. 單詞VS.句子

　　如果一個標簽的意圖易於理解，比如詢問姓名或電話號碼，那麼一兩個字就夠了。不過為了消除模稜兩可的歧義，有時可能需要短語和句子。

　　Amazon的注冊表單使用了完整句子，盡管用單詞可能已足夠說明問題。

　　b. 句子樣式vs.標題樣式

　　應該用“Name and Surname” 還是 &ldqu