起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識基于業務場景與用戶行為，如何設計更友好的表單？
我們每天都會接觸到各式各樣的表單頁面，其中包括登錄賬號、填寫單據、購買產品、發布信息等。它作為所有產品里最常見也最普通的設計元素，往往最容易被忽略它們該有的體驗細節，而引起用戶使用中的挫敗感。本篇文章主要通過業務場景和用戶行為的角度來分析，如何打造體驗友好的表單界面。
目錄
一、交互設計下的業務場景與用戶行為
二、基于業務場景選擇適合的布局模式
三、基于用戶信任行為的設計原則
四、總結
交互設計下的業務場景和用戶行為
交互設計的本質即人與機器在一定的業務場景下的信息傳遞、相互作用，我們設計產品可以理解為是在設計或者說培養對應場景下的『機器能力』，良好的『機器能力』可以更好的根據『用戶行為/心理』來交流與反饋，使得系統更懂用戶，更符合自然人際之間的交互行為。
- 機器能力：系統在與用戶做信息交流時的展示、預估、判斷、反饋能力；
- 業務場景：為了滿足特定需求下用戶的操作路徑或過程；
- 用戶行為：用戶的潛在心理、實際行為與操作感知等特征描述；
那么如何打造更友好的表單界面，讓它更好的與用戶相互交流，我們需要從業務場景和用戶行為出發做分析，反推機器能力的設計目標。
基于業務場景選擇適合的布局模式
針對不同的場景需求下的操作路徑，需要有相對合適的布局模式來支持高效操作和錄入，相應的有以下四種類型：
- 多列流式布局；
- 單列布局；
- 卡片（擬物）化布局；
- 步驟向導型布局；
1. 多列流式布局
多列流式布局的表單，較多運用于需要大批量數據錄入的場景，此時的多列流式布局可以保證在各類終端上的空間最大化利用，同時該布局節省業務設計與開發成本。
▽下圖為高級表單，是多列流式布局的一種拓展設計，運用場景更廣。
2. 單列布局
在多列流式布局表單中，用戶需要使用Z型路徑進行掃描和閱讀，在節省空間的同時也犧牲了用戶的瀏覽與理解速度；但是對于單據字段數量較少且內容層級與類型較單一的情況，如果一列展示的話，清晰的瀏覽線可以提供快速且明確的瀏覽路線，提高操作效率。
▽在人員類基礎資料界面的維護場景中，少量的字段更加適合單列布局模式。
3. 卡片（擬物）化布局
上述的多列流式布局或者單列布局，都是針對所有表單的通用模式，這兩種模式通用且開發設計成本較低，但是除此之外，細分場景下我們不應該忽視很多特殊表單的設計需求與用戶習慣，這類特殊表單在線下有著固化的實體樣式，此時采用卡片（擬物）化模式可以讓用戶快速找到閱讀習慣。
▽憑證類的表單，較多直接采用擬物化的布局模式，迎合財務人員的閱讀習慣，提高處理效率。
而對于普通用戶日常生活的使用場景中也特別常見將表單（或其中部分內容）設計成卡片（擬物）模式，例如很多實體票據中的電影票、高鐵票、飛機票等，習慣性的閱讀模式帶來空間利用與閱讀效率的更佳。
▽飛豬中機票訂單填寫界面，將部分內容擬物化設計，方便展示且節省空間。
4. 步驟向導型布局
另外一類布局模式就是步驟向導型布局，主要運用于以下三種情況：
- 復雜的長表單；
- 內容前后具有依賴關系的強順序表單；
- 風險性較大的重要表單；
當你在設計一個超長的復雜表單或者是一個無法簡化的流程任務時，此時步驟型向導布局可以降低復雜性，而從提高可用性可易用性。
另外很多時候，復雜表單內容中具有前后依賴關系，在一張表單中，用戶需要嚴格先執行前面任務，才能允許填寫后續任務，而步驟向導恰好可以通過細分的操作流讓用戶分步執行，降低學習曲成本與操作風險。
▽在GitHub的注冊操作中，采用步驟向導型布局，分步完成注冊任務。
對于涉及款項轉賬、賬戶安全等此類的重要表單，此時的填寫成本與風險較高，即使內容較少也推薦試用步驟向導型布局，避免后續出錯所帶來的不必要麻煩。
▽在富途證劵中，在轉入轉出業務中，細分操作流，每一步關注各自的重要信息，降低填寫表單風險。
基于用戶信任行為的設計原則
以下需要談論的是用戶行為下的信任特征所帶來的設計準則。
從用戶行為/心理的角度看，信任是人與人之間交往的先決條件，只有獲得彼此的信任，兩個人之間的對話才能自然和愉悅。
那么對于用戶與產品之間，信任的行為準則依然存在，信任意味著更多耐心和理解，同時帶來了更多的探索欲與試錯接受度。用戶足夠信任產品才能讓表單的錄入變得更加流程與愉悅。
1.? 簡明扼要：明確表單填寫目的
當設計者拿到一份需求文檔時，面對眾多的錄入字段，首要事項就是明確用戶填寫該表單的目的，需要確保終端用戶看到的表單上都是真正需要的字段，因為每增加一個額外的非必要字段都會影響填寫效率/轉化率。要時刻思考我們需要從用戶那里得到哪些必要信息以及怎么進行高效地數據利用。
而針對非必填但是又有用的字段內容，可以采取的策略是在初次交互時并不強制填寫，而讓用戶選填以及在后續合適的場景中重新喚起該內容項的信息收集，適時且自然，保證初始交互簡單可控。
▽Google 日歷中，當創建待辦事項時，只彈出彈窗顯示必要字段，用戶可以自行選擇直接保存或者填寫更多內容項，該設計極大提高快速創建待辦的效率。
2. 組織與布局：關聯信息合理組織
很多時候的表單內容多且繁雜，其中的信息項如果只是常規羅列，很容易顯得混亂和難以閱讀，易用性較差，使用戶產生抵觸情緒，久而久之就厭惡使用該產品。
關聯信息、合理組織內容，利用區塊、間隔來進行布局區分；按照內容的類別、層次、順序等進行組的劃分，提高表單的清晰性與可讀性。
▽DELTA中乘客的基本信息和聯系信息為兩項獨立的重要項，分組展示，同時對于每個組內的細分信息也進行分行布局，例如姓名類信息獨行，飛行計劃與號碼、性別與年月日、編號各自獨占一行，清晰易填。
相關閱讀：《設計法則： Fitts’ Law / 菲茨定律（費茨法則）》
3. 雙向交流：最大限度地幫助用戶進行填寫
表單填寫長久以來被詬病的一點即是其繁瑣性，減少用戶操作以幫助用戶提高輸入效率，從而提高轉化率/效率。
預判默認值
針對一些常規內容，表單場景可以通過獲取用戶資料/個人信息/歷史記錄等來預判默認值。
最為典型的即是當我填寫一張請假單時，系統應該自動代入我的部門、姓名、工號等信息，該類元素的繼承性較強，用戶很少情況會去變更。同樣在性別、地址、轉賬人等都可以使用『預判默認值』的方法來減少用戶操作成本。
軟件應該保持智能的模式，在適當的風險點內，幫使用者選擇決策。
硬件設備自動獲取
在人機交互層面，除了不斷思考軟件能給予用戶的體驗外還需要探索，硬件設備可以提供哪些幫助？
該情況最常見例子即”系統定位”，任何表單或者場景，只要涉及地址選擇，基本現在所以產品都會設置系統快速定位用戶設備所在位置，自動錄入。
而較高級的做法則是更深度挖掘機器的能力，也就是大家常說的『語音識別』與『圖像識別』，當用戶需要錄入一張發票時，系統提前告知用戶拍攝實體發票/二維碼，進行圖像識別后，批量代入數據，極大減少用戶思考與操作成本。
自動生成
另外一些字段，系統可以根據規則來自動生成相應內容，例如編碼、序號等，此時一般不允許用戶進行更改，而針對另外一些用戶自主性更強的字段，可以采用自動生成+建議錄入的方式來幫助用戶。
▽Safari瀏覽器下，密碼字段自動生成強密碼，若用戶使用，則瀏覽器會自動記錄，下次自動填充。
4. 導引與幫助：給予適時的提醒幫助和導引
在用戶面對繁雜的表單填寫時，難免會遇到困惑，此時為了防止用戶出錯或者中途流失，我們需要適時給予用戶幫助和導引。
其內容的編寫上可以有以下指導方針：
1. 告訴用戶該項指什么，適用于術語類字段；
2. 告訴用戶為什么要填寫該項，填寫了有什么好處；
此類多見于需要收集用戶信息的場景，例如需要登記用戶手機（非必錄項），此時告知用戶”填寫手機號方便找回密碼”，自然而然的用戶會有更高的意愿去填寫。
3. 告訴用戶要怎么填寫該項，即填寫規則。
在形式上，可以選擇：
1. 靈活利用字段掩碼進行填寫提醒；
▽大韓航空KOREAN AIR中，錄入框里的灰字即字段掩碼，其中有填寫幫助和示例。
字段掩碼可以很好地節省空間，同時可以快速的幫助用戶降低思考成本。
2. 標簽Tips的有效示意；
▽Trip平臺中，填寫姓名項時，出現Tips氣泡浮窗，出現護照卡片圖例示意，形象易懂。
3. 全局性說明規范整體填寫
當表單中多個字段需要進行關聯性說明時，此時需要跳出單個字段的引導，啟用全局性說明進行填寫幫助。
▽Expedia智游網的訂單填寫頁面中，頂部提醒欄對多個字段進行說明示意。
5. 愉悅與驚喜：增加一點愉悅元素
1. 更加貼心；
2. 更加放心（安全性）；
▽Google Pay中添加付款方式，特別注釋說明不會泄露用戶的付款信息。
3. 適時的驚喜與成就感。
總結
遵循業務場景和用戶行為分析來反推機器能力的設計方法論不僅適用與表單的設計中，任何交互元素下的設計方式制定都可以從以上兩點出發，來指導設計者打造更加友好的產品體驗。
#專欄作家#
小偉同學，人人都是產品經理專欄作家。關注C端、B端用戶體驗趨勢，擅長場景與用戶行為分析、設計落地與價值變現，注重全鏈式服務設計與用戶感知體驗，喜歡探索設計新模式。
本文原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
秒訂閱！我以后是你的粉絲了???♂?
謝謝支持！
Up主是個細致人，表單元素是PM幾乎天天見的，一般就按照順手的UI設計就好了，Up主整理出來的原則更是讓表單設計系統化標準化了，贊一個！
用戶行為針對不同的行業/產品，還可以繼續補充