8個原則!幫你創(chuàng)建用戶友好表單
表單對于企業(yè)和小我同樣至關(guān)緊張,當(dāng)涉及到數(shù)據(jù)收集時,我們大多數(shù)情況下會采用表單(或許是由于在互聯(lián)網(wǎng)繁榮之前我們就已經(jīng)在線下使用了很久的表單)。因此建立一個用戶友愛的表單是增長填寫完成率的關(guān)鍵。
之前圖趣分享的精品教程《用3個案例,讓你學(xué)會移動端的長表單設(shè)計》,《關(guān)于表單設(shè)計的知識點,這篇總結(jié)相當(dāng)全面》
一、表單解析
表單的目的、內(nèi)容、大小長度等雖然各不雷同,但基本元素比較固定;合理組織這些元素有助于用戶輕松完成表單填寫。
△ Amazon創(chuàng)建賬戶表單解析
題目:這個元素幫助用戶指導(dǎo)完成表單填寫的整個過程,當(dāng)你把信息分成許多組來讓用戶填寫的時候,題目就分外有效。例如:小我資料、職業(yè)詳情、財務(wù)明細(xì)。
標(biāo)簽:標(biāo)簽告訴用戶在任何特定的輸入?yún)^(qū)域期望他們填寫什么內(nèi)容。
占位符 :占位符是對標(biāo)簽進行額外的信息描述。
錯誤信息提醒:錯誤信息提醒給予用戶錯誤反饋,提示用戶為什么填錯了。
動作按鈕:動作按鈕是在表單的結(jié)尾,有個確認(rèn)提交的動作控件。
二、表單狀況
基本上,表單在用戶的交互過程中必要經(jīng)歷三個階段。
默認(rèn)狀況:用戶在未進行任何操作前表單的狀況。
聚焦?fàn)顩r:這個狀況強調(diào)用戶正在填寫的區(qū)域,幫助用戶聚焦和削減反復(fù)掃描屏幕的時間。
反饋狀況:反饋狀況是指用戶收到反饋時的頁面狀況(大多數(shù)是指錯誤信息反饋)。偶然候?qū)τ谏弦粋€輸入信息的反饋在用戶聚焦到下一個填寫區(qū)域時就會表現(xiàn)。然而,假如數(shù)據(jù)不能得到立即驗證的話,就要等到用戶點擊提交按鈕后再給予反饋提醒。
△ Amazon創(chuàng)建賬戶表單的「默認(rèn)、聚焦、反饋」頁面狀況
三、最佳實踐
1. 保持簡潔
讓你的表單保持簡短精煉,只保留最有需要的數(shù)據(jù),避免以驗證的名義讓用戶重復(fù)輸入,例如不要重復(fù)密碼字段,取而代之的是要讓用戶直接看到他們輸入的密碼。
2. 使用及時驗證
當(dāng)給予用戶輸入進行報錯時,最好將反饋定位到詳細(xì)位置。
△ Facebook和Amazon采用了兩種不同的驗證反饋體例
3. 將相近的字段打組
將相干信息進行分組并按照常見規(guī)則排序很緊張。如許的話可以幫助用戶削減認(rèn)知負(fù)荷和細(xì)致力消費。
△ 付款頁面相近的功能區(qū)域被適當(dāng)?shù)胤纸M
4. 將標(biāo)簽左對齊
要將標(biāo)簽放置到輸入框上面(像上面所解析的 Amazon 的表單一樣)。不要把占位符筆墨作為輸入框的標(biāo)簽,那樣的話用戶輸入完成后將看不到標(biāo)簽,用戶將很難對已輸入的內(nèi)容做最終的核對,會讓他們思考許多。
始終將標(biāo)簽放置在輸入框上面并左對齊,這是高服從的做法。
5. 輸入?yún)^(qū)域與內(nèi)容類型或尺寸相匹配
簡單地說,要保證輸入字段的長度與預(yù)期的輸入類型相匹配,例如:地址就要比郵政編碼長。
△ Flutterwave’s Rave的登錄頁面,輸入?yún)^(qū)域的尺寸與預(yù)期的輸入字段的長度比例同等
△ payporte的輸入?yún)^(qū)域與預(yù)期的輸入字段的長度比例不匹配
6. CTA(call to action)按鈕
在表單的末尾通常會有個確認(rèn)按鈕或者下一步按鈕,在有些場景下,必須有一個以上的按鈕。要強調(diào)重要的按鈕,弱化次要按鈕。
△ Amazon的重要次要按鈕處理的很好
當(dāng)運用模態(tài)彈窗進行信息收集時(表單在模態(tài)彈窗上),那么次要按鈕偶然候就是關(guān)閉按鈕,另一種弱化它的方法就是使用 X icon 代替關(guān)閉按鈕,如下所示。
△ Medium的登錄模態(tài)彈窗使用X icon 來代表關(guān)閉按鈕
7. 搜索區(qū)域
不要隱蔽你的搜索框,分外是你的網(wǎng)站內(nèi)有大量內(nèi)容時,搜索或許是最好的選擇。
△ Amazon的搜索框分外的顯眼
當(dāng)用戶實行了搜索操作后并表現(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)注點融設(shè)計中間DDC微信公眾號:「ID:DR_DDC」
圖片素材作者:asifzuo
本文地址:http://pkvc.cn/tutorial/di4186.html