網站表單設計出了什麼問題?訪客才會填到一半就放棄

根據 Mirjam Seckler 等人 2014 年發表於美國電腦學會(ACM)人機互動研討會 CHI 的研究,表單只要符合基本可用性設計原則,就有 78% 的使用者能一次順利送出;一旦違反這些原則,比例馬上掉到只剩 42%。這接近腰斬的落差,說明的不是使用者比較沒耐心,而是表單設計本身出了問題。

多數經營者看到後台「填到一半就離開」的紀錄,直覺會認為是訪客沒興趣,或產品不夠吸引人。但真正卡住訪客的,往往藏在三個具體的設計環節裡:欄位問得太多、順序排得不合邏輯、手機上填起來特別費力。網站表單設計出了狀況,受影響的從來不是美觀,而是那些原本已經有意願的訪客,還撐不撐得到按下送出鍵的那一刻。

先從最容易被忽略、也最普遍的一項講起,為什麼多數表單的欄位,總是比實際需要的還要多。

表單填不完,通常是這三個設計環節出了問題

訪客填到一半放棄,幾乎都能歸進三個彼此獨立的設計環節,欄位問得太多、順序排得不合邏輯、手機版比電腦難填好幾倍。這三者不是三選一的選擇題,而是常常同時發生,一個表單可能同時欄位過多、順序又亂,換到手機上還會再打折扣。

把網站表單設計拆成三個常見環節:欄位問得太多、順序不合邏輯、手機版難填,三者常一起讓訪客中途放棄。
填不完的表單,問題幾乎都能歸到這三個設計環節,而且常常一起出現。

不少經營者花心思把表單設計得簡潔好看,卻忽略了「看起來簡潔」跟「填起來順手」其實是兩回事。一個只留三、四個欄位,卻把姓名硬拆成兩格、地址欄位又預設攤開全部細節的表單,視覺上乾淨,填的人卻照樣卡住。真正決定訪客填不填得完的,是網站表單設計裡的欄位數量、排列邏輯,還有裝置適配這三件事,而不是版面好不好看。接下來就照這三個環節,一項一項拆開來看。

為什麼欄位越問越多,訪客反而填不下去?

多數經營者的直覺是「多蒐集一點資料,總是有備無患」,但這個直覺跟實際數據正好相反。Baymard Institute 針對大型電商網站的長期追蹤發現,結帳表單平均欄位數其實一年比一年在減少,2019 年平均 12.7 個、2021 年平均 11.8 個、到 2024 年平均 11.3 個。即使如此,多數網站其實只需要 8 個欄位就能完成結帳,而有 17% 的使用者曾經因為結帳流程太複雜而放棄購買。

大型電商結帳表單平均欄位數從 2019 年的 12.7 個降到 2024 年的 11.3 個,仍高於多數網站實際需要的 8 個。
結帳表單平均欄位數雖逐年下降,多數卻仍多於實際需要的 8 個(資料來源:Baymard Institute)。

這道落差不難理解,每多一個欄位,就多一次讓訪客停下來猶豫的機會,也多一次直接關掉分頁的可能。不確定是必填或選填、看不懂格式規則、想不通這欄位有什麼用,任何一個環節卡住,都可能讓原本填到一半的訪客放棄。表單長度看起來只是版面問題,實際上卻是不斷疊加的流失風險。

選填欄位又是另一個容易被誤判的地方。多數人以為,欄位反正沒有「必填」就不會造成困擾,填不填隨訪客高興,卻忽略了欄位本身存在,就會製造混淆。

CXL 顧問 Alex Birkett 在 2022 年整理的案例裡,提到 Expedia 訂票表單上曾經有一個選填的「公司」欄位,不少訪客誤以為那裡該填銀行名稱,接著又把銀行地址填進地址欄位,等到信用卡驗證比對地址失敗,訂單就卡住。Expedia 拿掉這個欄位之後,一年增加了 1200 萬美元的營收。一個選填、看似無傷大雅的欄位,實際造成的流失比想像中更直接。

姓名欄位,一格就夠,不用拆成兩半

姓名要不要拆成「姓」與「名」兩格,是判斷欄位是否多餘的最好例子。Baymard Institute 的大型電商可用性測試發現,只要表單把姓名拆成「名」「姓」兩個欄位,就有 42% 的受測者至少一次把整個全名打進「名」欄位裡;改成單一「全名」欄位之後,只剩 4% 的人會短暫猶豫,後續也沒有人再打錯。即便測試結果這麼明確,目前仍有 89% 的電商網站表單,把姓名拆成兩個以上的欄位。

姓名拆成「姓」「名」兩格時有 42% 的人打錯位置,改用單一「全名」欄位後只剩 4% 短暫猶豫。
姓名欄位不必為了資料庫方便拆成兩格;合併成一格,打錯率從 42% 降到 4%。

