表單問卷設計怎么做？

   在用戶完成表單時，總會有一些操作，如輸入、選擇、提交等，其中包括用戶與表單的交互，其實，用戶在使用表單問卷時經常能碰到不順手的地方，接下來小編就從用戶填寫表單的幾個主要場景入手，對表單交互設計進行分析，總結出在各個場景中有效的交互設計經驗，教你表單問卷設計怎么做！一起來看看吧。

麥客CRM

3.7

54條點評

咨詢產品

免費試用

解決用戶選型困難的好軟件，有各維度的信息

客戶案例

7

合作品牌

7

表單問卷設計怎么做？

一、表單輸入

   單表單輸入是指只考慮某一個表單的輸入情況，此種情況主要是指的單個文本框的輸入。

1. 輸入前：給出建議

    有些情況下用戶并不知道自己應該怎么決定答案，這個時候我們可以提前給出一些建議來幫助用戶做出決定。

   看一下這個例子：用戶需要給自己的賬戶設置一個昵稱，但是想不到合適的內容，這個時候我們可以自動給出一個昵稱，用戶如果不喜歡可以點擊切換，或者在給出的昵稱基礎上進行編輯。

   通過給出建議，大大減輕了用戶思考的負擔，幫助用戶快速做出決定，既貼心又增加了表單的完成效率。

2. 輸入時：及時驗證

   文本框由于本身不限制輸入的數據類型，當業務上要求輸入特定格式的數據時，就會出現用戶輸入的數據格式不符合要求的情況。

   針對這種情況，首先我們應該在提交時做數據驗證，如果輸入的數據格式不符合要求就不允許提交。

   但是這樣的方式會導致用戶只有在提交的時候才能發現自己的錯誤，效率比較低。

   我們可以在用戶輸入時就進行驗證，比如：

   注冊時用戶需要輸入一個用戶名，但是不能使用已被他人使用的用戶名。

   這個場景下用戶是不知道哪些用戶名已經被他人使用的，只能一次次的試探才能最終確定用戶名，所以我們可以在用戶輸入完用戶名的當時就對用戶名稱是否可用進行校驗并提示，而不是在用戶提交表單時進行提示；這樣用戶就可以及時發現錯誤及時修改，極大的提升了輸入效率。

   注：實時驗證一般只在用戶輸入完成后自動觸發驗證，不在輸入過程中進行驗證，一是避免帶給用戶困惑，同時也能降低服務器壓力。

   但是有一種情況可以在輸入時即進行驗證：對用戶的輸入內容給出的意見參考而不是對錯的提示。

   常見的例子有用戶設置密碼時，會自動顯示當前輸入密碼的密碼強度。

3. 輸入后：自動糾錯

   文本框支持輸入的數據格式是多種多樣的，有時候同一個內容有多種表達形式，當用戶輸入的表達形式不符合業務的要求時，比及時提示用戶正確的格式要求然后讓用戶去修改更好的做法是：自動將用戶的輸入內容轉換為符合要求的格式。

   用戶要輸入一個英語單詞，業務上要求首字母必須大寫，當用戶習慣性的用小寫輸入完成時我們可以自動將單詞的首字母轉換為大寫后重新顯示給用戶。

   用戶在輸入一個日期，業務上要求的格式是XXXX/XX/XX，但是用戶輸入的格式是XXXX-XX-XX，在用戶輸入完成后我們可以自動將日期格式轉換為XXXX/XX/XX。

   注：轉換需要在用戶輸入完成后轉換，不可在用戶輸入過程中轉換以免打斷用戶的輸入。

二、關聯輸入

   關聯輸入是指多個表單之間存在聯動關系的輸入，比如選了A之后就不用再填寫B。

1. 數據關聯：做到數據聯動

   當兩個表單之間的數據有關聯關系時，需要隱藏聯動條件下不允許選擇的數據而不是用戶選擇后進行提示所選的數據不符合要求。

   比如有年齡和書單兩個表單，當填寫的年齡小于18周歲時就不可再選擇某些類型的書單；用戶選擇書單時即應該即時校驗用戶輸入的年齡，若小于18周歲則不對用戶展示禁用書單。

2. 表單關聯

   表單關聯是指多個表單是否需要填寫相互之間有制約關系，最常見的是調查問卷的場景，某個題目選擇了A答案會跳到第X題，選擇了B答案則會跳到Y題目。

   此時涉及到的情況會比較復雜，我們可以試著用多個方式逐一對比，并根據具體情況選擇合適的處理方式。

1）分頁處理

   分頁處理適用于關聯關系存在于多組表單之間而不是多個表單之間，此時可以將多組表單分別放在不同的頁面，采用分步填寫的方式逐頁完成表單。

   優點：

• 流程清晰，用戶對表單的完成路徑理解成本低。

• 能保證每一步表單填寫時都是已滿足上一步條件（否則不會進行到下一步），不易出錯。

   缺點：僅適用于流程類表單無法處理平行表單，對于三個表單任選一個的情況無法處理。

2）分組處理

   分組處理即將所有有關聯關系的表單進行分組，比如選擇A之后只能選擇123，選擇B之后只能選擇456，選擇C之后只能選擇789；同時ABC之間為互斥關系，選擇某一個之后即不能選擇另外兩個；此時我們可以將A+123、B+456、C+789在頁面上分為三組，選擇一組之后禁用其他兩組。

   優點：掌控全局，用戶對所有內容一目了然，能根據需要迅速做出選擇。

   缺點：視覺干擾過于嚴重，特別是分組較多時大量堆積的內容會給用戶帶來壓力。

