在這篇文章中，我們將提供一些你可以很容易遵循的指導方針。通過可用性測試、現場測試、網站跟蹤、眼動追蹤、網絡分析以及用戶對客服的真實反饋，精心制作出這些準則。

一、為什么網頁表單可用性如此重要

ISO 9241國際標準定義了網站可用性為“有效性，效率和用戶主觀滿意度以及特定用戶在特定使用環境下所達到的特定目標?！碑斢脩羰褂镁W站時會有一個特定目標，如果設計得好，網站將實現這一目標，這是整個網站開發團隊所期待。而橫在目標用戶和設計者的往往是表單，因為，盡管人機交互的發展進步，表單仍然是用戶在網絡中進行交互的主要方式。事實上，表單往往被認為是完成目標的最終、也是最重要的階段。

讓我們闡明這最后一點，討論一下表單的三個主要用途。就如Luke Wroblewski在他的《Web Form Design: Filling in the Blanks》一書中所說的那樣，表單存在有三個因素：商業，社交，生產力。下表展示了隱藏在這些因素之下的用戶目標和業務目標。

上圖為表單的用法，來自Luke Wroblewski的《Web Form Design: Filling in the Blanks》一書。

因此，表單和可用性之間的關系有兩個方面：

• 表單可以使一個網站好用或是不好用，因為他們站在用戶的角度來實現他們的目標；
• 表單需要好用，用來幫助用戶實現目標。

這篇文章將重點放在第二點上，因為好用的表單自然有助于該網站的整體可用性，因此作為第一個方面考慮。

二、網頁表單的六個組成部分

網頁表單是必要的，而往往是設計師和用戶的痛點。隨著時間的推移，用戶已經形成一種期望，表單的外觀應該如何以及如何運作。他們通常期望網頁表單有以下六個組成部分：

• ?標簽：標簽告訴用戶相應的輸入元素的含義是什么。
• 輸入框：輸入框可讓用戶提供反饋。它們包括文本輸入框、密碼輸入框，復選框，單選按鈕，滑塊以及更多。
• 行為：當用戶按下這些鏈接或按鈕時，表單會執行操作，例如提交表單。
• 幫助：這個元素為填寫表單提供了援助。
• 信息?: 系統根據用戶的輸入將信息反饋給他們。信息可以是正面的（如表明表單已經成功提交）或負面的（“您所選的用戶名已被使用”）。
• 驗證?: 這些措施確保了由用戶提交的數據符合可接受的參數。

Skype網站的注冊表單包含了六個組成部分。

三、通過表單的三個方面的解決可用性

盡管在布局、功能和用途上有所差異，但所有表單都主要有三個方面，就如Caroline Jarrett和Gerry Gaffney 在他們的《Forms That Work: Designing Web Forms for Usability》一書中所描述的那樣：

• 關系?: 表單為用戶和組織者之間建立起一種關系。
• 對話?: 表單為用戶和組織者之間建立起對話。
• 外觀?: 通過表單的外觀，為用戶和組織者之間建立起關系和對話。

為了使表單具有可用性，這三個方面都需要加以應對。讓我們來看看各個方面，進而找出如何讓表單真正具有可用性，并且很容易掌握的實用的指導方針。

第一方面：關系

17世紀的英國詩人、批判作家、律師、牧師John Donne曾說過，“沒有誰是一座孤島”。事實上，人類因關系而繁榮發展，比如愛情、友情、同事或是工作關系。表單是建立和加強用戶和組織之間關系的一種方法。如果做得不好，它可以會提前終止這種關系。

考慮到這一點，有以下一些原則：

建立關系是基于信任之上的，所以在表單中建立信任至關重要?？梢酝ㄟ^標識、圖像、色彩、排版和文字來達到這個目的。精心組織的表單會讓用戶感到放心。

每個關系都有一個目的，可能是浪漫關系下的愛和幸福，或是業務關系的經濟收益。問問自己，你的表單目的是什么？

表單名稱表明表單的目的。表單的名稱告知用戶這個表單是關于什么內容的，以及為什么需要他們填寫。

在一段關系中，了解他人是必不可少的。為了了解你的用戶，你總是需要考慮你所問的問題是否合適，如果問題合適，那用戶是否會及時填寫。這將會對你的表單灌輸一種自然的流程梳理。

了解你的用戶也將幫助你選擇適當的措辭，并刪除多余的文字。而且，它會有助于你制作出平衡用戶需求和你的需求的界面。

不要問表單范圍以外的問題。在一段關系中，你會不相信這些問不合時宜問題的人，同樣的事情也會發生在網絡上。與利益相關者磋商，探討一下什么信息是真正被需要的。

行為或外觀的突然改變會使用戶心急火燎。同樣，表單或者表單步驟的介紹說明也不要突然變化。

