7個(gè)方法幫你全面提升WEB表單填寫(xiě)體驗(yàn)

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

研究表明，更大的文字輸入框、適度的留白空間會(huì)讓人更有填寫(xiě)的欲望，優(yōu)雅的動(dòng)畫(huà)效果也能增加填寫(xiě)的趣味。

關(guān)鍵詞：成都品牌網(wǎng)站建設(shè)公司, 網(wǎng)站制作公司, 重慶網(wǎng)站建設(shè), 網(wǎng)站設(shè)計(jì), 網(wǎng)站建設(shè), 手機(jī)網(wǎng)站開(kāi)發(fā)

新聞名稱(chēng)：7個(gè)方法幫你全面提升WEB表單填寫(xiě)體驗(yàn)
本文來(lái)源：http://www.muchs.cn/news/166577.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、微信公眾號(hào)、網(wǎng)站改版、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)