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

UXI Design
Apr 21, 2020 · 8 min read

圖/文:體驗設計顧問 謝明權 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粉絲專頁 私訊與我們討論!

UX Insight

將 UXUI、Service Design 作為主要精神糧食(嚼)。

UX Insight

UX Insight 透過分享團隊在 UX/UI 專案執行上的經驗,期待與你產生更多不同想法上的花火。

UXI Design

Written by

UXI Design 遊石設計,為專業的使用者體驗設計(UX Design)與服務設計(Service Design)團隊,致力於創造優質的介面、令人感動的體驗,擅長透過共創設計進行服務創新。歡迎有興趣的朋友們透過 https://www.facebook.com/uxidesign/ 一起討論 UX/UI 大小事

UX Insight

UX Insight 透過分享團隊在 UX/UI 專案執行上的經驗,期待與你產生更多不同想法上的花火。

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store