本文主要是根據(jù)項(xiàng)目的表單填寫體驗(yàn)差被客戶撤下線重新整改，而對(duì)此將表單進(jìn)行了新的用戶體驗(yàn)設(shè)計(jì)的一些構(gòu)思。

一、現(xiàn)狀

傳統(tǒng)的PC端空間范圍大，能夠?qū)⒈韱蔚乃行畔⑦B同溫馨提示語(yǔ)等平鋪展示出來(lái)，但是一下子用戶看到這么多內(nèi)容會(huì)給用戶帶來(lái)壓力，進(jìn)而放棄表單的填寫， 這也是在PC端表單設(shè)計(jì)的用戶體驗(yàn)很不好的地方。

如今的移動(dòng)互聯(lián)網(wǎng)時(shí)代，表單的設(shè)計(jì)思路不同以往PC端，移動(dòng)端表單設(shè)計(jì)存在以下難點(diǎn)：

1. 移動(dòng)端屏幕空間有限，不可能像PC端一樣在表單的設(shè)計(jì)上將所有的信息都平鋪展示出來(lái)；
2. 表單的字段信息比較多，會(huì)使得整張表單過(guò)長(zhǎng)，以致得至少2屏以上的內(nèi)容來(lái)呈現(xiàn)，過(guò)多的內(nèi)容會(huì)促使用戶放棄填單；
3. 表單的提示語(yǔ)不夠友好，沒有給用戶創(chuàng)造一個(gè)洽意的表單填寫環(huán)境，用戶在表單填寫過(guò)程中更多的是不知所措；
4. 移動(dòng)端的輸入困難，由于移動(dòng)設(shè)備空間限制，用戶很難看清并及時(shí)糾正輸入過(guò)程中的錯(cuò)誤；
5. 移動(dòng)選的選擇器單行所能承載的字段數(shù)量有限，面對(duì)超多字段的選擇項(xiàng)往往是不足以承載。

二、設(shè)計(jì)目標(biāo)

1. 盡可能讓更多用戶完成表單的填寫，減少跳出率；
2. 表單的設(shè)計(jì)要讓用戶少思考，少操作。

三、設(shè)計(jì)策略

1. 刪除“信息”

由于表單的信息過(guò)于，移動(dòng)端的位置又有限，所以需要?jiǎng)h除掉多余的信息，刪除信息分兩種情況：

（1）刪除標(biāo)題多余字段

客戶提交過(guò)來(lái)的業(yè)務(wù)表單里面，大部分的標(biāo)題字段過(guò)長(zhǎng)，并且啰嗦，例如：投訴表單中的“違法行為的起止時(shí)間”標(biāo)題， 做“刪除”調(diào)整之后標(biāo)題可變成“違法時(shí)間”，對(duì)應(yīng)的在時(shí)間選擇框的溫馨提示語(yǔ)告知用戶：請(qǐng)選擇開始/結(jié)束時(shí)間，即可解決問(wèn)題。

（2）刪除表單里的標(biāo)題

通過(guò)調(diào)研之后發(fā)現(xiàn),：客戶提交過(guò)來(lái)的表單中有些標(biāo)題字段，即使沒有也不影響他們幫助用戶解決問(wèn)題，也就意味著這些標(biāo)題字段 是可以刪除的，必要的信息呈現(xiàn)給用戶讓他們完善即可，不要把非必要的字段硬塞給用戶，多一個(gè)標(biāo)題字段就會(huì)多一位用戶放棄填單。

2. 調(diào)整排版

舊版本的頁(yè)面布局是采用從上到下，即標(biāo)題字段在上輸入框在下，這在一定程度上會(huì)使得表單的頁(yè)面內(nèi)容過(guò)長(zhǎng)，同時(shí)字段標(biāo)題的長(zhǎng)短不一破壞了版面結(jié)構(gòu)。

新設(shè)計(jì)的排版是采用從左到右，采用標(biāo)題在左輸入框在右這種布局是基于以下兩點(diǎn)考慮：

1. 由于對(duì)標(biāo)題進(jìn)行刪除操作后，標(biāo)題基本可控制在4個(gè)字段內(nèi)，若特殊情況操作4個(gè)字段，即可自行拓展成兩行；
2. 從左到右的排版在一定程度縮短了表單的長(zhǎng)度，并且減少了用戶向下滑動(dòng)的操作次數(shù)。

3. 組織“信息”

表單信息平鋪出來(lái)沒有進(jìn)行組織，會(huì)讓用戶感覺雜亂無(wú)章，沒有一個(gè)清晰的認(rèn)知，為快速幫用戶建立認(rèn)知體系，需對(duì)標(biāo)題信息進(jìn)行分塊組織，把合適的東西分到相同的組里去。

4. 隱藏“信息”

提示語(yǔ)的設(shè)置是為了讓用戶順暢的填寫表單，但是提示語(yǔ)過(guò)長(zhǎng)會(huì)分散用 戶的注意力，并且不是每一個(gè)用戶都需要這一層提示語(yǔ)，所以就要將相 應(yīng)的提示語(yǔ)進(jìn)行隱藏，用戶有需要就自己點(diǎn)擊獲取，不需要就可以直接忽略，隱藏的展示形式有兩種：

1. 圖標(biāo)：將相關(guān)的文字釋義內(nèi)容隱藏在圖標(biāo)，點(diǎn)擊即可彈窗獲取，同 時(shí)彈窗的設(shè)計(jì)采用跟輸入框同寬，緊挨著輸入框，并且箭頭指向圖標(biāo)，使 得輸入框與提示框建立起聯(lián)系；
2. 文字收縮：點(diǎn)擊“詳情”二字即可將全部的示例內(nèi)容展示出來(lái)。

5. “同理心”提示語(yǔ)

提示語(yǔ)的設(shè)置有兩種作用：

1. 快速的幫助用戶建立認(rèn)知，并且要通俗易懂；
2. 降低用戶的防御心里，讓用戶感知到填這張表單是安全的，能夠放心的去填寫。

6. 讓用戶少操作

由于移動(dòng)端的輸入困難，同時(shí)為了讓用戶盡可能地減少操作，通過(guò)調(diào)研之后發(fā)現(xiàn)，可將對(duì)應(yīng)的輸入項(xiàng)內(nèi)容轉(zhuǎn)化成選擇項(xiàng)內(nèi)容，這樣的好處不單在于用戶層面，對(duì)于客戶層面來(lái)說(shuō)也能使他們更加精準(zhǔn)的定位到問(wèn)題。

而不是放著一個(gè)輸入框給用戶自由發(fā)揮去填寫，而 后業(yè)務(wù)部門還要對(duì)用戶的輸入內(nèi)容進(jìn)行分析，中間消耗過(guò)多的時(shí)間精力。

7. 讓用戶有控制感

表單的填寫是由流程的，所以就需要讓用戶做到心中有數(shù)，明白自己從哪里來(lái)到哪里去，同時(shí)通過(guò)進(jìn)度條能清晰的人認(rèn)知到需要多少步才能完成表單，用戶都喜歡控制感而不是被控制，進(jìn)度條可以降低用戶的離開率，在頁(yè)面的呈現(xiàn)上也會(huì)更加直觀。

總結(jié)

用戶本身就是懶的，何況表單的填寫就很繁瑣，需要用戶多去動(dòng)手，所以在表單上的設(shè)計(jì)上應(yīng)該站在用戶的角度去考慮， 學(xué)會(huì)換位思考，擁有同理心，將繁瑣的內(nèi)容進(jìn)行簡(jiǎn)化，使得用戶在表單的填寫過(guò)程中感覺到愉悅。

本文由 @小峰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議