設(shè)計(jì)沉思錄 | 表單如何提效賦能?
編輯導(dǎo)讀:我們上網(wǎng)經(jīng)常會碰到各種各樣的表單。注冊賬號要填表單,網(wǎng)上購物要填表單,登錄郵箱要填表單……好的表單設(shè)計(jì)能給網(wǎng)站增加注冊量,面對復(fù)雜的表單,設(shè)計(jì)師如何對其重新設(shè)計(jì),為用戶減輕負(fù)擔(dān)、提高表單效率和成功率呢?本文作者結(jié)合負(fù)責(zé)的具體項(xiàng)目案例,對此進(jìn)行了分析總結(jié),與大家分享。
本季度展開了對黃頁發(fā)布的一個戰(zhàn)略升級計(jì)劃:為什么說戰(zhàn)略升級計(jì)劃,首先我們針對發(fā)布進(jìn)行了三個階段的規(guī)劃:第一階段為“基礎(chǔ)構(gòu)建”第二階段為“輕量化”第三階段為“智能化”。
我們將會從這三個階段進(jìn)行全方位連載復(fù)盤。本次分享主要從【基礎(chǔ)構(gòu)建】視覺方向進(jìn)行闡述,歡迎大家持續(xù)關(guān)注和探討。
01 升級背景
本次1.0版本將以基礎(chǔ)構(gòu)建展開一個整體的發(fā)布升級。
黃頁的內(nèi)容帖子數(shù)量及質(zhì)量在整體業(yè)務(wù)中的重要性不言而喻,故此發(fā)布是很重要的一個環(huán)節(jié),為了更好的滿足業(yè)務(wù)需求以及未來的可能性。推動了黃頁發(fā)布的基礎(chǔ)構(gòu)建計(jì)劃,提升發(fā)布效率及發(fā)布成功率,全流程優(yōu)化用戶體驗(yàn),也是為了后續(xù)的2.0和3.0版本做好基礎(chǔ)準(zhǔn)備。
接下來分為三個方面來總結(jié),首先是現(xiàn)狀思考:也就是目前發(fā)布的情況,以及思考我們想要達(dá)成一個什么樣子的目標(biāo)。第二點(diǎn)是進(jìn)行目標(biāo)拆分和推導(dǎo),然后進(jìn)行設(shè)計(jì)產(chǎn)出。最后一個方面是從數(shù)據(jù)方面進(jìn)行驗(yàn)證我們所想及所設(shè)定目標(biāo)是否一致,還有針對此次改版的一個總結(jié)和后續(xù)的一些行為。
02 現(xiàn)狀思考
改版初期,針對黃頁發(fā)布流程整體進(jìn)行了調(diào)研、體驗(yàn),同事對關(guān)鍵流程進(jìn)行了數(shù)據(jù)分析,總結(jié)歸納出現(xiàn)有頁面存在的問題如下:
- 整體設(shè)計(jì)風(fēng)格及交互體驗(yàn)不統(tǒng)一:彈窗、信息填寫等樣式太過繁多,完全不一致導(dǎo)致用戶操作成本較高
- 整體發(fā)布流程結(jié)構(gòu)混亂,信息層級不清晰:因黃頁業(yè)務(wù)較為繁多,存在發(fā)布過程信息層級太多不一致及混亂情況
- 當(dāng)前流程容錯率較高:信息自檢不完善,用戶信息填寫錯誤時,再次編輯成本較高
- 整體導(dǎo)致發(fā)布時間較長、成功率較低,用戶流失較大:大概體驗(yàn)一次發(fā)布流程大概需要13分鐘左右,還會出現(xiàn)一些不可逆情況
我們收集了一些用戶反饋后,再結(jié)合線上頁面整體來看。刨除用戶所提出的那些問題外,還存在一些發(fā)布類別圖片缺失,App端內(nèi)容識別性差,效率低,樣式復(fù)古等各個方面的問題。
也是由于黃頁品類較多且繁多,不同類目之間界面交互,控件等樣式繁雜不統(tǒng)一以及一些不可逆的bug等。
我們共計(jì)只是抓取了四個業(yè)務(wù)線,發(fā)現(xiàn)了共計(jì)27種樣式控件,其中可統(tǒng)一的地方達(dá)到65%左右。
03 設(shè)計(jì)目標(biāo)
那么綜上所述,我們也因此得出一些結(jié)論,需要從四個方面入手,分別是提升發(fā)布效率,對表單進(jìn)行快速高效填寫。再從識別性,需要讓用戶使用成本降低,更快速的讓用戶知道如何使用!那么也要根據(jù)黃頁業(yè)務(wù)種類繁多的方面考慮兼容性和拓展性,最后是需要統(tǒng)一設(shè)計(jì)風(fēng)格,透傳我們58的品牌感,來完成我們的發(fā)布基礎(chǔ)構(gòu)建。
然后,我們針對黃頁發(fā)布改版梳理出了整體的一個設(shè)計(jì)原則,分別是:
- 重新梳理發(fā)布流程,提升用戶發(fā)布效率
- 聚焦信息保證頁面清晰
- 各業(yè)務(wù)之間的兼容性
- 提升用戶體驗(yàn)
- 保證設(shè)計(jì)風(fēng)格統(tǒng)一,尋求設(shè)計(jì)亮點(diǎn)
遵循這個設(shè)計(jì)原則,我們產(chǎn)出了設(shè)計(jì)方案。
04 設(shè)計(jì)產(chǎn)出
1. 提效:先從入口開始,做加減法設(shè)計(jì)
將入口處強(qiáng)行綁定微信公眾號才可進(jìn)行發(fā)布的策略后置,先讓用戶可以進(jìn)入發(fā)布頁面進(jìn)行正常發(fā)布。那么綁定微信公眾號作為一個完善帖子內(nèi)容提升曝光分的策略來執(zhí)行,使得用戶點(diǎn)擊選擇類目后減少干擾行為,更符合用戶的心理預(yù)期。
也在選擇發(fā)布類目頁新增了搜索功能,方便用戶快速更精準(zhǔn)的搜索一級二級三級類目等服務(wù)內(nèi)容,大大提升了用戶的發(fā)布類目選擇的效率。
2. 聚焦:表單內(nèi)容方面,做易讀設(shè)計(jì)
重視表單的布局及樣式,在提升效率的同時考慮美觀。通過不同的字號、字重、間距突出重點(diǎn)內(nèi)容,在填寫前強(qiáng)化提示內(nèi)容,填寫后弱化次要提示內(nèi)容,使表單填寫更加輕松醒目。
3. 兼容:表單填寫頁面,做聚合設(shè)計(jì)
將現(xiàn)有大量需要單項(xiàng)分別填寫內(nèi)容進(jìn)行組合,將從原來的30+條必填字段整合為11項(xiàng)必填字段,也在整體結(jié)構(gòu)上拓展性更強(qiáng)!大大縮減了用戶填寫字段所需要的時間,同步進(jìn)行實(shí)時檢測提示,減少容錯率,提升信息準(zhǔn)確性及完整度。
4. 亮點(diǎn):輕量化設(shè)計(jì)
將現(xiàn)有發(fā)布點(diǎn)擊跳轉(zhuǎn)頁面選擇控件改為彈窗模式,更輕量化的交互方式使減少頁面跳轉(zhuǎn),縮短流程路徑,快速跳轉(zhuǎn)。
5. 提升體驗(yàn):整體風(fēng)格統(tǒng)一,做區(qū)別設(shè)計(jì)
因黃頁業(yè)務(wù)較多,在發(fā)布不同服務(wù)類目時,會出現(xiàn)內(nèi)容差異較大的情況。那么在設(shè)計(jì)時,考慮整體風(fēng)格保持一致,盡量使用相同的樣式及控件,通過業(yè)務(wù)不同的特性來進(jìn)行區(qū)分設(shè)計(jì),例如相冊模塊及標(biāo)題拼接等。降低用戶的學(xué)習(xí)成本,幫助用戶提升填寫效率。
這個是我們部分頁面的一個效果展示,那么在整體的設(shè)計(jì)中,我們大量使用了平臺的標(biāo)準(zhǔn)統(tǒng)一控件。在設(shè)計(jì)風(fēng)格統(tǒng)一的同時,可拓展性及品牌感也得到了提升。也為后期做輕量化、智能化打好了基礎(chǔ)。
05 數(shù)據(jù)總結(jié)
從數(shù)據(jù)表現(xiàn)上來看,發(fā)布成功率的PV相比老版本提升了24%左右。
發(fā)布成功率的UV相比老版本提升了9%左右。
這兩組數(shù)據(jù)的計(jì)算方式為到達(dá)發(fā)布成功頁的流量及人數(shù)/進(jìn)入填寫頁的流量及人數(shù)。
06 關(guān)于后續(xù)
- 繼續(xù)推動一些未完成的功能及體驗(yàn)進(jìn)行上線
- 根據(jù)用戶反饋及數(shù)據(jù)表現(xiàn)持續(xù)對發(fā)布整體流程進(jìn)行優(yōu)化
- 嘗試表單填寫完成后新增海報(bào)預(yù)覽功能及時進(jìn)行信息糾錯和帖子分享
- 嘗試在帖子發(fā)布完成后加入帖子刷新、置頂?shù)仍鲋捣?wù)
- ······
本次只是發(fā)布戰(zhàn)略升級1.0,那么我們還會有1.2版本或者1.5版本來繼續(xù)完善發(fā)布的基礎(chǔ)構(gòu)建。以及未來的2.0輕量化版本&3.0的智能化版本,我們將會從這三個階段進(jìn)行全方位連載復(fù)盤,歡迎大家持續(xù)關(guān)注和探討。
最后感謝項(xiàng)目所有參與者的辛苦付出:黃珊、崔登學(xué)、劉春明等同學(xué)
作者:鄭曉東、劉春明
本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心(微信公眾號@58UXD),作者@鄭曉東、劉春明
題圖來自Unsplash,基于CC0協(xié)議
- 目前還沒評論,等你發(fā)揮!