用戶可能不愿意填寫表格，所以盡可能簡(jiǎn)單，微小的變化都有可能極大的提高用戶體驗(yàn)。

目錄

1. 表單組成
2. 表單結(jié)構(gòu)
3. 輸入字段
4. 標(biāo)簽
5. 按鈕
6. 驗(yàn)證
7. 會(huì)話界面：設(shè)計(jì)表單的新方式
8. 總結(jié)

概要

用戶使用應(yīng)用或網(wǎng)站都有一個(gè)目的。通常，用戶實(shí)現(xiàn)目標(biāo)的的方式之一就是表單。 表單仍然是用戶在網(wǎng)頁(yè)和應(yīng)用中最重要的交互類型之一。大多數(shù)情況下，表單往往是完成目標(biāo)的最后一步。用戶應(yīng)該能夠快速完成表單。

在本文中，您將看到從可用性測(cè)試、試驗(yàn)測(cè)試、眼動(dòng)追蹤研究以及用戶的投訴中獲得的實(shí)用技巧。這些技巧被正確使用時(shí)，能夠產(chǎn)生更簡(jiǎn)單，更高效的表單體驗(yàn)。在文章的最后，還將找介紹一種設(shè)計(jì)表單的新方法。

1. 表單組成

常見的表單有以下五個(gè)部分：

• 結(jié)構(gòu)：這包括字段順序，表單在頁(yè)面上的顯示以及多個(gè)字段之間的邏輯關(guān)系。
• 輸入字段：這些字段包括文本字段，密碼字段，復(fù)選框，單選按鈕，滑塊和任何其他用于輸入的字段。
• 文本標(biāo)簽：告訴用戶相應(yīng)的輸入字段的含義。
• 動(dòng)作按鈕：當(dāng)用戶按下該按鈕時(shí)，執(zhí)行動(dòng)作。
• 反饋：通過反饋使用戶了解他們的輸入結(jié)果。 大多數(shù)應(yīng)用和網(wǎng)站使用純文本作為反饋的形式。

表單也可能包含以下內(nèi)容：

• 輔助信息：解釋如何填寫表單。
• 驗(yàn)證：自動(dòng)檢查用戶的數(shù)據(jù)是否有效。

本文將介紹表單結(jié)構(gòu)、輸入字段、標(biāo)簽、按鈕和驗(yàn)證的許多方面。

2. 表單結(jié)構(gòu)

表單是一種對(duì)話。 就像對(duì)話一樣，它應(yīng)該由兩方之間的邏輯通信組成：用戶和應(yīng)用。

只保留必要的字段

確保只有真正需要的字段。添加到表單的每個(gè)額外字段都會(huì)影響轉(zhuǎn)換率。要一直思考為什么要向用戶請(qǐng)求這些信息以及將會(huì)如何使用它。

按照邏輯順序排列

從用戶的角度而不是從應(yīng)用或數(shù)據(jù)庫(kù)的角度來(lái)提問。比如，在他們的名字之前詢問某人的地址是不合理的。

聚合相關(guān)字段

將相關(guān)字段分組集合。從一組問題到下一組問題的方式更像對(duì)話。 將相關(guān)字段分組在一起也能幫助用戶理解需要填寫的信息。比較下面的兩種信息表單的方式。

聚合相關(guān)字段 （Image: Nielsen Norman Group）

一列還是多列？

多列展示表單字段的問題之一，就是用戶填寫字段的順序可能會(huì)偏離預(yù)期。如果一個(gè)表單多列字段，那么用戶必須以Z模式進(jìn)行掃描，從而降低了理解的速度并使完成的路徑混亂。但是，如果在一個(gè)列中，則完成的路徑是明確的一條直線。

在左邊，有許多方式解釋表單字段之間的關(guān)系，而在右側(cè)是明確的直線。

3.輸入字段

輸入字段是使用戶填寫的字段，比如文本字段、密碼字段、下拉菜單、復(fù)選框、單選框、日期選擇器等等。

字段數(shù)量

表單設(shè)計(jì)中的一個(gè)經(jīng)驗(yàn)法就是，越短越好。這當(dāng)然看起來(lái)很直觀：降低用戶的成本，提高轉(zhuǎn)換率。因此，盡可能減少字段的數(shù)量。 這會(huì)讓你的表單感覺更簡(jiǎn)單，特別是當(dāng)你需要用戶填寫大量的信息時(shí)。但是，不要過頭。 在給定的時(shí)間只顯示五到七個(gè)輸入字段是常見的做法。

