轉載自:
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