設(shè)計(jì)沉思錄 | 如何高效完成表單輸入 ?

10 評(píng)論 14295 瀏覽 100 收藏 14 分鐘

針對(duì)復(fù)雜表單信息多,填寫慢、體驗(yàn)差等問題,我們以58簡歷發(fā)布與趕集房產(chǎn)發(fā)布為例,從六方面進(jìn)行用戶體驗(yàn)的全面升級(jí)。

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

針對(duì)復(fù)雜表單信息多、填寫慢、體驗(yàn)差等問題,我們以“58簡歷發(fā)布”與“趕集房產(chǎn)發(fā)布”為例,進(jìn)行表單發(fā)布流程的再設(shè)計(jì)。主要從以下六個(gè)方面進(jìn)行體驗(yàn)的全面升級(jí):

  1. 聚焦核心信息,減少認(rèn)知成本
  2. 聯(lián)動(dòng)式鍵盤,提高輸入效率
  3. 實(shí)時(shí)反饋,傳遞規(guī)則信息
  4. 合理規(guī)劃層級(jí),減少輸入壓力
  5. 從實(shí)際場景出發(fā),抓用戶核心訴求點(diǎn)
  6. 專注獨(dú)立任務(wù)細(xì)分

一、了解在前

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

二、聚焦核心信息

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

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

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

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

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

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

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

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

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

聯(lián)動(dòng)鍵盤?輸入更高效 ?圖片來源:趕集房屋發(fā)布

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

在58簡歷發(fā)布改版項(xiàng)目中,我們使用了同樣的設(shè)計(jì)思路,改變用戶的輸入方式,提高用戶輸入效率。

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

通過提高用戶對(duì)工具化產(chǎn)品的使用效率,避免了讓用戶頻繁跳入跳出相同類型的填寫項(xiàng),讓輸入更高效。

四、實(shí)時(shí)反饋

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

在聯(lián)動(dòng)式鍵盤中增加提示信息,幫助用戶在輸入過程中及時(shí)了解輸入規(guī)則。

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

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

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

2. 實(shí)時(shí)反饋

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

?左圖來源 趕集-房屋發(fā)布;右圖來源 58-創(chuàng)建簡歷

信息填寫實(shí)時(shí)反饋,來源?趕集-房屋發(fā)布

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

Justin Mifsud 曾提出“表單應(yīng)該像一個(gè)對(duì)話,而不是審訊”。良好的對(duì)話式表單,能夠提高用戶信任度和轉(zhuǎn)化率。采用親和、生動(dòng)、容易理解的語言來引導(dǎo)、告知和激勵(lì)用戶完成對(duì)應(yīng)的任務(wù),文案往往在細(xì)節(jié)之處起到重要作用。

合理的規(guī)則提示、實(shí)時(shí)的錯(cuò)誤反饋,友好的對(duì)話引導(dǎo),會(huì)降低用戶出錯(cuò)帶來的挫敗感,提升正確率,提高用戶信任度和轉(zhuǎn)化率。

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

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

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

在對(duì)表單設(shè)計(jì)時(shí),以下四種情況,可自動(dòng)填寫或匹配表單信息:

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

自動(dòng)匹配 減少用戶輸入 ? 圖片來源:趕集房屋發(fā)布

趕集房產(chǎn)發(fā)布,將舊版的“選擇區(qū)域”與“小區(qū)名稱”調(diào)換位置,用戶先輸入小區(qū)名稱,后臺(tái)數(shù)據(jù)即可通過小區(qū)定位,自動(dòng)匹配小區(qū)所在區(qū)域。通過此設(shè)計(jì)用戶即可減少一項(xiàng)表單的填寫,提升填寫效率。

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

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

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

58簡歷發(fā)布,將繁雜的填寫信息進(jìn)行合理劃分、重新定義新表單的頁面規(guī)則。

整個(gè)表單填寫分為三步:

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

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

3. 運(yùn)用動(dòng)效提示信息層級(jí)關(guān)系, 避免用戶迷失

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

從實(shí)際場景出發(fā)

無論是項(xiàng)目迭代還是一個(gè)新項(xiàng)目的開始,收集到的用戶訴求點(diǎn)往往是零散的、邏輯性不強(qiáng)的,所以我們需要在這些離散的訴求點(diǎn)中抓住核心訴求,梳理實(shí)際使用場景并分析問題。

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

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

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

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

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

聚焦獨(dú)立任務(wù) ? ?圖片來源:58簡歷發(fā)布

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

八、總結(jié)

通過明確的信息提示、高效的輸入方式、實(shí)時(shí)的錯(cuò)誤反饋、合理的信息層級(jí)與任務(wù)拆分,讓整個(gè)表單的輸入流程更加易懂與流暢,操作體驗(yàn)更加符合移動(dòng)端用戶的使用習(xí)慣。

趕集房產(chǎn)與58招聘發(fā)布體驗(yàn)升級(jí)的嘗試,發(fā)布成功率有了大幅提升、頁面跳出率與輸入報(bào)錯(cuò)率相對(duì)下降,同時(shí)通過可用性測試,用戶發(fā)布輸入的平均時(shí)長也相對(duì)短縮,用戶滿意度提升。

 

作者:杜瑋寧,交互設(shè)計(jì)師,迷戀AR,喜好狗,玩點(diǎn)顏料,懂點(diǎn)代碼

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心(微信公眾號(hào)@58UXD),作者@杜瑋寧

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 聯(lián)動(dòng)組件 真的創(chuàng)新 好棒??

    來自浙江 回復(fù)
  2. 這么簡單的事,讓你嗶嗶這么久,體驗(yàn)好嗎?!

    回復(fù)
    1. 體驗(yàn)好不好可以嘗試一下…… 只是一種設(shè)計(jì)方法……也許你有更好的……互相學(xué)習(xí)嘛……??

      回復(fù)
  3. 這么簡單的事讓你嗶嗶了這么久,體驗(yàn)好嗎?你覺得!

    回復(fù)
    1. 歡迎用腦子想一下好不好

      來自北京 回復(fù)
  4. 怎么在網(wǎng)頁中加入這種動(dòng)態(tài)的UI圖啊

    來自廣東 回復(fù)
    1. 可以關(guān)注我們的微信公眾號(hào)(58uxd),后臺(tái)留言給我們,幫你解答 ??

      來自北京 回復(fù)
    2. 好的呢

      來自廣東 回復(fù)
  5. 棒棒噠!

    來自廣東 回復(fù)
  6. 好棒,流暢, 節(jié)約頁面。

    來自上海 回復(fù)