設計沉思錄|如何高效完成表單輸入 ?

針對複雜表單信息多,填寫慢、體驗差等問題,我們以58簡歷發佈與趕集房產發佈為例,從六方面進行用戶體驗的全面升級。

设计沉思录|如何高效完成表单输入 ?

表單是收集用戶信息的方式。如果你的產品需要收集大量用戶信息來完成為其提供的服務,那麼在用戶進行信息輸入的過程中一定要考慮到輸入成本輸入效率對用戶體驗的影響。

針對複雜表單信息多、填寫慢、體驗差等問題,我們以“58簡歷發佈”與“趕集房產發佈”為例,進行表單發佈流程的再設計。主要從以下六個方面進行體驗的全面升級:

  1. 聚焦核心信息,減少認知成本
  2. 聯動式鍵盤,提高輸入效率
  3. 實時反饋,傳遞規則信息
  4. 合理規劃層級,減少輸入壓力
  5. 從實際場景出發,抓用戶核心訴求點
  6. 專注獨立任務細分

一、瞭解在前

表單具有三種狀態,默認態即用戶輸入信息之前的狀態,該狀態告知用戶需要填寫什麼類型的信息;焦點態即用戶正在輸入信息時的狀態,該狀態使用戶聚焦輸入信息時,能夠更好與表單交互並完成信息填寫;反饋態即用戶填寫信息後的校驗狀態,該狀態能夠對輸入信息進行實時判斷。

设计沉思录|如何高效完成表单输入 ?

二、聚焦核心信息

在表單處於默認態時,通常會用標籤提示用戶填寫什麼類型的信息,用佔位符作為額外提示告知用戶如何填寫信息等規則,當用戶開始對信息進行輸入時,標籤不變,佔位符文本消失。

在複雜表單展示中,佔位符的存在會分散用戶對核心信息的閱讀,消失會影響用戶對輸入規則的關注。

如何讓用戶在不同的狀態下聚焦最重要的信息,減少認知成本成為設計的關鍵點。

设计沉思录|如何高效完成表单输入 ?

信息輸入前聚焦標籤內容,輸入中聚焦規則信息,輸入後聚焦結果內容。讓用戶在不同狀態下,聚焦核心信息,減少認知成本,提高輸入效率。

三、聯動式鍵盤

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

设计沉思录|如何高效完成表单输入 ?

舊版表單進行信息輸入時,每個字段的輸入過程均為“點擊選擇輸入—彈出對應輸入控件—信息輸入—收起控件”,完成表單輸入的整個過程中,對應的輸入控件在頻繁交叉的彈入彈出,用戶也在頻繁的選擇要輸入字段。如何從根本上改變用戶對輸入控件的使用效率?

设计沉思录|如何高效完成表单输入 ?

為了避免讓用戶頻繁的跳入跳出相同類型的輸入項,首先整合表單的信息字段,將同類型的字段進行合併,同時結合輸入控件,設計聯動式組件,讓用戶在表單輸入時更加高效。

在58簡歷發佈改版項目中,我們使用了同樣的設計思路,改變用戶的輸入方式,提高用戶輸入效率。

设计沉思录|如何高效完成表单输入 ?

通過提高用戶對工具化產品的使用效率,避免了讓用戶頻繁跳入跳出相同類型的填寫項,讓輸入更高效。

四、實時反饋

無論是規則引導還是錯誤提示,都要在用戶輸入時實時進行反饋與提醒,合理有序的向用戶傳遞規則信息可以有效減少表單頁面中無效信息的同時,使信息傳遞更加具有通用性和規範性

在聯動式鍵盤中增加提示信息,幫助用戶在輸入過程中及時瞭解輸入規則。

1. 規則信息提示

在用戶輸入時不再消失輸入規則,而將提示文案與聯動式鍵盤相結合,輔助用戶正確完成信息填寫。

设计沉思录|如何高效完成表单输入 ?

左圖來源 趕集-房屋發佈;右圖來源 58-創建簡歷

2. 實時反饋

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

设计沉思录|如何高效完成表单输入 ?

左圖來源 趕集-房屋發佈;右圖來源 58-創建簡歷

设计沉思录|如何高效完成表单输入 ?

信息填寫實時反饋,來源 趕集-房屋發佈

3. 對話式引導

Justin Mifsud 曾提出“表單應該像一個對話,而不是審訊”。良好的對話式表單,能夠提高用戶信任度和轉化率。採用親和、生動、容易理解的語言來引導、告知和激勵用戶完成對應的任務,文案往往在細節之處起到重要作用。