了解你的用戶。讓已注冊的用戶很容易地登陸，讓新用戶很容易地注冊。Debenhams 使這兩者幾乎沒有明顯的區別。

另一方面，Amazon網站為新用戶簡化了注冊過程

第二方面：對話

表單是一個對話。就像一個對話，它代表雙方之間的雙向交流，在這種情況下，這兩者指用戶和表單組織者。事實上，用戶填寫表單，以發起與組織者之間的對話。

例如，對于一個社交網站，用戶將填寫注冊表單，告知組織者他們想加入的意愿。接受用戶請求時（自動或手動），該組織將問用戶一系列的問題（以標簽的形式），如他們的名字、姓氏、電子郵件地址等等。一旦接受（或拒絕）用戶請求后，該公司將把結果告知用戶，從而完成交流過程。

從這個角度看表單，產生了一些有用的指導原則：

正如前面提到的，表單是一個對話，而不是審問。攻擊性的標簽文字會讓用戶感到心急火燎，并且（如果此時他們不離開網站的話），他們將最有可能給出你想聽到的，但并不真實的答案。

有邏輯性地組織標簽，反映對話的自然流暢。例如，問完用戶的一些其他問題之后，才問用戶的名字，這難道不奇怪么?不會是奇怪的問別人自己的名字后，才問了一些其他的問題嗎？更多涉及到的問題應該在表單接近尾聲的時候問。

將相關信息編組，如個人詳細信息。從一組問題到下一組的過渡更像是一個對話。

Yahoo的注冊表單通過紫色的標題和細線，有效地將相關內容分組。

雖然Constant Contact網站將相關內容分組，但是它把組分離的太遠，這可能會給用戶造成迷惑。

如同一個真實對話，每個標簽應該在一個時間里解決一個主題，幫助用戶在輸入框中做出回答。

會話中的自然停頓意味著在何處留白，如何編組標簽以及是否需要把表單拆分在多個頁面上顯示。

在任何會話中，背景混亂會讓人分心。因此，要去除雜亂例如橫幅和不必要的導航，這些可能會分散用戶填寫表單的注意力。

Dropbox網站提供了一個很好的例子，展示了一個注冊表單該是怎樣的。留白恰到好處，頁面也簡潔。

第三方面：外觀

外觀或是用戶界面（UI）是網頁表單可用性的核心，對此有幾項準則。為了簡化討論，我們把它們分成六點（前面有所提及）。

1. 標簽

• 詞語?vs. 句子：

如果標簽的目的簡單易懂，如詢問用戶姓名或電話號碼，這樣一兩個詞就足夠了。但是，如為了消除歧義，一個短語或一句話可能還是有必要的。

Amazon網站的注冊表單采用了完整的句子，然而幾個單詞就足夠了。

• 句首字母大寫?vs. 按標題格式大小寫：

應該設置成是“Name and Surname”還是“Name and surname”呢？句首字母大寫比標題格式稍微容易并且更快地遵循語法。有一件事是肯定的：從不使用全部大寫的，否則表單將會顯得不專業，并且難以閱讀。

看看快速瀏覽Barnes & Noble’s網站的注冊表單標簽是多么困難！

• 標簽以冒號結束：

針對一些桌面應用程序和操作系統（如Windows）的UI設計準則，建議在表單標簽結束處添加冒號。一些線上表單的設計師堅持這一點，主要是因為舊屏幕閱讀者主要依靠冒號識別一個標簽?，F代的屏幕閱讀者依賴于標記（特別是標簽標記）。另外，冒號是個見仁見智的問題，只要保持風格一致，它既不會加強也不會有損于表單的可用性。

• 標簽的對齊方式：頂對齊?vs. 左對齊?vs. 右對齊

跟一般想法相反，在輸入框上面放置標簽并不是可用性最好的位置。你希望用戶盡可能快地填寫表格，這有些理想化。但有些時候你需要故意讓用戶慢下來，以便他們用心地留意并閱讀標簽。此外，把長表單設成一個長列，讓用戶向下滾動頁面。這比把表單分成列，每樣都雷同要好。每一種對齊方式都有它的優點和缺點。

Matteo Penzo根據表單標簽對齊方式研究出的時間表。

表單絕不能超過一列。請看一下Makeup Geek 網站，我們會多么容易忽略右側的一欄（更不用提底部的“必填項”說明）。?

2. 輸入框

根據需要信息的不同選擇合適的輸入框類型。每種類型的輸入框都有其自己的特性，用戶已經習慣了這些。例如，如果幾個選項中只有一個能被選中使用單選按鈕，那就用單選按鈕；如果允許選多個選項，那就用復選框。

