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

目錄

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

概要

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

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

1. 表單組成

常見的表單有以下五個部分：

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

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

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

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

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

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

只保留必要的字段

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

按照邏輯順序排列

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

聚合相關(guān)字段

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

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

一列還是多列？

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

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

3.輸入字段

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

字段數(shù)量

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

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

必填還是選填？

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

MailChimp郵件列表的訂閱表單。

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

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

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

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

輸入掩碼

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

（Image: Josh Morony）

PC端：鍵盤適配

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

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

PC端：自動聚焦

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

移動端：適配鍵盤

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

（Image: Google）

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

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

4.標(biāo)簽

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

字?jǐn)?shù)

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

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

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

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

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

避免全部大寫

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

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

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

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

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

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

（Image: CSS-Tricks）

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

（Image: CSS-Tricks）

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

（Image: CSS-Tricks）

提示：如果您希望用戶快速掃描表單，請將標(biāo)簽放在字段上方。這種布局將更容易掃描，因?yàn)檠劬苯酉蛳乱苿禹撁?。但是，如果您希望用戶仔?xì)閱讀，請將標(biāo)簽放在字段的左側(cè)。 這種布局會減慢閱讀器的速度，并使其以Z型模式進(jìn)行掃描。

占位符文本

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

（Image: snapwi）

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

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

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

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

（Image: MDS）

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

5.按鈕

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

主要按鈕和次要按鈕

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

相同及不同的視覺等級（Image: Luke Wroblewski）

按鈕位置

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

命名規(guī)則

避免使用如“提交”之類的通用詞語來表示，因?yàn)樗鼘τ谌魏伪韱嗡坪醵歼m用。命名應(yīng)該說明按鈕在點(diǎn)擊時將執(zhí)行的操作，例如“創(chuàng)建帳戶”。

多按鈕

避免多個按鈕，因?yàn)樗鼈兛赡軙稚⒂脩舻哪康?。每個流程都應(yīng)該有一個明確的目的，確保用戶朝著這個方向。

重置按鈕是

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

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

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

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

可視化反饋

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

（Image: Micha?l Villar）

6. 驗(yàn)證

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

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

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

（Image: Stack Exchange）

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

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

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

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

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

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

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

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

混合策略：盡早獎勵，延遲懲罰。（Image: Medium）

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

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

采用自然語言

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

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

對話式表單

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

8.結(jié)論

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

作者：Nick Babich

譯者：吉諾是比利

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

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

題圖來自unsplash，基于CC0協(xié)議