在這篇文章中，我們將提供一些你可以很容易遵循的指導(dǎo)方針。通過可用性測試、現(xiàn)場測試、網(wǎng)站跟蹤、眼動(dòng)追蹤、網(wǎng)絡(luò)分析以及用戶對(duì)客服的真實(shí)反饋，精心制作出這些準(zhǔn)則。

一、為什么網(wǎng)頁表單可用性如此重要

ISO 9241國際標(biāo)準(zhǔn)定義了網(wǎng)站可用性為“有效性，效率和用戶主觀滿意度以及特定用戶在特定使用環(huán)境下所達(dá)到的特定目標(biāo)?！碑?dāng)用戶使用網(wǎng)站時(shí)會(huì)有一個(gè)特定目標(biāo)，如果設(shè)計(jì)得好，網(wǎng)站將實(shí)現(xiàn)這一目標(biāo)，這是整個(gè)網(wǎng)站開發(fā)團(tuán)隊(duì)所期待。而橫在目標(biāo)用戶和設(shè)計(jì)者的往往是表單，因?yàn)?，盡管人機(jī)交互的發(fā)展進(jìn)步，表單仍然是用戶在網(wǎng)絡(luò)中進(jìn)行交互的主要方式。事實(shí)上，表單往往被認(rèn)為是完成目標(biāo)的最終、也是最重要的階段。

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

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

因此，表單和可用性之間的關(guān)系有兩個(gè)方面：

• 表單可以使一個(gè)網(wǎng)站好用或是不好用，因?yàn)樗麄冋驹谟脩舻慕嵌葋韺?shí)現(xiàn)他們的目標(biāo)；
• 表單需要好用，用來幫助用戶實(shí)現(xiàn)目標(biāo)。

這篇文章將重點(diǎn)放在第二點(diǎn)上，因?yàn)楹糜玫谋韱巫匀挥兄谠摼W(wǎng)站的整體可用性，因此作為第一個(gè)方面考慮。

二、網(wǎng)頁表單的六個(gè)組成部分

網(wǎng)頁表單是必要的，而往往是設(shè)計(jì)師和用戶的痛點(diǎn)。隨著時(shí)間的推移，用戶已經(jīng)形成一種期望，表單的外觀應(yīng)該如何以及如何運(yùn)作。他們通常期望網(wǎng)頁表單有以下六個(gè)組成部分：

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

Skype網(wǎng)站的注冊表單包含了六個(gè)組成部分。

三、通過表單的三個(gè)方面的解決可用性

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

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

為了使表單具有可用性，這三個(gè)方面都需要加以應(yīng)對(duì)。讓我們來看看各個(gè)方面，進(jìn)而找出如何讓表單真正具有可用性，并且很容易掌握的實(shí)用的指導(dǎo)方針。

第一方面：關(guān)系

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

考慮到這一點(diǎn)，有以下一些原則：

建立關(guān)系是基于信任之上的，所以在表單中建立信任至關(guān)重要?？梢酝ㄟ^標(biāo)識(shí)、圖像、色彩、排版和文字來達(dá)到這個(gè)目的。精心組織的表單會(huì)讓用戶感到放心。

每個(gè)關(guān)系都有一個(gè)目的，可能是浪漫關(guān)系下的愛和幸福，或是業(yè)務(wù)關(guān)系的經(jīng)濟(jì)收益。問問自己，你的表單目的是什么？

表單名稱表明表單的目的。表單的名稱告知用戶這個(gè)表單是關(guān)于什么內(nèi)容的，以及為什么需要他們填寫。

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

了解你的用戶也將幫助你選擇適當(dāng)?shù)拇朕o，并刪除多余的文字。而且，它會(huì)有助于你制作出平衡用戶需求和你的需求的界面。

不要問表單范圍以外的問題。在一段關(guān)系中，你會(huì)不相信這些問不合時(shí)宜問題的人，同樣的事情也會(huì)發(fā)生在網(wǎng)絡(luò)上。與利益相關(guān)者磋商，探討一下什么信息是真正被需要的。

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

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

另一方面，Amazon網(wǎng)站為新用戶簡化了注冊過程

第二方面：對(duì)話

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

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

從這個(gè)角度看表單，產(chǎn)生了一些有用的指導(dǎo)原則：

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

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

將相關(guān)信息編組，如個(gè)人詳細(xì)信息。從一組問題到下一組的過渡更像是一個(gè)對(duì)話。

Yahoo的注冊表單通過紫色的標(biāo)題和細(xì)線，有效地將相關(guān)內(nèi)容分組。

雖然Constant Contact網(wǎng)站將相關(guān)內(nèi)容分組，但是它把組分離的太遠(yuǎn)，這可能會(huì)給用戶造成迷惑。

如同一個(gè)真實(shí)對(duì)話，每個(gè)標(biāo)簽應(yīng)該在一個(gè)時(shí)間里解決一個(gè)主題，幫助用戶在輸入框中做出回答。

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

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

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

第三方面：外觀

外觀或是用戶界面（UI）是網(wǎng)頁表單可用性的核心，對(duì)此有幾項(xiàng)準(zhǔn)則。為了簡化討論，我們把它們分成六點(diǎn)（前面有所提及）。

1. 標(biāo)簽

• 詞語?vs. 句子：

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

Amazon網(wǎng)站的注冊表單采用了完整的句子，然而幾個(gè)單詞就足夠了。

