針對(duì)長(zhǎng)表單設(shè)計(jì)，本文作者結(jié)合自己的項(xiàng)目經(jīng)驗(yàn)和使用其他APP時(shí)的一些好的體驗(yàn)，總結(jié)了10個(gè)小tips。enjoy~

表單設(shè)計(jì)是我們做產(chǎn)品設(shè)計(jì)時(shí)經(jīng)常會(huì)做的一件事，特別是長(zhǎng)表單，在設(shè)計(jì)時(shí)尤其要注意。

沒(méi)有用戶愿意對(duì)著一串很長(zhǎng)且無(wú)聊的字段機(jī)械式的填寫。

針對(duì)長(zhǎng)表單設(shè)計(jì)，我結(jié)合自己的項(xiàng)目經(jīng)驗(yàn)和使用其他APP時(shí)的一些好的體驗(yàn)，總結(jié)了下面10個(gè)小tips：

• 提前告知所需材料，避免表單填寫過(guò)程被打斷 。
• 用戶激勵(lì)，提前告知用戶完成表單的獎(jiǎng)勵(lì)。
• 清晰告知用戶完成整個(gè)表單的步驟 。
• 先易后難，將容易完成的表單放在前面 。
• 自動(dòng)填寫。
• 提供合適的輸入方式。
• 數(shù)據(jù)自動(dòng)保存。
• 識(shí)別代替輸入。
• 適時(shí)地鼓勵(lì)與反饋。
• 及時(shí)的幫助。

1. 提前告知所需材料，避免表單填寫過(guò)程被打斷

在用戶正式開(kāi)始填寫表單前，提前告知用戶完成表單所需的材料，比如身份證或工作證等，讓用戶可以提前準(zhǔn)備好，避免途中因?yàn)闇?zhǔn)備材料被打斷。 也可以防止用戶在途中因?yàn)槟承┰驎簳r(shí)不能提供相應(yīng)的材料而中途放棄，這種情況對(duì)用戶體驗(yàn)是一個(gè)很大的傷害。

△ 東興198

△ 漲樂(lè)財(cái)富通

2. 用戶激勵(lì)，提前告知用戶完成表單的獎(jiǎng)勵(lì)

在用戶開(kāi)始任務(wù)前，提前告知用戶完成任務(wù)后可以獲得哪些好處。比如可以獲得特權(quán)、實(shí)物獎(jiǎng)勵(lì)等，增加用戶對(duì)完成表單的期待感，可以有效地提升用戶完成任務(wù)的動(dòng)力。

△ 東方財(cái)富

△ 正和島

3. 清晰告知用戶完成整個(gè)表單的步驟

這個(gè)僅針對(duì)分步表單的設(shè)計(jì)。

在開(kāi)始任務(wù)時(shí)，清晰的告知用戶整個(gè)表單的填寫有多少個(gè)步驟，每一步是什么，可以讓用戶形成一個(gè)清晰的預(yù)期，減少用戶在填寫表單過(guò)程中的不耐情緒。 未知的東西更容易讓用戶焦慮。

△ 51信用卡管家

△ 平安證券

或者可以用進(jìn)度條告知用戶表單完成的進(jìn)度，如下圖：

△ 漲樂(lè)財(cái)富通

4. 先易后難，將容易完成的表單放在前面

就像從小老師教導(dǎo)我們的一樣，答題的時(shí)候一定要先易后難。進(jìn)行流程設(shè)計(jì)的時(shí)候也可以遵循這個(gè)道理，將容易完成的表單放在前面，這樣做有三個(gè)好處：

• 簡(jiǎn)單的表單更容易激起用戶的填寫欲望，用戶會(huì)迫不及待地去完成。相反，用戶一開(kāi)始就看到過(guò)于復(fù)雜的表單，很容易被嚇到，從而放棄整個(gè)任務(wù)。
• 用戶通過(guò)完成簡(jiǎn)單的表單，可以增加自信心，即使后面的表單變復(fù)雜了，用戶也更有耐心去完成。
• 當(dāng)用戶將前面簡(jiǎn)單的表單完成后，放棄整個(gè)表單的機(jī)會(huì)成本就變高了，即使后面碰到較難的任務(wù)，用戶放棄的幾率也會(huì)降低。

5. 自動(dòng)填寫

和后臺(tái)數(shù)據(jù)庫(kù)進(jìn)行匹配，自動(dòng)填寫已知信息。

比如用戶在填寫長(zhǎng)表單前已經(jīng)在平臺(tái)填寫了聯(lián)系方式、名稱或其他信息，而填寫長(zhǎng)表單時(shí)也需要這些信息要素，我們就可以將這些信息自動(dòng)填入表單，減少用戶的輸入。 還比如，后面的表單需要的信息要素正好在前面的表單中有輸入，我們也可以自動(dòng)幫用戶填入。

6. 提供合適的輸入方式

用戶填寫表單的時(shí)候，能提供選項(xiàng)的盡量提供選項(xiàng)。

