如何高效完成表單輸入？來看這個實戰(zhàn)案例！

58UXD：表單是收集用戶信息的體例。假如你的產(chǎn)品必要收集大量用戶信息來完成為其提供的服務(wù)，那么在用戶進行信息輸入的過程中肯定要考慮到輸入成本和輸入服從對用戶體驗的影響。

針對復(fù)雜表單信息多、填寫慢、體驗差等題目，我們以「58簡歷發(fā)布」與「趕集房產(chǎn)發(fā)布」為例，進行表單發(fā)布流程的再設(shè)計。重要從以下六個方面進行體驗的周全升級：

• 聚焦核心信息，削減認知成本
• 聯(lián)動式鍵盤，進步輸入服從
• 實時反饋，傳遞規(guī)則信息
• 合理規(guī)劃層級，削減輸入壓力
• 從現(xiàn)實場景出發(fā)，抓用戶核心訴求點
• 專注自力義務(wù)細分

一、了解在前

表單具有三種狀況，默認態(tài)即用戶輸入信息之前的狀況，該狀況告知用戶必要填寫什么類型的信息；焦點態(tài)即用戶正在輸入信息時的狀況，該狀況使用戶聚焦輸入信息時，能夠更好與表單交互并完成信息填寫；反饋態(tài)即用戶填寫信息后的校驗狀況，該狀況能夠?qū)斎胄畔⑦M行實時判斷。

二、聚焦核心信息

在表單處于默認態(tài)時，通常會用標(biāo)簽提醒用戶填寫什么類型的信息，用占位符作為額外提醒告知用戶如何填寫信息等規(guī)則，當(dāng)用戶開始對信息進行輸入時，標(biāo)簽不變，占位符文本消散。

在復(fù)雜表單展示中，占位符的存在會分散用戶對核心信息的閱讀，消散會影響用戶對輸入規(guī)則的關(guān)注。

如何讓用戶在不同的狀況下聚焦最緊張的信息，削減認知成本成為設(shè)計的關(guān)鍵點。

△ 不同狀況下聚焦核心信息 圖片來源：58簡歷發(fā)布

信息輸入前聚焦標(biāo)簽內(nèi)容，輸入中聚焦規(guī)則信息，輸入后聚焦效果內(nèi)容。讓用戶在不同狀況下，聚焦核心信息，削減認知成本，進步輸入服從。

三、聯(lián)動式鍵盤

在用戶進行表單信息輸入時，怎樣跟輸入控件親密無間的合作，從而降低用戶的輸入成本，進步用戶的輸入體驗？

△ 控件反復(fù)調(diào)入跳出 圖片來源：趕集舊版房屋發(fā)布

舊版表單進行信息輸入時，每個字段的輸入過程均為「點擊選擇輸入 – 彈出對應(yīng)輸入控件 – 信息輸入 – 收起控件」，完成表單輸入的整個過程中，對應(yīng)的輸入控件在頻繁交叉的彈入彈出，用戶也在頻繁的選摘要輸入字段。如何從根本上改變用戶對輸入控件的使用服從？

△ 聯(lián)動鍵盤輸入更高效 圖片來源：趕集房屋發(fā)布

為了避免讓用戶頻繁的跳入跳出雷同類型的輸入項，首先整合表單的信息字段，將同類型的字段進行合并，同時結(jié)合輸入控件，設(shè)計聯(lián)動式組件，讓用戶在表單輸入時更加高效。

在58簡歷發(fā)布改版項目中，我們使用了同樣的設(shè)計思路，改變用戶的輸入體例，進步用戶輸入服從。

△ 聯(lián)動式鍵盤輸入更高效 圖片來源：58創(chuàng)建簡歷

通過進步用戶對工具化產(chǎn)品的使用服從，避免了讓用戶頻繁跳入跳出雷同類型的填寫項，讓輸入更高效。

四、實時反饋

無論是規(guī)則指導(dǎo)照舊錯誤提醒，都要在用戶輸入時實時進行反饋與提示，合理有序的向用戶傳遞規(guī)則信息，可以有用削減表單網(wǎng)頁中無效信息的同時，使信息傳遞更加具有通用性和規(guī)范性。

在聯(lián)動式鍵盤中增長提醒信息，幫助用戶在輸入過程中及時了解輸入規(guī)則。

1. 規(guī)則信息提醒

在用戶輸入時不再消散輸入規(guī)則，而將提醒文案與聯(lián)動式鍵盤相結(jié)合，輔助用戶精確完成信息填寫。

△ 左圖來源趕集 – 房屋發(fā)布；右圖來源58 – 創(chuàng)建簡歷

2. 實時反饋

在用戶輸入過程中，錯誤是不可避免的。如何將錯誤以高度可見的情勢實時告知用戶，降低用戶錯誤輸入中帶來的挫敗感是尤其緊張的。

△ 左圖來源趕集 – 房屋發(fā)布；右圖來源58 – 創(chuàng)建簡歷

△ 信息填寫實時反饋，來源趕集 – 房屋發(fā)布

3. 對話式指導(dǎo)

Justin Mifsud 曾提出「表單應(yīng)該像一個對話，而不是審訊」。優(yōu)秀的對話式表單，能夠進步用戶信賴度和轉(zhuǎn)化率。采用親和、生動、容易理解的語言來指導(dǎo)、告知和激勵用戶完成對應(yīng)的義務(wù)，文案每每在細節(jié)之處起到緊張作用。

合理的規(guī)則提醒、實時的錯誤反饋，友愛的對話指導(dǎo)，會降低用戶出錯帶來的挫敗感，提拔精確率，進步用戶信賴度和轉(zhuǎn)化率。

五、合理的規(guī)劃層級

