為什麼現在該重看表單
表單是網站上唯一「使用者必須替你工作」的地方，也是最少被重新設計的地方。Baymard Institute 追蹤購物車放棄率 14 年，全球平均目前 70.19%，其中 17% 的美國線上購物者說放棄原因是結帳太長或太複雜。同一組研究指出，美國平均結帳預設顯示 23.48 個表單元素、14.88 個是真正的輸入欄位，但多數訂單只需要 7 到 8 個。當 AI 助理開始幫人比價填單，表單版型就從美感問題變成資料可讀性問題。
四種版型與真實案例
- 單欄長表單（Stripe Checkout）：欄位垂直排列、一頁到底，驗證訊息寫在欄位下方。設計選擇是「不分頁、不跳轉」，把心力花在自動偵測卡別與國別格式。適合欄位少、信任度高的場景。
- 分步驟＋進度指示（GOV.UK 表單）：英國政府數位服務把複雜申請拆成「一頁一個問題」，頂端顯示進度。此版型寫進 GOV.UK Design System 的 question pages 模式，理由是降低認知負荷與錯誤率，不是因為好看。
- 手風琴式結帳（Shopify 商店預設）：資訊、配送、付款三段折疊，完成一段收合成可點回修改的摘要行，一頁內同時給了進度感與可回改。
- 對話式表單（Typeform）：一次只出現一題，強調節奏感。短問卷表現好，欄位一多總互動次數就變成負擔。
設計背後的邏輯
四種版型的差異其實是同一件事：降低單位時間的決策量。同一畫面要處理的選項愈多，決定時間就愈長（Hick–Hyman 定律），而每個輸入欄位都是一次決策，不只是一次打字。GOV.UK 選一頁一題，是因為政府表單的使用者常在壓力下填寫、錯誤代價高；Stripe 選單欄一頁，是因為付款情境的使用者已決定要買，此時中斷比長度更危險。共通原則是：欄位順序要符合使用者腦中的資料順序，一旦跳躍，完成率就掉。
技術成本與限制
版型選擇會直接變成工時與效能帳：
- 單欄長表單：開發最省，約 3–5 個工作天。風險在行動裝置頁面過長，錯誤訊息一次冒出時要捲動才找得到。
- 分步驟：多 4–8 天，要處理狀態保存、上一步、重整不遺失與每步驗證。每步都是新頁載入時，行動網路下要多付往返成本。
- 手風琴式：多 3–6 天，成本在收合摘要與回改的狀態同步。摘要區高度變化沒預留空間就直接製造 CLS。
- 對話式：多 5–10 天，大量動畫與逐題渲染容易拉高 INP，在中低階手機最明顯。
- SEO：結帳頁通常 noindex，影響不在排名而在 Core Web Vitals 的全站欄位資料——爛分數仍被算進同一來源。
適合的行業 vs 不適合的行業
| 版型 | 適合 | 不適合 |
|---|---|---|
| 單欄長表單 | 欄位 ≤ 10 的電商結帳、訂閱付款 | 需要條件分支的保險、貸款申請 |
| 分步驟＋進度 | 保險、金融開戶、政府與醫療申請、B2B 詢價 | 單價低的衝動型購買 |
| 手風琴式 | 一般零售電商、有多種配送方式的商店 | 欄位極少的單品結帳（反而變複雜） |
| 對話式 | 問卷、活動報名、初階諮詢表單 | 結帳流程、需要前後對照的長表單 |
怎麼套用到你的網站
- 數欄位。寫下目前預設顯示的欄位數，對照 7–8 個基準，超過的每一欄都要說明為什麼現在就得問。
- 分類必要性。分成「現在必問」「之後再問」「可自動取得」三堆。統編、發票抬頭、生日通常屬於第二堆。
- 依分支複雜度選版型。沒有條件分支用單欄；三段以上分支用分步驟並加進度指示。
- 修驗證時機。改成離開欄位時驗證，不要邊打邊報錯；訊息貼在欄位下方並用
aria-describedby綁定。 - 補無障礙基本盤。每個欄位要有真正的
<label>（placeholder 不算）、正確autocomplete、鍵盤可完整操作、錯誤能被朗讀，對照 WCAG 2.2 快速參考。 - 量測再決定。上線後看每欄位放棄率、錯誤發生率、完成中位秒數。沒有這三個數字，改版只是換個樣子。
常見錯誤與怎麼避開
- 用 placeholder 取代 label。打字後看不到欄位名稱，螢幕閱讀器支援也不一致。解法：label 永遠留著，可用浮動標籤。
- 進度條步驟數會變動。「以為快好了卻多出兩步」最傷。解法：總步數固定，條件題在同一步內展開。
- 錯誤訊息只放頁面頂端。手機要捲很久才找到出錯欄位。解法：摘要加可點擊錨點，並在欄位旁重複顯示。
- 手機鍵盤型別沒設。填手機號碼跳出文字鍵盤，填錯率立刻上升。解法：正確設定
inputmode與type。 - 摘要區塊撐開造成畫面跳動。解法：為可變高度區塊預留最小高度。
延伸資源
- GOV.UK Design System — Question pages：公開資源裡把「一頁一題」講得最完整的一份，含錯誤處理與無障礙規範。
- WCAG 2.2 Quick Reference：驗收表單無障礙可逐條對照。
- Baymard Institute 結帳可用性研究：欄位數與放棄原因的量化來源。
- web.dev — INP：判斷逐題渲染是否拖慢互動的官方指標。
常見問題 FAQ
分步驟表單一定比單頁好嗎？
不一定。優勢來自每步決策量下降與清楚的進度，不是分頁本身。總欄位只有 8 個卻硬拆成四步，只是把捲動換成點擊。關鍵是有沒有條件分支，以及使用者是否需要中途離開再回來。
結帳頁要不要做 A/B 測試？
流量夠才有意義。每月結帳啟動低於約 1,000 次時，測試要跑到市場條件都變了。這種規模建議先修明顯錯誤——刪非必要欄位、修 label 與鍵盤型別，再談測試。
表單無障礙做到什麼程度算及格？
最低標準是三件事：每個欄位有可見且關聯正確的 label、整份表單能純鍵盤完成、錯誤訊息能被螢幕閱讀器讀出並指回對應欄位。做到這三件，已經勝過多數商業網站。
自動填入（autocomplete）真的有差嗎？
有，而且是少數幾乎零成本的改善。正確標記 autocomplete="tel"、"postal-code" 等屬性，讓瀏覽器與密碼管理器代填，直接減少打字與錯誤，實作通常不到半天。
下一步
如果你的結帳或詢價表單預設顯示超過 12 個欄位，那通常是投報率最高的一次改版，因為它不需要重做整站。ScriptWalker 的「表單與結帳流程健檢」起價 NT$38,000，交付欄位必要性分析、版型建議、無障礙檢查清單與可施工規格。30 分鐘諮詢免費。
- Email：[email protected]
- 電話：0916-224-047
- LINE：@ufv9089p