在一個(gè)容易填寫的字段中聚合多個(gè)字段，如地址 （Image: Luke Wroblewski）

必填還是選填？

盡量避免表單中的選填字段。但是如果要使用它們，一定要清楚地區(qū)分哪些輸入字段是必填的。一般對(duì)必填字段使用星號(hào)（*）。 如果您決定在必填字段中使用星號(hào)，請(qǐng)?jiān)诒韱雾?yè)面顯示一個(gè)提示，說(shuō)明星號(hào)的用途，因?yàn)椴皇敲總€(gè)人都明白它的含義。

MailChimp郵件列表的訂閱表單。

設(shè)置默認(rèn)值

避免設(shè)置默認(rèn)值，除非您認(rèn)為大部分用戶將選擇該值，尤其是必填字段。為什么？
因?yàn)槟憧赡軙?huì)增加錯(cuò)誤。用戶會(huì)快速掃描表單，所以他們可能會(huì)跳過一些已經(jīng)有默認(rèn)值的字段。

但是這個(gè)規(guī)則不適用于智能的默認(rèn)值——也就是根據(jù)用戶的信息設(shè)置的默認(rèn)值。智能的默認(rèn)值可以使表單更快，更準(zhǔn)確地完成。例如，根據(jù)定位數(shù)據(jù)預(yù)先選擇用戶所在的國(guó)家/地區(qū)。不過，請(qǐng)謹(jǐn)慎使用。

智能預(yù)先選國(guó)家的表單

輸入掩碼

字段掩碼是一種幫助用戶格式化輸入文本的技術(shù)。一旦用戶將焦點(diǎn)集中在一個(gè)字段上，就會(huì)出現(xiàn)一個(gè)掩碼，并且在字填寫時(shí)自動(dòng)對(duì)文本進(jìn)行格式化，幫助用戶專注于所需的數(shù)據(jù)并且更容易地發(fā)現(xiàn)錯(cuò)誤。在下面的例子中，當(dāng)輸入電話號(hào)碼和信用卡號(hào)碼時(shí)，會(huì)自動(dòng)應(yīng)用括號(hào)、空格和破折號(hào)。 這個(gè)簡(jiǎn)單的技術(shù)可以節(jié)省輸入電話號(hào)碼、信用卡、貨幣時(shí)的時(shí)間和精力。

（Image: Josh Morony）

PC端：鍵盤適配

用戶只使用鍵盤也應(yīng)該能完成表單。用戶的手指不離開鍵盤，就能輕松編輯字段。 您可以在W3C的設(shè)計(jì)模式指南中找到關(guān)于鍵盤交互的詳細(xì)要求。

即使是一個(gè)簡(jiǎn)單的日期選擇器也應(yīng)該遵守W3C的指南。 （Image: Salesforce）

PC端：自動(dòng)聚焦

自動(dòng)對(duì)焦字段為用戶提供指示和起點(diǎn)，以便于快速開始填寫表格。提供一個(gè)清晰的視覺信號(hào)，焦點(diǎn)已轉(zhuǎn)移，無(wú)論是通過改變顏色，閃爍的箭頭。亞馬遜的注冊(cè)表格既有自動(dòng)對(duì)焦又有可視化的指示。

移動(dòng)端：適配鍵盤

手機(jī)用戶喜歡提供適當(dāng)鍵盤的應(yīng)用。應(yīng)該在在整個(gè)應(yīng)用中實(shí)現(xiàn)鍵盤適配，而不僅僅是某些任務(wù)。

（Image: Google）

限制輸入（自動(dòng)補(bǔ)全）

隨著越來(lái)越多的人使用手機(jī)，減少不必要的打字將提高用戶體驗(yàn)，并減少錯(cuò)誤。 自動(dòng)補(bǔ)全可以減少打字量。 例如，填寫地址欄通常是表單中最成問題的部分，像地址自動(dòng)填充（基于用戶的定位和輸入提供準(zhǔn)確的建議）的工具使用戶能以更少打字量完成輸入。

4.標(biāo)簽

清晰的標(biāo)簽是使界面容易理解的方法之一。一個(gè)好的標(biāo)簽會(huì)告訴用戶該區(qū)域的目的，當(dāng)焦點(diǎn)在該區(qū)域時(shí)應(yīng)該要保持可見，并且即使在被填充之后也要可見。

字?jǐn)?shù)