合理的規則提示、實時的錯誤反饋,友好的對話引導,會降低用戶出錯帶來的挫敗感,提升正確率,提高用戶信任度和轉化率。

五、合理的規劃層級

1. 自動填寫/匹配預設值, 減少用戶輸入

表單的自動填寫或自動匹配功能,能夠幫助用戶降低輸入負荷、提升填寫效率。

在對錶單設計時,以下四種情況,可自動填寫或匹配表單信息:

  • 將用戶在平臺中已輸入的相同信息自動帶入表單;
  • 將通過移動設備各種傳感器獲取準確的信息自動帶入表單,如用戶當前定位可通過移動手機的GPS獲取;
  • 將內容相關聯的信息通過匹配分析自動帶入表單,如用戶輸入身份證號後,可根據第7-14位獲取出生日期、第17位數字獲取用戶性別,為用戶自動將匹配信息帶入表單。
设计沉思录|如何高效完成表单输入 ?

趕集房產發佈,將舊版的“選擇區域”與“小區名稱”調換位置,用戶先輸入小區名稱,後臺數據即可通過小區定位,自動匹配小區所在區域。通過此設計用戶即可減少一項表單的填寫,提升填寫效率。

2. 按步驟分解複雜表單, 拆分任務

表單是收集用戶信息的一種方式,並不是每個表單都是簡短的,多數情況下我們需要用戶填寫大量繁瑣的信息。對於這樣複雜的表單,在設計上合理分組、引導用戶分步完成表單的填寫是很重要,不但可以降低用戶對冗長表單的填寫壓力,同時能夠緩解對複雜、較長表單的恐懼感。

设计沉思录|如何高效完成表单输入 ?

58簡歷發佈,將繁雜的填寫信息進行合理劃分、重新定義新表單的頁面規則。

整個表單填寫分為三步:

  • 用戶基本信息填寫:姓名、性別等;
  • 求職意向填寫:期望職位、薪資、求職區域;
  • 完善簡歷:基礎簡歷創建成功後,引導用戶填寫選填信息,使簡歷內容更加豐富,當然此時用戶也可直接發佈基礎簡歷。

對用戶來說,分步填寫信息不僅緩解了對複雜表單的恐懼感,而且能夠對填寫的內容更聚焦。

3. 運用動效提示信息層級關係, 避免用戶迷失

合理的運用動效,能夠通過覆蓋、滑出、推移等動效設計幫助用戶構建界面空間與信息層級關係,避免用戶在一級頁面與二級頁面的表單切換中迷失,同時統一的轉場效果能夠讓用戶在複雜的操作中,抓住最核心的表單頁面。

從實際場景出發

無論是項目迭代還是一個新項目的開始,收集到的用戶訴求點往往是零散的、邏輯性不強的,所以我們需要在這些離散的訴求點中抓住核心訴求,梳理實際使用場景並分析問題。

设计沉思录|如何高效完成表单输入 ?

58簡歷發佈的頭像選擇與趕集房屋發佈的圖片上傳功能,舊版是通過讓用戶先選擇類型,再選擇內容,該邏輯結構並無問題,但經過用戶調研,我們發現多數用戶在此操作時會直接添加頭像或照片。根據調研結果反推舊版設計的合理性,該設計增加了用戶的選擇和操作成本。改版後將內容直接用一個頁面進行組合,滿足大多數用戶的核心訴求,同時為少數用戶提供入口。

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

七、專注獨立的任務細分

從扁平的任務平鋪到更加沉浸獨立的任務細分,分支流程,在一個控件內快速完成整個流程,減少整體表單頁面信息壓力的同時,也讓單個任務的完成更加專注和聚焦。

设计沉思录|如何高效完成表单输入 ?

58App簡歷創建頁面,需要插入認證手機號的任務,而這一任務是與建立簡歷本身無關的,會干擾主流程的進行;優化後,把認證相關信息分割獨立,用戶進入新場景執行新任務,使單個任務更聚焦。

八、總結

通過明確的信息提示、高效的輸入方式、實時的錯誤反饋、合理的信息層級與任務拆分,讓整個表單的輸入流程更加易懂與流暢,操作體驗更加符合移動端用戶的使用習慣。

趕集房產與58招聘發佈體驗升級的嘗試,發佈成功率有了大幅提升、頁面跳出率與輸入報錯率相對下降,同時通過可用性測試,用戶發佈輸入的平均時長也相對短縮,用戶滿意度提升。

題圖來自 Unsplash,基於 CC0 協議


分享到:


相關文章: