網(wǎng)頁表單要如何設(shè)計(jì)?

表單對(duì)于企業(yè)和個(gè)人同樣至關(guān)重要,當(dāng)涉及到數(shù)據(jù)收集時(shí),我們大多數(shù)情況下會(huì)采用表單(或許是因?yàn)樵诨ヂ?lián)網(wǎng)繁榮之前我們就已經(jīng)在線下使用了很久的表單)。因此建立一個(gè)用戶友好的表單是增加填寫完成率的關(guān)鍵。

表單解析

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

 

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

i.?標(biāo)題:這個(gè)元素幫助用戶引導(dǎo)完成表單填寫的整個(gè)過程,當(dāng)你把信息分成很多組來讓用戶填寫的時(shí)候,標(biāo)題就特別有用。例如:個(gè)人資料、職業(yè)詳情、財(cái)務(wù)明細(xì)。

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

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

iv.?錯(cuò)誤信息提示:錯(cuò)誤信息提示給予用戶錯(cuò)誤反饋,提醒用戶為什么填錯(cuò)了。

v.?動(dòng)作按鈕:動(dòng)作按鈕是在表單的結(jié)尾,有個(gè)確認(rèn)提交的動(dòng)作控件。

表單狀態(tài)

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

i.?默認(rèn)狀態(tài):用戶在未進(jìn)行任何操作前表單的狀態(tài)。

ii.?聚焦?fàn)顟B(tài):這個(gè)狀態(tài)強(qiáng)調(diào)用戶正在填寫的區(qū)域,幫助用戶聚焦和減少反復(fù)掃描屏幕的時(shí)間。

ii.?反饋狀態(tài):反饋狀態(tài)是指用戶收到的反饋時(shí)的頁面狀態(tài)(大多數(shù)是指錯(cuò)誤信息反饋)。有時(shí)候,有時(shí)候?qū)τ谏弦粋€(gè)輸入信息的反饋在用戶聚焦到下一個(gè)填寫區(qū)域時(shí)就會(huì)顯示。然而,如果數(shù)據(jù)不能得到立即驗(yàn)證的話,就要等到用戶點(diǎn)擊提交按鈕后再給予反饋提示。

Amazon創(chuàng)建賬戶表單的“默認(rèn)、聚焦、反饋”頁面狀態(tài)

最佳實(shí)踐

1. 保持簡(jiǎn)潔

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

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

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

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

3. 將相近的字段打組

將相關(guān)信息進(jìn)行分組并按照常見規(guī)則排序很重要。這樣的話可以幫助用戶減少認(rèn)知負(fù)荷和注意力消耗。

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

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

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

始終將標(biāo)簽放置在輸入框上面并左對(duì)齊,有一個(gè)很全面的研究報(bào)告來說明這是高效率的做法。(詳見鏈接

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

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

Flutterwave’s Rave的登錄頁面,輸入?yún)^(qū)域的尺寸與預(yù)期的輸入字段的長(zhǎng)度比例一致

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

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)彈窗上),那么次要按鈕有時(shí)候就是關(guān)閉按鈕,另一種弱化它的方法就是使用X icon代替關(guān)閉按鈕,如下所示。

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

7. 搜索區(qū)域

不要隱藏你的搜索框,特別是你的網(wǎng)站內(nèi)有大量?jī)?nèi)容時(shí),搜索或許是最好的選擇。

Amazon的搜索框特別的顯眼

當(dāng)用戶執(zhí)行了搜索操作后并顯示了搜索結(jié)果,不要立即清除搜索框內(nèi)的內(nèi)容,以便讓可以用戶很容易地去回顧他起初所搜索的內(nèi)容。

Medium沒有清除搜索后的輸入內(nèi)容

8. 清晰

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

Cowrywise的標(biāo)簽內(nèi)容非常的清晰,甚至按鈕的文字都描述得很好

 

本文所有的案例既不是廣告,也沒有貶義,僅用于學(xué)習(xí)。

 

英文原文:Creating User-friendly Forms

原文地址:https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2

原文作者:Momoh Silm

譯文:點(diǎn)融設(shè)計(jì)中心DDC

每天更新,
全站高品質(zhì)素材免費(fèi)下載!