表單設計：掌握設計五要素，減少使用者填答時的不便與錯誤

圖／文：體驗設計顧問 謝明權 James、品牌行銷企劃 Coca

文章搭配 桃園網路e指通 一起食用，體驗更佳！

在執行「桃園網路e指通平台使用者體驗優化策略設計」專案中，除了解決原有網站資訊架構的問題之外，在研究收斂過程當中，發現在使用網站上的痛點除了「目標表單找尋困難」之外，「填寫表單過程」也因為原有設計造成使用者填寫時間拉長，發生錯誤機率提升等問題，造成最終繳交申辦表單後還陸續有問題產生的狀況發生，為此，遊石團隊重新盤點目前現有的表單數量，統整出相同元素，並將 67 項的表單重新設計，以下為設計表單規範時所統整出的 5 項要素：「表單結構、標籤編排、輸入欄位、行動按鈕和回饋。」

首先，先來聊聊關於表單設計心法

進行專案時發現表單的設計有幾項問題，包含用儲存格方式設計、用色塊群組標籤名稱、多欄式的編排、元素之間太過擁擠等，而一個一個問題疊加起來，就會讓表單看起來很厚重且令使用者操作不易。

為什麼操作厚重且操作不易會影響到表單的操作呢？我們先回到表單最主要的目的在於能夠協助雙方透過表單來「辨識身份、收集資料、進行交易，以及傳遞訊息」，因此，表單設計是否能夠簡易的進行填寫，且資料同時能夠輸入的正確無誤，就是最主要的關鍵。而表單設計心法首要條件就是透過介面設計細節上的著墨，讓表單看起來很輕盈，在填寫上會讓人產生比較好用的認知，可以讓用戶在填表時，可以減緩煩躁的心。

透過本次專案執行的經驗，來分享一個具有輕盈特性的表單，需有 5 個重要的設計要素，表單結構、標籤編排、輸入欄位、行動按鈕和回饋，這包含了問題排列的順序性、群組性和表單整體呈現方式，您想要問用戶什麼樣的問題，用戶要用什麼樣的方式填寫資料，資料填寫完了之後，要按哪裡將表單送出，表單送出之後，如果資料有誤，系統要如何告知用戶。

桃園網路e指通 表單設計前 / 後示意

1. 標籤順序與單欄編排結構

標籤的排列順序，並沒有一個標準規則，但是可以根據生活上習慣、邏輯性以及設計面，做一個整體的規劃。原設計的標籤順序沒有一致性，新設計則將姓名排在第一位，然後再接身分證字號、生日、聯絡電話等之類的問題，在排列上最後一個則是地址，因為它需求比較寬的輸入欄位，從設計面來看，最適合放在最後一個。

過去填寫 順序① 不符合使用者過去的填寫經驗。修改後以代理人資料為例，排序② 依序為姓名、身分證字號、聯絡電話、申辦結果通知方式和通訊地址，更符合現今填寫表單的經驗來設計

在設計上則採用單欄式的設計編排方式，多欄式的設計編排雖然可以節省空間，但是會讓用戶產生多樣的瀏覽順序性，反而容易造成填表時的遺漏或是填寫上的錯誤。

相較於 雙欄式① 結構，單欄式② 的設計在填寫時能避免不必要的混淆及錯誤

2. 標籤名稱與欄位的擺放位置

由於某些表單的問題很多，而且非常的多樣化，在設計上不適合將標籤放在欄位內，也不適合將它放在欄位的上方，所以放在欄位的左方對齊右邊是比較適合。必填欄位的星號標記則放在標籤的右邊，放在右邊的好處是，在視覺上可以快速感知哪些是必填的欄位。

必填的星號＊標記① 排列順序參差不齊，易造成混淆。優化後，除將欄位名稱放在輸入欄位的左邊，靠右對齊，並且將必填的星號＊標記②，放在欄位名稱的右邊對齊，在填寫時更方便區別。

3. 輸入欄位的高度與填答輔助

