在To B的應(yīng)用程序中，表單是最常見的元素之一，因此要想提升用戶體驗(yàn)，應(yīng)該高度重視用戶體驗(yàn)設(shè)計(jì)技巧，精心的表單設(shè)計(jì)可以對用戶體驗(yàn)和交互效率提升產(chǎn)生很大的積極的影響。

我們在做表單設(shè)計(jì)的時候，一方面希望我們的表單可以對用戶有引導(dǎo)，可以針對用戶的操作作出適當(dāng)?shù)幕貞?yīng)，防止他們放棄表單填寫；另一方面我們不希望一開始加載大量表單，一下子就把用戶嚇到，下面是我在項(xiàng)目中做表單設(shè)計(jì)的一些考慮。

針對如何提升表單設(shè)計(jì)的引導(dǎo)性主要會考慮以下幾個問題：

一、如何排列體驗(yàn)是最優(yōu)的？

用戶在填寫表單的時候經(jīng)常會猶豫不決，所以要盡可能簡化表單填寫過程，表單設(shè)計(jì)要遵循內(nèi)在系統(tǒng)邏輯，符合用戶的使用習(xí)慣，減少視覺負(fù)荷，創(chuàng)建良好的信息層次。

1. 國外的設(shè)計(jì)研究員mattero penzo做了眼動實(shí)驗(yàn)，如果將label放置在input框上面，眼睛掃描表單速度會更快。

圖片1來源于Uxmatters

2. 按照邏輯順序聚合排列表單，便于用戶理解。

圖片2 UX Planet的注冊頁面

圖片2?UX Planet的注冊頁面把birthday表單填寫聚合在一起，方便用戶理解。

3. 將input框與將要輸入的長度匹配，尤其是可能會輸入很多信息的輸入框大小一定要留夠，讓用戶對將要輸入的內(nèi)容有所預(yù)期。

圖片3 Salesforce Object界面

圖片3?Salesforce Object 表單里面description input框比較大，提醒用戶可能會輸入比較多的內(nèi)容。

二、額外的提示怎么做到恰到好處？

為什么需要提示？

Sting TV的數(shù)字負(fù)責(zé)人Yakir Reznik做了A/B測試，在A版本只給用戶提供姓名和電話號碼表單讓用戶填寫，在B版本中除了給用戶提供姓名和電話號碼表單，還添加了一個解釋，即如果用戶需要找回密碼，則需要此信息，雖然提示比較長，甚至在移動設(shè)備上面還需要額外滾動，但是轉(zhuǎn)換率卻提高了11%。所以好的提示對用戶的引導(dǎo)性和防止用戶放棄有很重要的作用。

在做項(xiàng)目的過程中一般會遇到以下幾種提示，每種提示都各有優(yōu)缺點(diǎn)，大家可以根據(jù)自己的實(shí)際情況使用提示。

1. 靜態(tài)提示，在界面上固定顯示，不會消失。

• 優(yōu)點(diǎn)：始終在界面呈現(xiàn)提示，用戶不會錯過它，對指導(dǎo)用戶操作有重要作用。
• 缺點(diǎn)：占地方，會讓界面不整潔。
• 建議：如果是特別重要的信息或者是不容易理解的信息，建議采用靜態(tài)提示。

圖片4 Salesforce Object 界面

圖片4?Salesforce表單填寫有大量靜態(tài)提示，幫助用戶理解自己需要做的任務(wù)。

2.?按需顯示，當(dāng)鼠標(biāo)點(diǎn)擊或者懸停在圖標(biāo)“?”、“!”、“i”或者鏈接上出現(xiàn)提示。

• 優(yōu)點(diǎn)：不占用很大區(qū)域，還可以指導(dǎo)用戶。
• 缺點(diǎn)：對于不熟悉的用戶會錯過重要信息。
• 建議：如果是對用戶填寫前作指導(dǎo)，且表單信息容易理解，避免信息過載最好隱藏提示，如果是對用戶操作作出反饋，建議預(yù)留提示消息空間，且要立即提示最好。

圖片5 WIX Login?界面

圖片5 針對用戶操作作出反饋，提示用戶輸入錯誤。

3.?自動出現(xiàn)，當(dāng)label或者input框獲得焦點(diǎn)時，提示自動出現(xiàn)，隨著焦點(diǎn)變化而改變。

• 優(yōu)點(diǎn)：在需要的時候出現(xiàn)不會有負(fù)擔(dān)，也不會被忽略。
• 缺點(diǎn)：信息填寫完即使不再需要它也會出現(xiàn)。

圖片6 Zeplin Login界面

圖片6 Username?input框獲得焦點(diǎn)時，提示自動出現(xiàn)，當(dāng)焦點(diǎn)在password時提示在password右側(cè)出現(xiàn)，username右側(cè)的提示消失。

4.?自動消失（一般指占位符），輸入框提示用占位符，一旦用戶焦點(diǎn)在該框，占位符消失。

• 優(yōu)點(diǎn)：不占用很大區(qū)域，還可以指導(dǎo)用戶。
• 缺點(diǎn)：顯示提示信息空間有限；當(dāng)用戶輸入一半信息想要看提示的時候是無法顯示提示的。
• 建議：如果提示信息不多建議用占位符。

圖片7?Invison 注冊界面

三、如何減少用戶輸入次數(shù)？

好的表單設(shè)計(jì)可以減少用戶輸入次數(shù)，提升工作效率，目前主要從下面幾個方面去考慮。

• 打字交互成本高，盡量用單選或者多選代替，讓用戶做選擇題，減少用戶輸入。
• 區(qū)分可選和必選字段，必選可以加?*?號，讓用戶可以集中于必填字段。

圖片8

圖片8 用?*?號標(biāo)識出必填字段，但是如果大多數(shù)是必填且有大量表單，建議只標(biāo)識出非必填，如下圖9。

圖片9

四、如何鼓勵用戶繼續(xù)填寫信息？

給用戶持續(xù)的激勵，會刺激多巴胺的產(chǎn)生，多巴胺是一種化學(xué)獎賞的神經(jīng)遞質(zhì)，會產(chǎn)生神經(jīng)系統(tǒng)的興奮性，所以為讓用戶可以愉快的完成表單，不中途放棄，要有一些激勵設(shè)計(jì)。

1.?完成過程中提醒用戶進(jìn)程，鼓勵用戶繼續(xù)填寫表單。

圖片10

2.?完成任務(wù)之后給用戶一些稱號激勵，例如給用戶設(shè)置青銅、白銀、黃金、鉑金等等級，給用戶升級刺激。

圖片11 WIX 界面

后面我會講當(dāng)表單數(shù)量很多時，如何做設(shè)計(jì)？

作者：西西，微信公眾號或者知乎專欄：西西設(shè)計(jì)客棧

本文由 @西西 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels ，基于 CC0 協(xié)議