標(biāo)簽不是幫助文檔。應(yīng)該使用簡(jiǎn)潔的描述性文字，以便于用戶快速掃描表單。以前版本的亞馬遜注冊(cè)表單中包含了很多詞匯，導(dǎo)致完成率較低。 目前的版本好多了，標(biāo)簽也很簡(jiǎn)短。

句子樣式，還是標(biāo)題樣式？

在大多數(shù)應(yīng)用中，采用大寫字母有兩種方式：

• 標(biāo)題樣式：每個(gè)詞的首字母大寫。 “This Is Title Case.”。
• 句子樣式：句子的首字母大寫?！癟his is sentence case.”。

與標(biāo)題樣式相比，句子樣式的標(biāo)簽有一個(gè)優(yōu)點(diǎn)：讀起來(lái)稍微容易一些（因此速度更快）。雖然對(duì)于短標(biāo)簽的差異可以忽略不計(jì)（“Full Name”和“Full name”），但對(duì)于較長(zhǎng)的標(biāo)簽，差異會(huì)比較明顯。

避免全部大寫

切勿全部大寫，否則表單將難以閱讀，難以快速掃描。

全部大寫的標(biāo)簽是非常難以閱讀的。

標(biāo)簽的對(duì)齊方式：左對(duì)齊、右對(duì)齊、頂部對(duì)其

Matteo Penzo 于2006年發(fā)布的關(guān)于標(biāo)簽放置的文章表明，如果標(biāo)簽位于字段之上，表格的完成速度會(huì)更快。 如果您希望用戶盡快掃描表單，則頂部對(duì)齊的標(biāo)簽是很好的。

左對(duì)齊，右對(duì)齊和頂部對(duì)齊的標(biāo)簽（Image: UX Matters）

頂級(jí)標(biāo)簽的最大優(yōu)勢(shì)是不同尺寸的標(biāo)簽和版本可以更容易的融入到用戶界面中。（這對(duì)空間有限的屏幕特別有用）

（Image: CSS-Tricks）

左對(duì)齊標(biāo)簽最大的缺點(diǎn)是它的完成時(shí)間最慢。 這可能是因?yàn)闃?biāo)簽和輸入字段之間的視覺距離。標(biāo)簽越短，距離輸入越遠(yuǎn)。但是，緩慢完成率并不總是一件壞事，特別是如果表單要求敏感數(shù)據(jù)。 如果您要求提供駕駛證號(hào)碼或社會(huì)安全號(hào)碼，可能會(huì)故意減慢用戶的速度，以確保正確輸入。因此，閱讀敏感數(shù)據(jù)標(biāo)簽的時(shí)間是可以接受的。左對(duì)齊的標(biāo)簽還有另一個(gè)缺點(diǎn)：它們需要更多的橫向空間，這對(duì)于移動(dòng)應(yīng)用來(lái)說(shuō)可能是個(gè)問題。

（Image: CSS-Tricks）

右對(duì)齊標(biāo)簽的最大優(yōu)點(diǎn)是標(biāo)簽和輸入之間明確的視覺關(guān)聯(lián)。彼此靠近的項(xiàng)目應(yīng)該是相關(guān)的。對(duì)于簡(jiǎn)短的表格，右對(duì)齊的標(biāo)簽可以有很快的完成時(shí)間。 缺點(diǎn)是體驗(yàn)并不舒服： 左邊緣參差不齊，這使得看起來(lái)更不舒服，更難以閱讀。

（Image: CSS-Tricks）

提示：如果您希望用戶快速掃描表單，請(qǐng)將標(biāo)簽放在字段上方。這種布局將更容易掃描，因?yàn)檠劬?huì)直接向下移動(dòng)頁(yè)面。但是，如果您希望用戶仔細(xì)閱讀，請(qǐng)將標(biāo)簽放在字段的左側(cè)。 這種布局會(huì)減慢閱讀器的速度，并使其以Z型模式進(jìn)行掃描。

占位符文本

一旦字段獲得焦點(diǎn)，在輸入字段中設(shè)置為占位符的標(biāo)簽將消失; 用戶將不能再查看它。 雖然占位符文本可能適用于兩個(gè)字段的表單（比如，帶有用戶名和密碼字段的簡(jiǎn)單表單），但當(dāng)用戶需要更多信息時(shí)，占位符的體驗(yàn)會(huì)比較差。

（Image: snapwi）

一旦用戶點(diǎn)擊字段，標(biāo)簽將消失，因此用戶無(wú)法仔細(xì)檢查他們是否寫下了所要求的內(nèi)容。這增加了錯(cuò)誤的可能性。另外一個(gè)問題是，用戶可能會(huì)把占位符文本誤認(rèn)為預(yù)填數(shù)據(jù)，因此忽略它（正如尼爾森諾曼

