四個(gè)你需要遵循的表單設(shè)計(jì)原則

2018-07-18 1752 0

bdaa57cd10b10000012e7ec567ce.jpg


 

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


 

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


 

4dcd57ccfca10000018c1b214c23.jpg


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

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

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


 

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


 

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


 

來自Michael Aagaard在Call To Action 2015分享的一個(gè)與上面類似的案例。案例中,他負(fù)責(zé)提升某表單的用戶轉(zhuǎn)化率。他一開始的做法是將原本表單的字段從9個(gè)減少至6個(gè),但是轉(zhuǎn)化率沒有提升反而降了14%。后來經(jīng)過研究,他發(fā)現(xiàn)原本表單中最吸引用戶注意的恰好是被刪除的字段,結(jié)果顯而易見,表單對(duì)用戶的吸引力變?nèi)趿?。發(fā)現(xià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)先考慮用戶瀏覽方式:

來自Jakob Nielsen很早之前的研究:用戶瀏覽網(wǎng)頁是通過眼睛快速掃描的方式瀏覽,而不是從上往下逐字地閱讀。即使是在填寫表單上面,用戶也是如此??紤]到表單輸入的效率,用戶有效的掃描網(wǎng)頁對(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)頁高度有限的話推薦這種對(duì)齊方式。采用左對(duì)齊標(biāo)簽方式的表單是三者之中瀏覽時(shí)間最長的,但是,這種對(duì)齊方式能夠在你想要用戶放慢速度閱讀,仔細(xì)考慮的時(shí)候使用(如一些重要的輸入)。


 

83fa57ccfd140000018c1b3378b7.jpg


 

提示

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


 

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


 

003857ccfd620000018c1b7f0522.jpg


 

在某些情況下,為了減輕上面所說的問題,占位符文本可以使用比普通的文本更淺的顏色。然而這種方法容易導(dǎo)致一個(gè)對(duì)比度的問題,白色背景上的淺灰色文本不符合W3C Web內(nèi)容的可訪問性指南(正常文本比4.5:1)。此外,根據(jù)W3C,占位符文本不支持輔助殘疾人的設(shè)計(jì)(如屏幕閱讀器),這會(huì)讓這部分用戶填寫表單變得很困難。


 

浮動(dòng)標(biāo)簽(Floating Labels)

這是一個(gè)現(xiàn)在很受歡迎的新穎的交互設(shè)計(jì)方式:浮動(dòng)(或自適應(yīng))標(biāo)簽。整個(gè)交互過程,一開始標(biāo)簽文本作為占位符文本,之后一旦用戶開始填寫它就會(huì)移動(dòng)到表單字段的上方。這種方式很好的解決了上面所說關(guān)于標(biāo)簽消失的問題。


 

023457cd0f220000012e7e9ade6d.jpg


 

而且這種方式應(yīng)用在移動(dòng)端上還能幫助我們減少頁面長度。但是,它還是沒有解決上面所講的一個(gè)很重要的問題:用戶掃描式的瀏覽很容易誤會(huì)框內(nèi)已經(jīng)被輸入了文字。因此,NN Group建議還是避免這種交互方式,仍然采用標(biāo)簽在字段上方的做法,除非頁面長度是現(xiàn)階段你需要解決優(yōu)先級(jí)最高的問題。


 

(2)能夠輕松填寫的格式

以前,我們填寫表單是需要靠猜的,比如我的手機(jī)號(hào)碼應(yīng)該用哪種格式?信用卡號(hào)碼填寫有沒有遺漏?“@”符號(hào)在鍵盤的哪個(gè)位置?現(xiàn)在,新的表單設(shè)計(jì)能夠幫助用戶做出判斷,提高表單使用體驗(yàn)。


 

輸入掩碼(Input Masks)

字段掩碼,能幫助用戶輸入的文本編排格式。首先,用戶填寫一個(gè)字段的時(shí)候只能出現(xiàn)一種掩碼,以免出現(xiàn)上述問題。其次,當(dāng)用戶填寫時(shí)自動(dòng)為文本編排格式,讓用戶將關(guān)注的重點(diǎn)放在所需要填寫的信息以及更容易被發(fā)現(xiàn)的錯(cuò)誤上面。在下面的例子中,括號(hào)、破折號(hào)和間隔被應(yīng)用于電話號(hào)碼的輸入上面。


 

cf3657ccfdd30000018c1b1d0b40.jpg


 

當(dāng)我們填寫電話號(hào)碼、信用卡號(hào)、貨幣等等的時(shí)候,這個(gè)簡(jiǎn)單的方法能夠節(jié)省我們的時(shí)間和精力。


 

輸入字段(Input Fields)的HTML屬性

現(xiàn)在設(shè)計(jì)師們已經(jīng)知道如何正確調(diào)用手機(jī)上的小鍵盤,但實(shí)際上仍有很多人不會(huì)使用正確的鍵盤類型。


 

890157ccfde80000012e7e77a222.jpg

“數(shù)字(Number)”鍵盤    vs   “電話號(hào)碼(tel)”小鍵盤


 

對(duì)于僅包含數(shù)字的字段,如日期、郵編、信用卡號(hào)等,使用“電話號(hào)碼”樣式的小鍵盤因?yàn)橛|發(fā)面大的原因能讓用戶輕松的輸入數(shù)字。(前端的實(shí)現(xiàn)方式, 標(biāo)簽的type屬性里使用“tel”或者添加屬性 “pattern=”[0-9]*”)。


 