多數使用者本來就把姓名當成一個整體輸入,拆成兩格反而多了一層要重新拆解、重新對照的麻煩,在手機小螢幕上更容易打錯位置。能合併的欄位就合併,別因為資料庫方便存放,犧牲了訪客的填寫體驗。

地址欄位,查得到的資訊別再問一次

地址類欄位則是另一個容易「越問越細」的地方,最常見的例子是把「地址第二行」預設顯示出來。Baymard 測試發現,不少受測者看到這個預設顯示的欄位時會停下來,甚至懷疑自己前一格「地址第一行」是不是打錯了;而 Baymard 的電商基準調查顯示,只有 20% 的網站把這個欄位收在連結後面,換句話說仍有 80% 的網站,沒有把這個多數人用不到的欄位收起來。

正確的做法是把少數人才需要的欄位先隱藏,用一個連結讓真的需要的人自己點開;至於多數人共用的欄位,盡量用地址查詢或自動帶入取代手動輸入,而不是把每一段地址都拆成獨立欄位,硬要訪客自己一格一格打。

順序不合邏輯,為什麼會讓填表變得更費力?

欄位數量抓對之後,下一個常被忽略的環節是順序,同樣幾個欄位,排列方式不同,填寫起來的順暢度可以差很多。

多數表單的欄位順序,其實是照著資料庫欄位的排列方式決定的,而不是照訪客實際回答問題的邏輯。這種「先建資料表、再排表單」的心態,對工程端方便,對填表的人卻常常很卡。

Nielsen Norman Group 研究員 Kathryn Whitenton 在 2016 年提出的建議是,標籤要緊貼對應的欄位、單欄排版要優於多欄,因為多欄會打斷訪客往下填寫時的視覺動線;欄位順序也該符合一般人熟悉的邏輯,像信用卡號、有效期限、安全碼這種有固定先後順序的資訊,順序一亂,填的人就要多花時間回頭確認。

CXL Institute 一項單欄與多欄表單的比較測試,也印證了這一點。單欄表單(356 人測試)平均比多欄表單(346 人測試)快 15.4 秒完成,在 95% 信心水準下具有統計顯著性。多花的這十幾秒看起來不多,卻是訪客在猶豫「這一格該往哪裡看」的時間。

同類型的資訊也該視覺上綁在一起,例如聯絡方式、付款資訊各自成一區塊,不要讓姓名旁邊突然插進一個跟聯絡完全無關的欄位。順序排好之後,還有一件容易漏掉的事,就是實際用鍵盤的 Tab 鍵測試一次跳轉順序。順序亂掉的表單,連用鍵盤操作都會卡在奇怪的地方跳來跳去。

手機上的表單,為什麼比電腦難填好幾倍?

把表單搬到手機上,順序和欄位數的問題只會被放大,原因很單純,螢幕本來就小,鍵盤跳出來又佔掉將近一半畫面。

Baymard Institute 研究員 Jamie Holst 的測試發現,直向模式下,手機觸控鍵盤會佔掉將近 50% 的可視畫面,橫向模式下更高達 70% 到 80%。訪客常常因此填到一半,就忘記自己在填哪一欄、前面填了什麼,像失去頁面全貌一樣抓不住方向。Baymard 另一份針對 48 個主要行動版電商網站的測試也發現,有 60% 的網站在觸控鍵盤設計上至少踩到兩項常見錯誤,其中一項就是該跳出數字鍵盤的地方,卻還是跳出全字母鍵盤。

手機表單另外兩個常見錯誤,一個是把標籤放在欄位左邊而不是正上方,逼得欄位本身被迫縮短;另一個是只用「輸入中就消失」的浮動提示文字取代固定標籤,訪客一開始打字,提示就不見了,想確認自己在填哪一欄反而更難。

根據財團法人台灣網路資訊中心 2025 年公布的《台灣網路報告》,台灣民眾的行動上網比例已經達到 87.12%,平均每 100 人裡就有 87 人是用手機上網。手機版表單設計不良,流失的往往就是這群佔大宗的訪客,不是少數例外。

先問需求,再問聯絡方式,訪客才填得下去

把版面上的順序處理好之後,還有一層更容易被忽略的順序,也就是問題內容本身的先後次序。多數表單會把姓名、電話、Email 這些聯絡資訊放在最前面,理由聽起來很直覺,想先確認「這是誰」,再往下問其他細節。但這個直覺,恰好跟訪客真正的填表心理反了過來。

先問聯絡方式會把訪客戒心拉到最高、容易中途放棄;先問需求再問聯絡方式,靠「承諾與一致」提高完成率。
把低負擔的需求問題放前面、高負擔的聯絡資料往後挪,訪客更填得下去。

