表單設(shè)計(jì)系列二:如何進(jìn)行表單的設(shè)計(jì)?有圖例有道理

2017-7-27    藍(lán)藍(lán)設(shè)計(jì)的小編

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

我們幾乎每天都會接觸形形色色的表單,登錄賬號、填寫信息以獲取服務(wù)、發(fā)布內(nèi)容等。然而填寫表單的過程往往不是特別愉悅的,我們需要消耗時(shí)間輸入信息,點(diǎn)擊提交,可能還需要等待審核;尤其是碰到較為復(fù)雜、流程長的表單,如果用戶體驗(yàn)較差,很容易讓人產(chǎn)生挫敗感,在中途選擇放棄。


那么,如何提高用戶填寫表單的效率,防止他們出錯(cuò)或中途流失,提升愉悅度及轉(zhuǎn)化率呢?本文就web表單設(shè)計(jì),總結(jié)了以下的一些方法:

有效的說服用戶進(jìn)行填寫

首先,告知用戶為什么要填寫表單,他能獲得什么,讓用戶看到把信息給你的好處。舉個(gè)例子,GitHub在其注冊表單的右側(cè)清晰的告訴你注冊使用它會得到的幫助:

1

除了告訴用戶填完整個(gè)表單可以得到什么好處,你還可以更具體一點(diǎn),告訴用戶你讓他填寫某一項(xiàng)信息是出于怎樣的考慮。

2

有效的說服用戶填寫表單,還需要剔除負(fù)面干擾,獲取他們的信任。大多數(shù)情況下,用戶對于填寫表單的最大顧慮是信息被網(wǎng)站收集之后的用途。用戶不希望源源不斷的收到垃圾推銷郵件,更不希望自己的隱私信息被公之于眾。此時(shí),你可以通過引用一些具有影響力的權(quán)威人士的承諾,或者展示一些具有公共效應(yīng)的證據(jù),如媒體報(bào)道、用戶案例等。

 

3

你還可以做的更貼心一些,告訴用戶填寫表單預(yù)計(jì)需要花費(fèi)的時(shí)間。

4

合理組織信息

對于較為復(fù)雜、填寫項(xiàng)多的表單,如果不對信息進(jìn)行組織,很容易顯得繁雜混亂,讓用戶在一開始就產(chǎn)生抵觸的情緒,甚至選擇放棄。合理有層次的組織信息,可以利用框線、空間間隔、顏色的不同,按照不同信息的類別、屬性和相關(guān)性進(jìn)行區(qū)塊的劃分,用步驟條指示當(dāng)前的進(jìn)程。

5

 

一般來說,通知為藍(lán)色,警告為黃色,錯(cuò)誤為紅色,成功確認(rèn)為綠色。

6

清晰的瀏覽線,合理的標(biāo)簽、提示文字及按鈕的排布,避免不必要的信息重復(fù)出現(xiàn),能夠降低用戶的視覺負(fù)擔(dān)和物理負(fù)擔(dān)。

7

恰當(dāng)?shù)碾[藏信息能夠使表單看起來更加清爽怡人,有些信息可以設(shè)置在需要進(jìn)行相關(guān)操作時(shí)才出現(xiàn)。

8

區(qū)分一級動作和二級動作。用按鈕定義一級動作,用鏈接定義二級動作,或者相對于二級動作按鈕來說,賦予一級動作按鈕更為明顯的風(fēng)格。

9

為用戶節(jié)省時(shí)間

需要花大量時(shí)間填寫的表單容易讓人失去耐心,用戶是懶惰而繁忙的,試著刪去所有不必要的填寫項(xiàng),考慮除了讓用戶機(jī)械的通過鍵盤在表單上輸入數(shù)據(jù)外,還有沒有別的更優(yōu)方式(如后續(xù)進(jìn)行用研調(diào)查)收集所需信息。

驗(yàn)證碼永遠(yuǎn)是表單上讓用戶頭疼的填寫項(xiàng)之一,他需要等待驗(yàn)證碼的生成、確認(rèn)驗(yàn)證碼的內(nèi)容、確保驗(yàn)證碼輸入正確,才能點(diǎn)擊提交,而這整個(gè)過程對他來說并無實(shí)際價(jià)值,用戶不會因?yàn)槎嗵顚懸淮悟?yàn)證碼而得到額外的獎勵。我們可以通過改變輸入驗(yàn)證碼的體驗(yàn),使其變得更簡單有趣,或者通過新的后臺邏輯限制用戶每日提交次數(shù)等行為來取締驗(yàn)證碼。

安全平臺部打擊惡意組的同事就發(fā)明了一種有趣的圖片驗(yàn)證碼的方式:

10

除了驗(yàn)證碼以外,注冊填寫表單中經(jīng)常存在的二次確認(rèn)密碼也同樣費(fèi)時(shí)。目前,很多國外的主流網(wǎng)站,如FacebookTwitter、LinkedIn、Friendster等在填寫注冊表單時(shí)都不要求用戶確認(rèn)密碼。WordPress甚至連都不需要用戶填寫,而是將密碼直接發(fā)送至用戶的郵箱。

11

除了上面這種簡單粗暴的方式以外,首次輸入密碼時(shí)使用明文確認(rèn)同樣可以節(jié)省二次輸入密碼的時(shí)間,出于信息安全的考慮,需支持有需要的用戶隨時(shí)切換成暗文顯示。以下是筆者收集的幾種明文確認(rèn)密碼的方式,可供參考:

12

13

14

