網(wǎng)站建設(shè)中四個(gè)必須遵循的表單設(shè)計(jì)原則發(fā)布者：本站     時(shí)間：2022-05-07 09:05:30

在網(wǎng)上，我們無(wú)時(shí)無(wú)刻都在使用表單（Form），在網(wǎng)上購(gòu)物、郵件注冊(cè)、參與評(píng)論等等。不夸張的說(shuō)，它已經(jīng)成為了數(shù)字信息時(shí)代不可分割的一份子。然而，這么多年伴隨著一些改進(jìn)我們發(fā)現(xiàn)，表單設(shè)計(jì)在我們的使用感受中也僅僅停留在“還可以”的程度。不過(guò)，現(xiàn)在我們可以使用新的方法設(shè)計(jì)出更好、更便捷的表單體驗(yàn)。

 

p.s.我們簡(jiǎn)單說(shuō)說(shuō)表單中含有哪些元素：

 

四個(gè)必須遵循的表單設(shè)計(jì)原則

 

標(biāo)簽（Label）告訴用戶該表單需要填寫什么類型的信息，通常放置在表單文本框之外。

表單字段（Form field）則是用來(lái)收集用戶輸入的信息，在我們平常使用的表單之中，每個(gè)字段包含著某一類型的信息（如姓名、性別等）。

占位符文本（Placeholder text），又叫提示文本，位于表單文本框里面，一般用于提示用戶填寫。在大多數(shù)的做法中，當(dāng)用戶開(kāi)始輸入，這些提示文本會(huì)自動(dòng)消失。

 

一條經(jīng)典的表單設(shè)計(jì)原則是表單越短越好。這條法則看上去似乎有理有據(jù)，但是它卻沒(méi)給我們帶來(lái)預(yù)期高的用戶轉(zhuǎn)化率。這條指導(dǎo)原則錯(cuò)就錯(cuò)在沒(méi)有考慮其他因素，如用戶輸入，它們?cè)撊绾卧O(shè)計(jì)、如何影響表單的體驗(yàn)。

 

舉個(gè)例子，在我的研究中發(fā)現(xiàn)這篇文章被設(shè)計(jì)師們引用的次數(shù)遠(yuǎn)遠(yuǎn)超過(guò)其他文章，被大多數(shù)人奉為經(jīng)典，想想就可怕。這篇文章來(lái)源于Imaginary Landscape(一個(gè)開(kāi)源的網(wǎng)絡(luò)開(kāi)發(fā)社區(qū))將近10年前的一次報(bào)告，文章里面提到如果將一個(gè)11個(gè)字段的表單減少至4個(gè)字段，那么轉(zhuǎn)化率就會(huì)提升160%。但這份報(bào)告只給出了一個(gè)頁(yè)面、二個(gè)變量和一次測(cè)試的結(jié)果，他們沒(méi)有做更多的測(cè)試，比如對(duì)比不同的4個(gè)字段表單之間的測(cè)試結(jié)果，對(duì)比10和11個(gè)字段以及5和4個(gè)字段表單之間不同的結(jié)果，所以這份報(bào)告存在很明顯的漏洞，根本不能令人信服。

 

來(lái)自Michael Aagaard在Call To Action 2015分享的一個(gè)與上面類似的案例。案例中，他負(fù)責(zé)提升某表單的用戶轉(zhuǎn)化率。他一開(kāi)始的做法是將原本表單的字段從9個(gè)減少至6個(gè)，但是轉(zhuǎn)化率沒(méi)有提升反而降了14%。后來(lái)經(jīng)過(guò)研究，他發(fā)現(xiàn)原本表單中最吸引用戶注意的恰好是被刪除的字段，結(jié)果顯而易見(jiàn)，表單對(duì)用戶的吸引力變?nèi)趿?。發(fā)現(xiàn)問(wèn)題后，Michael Aagaard進(jìn)行了第二次測(cè)試，他在保持9個(gè)字段不變動(dòng)的情況下調(diào)整了表單的結(jié)構(gòu)使之更清晰，結(jié)果轉(zhuǎn)化率提升了19%。事實(shí)證明，減少表單字段不一定能提升用戶轉(zhuǎn)化率。

 

所以，我們?cè)撊绾卧O(shè)計(jì)出好的表單？這里有一些新的設(shè)計(jì)原則也許適用：

1.優(yōu)先考慮用戶瀏覽方式

2.能夠輕松填寫的格式

3.限制輸入

4.利用定位

 

（1）優(yōu)先考慮用戶瀏覽方式：

來(lái)自Jakob Nielsen很早之前的研究：用戶瀏覽網(wǎng)頁(yè)是通過(guò)眼睛快速掃描的方式瀏覽，而不是從上往下逐字地閱讀。即使是在填寫表單上面，用戶也是如此?？紤]到表單輸入的效率，用戶有效的掃描網(wǎng)頁(yè)對(duì)于減少錯(cuò)誤或錯(cuò)失字段的情況至關(guān)重要，尤其是當(dāng)表單只能填寫（提交）一次的時(shí)候（電商地址填寫，注冊(cè)帳號(hào)等等）。

 

表單標(biāo)簽的位置

雖然已經(jīng)有了大量關(guān)于表單標(biāo)簽位置的研究，但仍然存有爭(zhēng)議。表單方面的專家Luke Wroblewski有一篇研究明確了表單標(biāo)簽采取頂部對(duì)齊的方式能讓用戶更快完成瀏覽，原因是這種對(duì)齊方式對(duì)眼球移動(dòng)的需求比其他對(duì)齊方式要更少。其中采用右對(duì)齊方式標(biāo)簽的表單瀏覽時(shí)間僅次于頂部對(duì)齊標(biāo)簽的表單，如果你的網(wǎng)頁(yè)高度有限的話推薦這種對(duì)齊方式。采用左對(duì)齊標(biāo)簽方式的表單是三者之中瀏覽時(shí)間最長(zhǎng)的，但是，這種對(duì)齊方式能夠在你想要用戶放慢速度閱讀，仔細(xì)考慮的時(shí)候使用（如一些重要的輸入）。

 

四個(gè)必須遵循的表單設(shè)計(jì)原則

 

提示

占位符文本（又叫提示文本）。關(guān)于提示文本，一般來(lái)說(shuō)它對(duì)用戶來(lái)說(shuō)弊大于利。其中包括把標(biāo)簽作為占位符文本來(lái)使用的情況，這樣的話當(dāng)我們?cè)诒韱卫锩嫣砑觾?nèi)容的時(shí)候，提示文本會(huì)自動(dòng)消失。這種做法雖然可以讓用戶不再看到提示文本，但是這很容易造成用戶短期記憶的壓力以及增加犯錯(cuò)的機(jī)會(huì)。

 

即使標(biāo)簽不作為提示文本，另外添加一個(gè)提示文本。用戶這種掃描式的瀏覽很容易造成框內(nèi)已經(jīng)被輸入了文字的誤會(huì)。來(lái)自NN Group的研究，研究中表明了空字段對(duì)比有文字的字段更吸引用戶注意，以及用戶更多的會(huì)跳過(guò)那些有提示文本的字段。換句話說(shuō)，被認(rèn)為對(duì)用戶有利的提示文本其實(shí)對(duì)用戶來(lái)說(shuō)弊大于利，尤其會(huì)對(duì)用戶瀏覽網(wǎng)頁(yè)方面造成困難。