如何應(yīng)對復(fù)雜的B端表單設(shè)計(jì)？來看這個(gè)結(jié)構(gòu)化方法（上）

是的，我又寫表單設(shè)計(jì)了。去年寫了一篇《B端產(chǎn)品如何簡化表單輸入？這里有 7 個(gè)小技巧》，本以為遇到表單設(shè)計(jì)沒什么好怕的了，但沒多久就遇到了特別復(fù)雜的表單，有大幾百個(gè)錄入項(xiàng)。當(dāng)然，比設(shè)計(jì)表單更崩潰的是用戶要填寫這些表單。現(xiàn)實(shí)情況是，很多企業(yè)中大量員工的日常工作就埋沒在這些冗長復(fù)雜的表單之中。

往期回顧：

不得不承認(rèn)，對于特別復(fù)雜的B端表單，「簡化」只是提升其易用性的方法之一。遇到數(shù)據(jù)量大，層級深，數(shù)據(jù)之間有交叉或嵌套關(guān)系的表單時(shí)，還需要考慮該如何分析拆解、組織呈現(xiàn)這些數(shù)據(jù)。

這次分享的內(nèi)容，就是將以上策略整合成一套適用性更廣泛的結(jié)構(gòu)化方法。

將用戶操作成本降至最低

《Web表單設(shè)計(jì)——點(diǎn)石成金》提到一對概念「Inside Out 由內(nèi)而外」和「Outside In 由外而內(nèi)」。簡單理解，這是兩個(gè)看待事物的視角。「Inside Out」是從系統(tǒng)或軟件角度出發(fā)，向用戶要求「請?zhí)峁┪倚枰男畔ⅰ梗弧窸utside In」則是從用戶視角看待系統(tǒng)：用戶如何理解這些內(nèi)容？他們會(huì)獲得什么？能做什么？

這兩種視角之間的矛盾就是：用戶進(jìn)行更少操作 VS 系統(tǒng)獲取更多信息。

要幫用戶解決這個(gè)矛盾，需要向系統(tǒng)投入更多技術(shù)資源，從而能讓系統(tǒng)代替用戶承擔(dān)更多工作負(fù)擔(dān)。解決方法的技術(shù)成本有高有低，但從優(yōu)化效果來看可大致分成三個(gè)等級：

第一級：用戶無感的數(shù)據(jù)獲取方式

例如

• 平臺間的對接：通過平臺對接獲得完整、規(guī)范的數(shù)據(jù)。
• 系統(tǒng)自動(dòng)獲取數(shù)據(jù)：獲取來源包括用戶已經(jīng)輸入過的數(shù)據(jù)，或者根據(jù)用戶已輸入數(shù)據(jù)計(jì)算出來的其他數(shù)據(jù)，也包括設(shè)備數(shù)據(jù)。注意某些數(shù)據(jù)獲取需要獲得用戶允許。

第二級：允許用戶提供其他類型的信息

例如

• OCR技術(shù)：利用圖像識別技術(shù)，用戶上傳圖片代替表單輸入，系統(tǒng)將圖像內(nèi)容轉(zhuǎn)換為文本后填入對應(yīng)輸入框。
• 批量導(dǎo)入：用戶上傳文件，系統(tǒng)讀取后將數(shù)據(jù)填入對應(yīng)輸入框。
• 語音輸入：在對文本格式要求不嚴(yán)格的場景下支持語音輸入。

第三級：從量上降低操作成本

例如

• 選擇代替輸入：維護(hù)一套數(shù)據(jù)，讓用戶從輸入變?yōu)檫x擇。此方式除了減少鍵盤敲擊次數(shù)，還可保證填入的內(nèi)容符合格式規(guī)范。
• 設(shè)置合理默認(rèn)值：默認(rèn)值可能取自統(tǒng)計(jì)數(shù)據(jù)，也可能基于用戶個(gè)性化數(shù)據(jù)。默認(rèn)值不僅可免去輸入過程，還可以作為建議值給用戶提供指導(dǎo)。
• 訪問剪貼板：例如在MacOS Sierra和iOS10以上的蘋果設(shè)備之間，可以無縫復(fù)制粘貼文本和圖片。

設(shè)計(jì)聰明貼心的表單

在跟客戶經(jīng)理聊天的時(shí)候會(huì)發(fā)現(xiàn)，那些我們自以為簡單明白的設(shè)計(jì)，對用戶來說竟然如同天書。神馬？我們不是竭盡所能降低了用戶操作成本嗎？為什么能順利完成表單的用戶屈指可數(shù)？

