我們每天都會接觸到各式各樣的表單頁面，其中包括登錄賬號、填寫單據(jù)、購買產(chǎn)品、發(fā)布信息等。它作為所有產(chǎn)品里最常見也最普通的設(shè)計元素，往往最容易被忽略它們該有的體驗細節(jié)，而引起用戶使用中的挫敗感。本篇文章主要通過業(yè)務(wù)場景和用戶行為的角度來分析，如何打造體驗友好的表單界面。

目錄

一、交互設(shè)計下的業(yè)務(wù)場景與用戶行為

二、基于業(yè)務(wù)場景選擇適合的布局模式

三、基于用戶信任行為的設(shè)計原則

四、總結(jié)

交互設(shè)計下的業(yè)務(wù)場景和用戶行為

交互設(shè)計的本質(zhì)即人與機器在一定的業(yè)務(wù)場景下的信息傳遞、相互作用，我們設(shè)計產(chǎn)品可以理解為是在設(shè)計或者說培養(yǎng)對應(yīng)場景下的『機器能力』，良好的『機器能力』可以更好的根據(jù)『用戶行為/心理』來交流與反饋，使得系統(tǒng)更懂用戶，更符合自然人際之間的交互行為。

• 機器能力：系統(tǒng)在與用戶做信息交流時的展示、預(yù)估、判斷、反饋能力；
• 業(yè)務(wù)場景：為了滿足特定需求下用戶的操作路徑或過程；
• 用戶行為：用戶的潛在心理、實際行為與操作感知等特征描述；

那么如何打造更友好的表單界面，讓它更好的與用戶相互交流，我們需要從業(yè)務(wù)場景和用戶行為出發(fā)做分析，反推機器能力的設(shè)計目標(biāo)。

基于業(yè)務(wù)場景選擇適合的布局模式

針對不同的場景需求下的操作路徑，需要有相對合適的布局模式來支持高效操作和錄入，相應(yīng)的有以下四種類型：

• 多列流式布局；
• 單列布局；
• 卡片（擬物）化布局；
• 步驟向?qū)筒季郑?/li>

1. 多列流式布局

多列流式布局的表單，較多運用于需要大批量數(shù)據(jù)錄入的場景，此時的多列流式布局可以保證在各類終端上的空間最大化利用，同時該布局節(jié)省業(yè)務(wù)設(shè)計與開發(fā)成本。

▽下圖為高級表單，是多列流式布局的一種拓展設(shè)計，運用場景更廣。

2. 單列布局

在多列流式布局表單中，用戶需要使用Z型路徑進行掃描和閱讀，在節(jié)省空間的同時也犧牲了用戶的瀏覽與理解速度；但是對于單據(jù)字段數(shù)量較少且內(nèi)容層級與類型較單一的情況，如果一列展示的話，清晰的瀏覽線可以提供快速且明確的瀏覽路線，提高操作效率。

▽在人員類基礎(chǔ)資料界面的維護場景中，少量的字段更加適合單列布局模式。

3. 卡片（擬物）化布局

上述的多列流式布局或者單列布局，都是針對所有表單的通用模式，這兩種模式通用且開發(fā)設(shè)計成本較低，但是除此之外，細分場景下我們不應(yīng)該忽視很多特殊表單的設(shè)計需求與用戶習(xí)慣，這類特殊表單在線下有著固化的實體樣式，此時采用卡片（擬物）化模式可以讓用戶快速找到閱讀習(xí)慣。

▽憑證類的表單，較多直接采用擬物化的布局模式，迎合財務(wù)人員的閱讀習(xí)慣，提高處理效率。

而對于普通用戶日常生活的使用場景中也特別常見將表單（或其中部分內(nèi)容）設(shè)計成卡片（擬物）模式，例如很多實體票據(jù)中的電影票、高鐵票、飛機票等，習(xí)慣性的閱讀模式帶來空間利用與閱讀效率的更佳。

▽飛豬中機票訂單填寫界面，將部分內(nèi)容擬物化設(shè)計，方便展示且節(jié)省空間。

4. 步驟向?qū)筒季?/h3>

另外一類布局模式就是步驟向?qū)筒季?，主要運用于以下三種情況：

• 復(fù)雜的長表單；
• 內(nèi)容前后具有依賴關(guān)系的強順序表單；
• 風(fēng)險性較大的重要表單；