3）選項卡

   選項卡也是一種分組處理，不同的是選項卡將不同組的內容分別隱藏在了不同的選項卡內，每次只展示當前選擇的選項卡的內容。

   優點：分類明確，遇到分組較多時，仍能在不對用戶產生嚴重視覺干擾的情況下讓用戶對所有內容一目了然。

   缺點：不利于表達表單的完成路徑，即：用戶無法清晰的理解多個選項卡是需要全部填寫完才能提交表單，還是只填寫其中一個才能提交表單；也無法理解多個選項卡分別填寫后是需要分別提交還是一起提交。

三、增加輸入

   增加輸入是當前的表單數量不是固定的，需要用戶根據需要自由增加。

   比如要求用戶填寫家庭成員時我們沒有辦法預測用戶有多少家庭成員，常見的做法時初始提供兩個成員的錄入表單，用戶可根據需要點擊“添加成員”向頁面添加更多的成員錄入表單。

   此種情況有兩種常用的方式：彈窗添加和顯示隱藏。

   彈窗添加即用戶點擊添加時出現一個彈窗，在彈窗中輸入相關內容，確認添加后在頁面上顯示添加內容；此種方式適用于需要添加的表單內容過多時，比如對播放器的復雜設置，在彈窗中展示完整的設置項，設置完成后在頁面上只顯示設置的結果。

   顯示隱藏即點擊添加時在頁面上即時增加顯示更多的表單，這種方式優點不打斷用戶的輸入，操作比較流暢，但是表單數量較多時會導致頁面比較混亂。

四、提交表單

   提交表單是完成表單的最后一步，此處最需要關注的是基于各種驗證的提示，這些可以在上一篇文章中詳細了解。

   這次主要說明一個常見的操作處理：很多情況下我們都會要求用戶提交表單時勾選一些必須同意的服務條款，否則就不允許提交。

   比較常見的做法有：

• 在提交時檢測是否已經勾選，未勾選時進行提示，這種是體驗最差的做法，因為這種做法只有在用戶提交時才會告訴用戶必須勾選服務條款。

• 在未勾選服務條款時將提交按鈕灰色顯示，這種是標準的做法，能通過灰色顯示提交按鈕給用戶一定的預期，也達到了要求用戶必須勾選服務條款的目的。

• 還有一種操作效率更好但是不太普遍適用的辦法：將同意服務條款與提交按鈕合并處理。這種做法將前兩種做法中勾選服務條款、點擊提交兩步操作合并成了一步，提高了輸入效率；但是此種做法容易導致用戶忽視閱讀條款內容，對于服務條款比較重要，希望用戶必須閱讀的場景不建議使用此種做法。

五、其他技巧

   在前兩篇文章中我們說過表單設計的一個重要原則就是提高用戶操作效率，填寫表單不是用戶 的需求，用戶在填寫表單時是痛苦的，我們必須想辦法讓用戶盡快完成表單結束這種痛苦。

所以萬變不離其宗，只要是有助于實現這一目標的策略都是可取的，除了上邊以及前兩篇文章講到的內容，還有很多可以參考借鑒的小技巧。

1. 預測輸入

   預測輸入即根據用戶已經輸入的內容做推測，自動給出當前輸入的可能答案，最常見的就是根據當前的熱門電影自動給出建議搜索內容；比如當前爆火的電影《八佰》，當用戶輸入“八”或者“8”時都會以下列列表的形式給出預測電影名“八佰”。

2. 自動對焦

   自動對焦是自動幫用戶激活下一個輸入表單，經常使用于初始打開表單填寫頁面時，或者隱藏搜索框的搜索功能；當用戶點擊搜索圖標時會顯示搜索框，此時可以自動將光標定位在搜索框中而不需要用戶再點一次文本框來激活文本框。

3. 個性化定制

   大數據技術的發展讓計算機了解每個人的習慣成為可能，那么我們就可以根據每個人不同的操作習慣給出不同的表單交互形式；比如：有些人習慣發表電影評論時長篇大論，我們就可以對這個人顯示一個較大的文本框；有些人只喜歡只言片語，我們就可以顯示一個較小的文本框，將多余的位置展示更多的常用詞組。

4. 引入新技術

   隨著科技的發展，人機交互的方式不再局限于用雙手操作鍵盤，語音轉文本的技術已經十分成熟；圖像識別技術讓人們可以利用手機的攝像機掃描圖片或者卡片直接獲取信息；也可以借助外部硬件來輔助輸入；比如使用身份證讀卡器直接讀取證件信息來代替手工錄入、使用指紋識別來代替密碼認證。

   科技發展日新月異，在提高效率方面機器總是不會讓我們失望；因此我們也需要多多關注科技在表單輸入方面帶給我們的各種便利，及時引進成熟的技術方案提升表單輸入體驗！

   對用戶來說，填寫長表單要花費時間成本，如果表單只是簡單地羅列了需要收集的問題，那么填寫起來就會非常困難，引起用戶的反感，直接導致用戶直接取消填寫。設計者需要通過設計手段降低用戶對表單的理解成本，充分考慮用戶的角度，幫助用戶更快、更有效地完成表單填寫。看來想要設計一份合理的表單問卷并不容易，看完小編的介紹你知道表單問卷設計怎么做了嗎？希望這篇文章對你有幫助。