鼠標(biāo)點(diǎn)擊、拖拽操作相對于鍵盤輸入來說是更加有效率的方式。通過添加選取器、快捷選項(xiàng)、智能聯(lián)想、range滑塊、number微調(diào)等方式讓用戶可以更快速的完成表單。

添加選取器、快捷選項(xiàng):

15

16

17

支持拖拽上傳:

18

智能聯(lián)想:

19

range滑塊:

20

number微調(diào):

21

慎用下拉框。由于下拉框會對用戶造成信息的隱藏,需要而外的操作才能顯示,更適合用在選擇日期、省份等可選范圍較大的地方。對于數(shù)目有限且重要的選項(xiàng)來說,使用更明顯的選擇方式更合適。

22

放寬對用戶輸入的要求,包括格式、大小寫等。讓你的系統(tǒng)更靈活而非讓用戶為了你改變他們的輸入習(xí)慣。

23

錯(cuò)誤預(yù)防。進(jìn)行有效的即時(shí)校驗(yàn),讓用戶能及時(shí)修改、補(bǔ)充缺漏的信息;另外,我們還可以通過限制用戶的行為(如在預(yù)定機(jī)票時(shí)返回時(shí)間無法選擇出發(fā)時(shí)間之前的日期,出發(fā)城市不能跟到達(dá)城市一樣等),或提供自動修正的方式來預(yù)防用戶犯錯(cuò)。

24

通過提供更加積極的交互反饋、預(yù)置文字、自動獲取信息、自動修改格式、補(bǔ)全小數(shù)點(diǎn)等方式,使你的表單變得更聰明。

如當(dāng)用戶輸入信用卡號碼時(shí),能夠自動判斷用戶使用的是哪種信用卡。

26

27

當(dāng)用戶輸入手機(jī)號碼時(shí),能夠判斷出其歸屬地。此時(shí)如果用戶輸錯(cuò)號碼,會更容易被發(fā)現(xiàn)。

28

當(dāng)用戶選擇了所在地區(qū)后,自動填充郵政編碼。

29

當(dāng)用戶輸入銀行賬號時(shí),自動空格間斷。

30

當(dāng)用戶輸入金額時(shí),自動補(bǔ)充小數(shù)。

31

幫助用戶進(jìn)行決策。當(dāng)面臨的選擇越多時(shí),用戶就越難做出決定。這個(gè)時(shí)候可以適當(dāng)?shù)膭澐置總€(gè)選項(xiàng)的優(yōu)先級,高亮其中的一個(gè),告訴用戶你的推薦理由,讓用戶更容易比較并做出選擇。

32

支持常用的快捷操作,如Tab切換等,讓用戶在不使用鼠標(biāo)的情況下也能完成整個(gè)表格的填寫。

提供友好的引導(dǎo)

清理晦澀的專業(yè)術(shù)語(如數(shù)據(jù)庫錯(cuò)誤),試著使用更加親切的語言來引導(dǎo)用戶填寫、告訴用戶錯(cuò)誤的原因。當(dāng)問題出現(xiàn)時(shí),清楚的說明問題出現(xiàn)的原因并提供有效的解決方案。必要時(shí),除了指導(dǎo)文案以外,還可以添加更加生動的照片或可視化圖形作為引導(dǎo)。

33

34

36.5

 一條龍服務(wù)

表單的終點(diǎn)并不是提交,我們需要為用戶提供一條龍服務(wù),形成流程閉環(huán),避免用戶在中途跳出。舉個(gè)例子,用戶在某網(wǎng)站選好商品點(diǎn)擊付款時(shí)發(fā)現(xiàn)賬戶余額不足,此時(shí)用戶只能先進(jìn)行充值才能進(jìn)行后續(xù)操作,但當(dāng)用戶充值完畢后,發(fā)現(xiàn)已經(jīng)找不回原來選擇的商品和付款頁面了。這就是典型的流程不閉環(huán)的情況。類似的還有當(dāng)用戶需要在論壇下載資源時(shí),系統(tǒng)提示回復(fù)才能下載,而用戶沒有注冊,需要在此之前先提交注冊表單,當(dāng)用戶填寫完畢后,卻直接跳轉(zhuǎn)到了論壇首頁。

一個(gè)好的表單設(shè)計(jì),不僅需要考慮用戶填寫前的引導(dǎo)、填寫時(shí)的及時(shí)校驗(yàn)與幫助、還需要考慮填寫后的整個(gè)流程體驗(yàn)。思考用戶填寫表單的初衷是什么,讓他在填寫完表單后能夠最快得到他最想要的東西。即便是他暫時(shí)無法得到的,也需要告訴他相應(yīng)的原因和能夠進(jìn)行的替代操作。

37

提供設(shè)計(jì)關(guān)懷

據(jù)統(tǒng)計(jì),大約有12%的人口具有或輕或重的色覺障礙。如果將色彩作為區(qū)分不可點(diǎn)擊文本和可點(diǎn)擊鏈接的唯一元素,可能會讓這部分的人使用時(shí)出現(xiàn)困難。我們可以通過給鏈接文字加下劃虛線、使用按鈕或其他形狀做區(qū)分,讓這類用戶能更加清楚的知道哪些是可點(diǎn)擊的區(qū)域。

40

最后,再增加一點(diǎn)愉悅度吧

研究表明,更大的文字輸入框、適度的留白空間會讓人更有填寫的欲望,優(yōu)雅的動畫效果也能增加填寫的趣味。以下的案例可供參考:

38

39

53b74a2f91ed1361aaad489af4e852f41b9fcfee118ae-Mjr1Bs_fw658

dribbble-form

form

藍(lán)藍(lán)設(shè)計(jì)bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