設(shè)計(jì)沉思錄 | 如何高效完成表單輸入 ?
針對(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í):
- 聚焦核心信息,減少認(rèn)知成本
- 聯(lián)動(dòng)式鍵盤,提高輸入效率
- 實(shí)時(shí)反饋,傳遞規(guī)則信息
- 合理規(guī)劃層級(jí),減少輸入壓力
- 從實(shí)際場景出發(fā),抓用戶核心訴求點(diǎn)
- 專注獨(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é)議
聯(lián)動(dòng)組件 真的創(chuàng)新 好棒??
這么簡單的事,讓你嗶嗶這么久,體驗(yàn)好嗎?!
體驗(yàn)好不好可以嘗試一下…… 只是一種設(shè)計(jì)方法……也許你有更好的……互相學(xué)習(xí)嘛……??
這么簡單的事讓你嗶嗶了這么久,體驗(yàn)好嗎?你覺得!
歡迎用腦子想一下好不好
怎么在網(wǎng)頁中加入這種動(dòng)態(tài)的UI圖啊
可以關(guān)注我們的微信公眾號(hào)(58uxd),后臺(tái)留言給我們,幫你解答 ??
好的呢
棒棒噠!
好棒,流暢, 節(jié)約頁面。