8個(gè)原則！幫你創(chuàng)建用戶友好表單

表單對(duì)于企業(yè)和小我同樣至關(guān)緊張，當(dāng)涉及到數(shù)據(jù)收集時(shí)，我們大多數(shù)情況下會(huì)采用表單（或許是由于在互聯(lián)網(wǎng)繁榮之前我們就已經(jīng)在線下使用了很久的表單）。因此建立一個(gè)用戶友愛的表單是增長填寫完成率的關(guān)鍵。

之前圖趣分享的精品教程《用3個(gè)案例，讓你學(xué)會(huì)移動(dòng)端的長表單設(shè)計(jì)》，《關(guān)于表單設(shè)計(jì)的知識(shí)點(diǎn)，這篇總結(jié)相當(dāng)全面》

一、表單解析

表單的目的、內(nèi)容、大小長度等雖然各不雷同，但基本元素比較固定；合理組織這些元素有助于用戶輕松完成表單填寫。

△ Amazon創(chuàng)建賬戶表單解析

• 題目：這個(gè)元素幫助用戶指導(dǎo)完成表單填寫的整個(gè)過程，當(dāng)你把信息分成許多組來讓用戶填寫的時(shí)候，題目就分外有效。例如：小我資料、職業(yè)詳情、財(cái)務(wù)明細(xì)。

• 標(biāo)簽：標(biāo)簽告訴用戶在任何特定的輸入?yún)^(qū)域期望他們填寫什么內(nèi)容。

• 占位符 ：占位符是對(duì)標(biāo)簽進(jìn)行額外的信息描述。

• 錯(cuò)誤信息提醒：錯(cuò)誤信息提醒給予用戶錯(cuò)誤反饋，提示用戶為什么填錯(cuò)了。

• 動(dòng)作按鈕：動(dòng)作按鈕是在表單的結(jié)尾，有個(gè)確認(rèn)提交的動(dòng)作控件。

二、表單狀況

基本上，表單在用戶的交互過程中必要經(jīng)歷三個(gè)階段。

• 默認(rèn)狀況：用戶在未進(jìn)行任何操作前表單的狀況。

• 聚焦?fàn)顩r：這個(gè)狀況強(qiáng)調(diào)用戶正在填寫的區(qū)域，幫助用戶聚焦和削減反復(fù)掃描屏幕的時(shí)間。

• 反饋狀況：反饋狀況是指用戶收到反饋時(shí)的頁面狀況（大多數(shù)是指錯(cuò)誤信息反饋）。偶然候?qū)τ谏弦粋€(gè)輸入信息的反饋在用戶聚焦到下一個(gè)填寫區(qū)域時(shí)就會(huì)表現(xiàn)。然而，假如數(shù)據(jù)不能得到立即驗(yàn)證的話，就要等到用戶點(diǎn)擊提交按鈕后再給予反饋提醒。

△ Amazon創(chuàng)建賬戶表單的「默認(rèn)、聚焦、反饋」頁面狀況

三、最佳實(shí)踐

1. 保持簡(jiǎn)潔

讓你的表單保持簡(jiǎn)短精煉，只保留最有需要的數(shù)據(jù)，避免以驗(yàn)證的名義讓用戶重復(fù)輸入，例如不要重復(fù)密碼字段，取而代之的是要讓用戶直接看到他們輸入的密碼。

2. 使用及時(shí)驗(yàn)證

當(dāng)給予用戶輸入進(jìn)行報(bào)錯(cuò)時(shí)，最好將反饋定位到詳細(xì)位置。

△ Facebook和Amazon采用了兩種不同的驗(yàn)證反饋體例

3. 將相近的字段打組

將相干信息進(jìn)行分組并按照常見規(guī)則排序很緊張。如許的話可以幫助用戶削減認(rèn)知負(fù)荷和細(xì)致力消費(fèi)。

△ 付款頁面相近的功能區(qū)域被適當(dāng)?shù)胤纸M

4. 將標(biāo)簽左對(duì)齊

要將標(biāo)簽放置到輸入框上面（像上面所解析的 Amazon 的表單一樣）。不要把占位符筆墨作為輸入框的標(biāo)簽，那樣的話用戶輸入完成后將看不到標(biāo)簽，用戶將很難對(duì)已輸入的內(nèi)容做最終的核對(duì)，會(huì)讓他們思考許多。

始終將標(biāo)簽放置在輸入框上面并左對(duì)齊，這是高服從的做法。

5. 輸入?yún)^(qū)域與內(nèi)容類型或尺寸相匹配

簡(jiǎn)單地說，要保證輸入字段的長度與預(yù)期的輸入類型相匹配，例如：地址就要比郵政編碼長。

△ Flutterwave’s Rave的登錄頁面，輸入?yún)^(qū)域的尺寸與預(yù)期的輸入字段的長度比例同等

△ payporte的輸入?yún)^(qū)域與預(yù)期的輸入字段的長度比例不匹配

6. CTA（call to action）按鈕

在表單的末尾通常會(huì)有個(gè)確認(rèn)按鈕或者下一步按鈕，在有些場(chǎng)景下，必須有一個(gè)以上的按鈕。要強(qiáng)調(diào)重要的按鈕，弱化次要按鈕。

△ Amazon的重要次要按鈕處理的很好

當(dāng)運(yùn)用模態(tài)彈窗進(jìn)行信息收集時(shí)（表單在模態(tài)彈窗上），那么次要按鈕偶然候就是關(guān)閉按鈕，另一種弱化它的方法就是使用 X icon 代替關(guān)閉按鈕，如下所示。

△ Medium的登錄模態(tài)彈窗使用X icon 來代表關(guān)閉按鈕

7. 搜索區(qū)域

不要隱蔽你的搜索框，分外是你的網(wǎng)站內(nèi)有大量內(nèi)容時(shí)，搜索或許是最好的選擇。

△ Amazon的搜索框分外的顯眼

當(dāng)用戶實(shí)行了搜索操作后并表現(xiàn)了搜索效果，不要立即消滅搜索框內(nèi)的內(nèi)容，以便可以讓用戶很容易地去回顧他起初所搜索的內(nèi)容。

△ Medium沒有消滅搜索后的輸入內(nèi)容

8. 清晰

給用戶傳達(dá)清楚的信息，給予他們所預(yù)期的，不要模棱兩可。沒有人喜好填寫表單，沒有人樂意填寫兩遍。

△ Cowrywise的標(biāo)簽內(nèi)容特別很是的清晰，甚至按鈕的筆墨都描述得很好

原文鏈接：《Creating User-friendly Forms》  Momoh Silm

迎接關(guān)注點(diǎn)融設(shè)計(jì)中間DDC微信公眾號(hào)：「ID：DR_DDC」

圖片素材作者：asifzuo