這里還有其他幾個(gè)屬性,將它們添加到文本字段里面也能幫助我們消除多余的按鍵以及錯(cuò)誤。(注:以下建議需考慮中文適用性)

自動(dòng)填寫:利用瀏覽器顯示用戶之前填寫的數(shù)值。但需要將敏感數(shù)據(jù)設(shè)置為“關(guān)閉”。

自動(dòng)更正:當(dāng)用戶出現(xiàn)文字拼寫錯(cuò)誤的時(shí)候自動(dòng)更正。但要注意如果是姓名、地址等特殊字段的時(shí)候需要關(guān)閉此功能。

自動(dòng)大寫:第一個(gè)字母大寫。

拼寫檢測(cè):用紅色強(qiáng)調(diào)拼寫錯(cuò)誤的單詞。但也需要注意如果是姓名、地址等特殊字段的時(shí)候需要關(guān)閉此功能。


 

(3)限制輸入

如今越來越多人使用手機(jī)去處理生活中各種各樣的事情,考慮到手機(jī)的使用場(chǎng)景以及它本身屏幕小的情況,我們需要讓用戶在填寫表單的時(shí)候避免一些不必要的輸入,這樣不僅能夠提高用戶滿意度還可以降低操作的錯(cuò)誤率。


 

地址預(yù)填充(Pre-Fills)

地址的填寫是任何注冊(cè)表單中最麻煩的部分,里面含有多個(gè)字段。通過調(diào)整表單字段至單個(gè)字段,我們發(fā)現(xiàn)用戶不僅僅能保持在當(dāng)前輸入的狀態(tài)(不需要頻繁的切換),還可以削減大量的用戶輸入。

在下面的例子我們?cè)囍顚懥斯雀杩偛康牡刂罚ń值?、城市、州、郵編、國家)。整個(gè)表單我們只用了不到10次按鍵就完成了填寫。這看似簡(jiǎn)單的輸入背后隱藏了超過50次的潛在手動(dòng)輸入。


 

e15c57ccfe3e0000012e7ed2fd9a.jpg


 

郵件地址預(yù)填充

另一種減少輸入的方法就是在郵件地址字段中提供常見的域名。當(dāng)用戶開始輸入@鍵的時(shí)候就會(huì)出現(xiàn)這些常見的域名。


 

6bfa57ccfe760000018c1ba7b9fd.jpg


 

利用定位

在移動(dòng)端APP里面調(diào)用地理位置信息是很常見的做法,但也別忘了這種做法同樣適用于平板電腦和臺(tái)式電腦。特別是觸摸屏,眾所周知,在觸摸屏上填寫表格特別麻煩。使用基于地理位置信息的預(yù)填充方式剛好能幫助用戶節(jié)省寶貴的時(shí)間,同時(shí)提高用戶轉(zhuǎn)化率。


 

Nordstrom網(wǎng)站的產(chǎn)品詳情頁就是個(gè)很好的例子,該頁面調(diào)用了位置信息來自動(dòng)搜尋離用戶最近的店鋪。這樣做除了節(jié)省時(shí)間外,用戶不需要花費(fèi)精力就能得到可能對(duì)其有用的信息。


 

12cd57ccfe5f0000012e7ed2dda5.jpg

Nordstrom.com


 

但是,由于精度問題,想要通過預(yù)填充填寫一個(gè)完整的地址是很困難的。谷歌的Places API基于用戶位置,通過使用地理位置信息和地址預(yù)填充兩種方式來解決這個(gè)問題,為用戶提供準(zhǔn)確的位置參考。


 

4b2457ccfe9f0000018c1b649d09.jpg

zuppler.com


 

當(dāng)然,因?yàn)椴豢赡芡耆珳?zhǔn)確,所以需要允許用戶對(duì)這些自動(dòng)生成的位置信息進(jìn)行修改。
 


 

總結(jié)

總之,遵循這些設(shè)計(jì)原則能幫助大家設(shè)計(jì)出更易用的表單以及創(chuàng)造更好的表單體驗(yàn):

1.優(yōu)先考慮用戶瀏覽方式,設(shè)計(jì)易于用戶閱讀的“標(biāo)簽(labels)”,并避免無關(guān)緊要的信息干擾用戶瀏覽;

2.提供能夠輕松填寫的格式,考慮每一種字段類型,為其提供掩碼(masks)以及合適的鍵盤輸入;

3.限制用戶輸入,使用預(yù)填充的方式;

4.利用定位,節(jié)省用戶時(shí)間。


 


 

---------------------我是分割線-----------------------
 


 

廠哥的教程會(huì)分視覺傳達(dá)方向/圖形媒體方向/動(dòng)畫游戲方向,都是我們?cè)瓌?chuàng)或是翻譯的教程,大家可以持續(xù)關(guān)注我們,我們會(huì)定期分享教程。本次分享就到這里啦,要是有任何遺漏或出錯(cuò)請(qǐng)告訴廠哥哦,我們會(huì)及時(shí)更正,如需轉(zhuǎn)載請(qǐng)告知并注明出處謝謝。


 

5a7857cd11490000012e7e8ce119.jpg


 


7
評(píng)論區(qū)(0)
正在加載評(píng)論...