2016-11-10 資深UI設計者
如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里
我們幾乎每天都會接觸形形色色的表單，登錄賬號、填寫信息以獲取服務、發(fā)布內容等。然而填寫表單的過程往往不是特別愉悅的，我們需要消耗時間輸入信息，點擊提交，可能還需要等待審核；尤其是碰到較為復雜、流程長的表單，如果用戶體驗較差，很容易讓人產生挫敗感，在中途選擇放棄。
那么，如何提高用戶填寫表單的效率，防止他們出錯或中途流失，提升愉悅度及轉化率呢？本文就web表單設計，總結了以下的一些方法：
首先，告知用戶為什么要填寫表單，他能獲得什么，讓用戶看到把信息給你的好處。舉個例子，GitHub在其注冊表單的右側清晰的告訴你注冊使用它會得到的幫助：
除了告訴用戶填完整個表單可以得到什么好處，你還可以更具體一點，告訴用戶你讓他填寫某一項信息是出于怎樣的考慮。
有效的說服用戶填寫表單，還需要剔除負面干擾，獲取他們的信任。大多數(shù)情況下，用戶對于填寫表單的最大顧慮是信息被網站收集之后的用途。用戶不希望源源不斷的收到垃圾推銷郵件，更不希望自己的隱私信息被公之于眾。此時，你可以通過引用一些具有影響力的權威人士的承諾，或者展示一些具有公共效應的證據，如媒體報道、用戶案例等。
你還可以做的更貼心一些，告訴用戶填寫表單預計需要花費的時間。
對于較為復雜、填寫項多的表單，如果不對信息進行組織，很容易顯得繁雜混亂，讓用戶在一開始就產生抵觸的情緒，甚至選擇放棄。合理有層次的組織信息，可以利用框線、空間間隔、顏色的不同，按照不同信息的類別、屬性和相關性進行區(qū)塊的劃分，用步驟條指示當前的進程。
一般來說，通知為藍色，警告為黃色，錯誤為紅色，成功確認為綠色。
清晰的瀏覽線，合理的標簽、提示文字及按鈕的排布，避免不必要的信息重復出現(xiàn)，能夠降低用戶的視覺負擔和物理負擔。
恰當?shù)碾[藏信息能夠使表單看起來更加清爽怡人，有些信息可以設置在需要進行相關操作時才出現(xiàn)。
區(qū)分一級動作和二級動作。用按鈕定義一級動作，用鏈接定義二級動作，或者相對于二級動作按鈕來說，賦予一級動作按鈕更為明顯的風格。
需要花大量時間填寫的表單容易讓人失去耐心，用戶是懶惰而繁忙的，試著刪去所有不必要的填寫項，考慮除了讓用戶機械的通過鍵盤在表單上輸入數(shù)據外，還有沒有別的更優(yōu)方式（如后續(xù)進行用研調查）收集所需信息。
驗證碼永遠是表單上讓用戶頭疼的填寫項之一，他需要等待驗證碼的生成、確認驗證碼的內容、確保驗證碼輸入正確，才能點擊提交，而這整個過程對他來說并無實際價值，用戶不會因為多填寫一次驗證碼而得到額外的獎勵。我們可以通過改變輸入驗證碼的體驗，使其變得更簡單有趣，或者通過新的后臺邏輯限制用戶每日提交次數(shù)等行為來取締驗證碼。
安全平臺部打擊惡意組的同事就發(fā)明了一種有趣的圖片驗證碼的方式：
除了驗證碼以外，注冊填寫表單中經常存在的二次確認密碼也同樣費時。目前，很多國外的主流網站，如Facebook、Twitter、LinkedIn、Friendster等在填寫注冊表單時都不要求用戶確認密碼。WordPress甚至連都不需要用戶填寫，而是將密碼直接發(fā)送至用戶的郵箱。
除了上面這種簡單粗暴的方式以外，首次輸入密碼時使用明文確認同樣可以節(jié)省二次輸入密碼的時間，出于信息安全的考慮，需支持有需要的用戶隨時切換成暗文顯示。以下是筆者收集的幾種明文確認密碼的方式，可供參考：
鼠標點擊、拖拽操作相對于鍵盤輸入來說是更加有效率的方式。通過添加選取器、快捷選項、智能聯(lián)想、range滑塊、number微調等方式讓用戶可以更快速的完成表單。
添加選取器、快捷選項：
支持拖拽上傳：
智能聯(lián)想：
range滑塊：
number微調：
慎用下拉框。由于下拉框會對用戶造成信息的隱藏，需要而外的操作才能顯示，更適合用在選擇日期、省份等可選范圍較大的地方。對于數(shù)目有限且重要的選項來說，使用更明顯的選擇方式更合適。
放寬對用戶輸入的要求，包括格式、大小寫等。讓你的系統(tǒng)更靈活而非讓用戶為了你改變他們的輸入習慣。
錯誤預防。進行有效的即時校驗，讓用戶能及時修改、補充缺漏的信息；另外，我們還可以通過限制用戶的行為（如在預定機票時返回時間無法選擇出發(fā)時間之前的日期，出發(fā)城市不能跟到達城市一樣等），或提供自動修正的方式來預防用戶犯錯。
通過提供更加積極的交互反饋、預置文字、自動獲取信息、自動修改格式、補全小數(shù)點等方式，使你的表單變得更聰明。
如當用戶輸入信用卡號碼時，能夠自動判斷用戶使用的是哪種信用卡。
當用戶輸入手機號碼時，能夠判斷出其歸屬地。此時如果用戶輸錯號碼，會更容易被發(fā)現(xiàn)。
當用戶選擇了所在地區(qū)后，自動填充郵政編碼。
當用戶輸入銀行賬號時，自動空格間斷。
當用戶輸入金額時，自動補充小數(shù)。
幫助用戶進行決策。當面臨的選擇越多時，用戶就越難做出決定。這個時候可以適當?shù)膭澐置總€選項的優(yōu)先級，高亮其中的一個，告訴用戶你的推薦理由，讓用戶更容易比較并做出選擇。
支持常用的快捷操作，如Tab切換等，讓用戶在不使用鼠標的情況下也能完成整個表格的填寫。
清理晦澀的專業(yè)術語（如數(shù)據庫錯誤），試著使用更加親切的語言來引導用戶填寫、告訴用戶錯誤的原因。當問題出現(xiàn)時，清楚的說明問題出現(xiàn)的原因并提供有效的解決方案。必要時，除了指導文案以外，還可以添加更加生動的照片或可視化圖形作為引導。
表單的終點并不是提交，我們需要為用戶提供一條龍服務，形成流程閉環(huán)，避免用戶在中途跳出。舉個例子，用戶在某網站選好商品點擊付款時發(fā)現(xiàn)賬戶余額不足，此時用戶只能先進行充值才能進行后續(xù)操作，但當用戶充值完畢后，發(fā)現(xiàn)已經找不回原來選擇的商品和付款頁面了。這就是典型的流程不閉環(huán)的情況。類似的還有當用戶需要在論壇下載資源時，系統(tǒng)提示回復才能下載，而用戶沒有注冊，需要在此之前先提交注冊表單，當用戶填寫完畢后，卻直接跳轉到了論壇首頁。
一個好的表單設計，不僅需要考慮用戶填寫前的引導、填寫時的及時校驗與幫助、還需要考慮填寫后的整個流程體驗。思考用戶填寫表單的初衷是什么，讓他在填寫完表單后能夠最快得到他最想要的東西。即便是他暫時無法得到的，也需要告訴他相應的原因和能夠進行的替代操作。
據統(tǒng)計，大約有12%的人口具有或輕或重的色覺障礙。如果將色彩作為區(qū)分不可點擊文本和可點擊鏈接的唯一元素，可能會讓這部分的人使用時出現(xiàn)困難。我們可以通過給鏈接文字加下劃虛線、使用按鈕或其他形狀做區(qū)分，讓這類用戶能更加清楚的知道哪些是可點擊的區(qū)域。
研究表明，更大的文字輸入框、適度的留白空間會讓人更有填寫的欲望，優(yōu)雅的動畫效果也能增加填寫的趣味。以下的案例可供參考：
原文鏈接：http://www.weiued.com/a/e1f49d27-fa0a-494c-a700-58b568697a0c
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務