當前位置:首頁 >影樓數碼 >數碼后期 >7個幫你全面提升Web表單填寫體驗的方法

數碼后期 7個幫你全面提升Web表單填寫體驗的方法

文章來源:其他網絡   時間:2019-06-26 08:34:30   我要投稿  分享到
數碼后期

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

那么,如何提高用戶填寫表單的效率,防止他們出錯或中途流失,提升愉悅度及轉化率呢?本文就Web表單設計,總結了以下的一些方法:

有效的說服用戶進行填寫

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

7個幫你全面提升Web表單填寫體驗的方法

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

7個幫你全面提升Web表單填寫體驗的方法

有效的說服用戶填寫表單,還需要剔除負面干擾,獲取他們的信任。大多數情況下,用戶對于填寫表單的最大顧慮是信息被網站收集之后的用途。用戶不希望源源不斷的收到垃圾推銷郵件,更不希望自己的隱私信息被公之于眾。此時,你可以通過引用一些具有影響力的權威人士的承諾,或者展示一些具有公共效應的證據,如相關媒體報道、來自現有用戶的贊許等任何能使人產生積極態度的元素。

7個幫你全面提升Web表單填寫體驗的方法

你還可以做的更貼心一些,告訴用戶填寫表單預計需要花費的時間。

7個幫你全面提升Web表單填寫體驗的方法

合理組織信息

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

想處理好層次?來看搜狐同學的專題你分析,絕對大有收獲!《拍案叫絕的設計!聊聊那些讓頁面更加出彩的小細節》

7個幫你全面提升Web表單填寫體驗的方法

一般來說,通知為藍色,警告為黃色,錯誤為紅色,成功確認為綠色。

想深入了解色彩的含義,來這篇好文取經!《設計師的配色理論:你真懂顏色了嗎?》

7個幫你全面提升Web表單填寫體驗的方法

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

7個幫你全面提升Web表單填寫體驗的方法

恰當的隱藏信息能夠使表單看起來更加清爽怡人,有些信息可以設置在需要進行相關操作時才出現。

7個幫你全面提升Web表單填寫體驗的方法

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

7個幫你全面提升Web表單填寫體驗的方法

為用戶節省時間

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

驗證碼永遠是表單上讓用戶頭疼的填寫項之一,他需要等待驗證碼的生成、確認驗證碼的內容、確保驗證碼輸入正確,才能點擊提交,而這整個過程對他來說并無實際價值,用戶不會因為多填寫一次驗證碼而得到額外的獎勵。我們可以通過改變輸入驗證碼的體驗,使其變得更簡單有趣,或者通過新的后臺邏輯限制用戶每日提交次數等行為來取締驗證碼。

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

7個幫你全面提升Web表單填寫體驗的方法

除了驗證碼以外,注冊填寫表單中經常存在的二次確認密碼也同樣費時。目前,很多國外的主流網站,如Facebook、Twitter、LinkedIn、Friendster等在填寫注冊表單時都不要求用戶確認密碼。WordPress甚至連都不需要用戶填寫,而是將密碼直接發送至用戶的郵箱。

7個幫你全面提升Web表單填寫體驗的方法

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

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

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

添加選取器、快捷選項:

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

支持拖拽上傳:

7個幫你全面提升Web表單填寫體驗的方法

智能聯想:

7個幫你全面提升Web表單填寫體驗的方法

range滑塊:

7個幫你全面提升Web表單填寫體驗的方法

number微調:

7個幫你全面提升Web表單填寫體驗的方法

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

7個幫你全面提升Web表單填寫體驗的方法

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

7個幫你全面提升Web表單填寫體驗的方法

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

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

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

如當用戶輸入信用卡號碼時,能夠自動判斷用戶使用的是哪種信用卡。

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

當用戶輸入手機號碼時,能夠判斷出其歸屬地。此時如果用戶輸錯號碼,會更容易被發現。

7個幫你全面提升Web表單填寫體驗的方法

當用戶選擇了所在地區后,自動填充郵政編碼。

7個幫你全面提升Web表單填寫體驗的方法

當用戶輸入銀行賬號時,自動空格間斷。

7個幫你全面提升Web表單填寫體驗的方法

當用戶輸入金額時,自動補充小數。

7個幫你全面提升Web表單填寫體驗的方法

幫助用戶進行決策。當面臨的選擇越多時,用戶就越難做出決定。這個時候可以適當的劃分每個選項的優先級,高亮其中的一個,告訴用戶你的推薦理由,讓用戶更容易比較并做出選擇。

7個幫你全面提升Web表單填寫體驗的方法

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

提供友好的引導

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

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

一條龍服務

表單的終點并不是提交,我們需要為用戶提供一條龍服務,形成流程閉環,避免用戶在中途跳出。

舉個例子,用戶在某網站選好商品點擊付款時發現賬戶余額不足,此時用戶只能先進行充值才能進行后續操作,但當用戶充值完畢后,發現已經找不回原來選擇的商品和付款頁面了。這就是典型的流程不閉環的情況。類似的還有當用戶需要在論壇下載資源時,系統提示回復才能下載,而用戶沒有注冊,需要在此之前先提交注冊表單,當用戶填寫完畢后,卻直接跳轉到了論壇首頁。

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

7個幫你全面提升Web表單填寫體驗的方法

提供設計關懷

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

7個幫你全面提升Web表單填寫體驗的方法

最后,再增加一點愉悅度吧

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

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

7個幫你全面提升Web表單填寫體驗的方法

 

更多影樓遠程數碼后期修片教程盡在全影網

官方微博:@全影網 http://weibo.com/7192com

官方微信:想在手機上獲取最新鮮資訊嗎?添加全影網官方微信:www7192com

免責聲明:

本站部分內容、觀點、圖片、文字、視頻來自網絡,僅供大家學習和交流,真實性、完整性、及時性本站不作任何保證或承諾。如果本站有涉及侵犯您的版權、著作權、肖像權的內容,請聯系我們(0536-8337192),我們會立即審核并處理。

我要評論

當前已有loading...個參與 查看所有評論
驗證碼: 驗證碼,看不清楚?請點擊刷新驗證碼

名企招聘

人才求職

婚紗攝影

全影招聘節X 關閉

掃描訪問手機版

江西快三走势图