1. 主動填寫/匹配預(yù)設(shè)值, 削減用戶輸入

表單的主動填寫或主動匹配功能，能夠幫助用戶降低輸入負荷、提拔填寫服從。

在對表單設(shè)計時，以下四種情況，可主動填寫或匹配表單信息：

• 將用戶在平臺中已輸入的雷同信息主動帶入表單；
• 將通過移動設(shè)備各種傳感器獲取正確的信息主動帶入表單，如用戶當(dāng)前定位可通過移脫手機的 GPS 獲取；
• 將內(nèi)容相干聯(lián)的信息通過匹配分析主動帶入表單，如用戶輸入身份證號后，可根據(jù)第7-14位獲掏出生日期、第17位數(shù)字獲取用戶性別，為用戶主動將匹配信息帶入表單。

△ 主動匹配 削減用戶輸入 圖片來源：趕集房屋發(fā)布

趕集房產(chǎn)發(fā)布，將舊版的「選擇區(qū)域」與「小區(qū)名稱」調(diào)換位置，用戶先輸入小區(qū)名稱，后臺數(shù)據(jù)即可通過小區(qū)定位，主動匹配小區(qū)所在區(qū)域。通過此設(shè)計用戶即可削減一項表單的填寫，提拔填寫服從。

2. 按步驟分解復(fù)雜表單，拆分義務(wù)

表單是收集用戶信息的一種體例，并不是每個表單都是簡短的，多數(shù)情況下我們必要用戶填寫大量繁瑣的信息。對于如許復(fù)雜的表單，在設(shè)計上合理分組、指導(dǎo)用戶分步完成表單的填寫是很緊張，不但可以降低用戶對冗長表單的填寫壓力，同時能夠緩解對復(fù)雜、較長表單的恐驚感。

△ 合理分解復(fù)雜表單 拆分義務(wù) 圖片來源：58簡歷發(fā)布

58簡歷發(fā)布，將繁雜的填寫信息進行合理劃分、重新定義新表單的網(wǎng)頁規(guī)則。

整個表單填寫分為三步：

• 用戶基本信息填寫：姓名、性別等；
• 求職意向填寫：期望職位、薪資、求職區(qū)域；
• 完美簡歷：基礎(chǔ)簡歷創(chuàng)建成功后，指導(dǎo)用戶填寫選填信息，使簡歷內(nèi)容更加雄厚，當(dāng)然此時用戶也可直接發(fā)布基礎(chǔ)簡歷。

對用戶來說，分步填寫信息不僅緩解了對復(fù)雜表單的恐驚感，而且能夠?qū)μ顚懙膬?nèi)容更聚焦。

3. 運用動效提醒信息層級關(guān)系， 避免用戶迷失

合理的運用動效，能夠通過覆蓋、滑出、推移等動效設(shè)計幫助用戶構(gòu)建界面空間與信息層級關(guān)系，避免用戶在一級網(wǎng)頁與二級網(wǎng)頁的表單切換中迷失，同時同一的轉(zhuǎn)場結(jié)果能夠讓用戶在復(fù)雜的操作中，捉住最核心的表單網(wǎng)頁。

六、從現(xiàn)實場景出發(fā)

無論是項目迭代照舊一個新項目的開始，收集到的用戶訴求點每每是零散的、邏輯性不強的，所以我們必要在這些離散的訴求點中捉住核心訴求，梳理現(xiàn)實使用場景并分析題目。

△ 捉住核心訴求 縮短操作路徑 圖片來源：58簡歷發(fā)布

58簡歷發(fā)布的頭像選擇與趕集房屋發(fā)布的圖片上傳功能，舊版是通過讓用戶先選擇類型，再選擇內(nèi)容，該邏輯結(jié)構(gòu)并無題目，但經(jīng)過用戶調(diào)研，我們發(fā)現(xiàn)多數(shù)用戶在此操作時會直接添加頭像或照片。根據(jù)調(diào)研效果反推舊版設(shè)計的合理性，該設(shè)計增長了用戶的選擇和操作成本。改版后將內(nèi)容直接用一個網(wǎng)頁進行組合，知足大多數(shù)用戶的核心訴求，同時為少數(shù)用戶提供入口。

打破邏輯思維的桎梏，從用戶最直接的訴求出發(fā)，縮短用戶使用路徑和無緣由的選擇成本。

七、專注自力的義務(wù)細分

從扁平的義務(wù)平鋪到更加沉浸自力的義務(wù)細分，分支流程，在一個控件內(nèi)快速完成整個流程，削減團體表單網(wǎng)頁信息壓力的同時，也讓單個義務(wù)的完成更加專注和聚焦。

△ 聚焦自力義務(wù) 圖片來源：58簡歷發(fā)布

58App 簡歷創(chuàng)建網(wǎng)頁，必要插入認證手機號的義務(wù)，而這一義務(wù)是與建立簡歷自己無關(guān)的，會干擾主流程的進行；優(yōu)化后，把認證相干信息分割自力，用戶進入新場景實行新義務(wù)，使單個義務(wù)更聚焦。

總結(jié)

通過明確的信息提醒、高效的輸入體例、實時的錯誤反饋、合理的信息層級與義務(wù)拆分，讓整個表單的輸入流程更加易懂與流暢，操作體驗更加吻合移動端用戶的使用風(fēng)俗。

趕集房產(chǎn)與58雇用發(fā)布體驗升級的嘗試，發(fā)布成功率有了大幅提拔、網(wǎng)頁跳出率與輸入報錯率相對降落，同時通過可用性測試，用戶發(fā)布輸入的平均時長也相對短縮，用戶寫意度提拔。

迎接關(guān)注「58UXD」的微信公眾號：

圖片素材作者：Renaud Lavency