集團(tuán)的眼動(dòng)追蹤研究所證實(shí)的）。

占位符文本作為標(biāo)簽

占位符文本的一個(gè)很好的解決方案是浮動(dòng)標(biāo)簽。 占位符文本將默認(rèn)顯示，但是一旦輸入字段被點(diǎn)擊并輸入文本，占位符文本淡出，變更為頂部對(duì)齊的標(biāo)簽。

（Image: MDS）

提示：不要只依靠占位符文本，因?yàn)橐坏┮粋€(gè)字段被填寫，占位符文本將不再可見。使用浮動(dòng)標(biāo)簽，可以方便用戶確定他們填寫了正確的字段。

5.按鈕

點(diǎn)擊后，按鈕會(huì)觸發(fā)一些動(dòng)作，例如提交表單。

主要按鈕和次要按鈕

主要和次要按鈕之間缺乏視覺上的區(qū)分很容易導(dǎo)致失敗。降低次要行為的視覺突出，最大限度地減少錯(cuò)誤的概率。

相同及不同的視覺等級(jí)（Image: Luke Wroblewski）

按鈕位置

復(fù)雜的表單通常需要一個(gè)后退按鈕。如果這樣的按鈕位于輸入字段的正下方（如下面第一個(gè)截圖所示），用戶可能會(huì)不小心點(diǎn)擊它。由于后退按鈕是輔助操作，因此要在視覺上區(qū)分（下面第二個(gè)表單的按鈕更加合理）。

命名規(guī)則

避免使用如“提交”之類的通用詞語(yǔ)來(lái)表示，因?yàn)樗鼘?duì)于任何表單似乎都適用。命名應(yīng)該說(shuō)明按鈕在點(diǎn)擊時(shí)將執(zhí)行的操作，例如“創(chuàng)建帳戶”。

多按鈕

避免多個(gè)按鈕，因?yàn)樗鼈兛赡軙?huì)分散用戶的目的。每個(gè)流程都應(yīng)該有一個(gè)明確的目的，確保用戶朝著這個(gè)方向。

重置按鈕是

不要使用重置按鈕。這個(gè)按鈕幾乎沒有意義，并經(jīng)常損害體驗(yàn)。

按鈕的視覺表現(xiàn)

確保按鈕看起來(lái)像按鈕：讓用戶明白它是可以點(diǎn)擊的。

陰影表示可以點(diǎn)擊。 （Image: Vadim Gromov）

可視化反饋

設(shè)計(jì)“提交”按鈕時(shí)，要清楚地告知用戶正在處理后。 必須向用戶提供反饋，同時(shí)防止雙重提交。

（Image: Micha?l Villar）

6. 驗(yàn)證

驗(yàn)證錯(cuò)誤是不可避免的，并且是數(shù)據(jù)錄入的不可缺少的環(huán)節(jié)（因?yàn)橛脩羧菀追稿e(cuò)誤）。雖然應(yīng)該盡量減少出錯(cuò)的情況，但是驗(yàn)證錯(cuò)誤永遠(yuǎn)不能缺少。所以，最重要的問題是，你如何使用戶輕松糾正錯(cuò)誤？

實(shí)時(shí)驗(yàn)證

用戶不喜歡在提交時(shí)才發(fā)現(xiàn)他們犯了錯(cuò)誤。特別令人沮喪的是完成一個(gè)長(zhǎng)的表單，并“提交”之后，得到了多個(gè)錯(cuò)誤消息。當(dāng)你不清楚你在哪里犯了什么錯(cuò)誤的時(shí)候更加惱人。

（Image: Stack Exchange）

一旦用戶輸入數(shù)據(jù)，應(yīng)該立即告知用戶文本的正確性。好的表單驗(yàn)證的主要原則是：與用戶交談！ 告訴他們什么是錯(cuò)的！ 實(shí)時(shí)驗(yàn)證會(huì)可以告知用戶其數(shù)據(jù)的正確性。

這種方法允許他們更快地糾正錯(cuò)誤，而不必等到按下“提交”按鈕才能看到錯(cuò)誤。

但是，請(qǐng)避免驗(yàn)證每個(gè)字段，因?yàn)樵诖蠖鄶?shù)情況下，只有在完成輸入之前，就進(jìn)行驗(yàn)證。因此在數(shù)據(jù)輸入過程中驗(yàn)證的字段一旦開始輸入數(shù)據(jù)，就會(huì)出現(xiàn)錯(cuò)誤。

