原創(chuàng)：[58UXD]
轉(zhuǎn)載：https://www.uisdc.com/efficient-completion-of-form-input

58UXD：表單是收集用戶信息的方式斋陪。如果你的產(chǎn)品需要收集大量用戶信息來完成為其提供的服務(wù)奏甫，那么在用戶進(jìn)行信息輸入的過程中一定要考慮到輸入成本和輸入效率對用戶體驗的影響遂黍。

針對復(fù)雜表單信息多入篮、填寫慢脏毯、體驗差等問題筷转，我們以「58簡歷發(fā)布」與「趕集房產(chǎn)發(fā)布」為例矫限，進(jìn)行表單發(fā)布流程的再設(shè)計凭戴。主要從以下六個方面進(jìn)行體驗的全面升級：

• 聚焦核心信息，減少認(rèn)知成本
• 聯(lián)動式鍵盤酪碘，提高輸入效率
• 實時反饋朋譬，傳遞規(guī)則信息
• 合理規(guī)劃層級，減少輸入壓力
• 從實際場景出發(fā)兴垦，抓用戶核心訴求點
• 專注獨立任務(wù)細(xì)分

一徙赢、了解在前

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

image

二搀擂、聚焦核心信息

在表單處于默認(rèn)態(tài)時西潘，通常會用標(biāo)簽提示用戶填寫什么類型的信息，用占位符作為額外提示告知用戶如何填寫信息等規(guī)則哨颂，當(dāng)用戶開始對信息進(jìn)行輸入時喷市，標(biāo)簽不變，占位符文本消失威恼。

image

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

如何讓用戶在不同的狀態(tài)下聚焦最重要的信息缭黔，減少認(rèn)知成本成為設(shè)計的關(guān)鍵點。

image

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

信息輸入前聚焦標(biāo)簽內(nèi)容蒂破，輸入中聚焦規(guī)則信息馏谨，輸入后聚焦結(jié)果內(nèi)容。讓用戶在不同狀態(tài)下附迷，聚焦核心信息惧互，減少認(rèn)知成本，提高輸入效率喇伯。

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

在用戶進(jìn)行表單信息輸入時，怎樣跟輸入控件親密無間的合作稻据，從而降低用戶的輸入成本艾猜，提高用戶的輸入體驗帚桩？

image

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

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

image

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

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

在58簡歷發(fā)布改版項目中餐塘，我們使用了同樣的設(shè)計思路妥衣，改變用戶的輸入方式，提高用戶輸入效率。

image

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

通過提高用戶對工具化產(chǎn)品的使用效率称鳞，避免了讓用戶頻繁跳入跳出相同類型的填寫項涮较，讓輸入更高效稠鼻。

四冈止、實時反饋

無論是規(guī)則引導(dǎo)還是錯誤提示，都要在用戶輸入時實時進(jìn)行反饋與提醒候齿，合理有序的向用戶傳遞規(guī)則信息熙暴，可以有效減少表單頁面中無效信息的同時，使信息傳遞更加具有通用性和規(guī)范性慌盯。

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

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

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

image

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

2. 實時反饋

在用戶輸入過程中狞谱，錯誤是不可避免的。如何將錯誤以高度可見的形式實時告知用戶禁漓，降低用戶錯誤輸入中帶來的挫敗感是尤其重要的跟衅。

image

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

image

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

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

Justin Mifsud 曾提出「表單應(yīng)該像一個對話伶跷，而不是審訊」。良好的對話式表單秘狞，能夠提高用戶信任度和轉(zhuǎn)化率叭莫。采用親和、生動烁试、容易理解的語言來引導(dǎo)食寡、告知和激勵用戶完成對應(yīng)的任務(wù)，文案往往在細(xì)節(jié)之處起到重要作用廓潜。

合理的規(guī)則提示抵皱、實時的錯誤反饋，友好的對話引導(dǎo)辩蛋，會降低用戶出錯帶來的挫敗感呻畸，提升正確率，提高用戶信任度和轉(zhuǎn)化率悼院。

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

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

表單的自動填寫或自動匹配功能，能夠幫助用戶降低輸入負(fù)荷、提升填寫效率绞愚。

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

• 將用戶在平臺中已輸入的相同信息自動帶入表單位衩；
• 將通過移動設(shè)備各種傳感器獲取準(zhǔn)確的信息自動帶入表單裆蒸，如用戶當(dāng)前定位可通過移動手機(jī)的 GPS 獲取糖驴；
• 將內(nèi)容相關(guān)聯(lián)的信息通過匹配分析自動帶入表單僚祷，如用戶輸入身份證號后，可根據(jù)第7-14位獲取出生日期贮缕、第17位數(shù)字獲取用戶性別辙谜，為用戶自動將匹配信息帶入表單。

image

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

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

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

表單是收集用戶信息的一種方式，并不是每個表單都是簡短的层玲，多數(shù)情況下我們需要用戶填寫大量繁瑣的信息号醉。對于這樣復(fù)雜的表單，在設(shè)計上合理分組辛块、引導(dǎo)用戶分步完成表單的填寫是很重要畔派，不但可以降低用戶對冗長表單的填寫壓力，同時能夠緩解對復(fù)雜润绵、較長表單的恐懼感线椰。

image

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

58簡歷發(fā)布，將繁雜的填寫信息進(jìn)行合理劃分尘盼、重新定義新表單的頁面規(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)系拖云，避免用戶在一級頁面與二級頁面的表單切換中迷失贷笛，同時統(tǒng)一的轉(zhuǎn)場效果能夠讓用戶在復(fù)雜的操作中，抓住最核心的表單頁面宙项。

六乏苦、從實際場景出發(fā)

無論是項目迭代還是一個新項目的開始，收集到的用戶訴求點往往是零散的尤筐、邏輯性不強(qiáng)的汇荐，所以我們需要在這些離散的訴求點中抓住核心訴求，梳理實際使用場景并分析問題盆繁。

image

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

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

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

七迎捺、專注獨立的任務(wù)細(xì)分

從扁平的任務(wù)平鋪到更加沉浸獨立的任務(wù)細(xì)分举畸，分支流程，在一個控件內(nèi)快速完成整個流程破加，減少整體表單頁面信息壓力的同時俱恶，也讓單個任務(wù)的完成更加專注和聚焦。

image

△ 聚焦獨立任務(wù) 圖片來源：58簡歷發(fā)布

58App 簡歷創(chuàng)建頁面，需要插入認(rèn)證手機(jī)號的任務(wù)合是，而這一任務(wù)是與建立簡歷本身無關(guān)的了罪，會干擾主流程的進(jìn)行；優(yōu)化后聪全，把認(rèn)證相關(guān)信息分割獨立泊藕，用戶進(jìn)入新場景執(zhí)行新任務(wù)，使單個任務(wù)更聚焦难礼。

總結(jié)

通過明確的信息提示娃圆、高效的輸入方式、實時的錯誤反饋蛾茉、合理的信息層級與任務(wù)拆分讼呢，讓整個表單的輸入流程更加易懂與流暢，操作體驗更加符合移動端用戶的使用習(xí)慣谦炬。

趕集房產(chǎn)與58招聘發(fā)布體驗升級的嘗試悦屏，發(fā)布成功率有了大幅提升、頁面跳出率與輸入報錯率相對下降键思，同時通過可用性測試础爬，用戶發(fā)布輸入的平均時長也相對短縮，用戶滿意度提升吼鳞。