泛議網絡表單可用性規範

轉載自: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” 還是“Name and surname”?

相對於標題樣式,句子樣式相較之下更便於遵從語法。有一點是肯定的,就是不要全部大寫,這會導致表單顯得不專業且難以瀏覽。

想要快速瀏覽Barnes & Noble註冊表的標籤有多麼困難(它的標籤都是大寫) ?

c. 標籤末尾的冒號

一些桌面應用軟件和運營中的平台比如Windows的交互規範推崇在表單標籤的末尾追加冒號。一些在線表單的設計師仍遵從且堅持這個做法,主要原因是針對一些老的屏幕閱讀用戶,他們大部分是依靠冒號來標識出某個標籤。而一些新近用戶是依靠標識(特別是針對標籤的標識)。除此以外,對於冒號的偏好是有爭議的,如果表單樣式保持統一,它是即不提高也不減損表單可用性。

d. 標籤對齊方式:頂部對齊vs.左對齊vs.右對齊

與常規建議相反,輸入框上方區域也並不總是最利於標籤放置的好位置。它是一個讓用戶快速填寫表單的理想組合方式。不過有時候你會想減緩用戶閱讀速度以求用戶更全面地註意到標籤細節內容。當然,讓一個長表單保持一列,用戶便於滾動頁面,這比打散信息,組成多列來保證每樣東西“錯落有致”要好多了。每種對齊方式都有它的優缺點。

時間數據參考自“Matteo Penzo的“Label Placement in Forms” (在表單中放置標籤)

(表單不應包含多列。以Makeup Geek的頁面為例,很容易就忽視了右邊縱列信息(更別說“必填項”註釋在尾部))

2. 輸入區域

a. 輸入區域種類

根據需求提供相應的輸入區域樣式。對應用戶習慣,每種不同類型的輸入框都有自身特性。比如對於單一選擇結果使用radio buttons,多選項使用check box。

b. 自定義輸入區域

不要創造新的輸入區域樣式。這在早期Flash站點上非常多見,而且現在死灰復燃了;我見過用jQuery開發的稀奇古怪的輸​​入區設計。簡單才往往是最便於使用的。盡可能地將輸入區樣式向原裝HTML樣式靠攏。

高亮輸入區會讓用戶疑惑。

c. 限制輸入區格式

如果你不得不限制用戶輸入數據的格式,至少不要使用會惹怒用戶的方法。比如,與其在輸入框後顯示MM/DD/YYYY來提示用戶,不如考慮提供3個下拉,或給個日曆選取。

d. 必填項vs.可選項

對用戶清晰區分不可以被留白的輸入框。常規方法是使用星號標註(*)。只要能說明意圖,用任何元素都可以,哪怕就是一個星號。

3. 行為

a. 主要行為vs.次要行為

主要行為是指鏈接和按鈕這類完成“最終”功能必不可少的行為,比如“保存”和“提交”。次要行為是指“返回”和“取消”,使用戶可以撤銷其已經輸入的數據。如果點擊錯誤,次要行為基本上會導致非預期結果,所以可能的話盡量使用主要行為。如果不得不使用到次要行為,對應主要行為減弱次要行為的視覺比重。

缺乏明顯區別的主次行為會導致失敗。看看在St. Louis Community College站點冗長的登記註冊表單上的按鈕,想像一下萬一誤操作點了“重設表單”……

b. 命名規範

避免用通用詞彙如“提交”命名行為,因為它會讓表單顯得很平庸。使用描述性的文字和短語,例如“加入LinkedIn”會更好。

儘管可口可樂正確地提升了主要行為按鈕的重要性,但它用了泛泛的“提交”作為按鈕描述,使用“加入我們”會更有幫助。

4.幫助​​

a. 表單隨同提示

你應該從來沒有機會為用戶解釋怎麼填寫表單。如果它看起來不像表單或者特別複雜,那麼重新設計可能是你唯一的選擇。隨同提示應該在需要的地方使用,比如解釋一下為什麼信用卡信息是必填的或者生日信息會被如何使用或關聯到“使用期限”。這類信息很容易被忽略,所以要讓它言簡意賅容易閱讀。所以規則是:不要讓解釋(統算)超過100字。

b. 用戶觸發和自動幫助

比起在每個輸入框下放上提示信息,不如在需要的時候再展現出來。你可以在輸入框附近放置一個小圖標,當用戶需要關於這個區域的幫助可以點擊它。更完美的方案是當用戶激活輸入框要輸入數據的時候,自動顯示提示。相對於通過JavaScript庫比如jQuery來實現,這類效果更常見更容易。

Skype的註冊表單包含了用戶觸發幫助(上方通過點擊問題標識觸發的藍色框)以及自動幫助(建議的用戶名)

5. 信息

a. 錯誤提示

這類信息提示用戶出錯,常用來防止用戶(在出錯的情況下)過於深入表單進程。可以通過以下方式來突出錯誤提示:顏色(通常是紅色),熟悉的圖像符號(比如一個警示標記),強調突出(通常在表單上方或者錯誤發生的位置周邊),大字體,或者綜合使用這些方式。

b. 成功提示

用成功提示來告訴用戶他在表單進程中​​達到了某個有意義的節點。如果表單過於冗長,一個成功提示信息能鼓勵用戶繼續把它填完。就像錯誤提示,成功提示也應該突出顯示。不過它不能阻礙用戶的表單進程。

6.確認

a. 只在需要的地方出現

過多的確認和無確認一樣糟糕,因為它會讓用戶疲乏。確認應被限制應用於關鍵點(比如用戶姓名可用性),確保有實際意義的回答(比如不允許年齡超過130)以及給出建設性答案,比如面對有限但長得要用下拉列表來顯示的答案(如國家代碼的前綴)。

b. 智能默認值

為了保證讓用戶更快更準確地完成表單,設置智能的默認值。比如,根據用戶IP地址預選用戶國家。不過得謹慎使用這項功能,因為用戶會趨向於就這麼放著預先填入的部分(而不做確認)。

Twitter的註冊表單使用了自動確認(針對姓名,郵件地址,密碼和用戶名)以及智能默認值(“保持登錄狀態”)。

(結論)開始

“結論”這個詞用在這裡並不確切。讓這成為將我所寫的內容應用到你自己表單的起點。好消息是關於這一切還有很多可以說,你可以對應每個觀點找到充足的資源。為準備開始的你列出以下三本給我寫作靈感的書:就像我在開頭寫的,將調整用戶(視覺)界面作為捷徑並不能使你的表單實現可用性。我還能多說什麼?觀點在於你。快動起手來。

擴展閱讀

Forms That Work: Designing Web Forms for Usability, Caroline Jarrett and Gerry Gaffney

Eyetracking Web Usability, Jakob Nielsen and Kara Pernice

Web Form Design, Filling in the Blanks, Luke Wroblewski

本文作者:密封罐頭轉載請註明來自:攜程UED

 

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.