究其原因，我們還是單純的從系統(tǒng)視角「Inside Out」看待問題。如果能切換成用戶視角「Outside In」，在預(yù)判用戶可能會(huì)遇到的問題時(shí)就清晰了很多：用戶在填寫每個(gè)輸入框都經(jīng)歷了「填寫前」、「填寫中」、「填寫后」這三個(gè)階段。

• 在「填寫前」用戶可能會(huì)疑惑：這個(gè)是什么意思？為什么要填這個(gè)？怎么填？
• 在「填寫中」用戶需要知道：我填對了嗎？我完成了嗎？
• 在「填寫后」用戶會(huì)想要反饋：我成功了嗎？怎么失敗了？是我自己的問題嗎？我該怎么修正錯(cuò)誤？

所以從用戶視角看，用戶需要的是一個(gè)聰明貼心的輸入框，即在「填寫前」、「填寫中」、「填寫后」這三個(gè)階段中即時(shí)給予用戶幫助和回應(yīng)。

1. 填寫前

在填寫具體的表單項(xiàng)之前，用戶需要理解和清楚要做什么，做這個(gè)的目的是什么，他能獲得什么，以及該如何做。常見的方法是利用標(biāo)簽和占位符對這些問題進(jìn)行解釋，但標(biāo)簽和占位符字?jǐn)?shù)有限，必要時(shí)可以借助提示文字輔助說明。

△ 菜鳥裹裹首頁頂部搜索框，在點(diǎn)擊之前，占位符描述操作目的；點(diǎn)擊之后，占位符解釋操作方法。

2. 填寫中

從系統(tǒng)角度看，我們希望用戶按照系統(tǒng)要求的規(guī)則輸入信息，即「系統(tǒng)的實(shí)現(xiàn)模型」。從用戶角度看，用戶可能不知道、不理解規(guī)則，即「用戶的心理模型」。如果「實(shí)現(xiàn)模型」和「心理模型」兩者出現(xiàn)分歧，用戶操作心流就會(huì)遇到阻塞，甚至出錯(cuò)。

為了掃除障礙，需要設(shè)計(jì)師利用同理心或者調(diào)研的方式來理解用戶心理模型（B端產(chǎn)品基本很難單純利用同理心），利用設(shè)計(jì)手段，將「實(shí)現(xiàn)模型」包裝成用戶可以接受和理解的「心理模型」。

△ 系統(tǒng)報(bào)錯(cuò)提示，大部分用戶根本無法理解

用戶出錯(cuò)的另一個(gè)原因是，情境中存在干擾因素，例如時(shí)間緊迫或注意力不集中（開車時(shí)使用導(dǎo)航軟件），環(huán)境吵鬧，在戶外可能有惡劣天氣干擾。因此在設(shè)計(jì)時(shí)需要考慮到用戶操作可能處于怎樣的情境之下，用戶會(huì)遇到哪些障礙和問題？然后幫助用戶過濾情境中的各種干擾因素，盡快完成任務(wù)。

這個(gè)階段的設(shè)計(jì)要點(diǎn)，就是要防錯(cuò)容錯(cuò)。比起用戶反復(fù)出錯(cuò)和修改，如果系統(tǒng)能容錯(cuò)并自動(dòng)轉(zhuǎn)化成規(guī)范的格式，是再好不過了（雖然現(xiàn)實(shí)中要評估開發(fā)成本）。

△ 轉(zhuǎn)賬頁面的防錯(cuò)設(shè)計(jì)

△ 批量操作的防錯(cuò)設(shè)計(jì)

△ 系統(tǒng)應(yīng)當(dāng)允許用戶輸入多種格式的數(shù)據(jù)，并將其轉(zhuǎn)化為格式化的數(shù)據(jù)

3. 填寫后

填寫后，要讓用戶知道自己完成的怎么樣：成功了要給予鼓勵(lì)，并引導(dǎo)前往下一個(gè)任務(wù)，如果失敗了，要幫助用戶找到原因和解決方案。及時(shí)清晰的反饋，可以讓用戶明確當(dāng)前狀況，消除不確定性，縮短在每個(gè)節(jié)點(diǎn)的逗留時(shí)間，快速完成任務(wù)最終達(dá)到目標(biāo)。

△ 驗(yàn)證到用戶輸入的手機(jī)號碼已注冊，推測用戶可能忘記密碼

△ 用戶在完成某任務(wù)后，在等待結(jié)果過程中，引導(dǎo)用戶處理其他并行任務(wù)。

以上是今天的主要內(nèi)容，關(guān)于從整體上思考如何組織和呈現(xiàn)各種復(fù)雜程度的表單，我們下期繼續(xù)

歡迎關(guān)注作者的微信公眾號：「能呆書房一整天」