先問聯絡方式,聽起來合理,卻等於把最容易讓人起戒心的問題放在最前面,還沒建立信任前就要姓名電話一次交出去,訪客的戒心自然被拉到最高。CXL 顧問 Alex Birkett 引用心理學者 Robert Cialdini 提出的「承諾與一致」(commitment and consistency)原則,說明的正是這個機制,人一旦踏出一小步、開始投入,就會更傾向把整件事做完。

表單如果先問跟訪客需求或情境有關的問題,例如想解決什麼問題、想找哪一類服務,等訪客已經花時間回答、心裡也有點「答都答了」的慣性,再問聯絡方式與個人資料這類比較容易讓人起戒心的資訊,完成率自然會比反過來問更高。

這個順序有多關鍵,Jared M. Spool 與 Center Centre(UIE)整理的一個經典案例足以說明。某大型電商網站原本要求訪客在結帳前先「註冊會員」才能繼續,測試卻發現,不少本來已經要買單的訪客,一看到這個要求就打退堂鼓,有受測者直接說:「我不是來這裡建立關係的,我只是想買點東西。」團隊後來把「註冊」按鈕改成「繼續結帳」,把註冊留到最後才選擇性詢問,結果一年多帶來 3 億美元營收。同一件事套到一般表單上,道理是一樣的,把低負擔的問題放前面、把高負擔的要求往後挪,能救回大量原本就想完成的訪客。

如果表單本來就打算分成好幾個階段呈現,Zuko 的建議是把同類型的問題群聚在同一階段,而且開頭階段一定要放最簡單、負擔最低的問題,例如姓名,把需要多想一下,或比較敏感的問題留到後面階段,這樣才撐得住訪客持續填完的動能。

哪些欄位該留、哪些該刪?一個簡單的判斷原則

前面幾節拆了不少細節,回到實際操作,判斷一個欄位該留還是該刪,其實只要問自己三個問題。

  1. 這個欄位的答案,是不是現在就一定要知道,還是可以等訪客真的成交或預約之後再問?地址第二行這類欄位,大多數時候都能歸進「可以晚一點再問」的那一類。
  2. 這個欄位服務的是誰的目的,是我方蒐集資料比較方便,還是訪客完成這次填表真的需要?會讓人多想一下才知道怎麼填的「公司」欄位,服務的常常只是後台分類方便,不是訪客的需求。
  3. 如果拿掉這個欄位,是不是真的會少了什麼關鍵資訊,還是只是「多問一點總是好」的心態在作祟?姓名不用拆成兩格也能拿到完整全名,答案已經很清楚。

轉換率顧問公司 Zuko 也建議每個欄位都先套用這套自問,並且強調表單長度本身不是決定轉換率的唯一因素,欄位是不是真正必要、有沒有講清楚用途,才是關鍵。把這三個問題套進自己的表單逐格檢查一次,通常就能抓出兩三個可以刪掉或延後的欄位。

網站表單設計看起來只是一個小小的填寫框,卻是整個網站接觸訪客的最後一哩路。訪客願意填到這一步,代表他已經有意願,只要設計上出一點差錯,就可能讓這份意願在按下送出鍵之前白白流失。

不必一次把整個表單大改,先挑自己表單裡欄位最多、最容易讓人猶豫的那一格開始動手,一次改好一個環節,通常比等一次大改版更快看到效果。

資料來源
  1. Designing Usable Web Forms: Empirical Evaluation of Web Form Improvement Guidelines (CHI 2014) — ACM CHI(Mirjam Seckler 等人)
  2. Checkout Optimization: Minimize Form Fields — Baymard Institute
  3. Mobile Form Usability: Avoid Splitting Single Input Entities — Baymard Institute
  4. Form Usability: Getting Address Line 2 Right — Baymard Institute
  5. The State of Mobile Checkout & Form Usability — Baymard Institute(Jamie Holst)
  6. 'Touch Keyboard' Implementations Have Improved Just 9% Since 2013 (60% Still Get it Wrong) — Baymard Institute
  7. Form Design Principles: 13 Empirically Backed Best Practices — CXL(Alex Birkett)
  8. Form Field Usability: Should You Use Single or Multi-Column Forms? (Original Research) — CXL Institute
  9. Website Forms Usability: Top 10 Recommendations — Nielsen Norman Group(Kathryn Whitenton)
  10. Dr. Robert Cialdini's Seven Principles of Persuasion — Robert Cialdini
  11. The $300 Million Button — UIE(Jared M. Spool)
  12. Is a Single Page Form or Multi Step Form Better for Conversion? — Zuko
  13. How Many Fields Should an Enquiry Form Have For Maximum Conversion? — Zuko
  14. 2025 台灣網路報告—整體使用概況 — 財團法人台灣網路資訊中心