Google的表單在輸入完成之前，就會(huì)指出電子郵件地址無(wú)效。 （Image: Medium）

若驗(yàn)證發(fā)生在用戶完成輸入之后，用戶不能即時(shí)獲知已糾正錯(cuò)誤。

在Apple Store中，驗(yàn)證發(fā)生在輸入完成之后。（Image: Medium）

Mihael Konjevi? 在他的《表格中的內(nèi)聯(lián)驗(yàn)證：設(shè)計(jì)體驗(yàn)》中，考察了不同的驗(yàn)證策略，并提出了一個(gè)滿足雙種情況的混合策略：獎(jiǎng)勵(lì)早，懲罰晚。

• 如果用戶在處于已驗(yàn)證正確的字段（即先前輸入的數(shù)據(jù)是有效的）中輸入數(shù)據(jù)，則在數(shù)據(jù)輸入后驗(yàn)證。
• 如果用戶在處于已驗(yàn)證錯(cuò)誤的字段（即以前輸入的數(shù)據(jù)無(wú)效）中輸入數(shù)據(jù)，則在數(shù)據(jù)輸入過程中進(jìn)行驗(yàn)證。

混合策略：盡早獎(jiǎng)勵(lì)，延遲懲罰。（Image: Medium）

7.會(huì)話界面：設(shè)計(jì)表單的新方法

最近，我們看到了很多關(guān)于會(huì)話界面和聊天機(jī)器人中令人興奮的方法。這種現(xiàn)象有幾種趨勢(shì)，其中有一點(diǎn)是人們花在消息傳遞應(yīng)用上的時(shí)間多于在社交應(yīng)用上的時(shí)間。這使得在對(duì)話中支持交互的方法產(chǎn)生了大量的嘗試，例如在購(gòu)物應(yīng)用中，通常模仿消息傳遞的方式。即使在這種趨勢(shì)下，交互形式已經(jīng)發(fā)生了變化。設(shè)計(jì)師正在嘗試將傳統(tǒng)的網(wǎng)頁(yè)形式轉(zhuǎn)換成交互式的對(duì)話界面。

采用自然語(yǔ)言

每個(gè)界面都是一個(gè)對(duì)話。傳統(tǒng)的形式已經(jīng)與對(duì)話非常相似。唯一的不足就是我們提問的方式。但是，如果我們?cè)O(shè)計(jì)表單時(shí)，以貼近真實(shí)人類（而非機(jī)器）對(duì)話的方式來(lái)提問問題呢？ 所以，而要用人類的方式與進(jìn)行交互。下面的表單創(chuàng)建了一個(gè)會(huì)話，不需要依賴于web表單的傳統(tǒng)元素（如標(biāo)簽和輸入字段）。

Codrops的表單設(shè)計(jì)采用對(duì)話模式來(lái)更好地幫助用戶完成任務(wù)。

對(duì)話式表單

會(huì)話表單是一個(gè)開源的項(xiàng)目，將網(wǎng)頁(yè)上的表單轉(zhuǎn)換為對(duì)話。它能將所有輸入元素替換為對(duì)話，可復(fù)用變量，也實(shí)現(xiàn)了對(duì)樣式的完全定制和控制。這個(gè)項(xiàng)目代表了我們思考用戶體驗(yàn)和交互的有趣轉(zhuǎn)變，使用基于文本的對(duì)話來(lái)幫助用戶實(shí)現(xiàn)他們的目標(biāo)。

8.結(jié)論

用戶可能不愿意填寫表格，所以盡可能簡(jiǎn)單。微小的變化（例如聚合相關(guān)字段并指出字段的含義）可以顯顯著提高用戶體驗(yàn)。可用性測(cè)試在表單設(shè)計(jì)中是不可或缺的。很多時(shí)候，只用幾個(gè)人進(jìn)行測(cè)試，或者只是要求一個(gè)同事通過一個(gè)原型就可以讓你很好地洞察一個(gè)表單的可用性。

作者：Nick Babich

譯者：吉諾是比利

原文地址：https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/

本文系人人都是產(chǎn)品經(jīng)理翻譯團(tuán)隊(duì)@吉諾是比利 翻譯發(fā)布，未經(jīng)本站允許，禁止轉(zhuǎn)載。

題圖來(lái)自u(píng)nsplash，基于CC0協(xié)議