• 句首字母大寫?vs. 按標(biāo)題格式大小寫：

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

看看快速瀏覽Barnes & Noble’s網(wǎng)站的注冊表單標(biāo)簽是多么困難！

• 標(biāo)簽以冒號(hào)結(jié)束：

針對(duì)一些桌面應(yīng)用程序和操作系統(tǒng)（如Windows）的UI設(shè)計(jì)準(zhǔn)則，建議在表單標(biāo)簽結(jié)束處添加冒號(hào)。一些線上表單的設(shè)計(jì)師堅(jiān)持這一點(diǎn)，主要是因?yàn)榕f屏幕閱讀者主要依靠冒號(hào)識(shí)別一個(gè)標(biāo)簽?，F(xiàn)代的屏幕閱讀者依賴于標(biāo)記（特別是標(biāo)簽標(biāo)記）。另外，冒號(hào)是個(gè)見仁見智的問題，只要保持風(fēng)格一致，它既不會(huì)加強(qiáng)也不會(huì)有損于表單的可用性。

• 標(biāo)簽的對(duì)齊方式：頂對(duì)齊?vs. 左對(duì)齊?vs. 右對(duì)齊

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

Matteo Penzo根據(jù)表單標(biāo)簽對(duì)齊方式研究出的時(shí)間表。

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

2. 輸入框

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

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

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

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

• 必填項(xiàng)?vs.?選填項(xiàng)

明確地區(qū)分出哪些輸入框用戶不能不填。習(xí)慣上使用一個(gè)星號(hào)（*）表示必填。任何符號(hào)都可以，只要標(biāo)識(shí)說明清晰可見地表明是什么意思就行（即使它是一個(gè)星號(hào)）。

3. 行為

• 主要行為?vs. 次級(jí)行為

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

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

• 命名規(guī)則

避免使用通用詞，如“提交”作為動(dòng)作，因?yàn)樗鼈兘o人的印象是表單本身是通用的。像“加入LinkedIn”之類的詞語或詞組應(yīng)該是首選的。

雖然可口可樂網(wǎng)站正確地強(qiáng)調(diào)了主要行為按鈕，但是放置了一個(gè)普通的詞“提交”?！白约尤胛覀儭睂?huì)更有用。

4. 幫助

• 表單的解釋文字

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

• 用戶觸發(fā)式幫助和動(dòng)態(tài)幫助

與其在每個(gè)輸入框旁邊添加說明文字，還不如只在需要的地方顯示。你可以在輸入框旁邊顯示一個(gè)圖標(biāo)，當(dāng)用戶需要有關(guān)該輸入框的幫助時(shí)，可以點(diǎn)擊該圖標(biāo)。更妙的是，當(dāng)用戶點(diǎn)擊輸入框輸入信息的時(shí)候，可以顯示動(dòng)態(tài)的幫助信息。這樣的做法變得越來越普遍，并且相對(duì)容易用JavaScript庫（比如jQuery）實(shí)現(xiàn)。

Skype網(wǎng)站的注冊表單采用了用戶觸發(fā)式幫助（藍(lán)色的方塊是由點(diǎn)擊問號(hào)引發(fā)的）和動(dòng)態(tài)幫助（用戶名建議）。

5. 信息

• 錯(cuò)誤信息

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

• 成功信息

使用成功信息通知用戶，他們在表單中已經(jīng)達(dá)到了一個(gè)有意義的里程碑。如果表單很長，一條成功消息會(huì)鼓勵(lì)用戶繼續(xù)填寫。如同錯(cuò)誤信息，成功信息也應(yīng)該突出顯示。但它們不應(yīng)該妨礙用戶繼續(xù)進(jìn)行下去。

6. 驗(yàn)證

• 只出現(xiàn)在需要的地方

過多的驗(yàn)證非常糟糕，因?yàn)樗恋K了用戶繼續(xù)。精簡驗(yàn)證，以確認(rèn)關(guān)鍵內(nèi)容（如用戶名的可用性）和確保真實(shí)答案（如年齡不允許超過130歲），并且給出一組有建設(shè)性的參考回答，這些可能的數(shù)據(jù)要限量并能夠在一個(gè)下拉菜單中顯示（如國家代碼首字母）。

• 智能默認(rèn)值

使用智能默認(rèn)使用戶完成表單速度更快、更準(zhǔn)確。例如，根據(jù)用戶的IP地址預(yù)先選擇他們所在的國家。但使用時(shí)要小心，因?yàn)橛脩敉鶗?huì)忽略默認(rèn)選擇。

Twitter網(wǎng)站的注冊表單既使用了動(dòng)態(tài)驗(yàn)證（驗(yàn)證了姓名、電子郵箱地址、密碼和用戶名）也使用了智能默認(rèn)（“登錄網(wǎng)站”）。

結(jié)論

如果覺得分析的還不錯(cuò)，就把它應(yīng)用到自己的表單設(shè)計(jì)中吧。正如我開頭處寫的那樣，僅僅調(diào)整UI走捷徑是不會(huì)讓你的表單更加好用的。我還有什么可說的呢？這些理論現(xiàn)在已經(jīng)是你的了，趕快實(shí)際動(dòng)手操作吧。

作者：小白，微信公眾號(hào)：小白的交互設(shè)計(jì)

本文由 @小白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。