昨天談動效與微互動,那些細膩的回饋大多發生在使用者「操作元件」的當下,而表單正是操作最密集、也最容易讓人放棄的地方。表單是轉換漏斗最後、也最脆弱的一段:註冊、結帳、預約、聯絡,每一個都靠它把意圖變成結果。Baymard Institute 針對結帳流程做了 25 輪、4,400 場以上的實測,發現一般電商結帳平均放了 11.3 個欄位,但真正需要的通常只有 7–8 個——每多一個欄位,就是多一次讓人猶豫、離開的機會。今天把表單當成一個獨立的設計問題來拆解。
📖 學
先刪欄位,再談美化。 表單優化的第一原則不是把輸入框變好看,而是問「這個欄位現在非要不可嗎?」。Baymard 的經典案例是把 16 個結帳欄位砍到 8 個,轉換率明顯提升。公司抬頭、第二行地址、確認 email、生日,多半可以延後或移除。能用一個欄位解決的別拆兩個(全名比「姓/名」兩欄更順),能自動推斷的別讓使用者填(郵遞區號帶出縣市)。
單欄排版是行動優先時代的預設。 多數表單應該採單欄、垂直堆疊,讓視線走一條直線往下、不必左右跳。多欄容易讓人漏填、或誤把不同欄位當成同一組。真正適合並排的只有邏輯上本就成對的短欄位,例如「城市 + 郵遞區號」「到期月 / 年」。其餘一律單欄。
標籤放上方,別用 placeholder 當標籤。 標籤位置以「輸入框正上方、靠左對齊」最穩,視線垂直掃描最快,也給行動裝置留出寬度。最常見的陷阱是拿灰色 placeholder 當標籤:使用者一開始打字,提示就消失,填到一半忘了這格是什麼、也無法回頭檢查;placeholder 的低對比還常低於無障礙標準。NN/g 的測試一再顯示,永遠可見的標籤表現優於 placeholder-only,後者會在各族群拉高錯誤率。placeholder 只適合放「格式範例」(如 0912-345-678),不能取代標籤。
輸入類型決定行動鍵盤。 在手機上,type 直接影響跳出哪種鍵盤。email 欄位用 type="email" 會帶出 @ 鍵;電話用 type="tel" 跳數字盤;純數字驗證碼可加 inputmode="numeric"。搭配 autocomplete(如 email、tel、street-address、cc-number)讓瀏覽器與密碼管理器一鍵代填,是最省力的體驗升級。別為了「乾淨」關掉 autocomplete,那是在跟使用者作對。
即時驗證的時機:blur 提示錯誤,keystroke 提示成功。 inline validation 的價值是讓人當下就修正,但太早太吵反而惱人。準則是:使用者「離開欄位」(blur)後再檢查並顯示錯誤,不要在他還沒打完 email 時就跳「格式錯誤」;正向確認(密碼強度、帳號可用打勾)則可即時、隨打字更新。密碼規則這類「邊打邊符合」的條件適合即時顯示清單。最終送出(submit)時再做一次總驗證,把所有問題一次攤開。
錯誤訊息要具體、就地、可行動。 依 NN/g 的錯誤設計準則:訊息要指出「哪一格、錯在哪、怎麼修」,放在該欄位旁邊(不是只在頁首丟一句「表單有誤」),用文字而非只靠紅色(色盲看不出),語氣中性不指責。「請輸入有效的 email」不如「email 少了 @,例如 name@example.com」。送出後若有多個錯誤,頁首給一個摘要與跳轉連結,同時逐格標示。
必填/選填要標清楚,而且只標少數那邊。 若大多數欄位必填,就只標「選填」;反之只標必填的星號 *,並在表單開頭說明星號代表必填。別讓使用者靠猜。星號旁最好仍有文字說明,螢幕報讀器才讀得到。
長表單分段並顯示進度。 超過一屏的表單,依主題切成有意義的段落(基本資料 / 配送 / 付款),配上步驟指示器讓人知道「還剩幾步」。分段能降低一次面對整片欄位的壓力,也讓錯誤定位更容易。但別為分段而分段,把 8 個欄位硬拆成 5 步反而更累。
無障礙不是加分項,是地基。 每個輸入框都要有用 for/id 明確關聯的 <label>(MDN 視 explicit for 為最佳實務,點標籤即聚焦欄位,對小螢幕與行動不便者特別有幫助)。錯誤訊息用 aria-describedby 綁到欄位、aria-invalid="true" 標記,螢幕報讀器才會把錯誤唸出來。不要用 <div> 假裝按鈕,原生 <button>/<input> 自帶鍵盤與焦點行為。
🧠 記
- 表單優化第一步是刪欄位:平均 11.3、最適 7–8(Baymard)。
- 單欄垂直排版為預設,只有邏輯成對的短欄位才並排。
- 標籤放輸入框上方;placeholder 不能當標籤,只放格式範例。
- 用對
type與inputmode帶出正確鍵盤,並開autocomplete讓瀏覽器代填。 - 錯誤驗證在 blur 顯示、正向確認可即時;submit 時再總檢一次。
- 錯誤訊息要就地、具體、可修、不只靠顏色。
- 無障礙:
<label for>關聯、aria-describedby+aria-invalid讓錯誤被朗讀。
✍️ 實踐
挑一個你常用網站的註冊或結帳表單(例如某電商結帳、某訂閱註冊),用今天的準則走一遍,寫出至少 5 個可改進點。建議這樣列:
- 欄位精簡——有沒有現在非填不可、卻其實可延後或移除的欄位?列出可砍的。
- 標籤 vs placeholder——是否用 placeholder 當標籤?打字後提示會消失嗎?
- 驗證時機——email/密碼是不是還沒打完就跳錯?或錯了卻要等到 submit 才知道?
- 錯誤訊息——訊息是否具體到「哪格、怎麼修」?是不是只靠紅框、沒有文字?
- 行動與無障礙——手機上鍵盤對不對?用鍵盤 Tab 能不能順走完?點標籤文字會聚焦到欄位嗎?
每點寫一句「現況 → 建議改法」,15 分鐘內可完成。
🔗 延伸學習
- E-Commerce Checkout Usability Research – Baymard Institute
- Checkout Optimization: From 16 Form Fields to 8 Fields – Baymard
- Design Guidelines for Reporting Errors in Forms – Nielsen Norman Group
- Text labels and names – MDN Web Docs
💬 問 AI
我想改善一個表單的填寫體驗,請用實證的 UX 準則幫我檢視:
1. 這個表單的欄位([貼上欄位清單]),哪些可以刪除、合併或改成自動推斷?目標壓到 7–8 個。
2. 幫我判斷每個欄位的標籤位置、輸入 type/inputmode、autocomplete 設定該怎麼設。
3. inline validation 的時機建議:哪些欄位該在 blur 驗證、哪些適合即時正向確認?
4. 幫我把這幾則錯誤訊息([貼上現有訊息])改寫成具體、可修、符合無障礙的版本。