編輯導讀:表單在我們的日常工作中經常會用到,一個優質的表單可以提高我們的工作效率,完成一些更多的業務,提高產品體驗。本文是表單設計系列的第二篇,作者以雲租賃“新籤合同”的改版設計思考,給大家闡述如何應對複雜業務表單設計。
以雲租賃“新籤合同”的改版設計思考,給大家闡述如何應對複雜業務表單設計。
一、項目背景雲租賃是明源雲空間旗下的一款為存量地產提供多業態(園區、寫字樓、創意空間、專業市場、底商、購物中心等)資產管理的Saas產品,發展至今已4年有餘。
2017至2019年雲租賃產品處於驗證價值期,側重快速兑現價值、不考慮使用感。如今,產品租户數已突破百,商業價值得以驗證,產品進入快速覆蓋搶佔市場的階段。然而,較高的交付成本阻礙了產品在市場上快速覆蓋。因此,我們需要做出轉變,通過設計給產品加分,助力業務成長。
2020年Q4季度,圍繞公司的戰略規劃“降交付、打標杆、落價值”,我們聚焦3大核心業務場景 — 收繳、交易、運營,成立專項組進行底層架構到視覺交互層面上的體驗升級。接下來就以交易場景(新籤合同)為例,闡述一下我面對複雜業務表單設計上的一些思考。
二、發掘問題在這個項目中,我們從產品和客户兩個角度挖掘本質的共性的問題。
產品角度 – 收集產品現存的問題:
運用“交互行為五要素”將一整套業務拆分成一個個小的業務場景,通過產品體驗劇本進行交付沙盤模擬分析各個核心業務場景下的產品現狀。
客户角度 – 獲取客户的訴求:
一線交付人員對客户做了調研訪談,深入的挖掘他們對當前的產品使用問題;客户成功團隊收集用户的心聲,將不同崗位和職級對於租賃系統的問題真實反饋收集彙總。
將每個場景下的客户訴求,與產品現狀進行對比,那麼在產品現狀中沒能滿足客户訴求的地方,便是產品需要改進提升的問題:
由於得到的問題其實還是較為零散,最後我們利用“雙鑽模型”對待改進的問題進行聚焦,也就是對同類問題進行歸類、發現零散問題背後的本質問題,得到目前新籤合同的核心問題:缺乏業務場景化設計,簽訂效率低。
三、設計目標基於上面的問題,本次新籤合同的改版目標可以概括為:有場景、更高效、更易懂。
四、設計實現針對之前所提出的問題,本次新籤合同流程的設計目標“有場景、更高效、更易懂”大致體現在如下幾個方面:
4.1 功能整合,架構升級在舊版的框架體系中,所有任務信息直接平鋪展示在頁面中,導致功能信息雜亂分散,重點信息難以查找,信息關聯性弱等問題,嚴重影響了客户的簽訂效率。
在這次框架設計中,我們根據客户的實際業務場景,將相關功能進行聚合處理,將操作相對低頻的功能進行轉移或刪減。通過功能的整合,可以加強認知,減少客户多餘的思考與判斷,降低學習成本,提升簽訂的效率。
4.2. 聚焦業務,重組結構在頁面結構上,通過捕捉用户習慣與認知,借鑑了用户最熟悉的線下紙質合同樣式,消除機器語言的陌生感,強化業務感知,降低用户認知負擔。
案例1 基礎信息
在舊版中,基礎信息頁採用單列平鋪佈局,使得錄入內容需要3屏(1440*900px)才能展示完全。同時,各個模塊零散、雜亂,未貼合用户的核心業務場景,導致用户心智亂,填寫效率低下。
於是,我們對頁面的信息模塊進行了重組排布,將“合同信息”、“簽約時間”這種低頻模塊弱化規整到了頁面頂部;“出租方”與“承租方”這種關注度高、關聯性強的模塊進行信息權重升級,保證用户第一眼能看到;將不常用的功能(合併拆分、打包定價等)進行功能轉移,將任務移交給系統,減少客户多餘的思考與判斷。原來三屏的內容濃縮到一屏內展示,內容更清晰明瞭,用户心智更統一。
案例2 合同條款
原先用户在設置合同條款的過程中操作路徑是混亂的,頁面中充斥着各種操作入口,而且功能入口重複,使得用户在操作過程中產生“迷惑感”,大量信息都集合在一起嚴重影響了填寫效率。
在新版中,我們將原有的上下通欄結構改成了左右結構,左側作為切換資源的入口同時兼顧了上面提到的合併定價的功能,右側則是這個資源下面的條款信息,根據線下業務場景將免租期與固定租金分開,固定租金、優惠分攤以及付款方式以卡片的方式整合在一起,更緊貼用户在設置合同條款的心理模型和流程動線。
4.3 化繁為簡,內容為王在表單填寫中,過多的信息透傳會讓用户在使用時產生“冗餘感”,影響填寫效率。而清晰明瞭的信息展示,則可以減少用户對選定內容的反覆查對,降低焦慮感。
案例1 出租方/承租方
原先出租方/承租方存有佔用空間大,信息權重不合理,功能入口重複,過度的引導性設計,不必要的信息透傳過多等問題。
通過線下業務數據,我們梳理出客户的核心業務場景是1v1,也就是説在簽訂合同時,往往是1個出租方對應1個承租方的情況居多,因此在選擇完一個承租方/出租方之後,對添加功能進行弱化將其放置在右上方,避免了過強的引導操作。在1v多的場景下,用户更關注主體,也就是甲方/乙方(對於丙、丁這些的並不在意),因此將原先的平鋪展示改成了標籤切換。內容層面僅保留用户關注度最高的內容,次要內容則隱藏至感嘆號icon裏。
案例2 租賃資源
同樣的,我們先對場景進行梳理,注意到核心場景是2~8個租賃資源居多。在極少數的情況下,租賃資源會達到上百個甚至上千個。那麼舊版的卡片平鋪設計就不合適,從視覺動線、操作路徑上都存在很大問題。在新版中,採用表格的形式進行數據的展示,對於多條數據的查閲更輕鬆,其他操作功能也有比較確定的位置,保證了操作路徑的統一,使整個模塊的操作更順滑、流暢。
以此類推,我們可以新籤合同各個模塊的優化方案,這裏就不展開細説。
4.4 精益求精,更有温度複雜業務表單由於充斥着各種條理和邏輯性,給表單本身帶來了額外的使用負擔。通過心理學的思考、UI 上的感情化設計、目標人羣的特性、使用場景的氛圍結合等手段進行等手段進行表單設計,能讓用户在填寫中更輕鬆、更順暢。
先來看一個例子,下圖是固定租金模塊下付款方式的內容展示優化方案。
嚴格意義上來説,這種展示方式是沒有什麼問題的。但我們結合一下線下紙質合同來看,就可以很清楚看到字段前面的標題其實都是“無效字段”,最佳的方案應該是隻讀內容就能知道其含義。
我們研讀了不同客户的合同條款(樣本量15個),總結出關於付款方式通用的業務表達方式,通過通用的專業術語作為輔助閲讀提示,內容字段通過字體加粗、加畫線的方法進行強調,這樣既能滿足即讀即懂的訴求,又能滿足跳躍查看信息的訴求。
再比如我們嘗試在新籤合同的第一步前加入了“合同封面”,把前面提到了合同信息字段放置在這裏,模擬簽訂場景,強化用户的業務感知。
當然還有我們耳熟能詳的情感化反饋設計,這種都比較常見,這裏就不過多贅述。
五、總結改版後的新籤合同目前已對部分租户上線,通過客户成功團隊對本次體驗升級進行滿意度收集,此次改版極大的提升了客户的簽訂效率(效率提升87%),客户滿意度平均值高達90%。在設計的過程中我們緊緊圍繞“業務場景”,在提升產品體驗的同時,也極力打造更有温度更具人情味的雲租賃系統。
以上就是我在這次新籤合同重構中的全部思考,希望通過這個案例,能帶給大家在設計複雜業務表單的一些啓發和收穫。
本文由 @Nick 原創發佈於人人都是產品經理,未經許可,禁止轉載
題圖來自Unsplash,基於 CC0 協議