表格對(duì)個(gè)人和企業(yè)都至關(guān)重要谷羞。在收集數(shù)據(jù)方面寞奸，最常見的形式是我們所有人采取的表單形式（也許是因?yàn)樗诨ヂ?lián)網(wǎng)信息爆炸之前就已經(jīng)存在很久了）吃溅。因此炊豪，創(chuàng)建友好的用戶表單是提高表單完成率的關(guān)鍵凌箕。
一、表單剖析學(xué)
表單在用途词渤，內(nèi)容和大小上各不相同牵舱，但有一些基本元素可以幫助用戶輕松填寫表單。
1.類別或部分：此元素可引導(dǎo)用戶瀏覽表單缺虐。當(dāng)您在表單中將收集的數(shù)據(jù)分組為多個(gè)類別時(shí)芜壁，此方法最為有用，例如個(gè)人詳細(xì)信息高氮，職業(yè)細(xì)節(jié)和財(cái)務(wù)詳細(xì)信息慧妄。
2.標(biāo)簽：標(biāo)簽提示用戶在任何特定的輸入字段中所期望的輸入數(shù)據(jù)。
3.占位符：關(guān)于標(biāo)簽的額外描述剪芍。
4.錯(cuò)誤信息：為用戶提供反饋塞淹，說(shuō)明為什么他們?cè)谳斎胱侄沃械牟僮鞑豢山邮堋?/p>
5.基本的CTA按鈕：用戶用于在表單上提交輸入的表單末尾的按鈕。
二罪裹、表單狀態(tài)
基本上饱普，在用戶交互過(guò)程中运挫，您的表單應(yīng)該經(jīng)歷三個(gè)階段：
1.默認(rèn)狀態(tài)：您的表單在用戶未輸入任何數(shù)據(jù)之前的樣子。
2.焦點(diǎn)狀態(tài)：這強(qiáng)調(diào)了用戶與之交互的確切輸入字段费彼。如果用戶一秒鐘離開屏幕滑臊，這有助于提高用戶對(duì)焦并縮短掃描信息的時(shí)間。
3.反饋狀態(tài)：用戶收到反饋的地方（大部分時(shí)間是錯(cuò)誤消息）箍铲。有時(shí)雇卷，用戶移動(dòng)到下一個(gè)輸入字段后可能會(huì)發(fā)生此狀態(tài)。但是颠猴，如果數(shù)據(jù)無(wú)法立即驗(yàn)證关划，則會(huì)在用戶嘗試通過(guò)單擊按鈕提交表單時(shí)發(fā)生。
三翘瓮、最佳形式
1.保持表單簡(jiǎn)潔贮折。
保持你的表格簡(jiǎn)短。只收集必要的數(shù)據(jù)资盅，并避免重復(fù)輸入字段调榄。例如，不要復(fù)制密碼字段呵扛，允許用戶查看他們選擇創(chuàng)建的密碼每庆。
2.使用內(nèi)部相關(guān)驗(yàn)證。
當(dāng)給用戶提供關(guān)于錯(cuò)誤輸入的反饋時(shí)今穿，最好將反饋附加到它所處理的特定錯(cuò)誤字段缤灵。
3.分組相關(guān)部分。
將相關(guān)領(lǐng)域組合在一起并按標(biāo)準(zhǔn)順序進(jìn)行分類是非常重要的蓝晒。這可以幫助用戶輕松填寫所需的數(shù)據(jù)腮出，而無(wú)需產(chǎn)生太多的認(rèn)知負(fù)荷，使用戶最小限度地集中的注意力芝薇。
4.使用標(biāo)簽并將它們對(duì)齊統(tǒng)一胚嘲。
始終將標(biāo)簽（如上面的表單剖析所示）放置在輸入字段上方。但不要用標(biāo)簽替換占位符文本洛二。如果沒有標(biāo)簽慢逾，用戶會(huì)很難在提交表單前交叉瀏覽檢查他們的輸入，因?yàn)檫@往往會(huì)讓用戶認(rèn)為信息繁瑣灭红。
使用標(biāo)簽時(shí)侣滩，請(qǐng)始終將它們對(duì)齊輸入字段的上方。以下這份綜合研究報(bào)告变擒，說(shuō)明了標(biāo)簽是如何影響用戶操作的君珠。
在表單中放置標(biāo)簽在其輸入字段正上方放置標(biāo)簽，允許用戶使用單眼移動(dòng)來(lái)捕獲這兩個(gè)元素娇斑。www.uxmatters.com
5.將字段與輸入字段的類型和大小匹配策添。
簡(jiǎn)單來(lái)說(shuō)材部，請(qǐng)務(wù)必確保輸入字段的長(zhǎng)度與預(yù)期的輸入類型成比例。例如唯竹，地址的輸入字段應(yīng)該比郵政編碼的輸入字段長(zhǎng)乐导。
6. CTA按鈕
所有表單最后都應(yīng)該有一個(gè)按鈕，不管它是一個(gè)確認(rèn)（SUBMIT）按鈕還是一個(gè)下一步（NEXT）按鈕浸颓。在任何需要多于一個(gè)按鈕的情況下物臂，應(yīng)該將重點(diǎn)放在主按鈕上，而替代按鈕不應(yīng)該那么突出产上。
當(dāng)使用模態(tài)窗口來(lái)收集數(shù)據(jù)（模態(tài)中的表單）時(shí)棵磷，備選按鈕有時(shí)是關(guān)閉模式的CLOSE按鈕。解決這個(gè)問(wèn)題的另一種方法是使用右上角的x圖標(biāo)代替替代按鈕晋涣，如下所示仪媒。
7.搜索字段
不要隱藏你的搜索表單谢鹊，特別是如果你的網(wǎng)站內(nèi)容很多算吩，搜索可能是一個(gè)首選的選擇。
此外佃扼，用戶搜索時(shí)提交并顯示結(jié)果后偎巢，不要清除搜索框。這使得用戶可以輕松地回頭看看搜索欄松嘶，以便知道他/她最初搜索的內(nèi)容。
8.清晰
清楚地向用戶傳達(dá)消息翠订。告訴他們什么是需要的內(nèi)容是什么，并且盡可能清楚遵倦，沒有模棱兩可的余地尽超。沒有人喜歡填表形式也沒有人喜歡填充兩次。
這里的所有產(chǎn)品圖片既不用于宣傳也不用于盈利似谁。此內(nèi)容僅用于教育。
- 本文翻譯來(lái)自Medium
- 感謝 Momoh Silm
