58UXD：表單是收集用戶信息的方式。如果你的產品需要收集大量用戶信息來完成為其提供的服務，那么在用戶進行信息輸入的過程中一定要考慮到輸入成本和輸入效率對用戶體驗的影響。
針對復雜表單信息多、填寫慢、體驗差等問題，我們以「58簡歷發布」與「趕集房產發布」為例，進行表單發布流程的再設計。主要從以下六個方面進行體驗的全面升級：
- 聚焦核心信息，減少認知成本
- 聯動式鍵盤，提高輸入效率
- 實時反饋，傳遞規則信息
- 合理規劃層級，減少輸入壓力
- 從實際場景出發，抓用戶核心訴求點
- 專注獨立任務細分
一、了解在前
表單具有三種狀態，默認態即用戶輸入信息之前的狀態，該狀態告知用戶需要填寫什么類型的信息；焦點態即用戶正在輸入信息時的狀態，該狀態使用戶聚焦輸入信息時，能夠更好與表單交互并完成信息填寫；反饋態即用戶填寫信息后的校驗狀態，該狀態能夠對輸入信息進行實時判斷。
二、聚焦核心信息
在表單處于默認態時，通常會用標簽提示用戶填寫什么類型的信息，用占位符作為額外提示告知用戶如何填寫信息等規則，當用戶開始對信息進行輸入時，標簽不變，占位符文本消失。
在復雜表單展示中，占位符的存在會分散用戶對核心信息的閱讀，消失會影響用戶對輸入規則的關注。
如何讓用戶在不同的狀態下聚焦最重要的信息，減少認知成本成為設計的關鍵點。
△ 不同狀態下聚焦核心信息 圖片來源：58簡歷發布
信息輸入前聚焦標簽內容，輸入中聚焦規則信息，輸入后聚焦結果內容。讓用戶在不同狀態下，聚焦核心信息，減少認知成本，提高輸入效率。
三、聯動式鍵盤
在用戶進行表單信息輸入時，怎樣跟輸入控件親密無間的合作，從而降低用戶的輸入成本，提高用戶的輸入體驗？
△ 控件反復調入跳出 圖片來源：趕集舊版房屋發布
舊版表單進行信息輸入時，每個字段的輸入過程均為「點擊選擇輸入 - 彈出對應輸入控件 - 信息輸入 - 收起控件」，完成表單輸入的整個過程中，對應的輸入控件在頻繁交叉的彈入彈出，用戶也在頻繁的選擇要輸入字段。如何從根本上改變用戶對輸入控件的使用效率？
△?聯動鍵盤輸入更高效 圖片來源：趕集房屋發布
為了避免讓用戶頻繁的跳入跳出相同類型的輸入項，首先整合表單的信息字段，將同類型的字段進行合并，同時結合輸入控件，設計聯動式組件，讓用戶在表單輸入時更加高效。
在58簡歷發布改版項目中，我們使用了同樣的設計思路，改變用戶的輸入方式，提高用戶輸入效率。
△?聯動式鍵盤輸入更高效 圖片來源：58創建簡歷
通過提高用戶對工具化產品的使用效率，避免了讓用戶頻繁跳入跳出相同類型的填寫項，讓輸入更高效。
四、實時反饋
無論是規則引導還是錯誤提示，都要在用戶輸入時實時進行反饋與提醒，合理有序的向用戶傳遞規則信息，可以有效減少表單頁面中無效信息的同時，使信息傳遞更加具有通用性和規范性。
在聯動式鍵盤中增加提示信息，幫助用戶在輸入過程中及時了解輸入規則。
1. 規則信息提示
在用戶輸入時不再消失輸入規則，而將提示文案與聯動式鍵盤相結合，輔助用戶正確完成信息填寫。
△?左圖來源趕集 - 房屋發布；右圖來源58 - 創建簡歷
2. 實時反饋
在用戶輸入過程中，錯誤是不可避免的。如何將錯誤以高度可見的形式實時告知用戶，降低用戶錯誤輸入中帶來的挫敗感是尤其重要的。
△?左圖來源趕集 - 房屋發布；右圖來源58 - 創建簡歷
△?信息填寫實時反饋，來源趕集 - 房屋發布
3. 對話式引導
Justin Mifsud 曾提出「表單應該像一個對話，而不是審訊」。良好的對話式表單，能夠提高用戶信任度和轉化率。采用親和、生動、容易理解的語言來引導、告知和激勵用戶完成對應的任務，文案往往在細節之處起到重要作用。
合理的規則提示、實時的錯誤反饋，友好的對話引導，會降低用戶出錯帶來的挫敗感，提升正確率，提高用戶信任度和轉化率。
五、合理的規劃層級
1. 自動填寫/匹配預設值, 減少用戶輸入
表單的自動填寫或自動匹配功能，能夠幫助用戶降低輸入負荷、提升填寫效率。
在對表單設計時，以下四種情況，可自動填寫或匹配表單信息：
- 將用戶在平臺中已輸入的相同信息自動帶入表單；
- 將通過移動設備各種傳感器獲取準確的信息自動帶入表單，如用戶當前定位可通過移動手機的 GPS 獲??；
- 將內容相關聯的信息通過匹配分析自動帶入表單，如用戶輸入身份證號后，可根據第7-14位獲取出生日期、第17位數字獲取用戶性別，為用戶自動將匹配信息帶入表單。
△?自動匹配 減少用戶輸入 圖片來源：趕集房屋發布
趕集房產發布，將舊版的「選擇區域」與「小區名稱」調換位置，用戶先輸入小區名稱，后臺數據即可通過小區定位，自動匹配小區所在區域。通過此設計用戶即可減少一項表單的填寫，提升填寫效率。
2. 按步驟分解復雜表單，拆分任務
表單是收集用戶信息的一種方式，并不是每個表單都是簡短的，多數情況下我們需要用戶填寫大量繁瑣的信息。對于這樣復雜的表單，在設計上合理分組、引導用戶分步完成表單的填寫是很重要，不但可以降低用戶對冗長表單的填寫壓力，同時能夠緩解對復雜、較長表單的恐懼感。
△?合理分解復雜表單 拆分任務 圖片來源：58簡歷發布
58簡歷發布，將繁雜的填寫信息進行合理劃分、重新定義新表單的頁面規則。
整個表單填寫分為三步：
- 用戶基本信息填寫：姓名、性別等；
- 求職意向填寫：期望職位、薪資、求職區域；
- 完善簡歷：基礎簡歷創建成功后，引導用戶填寫選填信息，使簡歷內容更加豐富，當然此時用戶也可直接發布基礎簡歷。
對用戶來說，分步填寫信息不僅緩解了對復雜表單的恐懼感，而且能夠對填寫的內容更聚焦。
3. 運用動效提示信息層級關系， 避免用戶迷失
合理的運用動效，能夠通過覆蓋、滑出、推移等動效設計幫助用戶構建界面空間與信息層級關系，避免用戶在一級頁面與二級頁面的表單切換中迷失，同時統一的轉場效果能夠讓用戶在復雜的操作中，抓住最核心的表單頁面。
六、從實際場景出發
無論是項目迭代還是一個新項目的開始，收集到的用戶訴求點往往是零散的、邏輯性不強的，所以我們需要在這些離散的訴求點中抓住核心訴求，梳理實際使用場景并分析問題。
△?抓住核心訴求 縮短操作路徑 圖片來源：58簡歷發布
58簡歷發布的頭像選擇與趕集房屋發布的圖片上傳功能，舊版是通過讓用戶先選擇類型，再選擇內容，該邏輯結構并無問題，但經過用戶調研，我們發現多數用戶在此操作時會直接添加頭像或照片。根據調研結果反推舊版設計的合理性，該設計增加了用戶的選擇和操作成本。改版后將內容直接用一個頁面進行組合，滿足大多數用戶的核心訴求，同時為少數用戶提供入口。
打破邏輯思維的桎梏，從用戶最直接的訴求出發，縮短用戶使用路徑和無緣由的選擇成本。
七、專注獨立的任務細分
從扁平的任務平鋪到更加沉浸獨立的任務細分，分支流程，在一個控件內快速完成整個流程，減少整體表單頁面信息壓力的同時，也讓單個任務的完成更加專注和聚焦。
△?聚焦獨立任務 圖片來源：58簡歷發布
58App 簡歷創建頁面，需要插入認證手機號的任務，而這一任務是與建立簡歷本身無關的，會干擾主流程的進行；優化后，把認證相關信息分割獨立，用戶進入新場景執行新任務，使單個任務更聚焦。
總結
通過明確的信息提示、高效的輸入方式、實時的錯誤反饋、合理的信息層級與任務拆分，讓整個表單的輸入流程更加易懂與流暢，操作體驗更加符合移動端用戶的使用習慣。
趕集房產與58招聘發布體驗升級的嘗試，發布成功率有了大幅提升、頁面跳出率與輸入報錯率相對下降，同時通過可用性測試，用戶發布輸入的平均時長也相對短縮，用戶滿意度提升。
歡迎關注「58UXD」的微信公眾號：
圖片素材作者：Renaud Lavency
「表單設計經驗總結還有這些！」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 7 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