當(dāng)你在設(shè)計一個超長的復(fù)雜表單或者是一個無法簡化的流程任務(wù)時，此時步驟型向?qū)Р季挚梢越档蛷?fù)雜性，而從提高可用性可易用性。

另外很多時候，復(fù)雜表單內(nèi)容中具有前后依賴關(guān)系，在一張表單中，用戶需要嚴(yán)格先執(zhí)行前面任務(wù)，才能允許填寫后續(xù)任務(wù)，而步驟向?qū)『每梢酝ㄟ^細分的操作流讓用戶分步執(zhí)行，降低學(xué)習(xí)曲成本與操作風(fēng)險。

▽在GitHub的注冊操作中，采用步驟向?qū)筒季郑植酵瓿勺匀蝿?wù)。

對于涉及款項轉(zhuǎn)賬、賬戶安全等此類的重要表單，此時的填寫成本與風(fēng)險較高，即使內(nèi)容較少也推薦試用步驟向?qū)筒季?，避免后續(xù)出錯所帶來的不必要麻煩。

▽在富途證劵中，在轉(zhuǎn)入轉(zhuǎn)出業(yè)務(wù)中，細分操作流，每一步關(guān)注各自的重要信息，降低填寫表單風(fēng)險。

基于用戶信任行為的設(shè)計原則

以下需要談?wù)摰氖怯脩粜袨橄碌男湃翁卣魉鶐淼脑O(shè)計準(zhǔn)則。

從用戶行為/心理的角度看，信任是人與人之間交往的先決條件，只有獲得彼此的信任，兩個人之間的對話才能自然和愉悅。

那么對于用戶與產(chǎn)品之間，信任的行為準(zhǔn)則依然存在，信任意味著更多耐心和理解，同時帶來了更多的探索欲與試錯接受度。用戶足夠信任產(chǎn)品才能讓表單的錄入變得更加流程與愉悅。

1.? 簡明扼要：明確表單填寫目的

當(dāng)設(shè)計者拿到一份需求文檔時，面對眾多的錄入字段，首要事項就是明確用戶填寫該表單的目的，需要確保終端用戶看到的表單上都是真正需要的字段，因為每增加一個額外的非必要字段都會影響填寫效率/轉(zhuǎn)化率。要時刻思考我們需要從用戶那里得到哪些必要信息以及怎么進行高效地數(shù)據(jù)利用。

而針對非必填但是又有用的字段內(nèi)容，可以采取的策略是在初次交互時并不強制填寫，而讓用戶選填以及在后續(xù)合適的場景中重新喚起該內(nèi)容項的信息收集，適時且自然，保證初始交互簡單可控。

▽Google 日歷中，當(dāng)創(chuàng)建待辦事項時，只彈出彈窗顯示必要字段，用戶可以自行選擇直接保存或者填寫更多內(nèi)容項，該設(shè)計極大提高快速創(chuàng)建待辦的效率。

2. 組織與布局：關(guān)聯(lián)信息合理組織

很多時候的表單內(nèi)容多且繁雜，其中的信息項如果只是常規(guī)羅列，很容易顯得混亂和難以閱讀，易用性較差，使用戶產(chǎn)生抵觸情緒，久而久之就厭惡使用該產(chǎn)品。

關(guān)聯(lián)信息、合理組織內(nèi)容，利用區(qū)塊、間隔來進行布局區(qū)分；按照內(nèi)容的類別、層次、順序等進行組的劃分，提高表單的清晰性與可讀性。

▽DELTA中乘客的基本信息和聯(lián)系信息為兩項獨立的重要項，分組展示，同時對于每個組內(nèi)的細分信息也進行分行布局，例如姓名類信息獨行，飛行計劃與號碼、性別與年月日、編號各自獨占一行，清晰易填。

相關(guān)閱讀：《設(shè)計法則： Fitts’ Law / 菲茨定律（費茨法則）》

3. 雙向交流：最大限度地幫助用戶進行填寫

表單填寫長久以來被詬病的一點即是其繁瑣性，減少用戶操作以幫助用戶提高輸入效率，從而提高轉(zhuǎn)化率/效率。

預(yù)判默認值

針對一些常規(guī)內(nèi)容，表單場景可以通過獲取用戶資料/個人信息/歷史記錄等來預(yù)判默認值。