自定義輸入框不意味著創造新的輸入框類型。這在早期的Flash網站中常見，而且它似乎又卷土重來了；我曾看到一些用jQuery實現的怪異輸入框。而往往簡潔才最具有可用性。請保持輸入框盡可能接近其不變的HTML渲染。

如上圖，改變輸入框的界面會混淆用戶。

如果你需要對用戶輸入的數據信息有格式要求，可以限定輸入框的格式，然后采取措施至少不能讓用戶感到不適。例如，與其在文本輸入框旁邊顯示MM/ DD / YYYY作為日期選擇，還不如考慮使用三個下拉菜單，或者更好的是，一個日歷控件。

• 必填項?vs.?選填項

明確地區分出哪些輸入框用戶不能不填。習慣上使用一個星號（*）表示必填。任何符號都可以，只要標識說明清晰可見地表明是什么意思就行（即使它是一個星號）。

3. 行為

• 主要行為?vs. 次級行為

主要行為是指表單中為了促進表單填寫完成的鏈接和按鈕，比如“保存”和“提交”。次級行為用來確保用戶可以撤消已輸入的信息，例如“后退”和“取消”。如果誤點擊，次級行為通常有不良的后果，因而在可能的情況下只能使用主要行為。如果你必須使用次級行為，那么不能讓次級行為在視覺上比主要行為明顯。

沒有明確區分主要行為和次要行為，這會很容易導致提交失敗。該表單是St. Louis Community College招生用的，上面的操作按鈕被放置在這個廠表單的底部。試想一下，多么容易意外按下“Reset form”按鈕。

• 命名規則

避免使用通用詞，如“提交”作為動作，因為它們給人的印象是表單本身是通用的。像“加入LinkedIn”之類的詞語或詞組應該是首選的。

雖然可口可樂網站正確地強調了主要行為按鈕，但是放置了一個普通的詞“提交”?！白约尤胛覀儭睂杏?。

4. 幫助

• 表單的解釋文字

你應該從來沒有向用戶解釋如何填寫表單。如果它看起來不像一個表單或者它填起來太復雜，那么重新設計將是你唯一的選擇。相應的文字只應該在需要的地方使用，如解釋為何需要信用卡信息和出生日期以及為何要鏈接到“條款及服務”。為了表單簡潔，易于閱讀，這樣的文字往往被忽略。作為一個條經驗法則，總共的解釋文字不應超過100字。

• 用戶觸發式幫助和動態幫助

與其在每個輸入框旁邊添加說明文字，還不如只在需要的地方顯示。你可以在輸入框旁邊顯示一個圖標，當用戶需要有關該輸入框的幫助時，可以點擊該圖標。更妙的是，當用戶點擊輸入框輸入信息的時候，可以顯示動態的幫助信息。這樣的做法變得越來越普遍，并且相對容易用JavaScript庫（比如jQuery）實現。

Skype網站的注冊表單采用了用戶觸發式幫助（藍色的方塊是由點擊問號引發的）和動態幫助（用戶名建議）。

5. 信息

• 錯誤信息

錯誤信息通知用戶發生了錯誤，它通常阻止用戶繼續填寫表單。強調錯誤信息的方法有很多，可以是色彩（通常為紅色），或是大家熟悉的圖片（如警告標志），或是突出物（通常是在表單的頂部或是錯誤發生的地方），又或者是以上方法的綜合。

• 成功信息

使用成功信息通知用戶，他們在表單中已經達到了一個有意義的里程碑。如果表單很長，一條成功消息會鼓勵用戶繼續填寫。如同錯誤信息，成功信息也應該突出顯示。但它們不應該妨礙用戶繼續進行下去。

6. 驗證

• 只出現在需要的地方

過多的驗證非常糟糕，因為它妨礙了用戶繼續。精簡驗證，以確認關鍵內容（如用戶名的可用性）和確保真實答案（如年齡不允許超過130歲），并且給出一組有建設性的參考回答，這些可能的數據要限量并能夠在一個下拉菜單中顯示（如國家代碼首字母）。

• 智能默認值

使用智能默認使用戶完成表單速度更快、更準確。例如，根據用戶的IP地址預先選擇他們所在的國家。但使用時要小心，因為用戶往往會忽略默認選擇。

Twitter網站的注冊表單既使用了動態驗證（驗證了姓名、電子郵箱地址、密碼和用戶名）也使用了智能默認（“登錄網站”）。

結論

如果覺得分析的還不錯，就把它應用到自己的表單設計中吧。正如我開頭處寫的那樣，僅僅調整UI走捷徑是不會讓你的表單更加好用的。我還有什么可說的呢？這些理論現在已經是你的了，趕快實際動手操作吧。

作者：小白，微信公眾號：小白的交互設計

本文由 @小白 原創發布于人人都是產品經理。未經許可，禁止轉載。