選擇代替手動(dòng)輸入有兩個(gè)好處：

• 減少用戶的操作成本。
• 選項(xiàng)對(duì)于平臺(tái)來(lái)說(shuō)更可控，獲得的信息更加標(biāo)準(zhǔn)化。

常見(jiàn)的有性別、地區(qū)、年齡等。

△ 微信

舉一個(gè)例子，之前我們的產(chǎn)品需要用戶的工作經(jīng)驗(yàn)用于分類搜索，在用戶填寫信息時(shí)我們提供了統(tǒng)一的選項(xiàng)，這樣我們就能得到標(biāo)準(zhǔn)化和規(guī)范化的用戶數(shù)據(jù)。

但是在提供選項(xiàng)的時(shí)候要注意所提供選項(xiàng)的合理性，在上面用戶工作經(jīng)驗(yàn)的例子中，就要特別注意工作經(jīng)驗(yàn)的區(qū)間劃分。

如果表單不適合提供選項(xiàng)，必須由用戶手動(dòng)填寫，則需要根據(jù)不同的場(chǎng)景提供正確的控件。

比如輸入賬號(hào)、密碼，填寫郵箱，輸入昵稱等，均需提供不同的鍵盤。

7. 數(shù)據(jù)自動(dòng)保存

這點(diǎn)非常重要！特別是對(duì)于一些填寫內(nèi)容多的表單，一定要自動(dòng)保存。

試想一下，你正在完成一個(gè)長(zhǎng)表單的填寫，前面已經(jīng)填寫了很多內(nèi)容，可是到了提交前可能因?yàn)橄到y(tǒng)崩潰，網(wǎng)絡(luò)狀況，或者因?yàn)槠渌虿荒芡瓿商峤?，而你又不得不退出。?dāng)你重新開(kāi)始填寫表單時(shí)，卻不得不重新填寫一遍所有的信息，這絕對(duì)是讓人崩潰的。

舉一個(gè)我近期經(jīng)歷過(guò)的正面的例子。

最近我在辦理入深戶的手續(xù)，預(yù)約公安局辦理準(zhǔn)遷證需要完成一個(gè)很復(fù)雜的表單填寫。第一步需要填寫大量的信息要素，第二步需要上傳很多照片。當(dāng)我完成了百分之九十的時(shí)候，我發(fā)現(xiàn)有一張照片我沒(méi)有，需要家人拍給我，當(dāng)時(shí)我又不得不退出整個(gè)預(yù)約流程，心里真的有十萬(wàn)只草泥馬在奔騰。

后來(lái)照片齊全了，我重新開(kāi)始預(yù)約，驚喜的發(fā)現(xiàn)所有的信息都已經(jīng)自動(dòng)保存了，并不需要重新輸入，我只需要將最后一張照片上傳就OK了。真是棒棒噠！沒(méi)想到公安系統(tǒng)的網(wǎng)上服務(wù)體驗(yàn)也能做的這么棒。

8. 識(shí)別代替輸入

善于利用技術(shù)的力量，技術(shù)上能解決的就不要讓用戶輸入。

比如有時(shí)需要輸入身份證號(hào)或銀行卡號(hào)，現(xiàn)在有很多技術(shù)接口支持拍照掃描自動(dòng)獲取號(hào)碼，不需要用戶費(fèi)勁的手動(dòng)輸入。 再比如輸入位置，通過(guò)系統(tǒng)自動(dòng)定位，既準(zhǔn)確又省事。

△ 微信

上圖是在微信中添加銀行卡時(shí)，可通過(guò)拍照自動(dòng)識(shí)別卡號(hào)。

9. 適時(shí)地鼓勵(lì)與反饋

把用戶當(dāng)成普通人，而大部分普通人都是需要鼓勵(lì)與肯定的。

適時(shí)地給予用戶反饋，「你很棒，快完成了哦！」「你已經(jīng)完成了大半了，再加把勁就能完成全部了哦！」一句有溫度的文案，在關(guān)鍵節(jié)點(diǎn)上能有效安撫用戶的情緒。

10. 及時(shí)的幫助

不打擾用戶，但是在用戶需要的時(shí)候及時(shí)出現(xiàn)。

在設(shè)計(jì)表單時(shí)，對(duì)于一些專業(yè)詞匯或者較難理解的概念，要給予明確的解釋，避免用戶填寫表單時(shí)云里霧里、不知所措。對(duì)于一些有較高要求的表單信息也要給予明確的示例供用戶參考。而對(duì)于一些較復(fù)雜的流程，如果有必要的話，還可以提供在線咨詢幫助，協(xié)助用戶完成整個(gè)表單的填寫。

△ 東方財(cái)富

上圖是東方財(cái)富的開(kāi)戶流程，上傳身份證。是一個(gè)很好的示例，大家可以體會(huì)一下。

作者：KKi，微信公眾號(hào)“kki的設(shè)計(jì)筆記”

本文由 @KKi 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議