最為典型的即是當(dāng)我填寫一張請假單時，系統(tǒng)應(yīng)該自動代入我的部門、姓名、工號等信息，該類元素的繼承性較強，用戶很少情況會去變更。同樣在性別、地址、轉(zhuǎn)賬人等都可以使用『預(yù)判默認值』的方法來減少用戶操作成本。

軟件應(yīng)該保持智能的模式，在適當(dāng)?shù)娘L(fēng)險點內(nèi)，幫使用者選擇決策。

硬件設(shè)備自動獲取

在人機交互層面，除了不斷思考軟件能給予用戶的體驗外還需要探索，硬件設(shè)備可以提供哪些幫助？

該情況最常見例子即”系統(tǒng)定位”，任何表單或者場景，只要涉及地址選擇，基本現(xiàn)在所以產(chǎn)品都會設(shè)置系統(tǒng)快速定位用戶設(shè)備所在位置，自動錄入。

而較高級的做法則是更深度挖掘機器的能力，也就是大家常說的『語音識別』與『圖像識別』，當(dāng)用戶需要錄入一張發(fā)票時，系統(tǒng)提前告知用戶拍攝實體發(fā)票/二維碼，進行圖像識別后，批量代入數(shù)據(jù)，極大減少用戶思考與操作成本。

自動生成

另外一些字段，系統(tǒng)可以根據(jù)規(guī)則來自動生成相應(yīng)內(nèi)容，例如編碼、序號等，此時一般不允許用戶進行更改，而針對另外一些用戶自主性更強的字段，可以采用自動生成+建議錄入的方式來幫助用戶。

▽Safari瀏覽器下，密碼字段自動生成強密碼，若用戶使用，則瀏覽器會自動記錄，下次自動填充。

相關(guān)閱讀：設(shè)計方法論：如何讓機器幫助用戶高效錄入數(shù)據(jù)？

4. 導(dǎo)引與幫助：給予適時的提醒幫助和導(dǎo)引

在用戶面對繁雜的表單填寫時，難免會遇到困惑，此時為了防止用戶出錯或者中途流失，我們需要適時給予用戶幫助和導(dǎo)引。

其內(nèi)容的編寫上可以有以下指導(dǎo)方針：

1. 告訴用戶該項指什么，適用于術(shù)語類字段；

2. 告訴用戶為什么要填寫該項，填寫了有什么好處；

此類多見于需要收集用戶信息的場景，例如需要登記用戶手機（非必錄項），此時告知用戶”填寫手機號方便找回密碼”，自然而然的用戶會有更高的意愿去填寫。

3. 告訴用戶要怎么填寫該項，即填寫規(guī)則。

在形式上，可以選擇：

1. 靈活利用字段掩碼進行填寫提醒；

▽大韓航空KOREAN AIR中，錄入框里的灰字即字段掩碼，其中有填寫幫助和示例。

字段掩碼可以很好地節(jié)省空間，同時可以快速的幫助用戶降低思考成本。

2. 標(biāo)簽Tips的有效示意；

▽Trip平臺中，填寫姓名項時，出現(xiàn)Tips氣泡浮窗，出現(xiàn)護照卡片圖例示意，形象易懂。

3. 全局性說明規(guī)范整體填寫

當(dāng)表單中多個字段需要進行關(guān)聯(lián)性說明時，此時需要跳出單個字段的引導(dǎo)，啟用全局性說明進行填寫幫助。

▽Expedia智游網(wǎng)的訂單填寫頁面中，頂部提醒欄對多個字段進行說明示意。

5. 愉悅與驚喜：增加一點愉悅元素

1. 更加貼心；

2. 更加放心（安全性）；

▽Google Pay中添加付款方式，特別注釋說明不會泄露用戶的付款信息。

3. 適時的驚喜與成就感。

總結(jié)

遵循業(yè)務(wù)場景和用戶行為分析來反推機器能力的設(shè)計方法論不僅適用與表單的設(shè)計中，任何交互元素下的設(shè)計方式制定都可以從以上兩點出發(fā)，來指導(dǎo)設(shè)計者打造更加友好的產(chǎn)品體驗。

#專欄作家#

小偉同學(xué)，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注C端、B端用戶體驗趨勢，擅長場景與用戶行為分析、設(shè)計落地與價值變現(xiàn)，注重全鏈?zhǔn)椒?wù)設(shè)計與用戶感知體驗，喜歡探索設(shè)計新模式。

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

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