欄位的高度在舊表單設計中約是21px，新設計則採用Microsoft建議的值40px（9mm），這個值在行動裝置上操作，其錯誤率相較之下是比較低，而欄位的寬度在設計上不採齊頭齊尾，而是符合填寫該項目時使用者預期的相對寬度來制定。

為了能夠讓使用者容易操作，欄位寬度由過去 21px 改為建議使用高度 40 px

此外，輸入欄位之間與其他元素的間格也須注意，適當的間距能夠輔助使用者閱讀及填答。

過去填寫欄位設計，如時間及地址等，將內容拆分為日期、時、分等多個欄位，造成使用者需分段填寫，步驟繁瑣且費時。因此，考慮到使用者操作方便性，此次減少填答表格的數量，並運用日曆選填、時間軸，地址則可自動帶入郵遞區號或區域等輔助工具來加速填答，減少作答次數與時間。

以地址作為舉例，過去需一格填寫完再填寫另外一格，在設計更改完之後除可以直接填寫完整地址，運用輸入郵遞區號① 自動帶入通訊區域② ，增加填寫的方便性

4. 凸顯主要行動按鈕

主要行動按鈕是表單上最重要的一個地標，所以在設計上需要考慮它的位置、大小和顏色三個元素。一般而言，按鈕最好對齊輸入欄位，就會形成一條隱形的視覺動線，尺寸的部分也要夠大，並且適度加上顏色，這三個元素搭配得好，就能產生一種隱形的驅動力。

與輸入欄位相同，為能夠讓使用者容易操作，按鈕的高度設計為 40 px，小型線條按鈕則為 32 px。在移動或點擊按鈕時，透過顏色及陰影的方式來讓使用者感受到回饋

表單上可能還會有次要行動按鈕，市府的服務表單有些有次要行動按鈕，有些則沒有，如果這些次要行動按鈕並非一定要存在。在設計上則可以採用低視覺比重的文字按鈕，它的特性是使用者需要它的時候，它就在哪邊，不需要的時候，它也不會干擾到操作。

在按鈕名稱的部分，有三個可遵循的原則，目的、操作動作和驅動性，原設計是使用「送出」作為按鈕名稱，為將目的原則融入名稱內，所以改為「送出表單」，會讓按鈕的目的更加清楚明確。

主要行動按鈕要對齊上方的輸入欄位、而且要夠大、醒目，次要行動按鈕在設計上可以採用線條按鈕或是文字按鈕，視它的重要性而定

5. 不同使用情境下的輸入回饋

一般來說，回饋方式都會採用紅色，來告知用戶錯誤的地方，例如原設計的回饋方式，是將欄位變成紅色以及錯誤說明採用紅色，然而，對於紅綠色盲的人來說，紅色在他們的眼裡還是偏灰色，因此，在新的設計則多增加了警示圖示，來加強告知用戶。

在不同填寫情境下，透過顏色輔助，如欄位邊框變成紅色，並提供警示圖示和錯誤說明，來告知用戶有錯誤的地方

在勾選單、點選單、下拉式選單，以及搜尋欄，運用顏色、表格狀態的改變，來協助使用者進行表格填答內容的辨別

設計過程掌握 5 大要素，改善使用者填表體驗

掌握 5 大要素進行設計，讓表單設計不僅提供給使用者在填寫表單有明確的引導，讓使用者能更順暢、更加快速簡便的填寫完成並送出表單，達到本專案想提供給使用者更加方便、快速，有效率的操作過程及使用體驗。

***
喜歡本篇表單設計經驗分享，請盡情使用文章的 Claps 功能讓我們知道！
UX Insight接下來也會陸續與大家分享團隊在執行專案上的經驗，歡迎 Follow 我們，有任何想法也可以 Facebook粉絲專頁 私訊與我們討論！

延伸閱讀：

桃園網路e指通平台使用者體驗優化策略設計 - 遊石UX UI設計

相關連結：

桃園網路ｅ指通