編輯導讀：我們上網經常會碰到各種各樣的表單。註冊帳號要填表單，網上購物要填表單，登錄郵箱要填表單……好的表單設計能給網站增加註冊量，面對複雜的表單，設計師如何對其重新設計，為用戶減輕負擔、提高表單效率和成功率呢？本文作者結合負責的具體項目案例，對此進行了分析總結，與大家分享。
01 改版背景
本地服務因其服務品類多（100+個品類）、不同品類信息各異、填寫欄位繁多的特點，PC發布一直是信息發布的主要場景。而PC發布無法滿足無電腦B端用戶的需求，同時在發布的便捷性和即時性上也大打折扣。
通過對PC發布的功能和流程及用戶痛點進行分析和收集，我們近期對APP端發布進行了重新設計。
【圖一】舊版58PC端與APP端本地服務發布
02 改版思路
如此複雜的表單平移到移動端，如何為用戶減輕發布負擔、提高發布效率和成功率呢？
我主要運用了以下8個方法進行設計：
【圖二】表單提效減負設計方法
1. 減負
減輕用戶負擔，避免用戶中途放棄是表單成功錄入的基礎。通過梳理現有流程的問題，我主要從心理、操作、視覺三個可能造成用戶負擔的層面進行優化：
（1）心理減負——先簡後難
服務信息即SKU的錄入是最為複雜的信息模塊，以搬家為例，用戶需要先填寫/選擇搬家的類型、車型、規格、附加費用等，然後在不同車型下填寫起步價、超公裡價格、隨車人數、載重、容積等。老版本將這部分作為錄入的第一步，無疑給用戶極大的心理負擔。
改版後的流程，如圖三，將優先級高但錄入難度低的「基本信息」模塊挪到第一步，降低用戶心理負擔；用戶填寫之後進入服務錄入環節，沉沒成本促使用戶繼續填寫，降低了跳出的可能性。
【圖三】改版後的表單流程
（2）操作減負——表單內容定製化
舊版發布在選擇服務類型之後，默認展示全部填寫模塊和欄位，這不僅給用戶了巨大的心理負擔，同時由於商家規模和服務範圍有較大的差異，尤其是小微商家服務範圍小，並不具備填寫所有服務的能力，其後果就是很多用戶亂寫一通，影響服務的信息真實率。
改版將服務錄入各個環節的自定義功能前置和強化，如圖4，商家用戶選擇要發布的服務後，先要選擇自家服務包含的服務項和附加項；在編輯過程中，默認顯示最少服務單位，用戶可以根據自家服務能力自行添加子服務項。既能保證服務信息的真實性，又降低用戶的填寫負擔。
【圖4】表單定製
（3）視覺減負——強化信息層級
清晰的信息層級，能夠從視覺上降低用戶的識別和認知負擔。在將SKU信息從大屏平移到移動端小屏幕時，信息層級的設計尤其重要。如下圖，通過對PC端各個服務類型的服務項進行拆解和歸類，最終梳理出三個層級的服務項；在此基礎上通過合理的分段和字體差異，確保信息層級清晰易識別。
【圖5】信息層級
（4）視覺減負——提升表單可瀏覽性
Jakob Nielsen的研究表明，用戶通常只是快速瀏覽表單而不是細緻地從上到下閱讀。讓用戶能夠高效的瀏覽表單，對避免錯填漏填至關重要。在這次改版中，我主要通過標籤位置和提示文字的來提升表單可瀏覽性。
在標籤設計上借鑑了表單大師Luke Wroblewski的研究結論：用戶對標籤頂部對齊的表單完成時間最短，因為此種方式減少了眼球的運動量（視線直線運動）。
而Nielsen Norman Group曾做過的一項眼球追蹤研究表明：空的輸入框比有提示文字的輸入框更能引起用戶的關注，而且與空的輸入框相比，用戶更容易忽略有提示文字的輸入框。因此在提示文字的設計上，通過降低提示文字與背景的對比度，強化填寫項之間的間隔，來保證對用戶起到必要的引導的同時，避免用戶忽略輸入框。
【圖6】可瀏覽性設計
2. 提效
錄入效率作為表單的基本指標，對複雜表單的設計提出了更高的要求。本次改版通過交互組件的優化、自動錄入、有效引導、提供服務模板來提升用戶的認知效率和錄入效率。
（1）多層級聯動鍵盤
上面提到，本地服務中最複雜的錄入模塊是SKU錄入，如搬家這樣的類目填寫項最多可達上百項（添加全部服務項及附加項的情況），因此這部分的設計需要最大程度地減少不必要操作和過多的跳轉與調起，確保輸入過程流暢而沉浸。
根據業務屬性，我們為用戶提供了兼容不同層級的聯動鍵盤。
如下圖，在用戶輸入的過程中，用戶每填完一項，點擊「下一項」光標自動定位到下一項，如填完1噸點擊「下一項」，光標定位到容積輸入；直至同級別項全部填完，鍵盤也不會收起，而是自動滾動到父級項的第一個子級項，如圖中「十公裡及以上」的「起步價」。
整個過程都在鍵盤輸入組件中完成，用戶只需要根據提示逐項填寫所需信息，不需要點來點去，也不會收到鍵盤反覆彈出收起的幹擾，整個過程保證了錄入的沉浸和任務的聚焦。
【圖7】多層級聯動鍵盤
（2）標題自動拼接
在收集的用戶反饋中，C端用戶對帖子標題的可識別度和與內容相關性有所不滿，而B端用戶在發布過程中不知道如何編輯標題能最好地體現自身服務能力以獲得更多點擊。綜合二者的痛點，解決問題的關鍵是建立具備高點擊屬性標題的標準。
我們將標題拆分為：服務亮點+服務範圍。用於只需要填寫自家服務亮點，系統從服務列表標題中自動提取服務名稱並進行拼接，如下圖。這樣既提升了用戶填寫效率，也保證了標題與服務內容的相關性，差異化和可識別度也得以提升。
【圖8】標題自動拼接
（3）快捷輸入&有效引導
為了提高填寫效率，我們也提供了快捷輸入方式和必要的引導。左圖中詳情描述通過標籤引導用戶填寫有效信息，點擊即可輸入。
中圖在用戶填寫價格時提供市場均價，點擊「使用」即輸入，降低了輸入成本，也確保了價格的合理性。
右圖相冊面板為解決商家用戶不知上傳何種圖片提供了引導，用戶點擊添加圖片，用戶需要先選擇自己想要展示的圖片類型（即相冊），這樣既能引導用戶上傳有價值的圖片，也保證了圖片分類的清晰度和合理性。
【圖9】快捷輸入&有效引導
（4）服務模板
自定義服務解決的是表單普適性，而服務模板提供了更為標準化和高效率的表單填寫模式。通過對線上高轉化率的帖子進行分析和信息提煉，系統形成標準化表單供用戶填寫。
在該模式下用戶減少了自定義操作，只要根據提示填寫就能完成一個優質的服務貼，這對於有一定服務能力的商家是極為高效的。
【圖10】服務模板
03 總結
通過由簡到難的流程優化、表單可定製話、強化信息層級和可瀏覽性來減輕用戶的心理、操作、視覺負擔是基礎；通過多層級輸入鍵盤、自動拼接錄入、快捷輸入與有效引導、提供服務模板來進一步提升用戶的認知效率和錄入效率。
經過灰度上線數據驗證，此次改版有效提升了發布成功率和發布效率。
作者：劉春明、崔登學、鄭曉東
本文來源於人人都是產品經理合作媒體@58用戶體驗設計中心（微信公眾號@58UXD），作者@劉春明、崔登學、鄭曉東
題圖來自Unsplash，基於CC0協議