AO2 / INSIGHTS — 把知識變成下一步

表單錯誤復原:保留資料、狀態與安全重試

READING INDEX

這篇指南怎麼讀

先理解問題,再選擇方法。把值得採用的一步,帶回日常工作。

表單錯誤復原主題封面:不讓使用者猜要不要重送,以橘灰流程圖呈現保留內容、修正位置、復原路徑。
AO2 原創主題視覺|說清狀態,讓填寫能接續

AO2 FIELD GUIDE · N066 · WordPress 與轉換體驗

表單錯誤復原先分辨欄位不合、尚未送出與結果未知,再提供修正、查詢及重試路徑。附錯誤訊息與測試矩陣,讓已填內容能接續,不把逾時一律寫成失敗,也不讓使用者猜要不要再送。

使用者花了時間整理需求,按送出後只看到「發生錯誤」,重新整理又全部清空。問題不只是文案不夠友善,而是沒有交代目前狀態、哪些資料仍在、下一步怎麼做。本篇處理前台復原;成功事件與後端去重各有對應指南。

表單錯誤復原,先分辨錯在哪一層

欄位格式不合、附件未完成、請求未送出、伺服器已拒絕,以及送出後尚未取得結果,是不同情境。介面能確定哪一層,才說哪一層。瀏覽器等待逾時,不足以證明伺服器沒收到;前台出現提示,也不能單獨證明 CRM 已建立紀錄。先定義狀態,再設計訊息與操作。

讓人知道怎麼繼續,比只告訴他出錯更重要。欄位錯誤要指出位置、原因與修正方式;系統錯誤則交代哪些結果已確認、哪些仍未知。內部技術碼可供追查,但不能把堆疊訊息或模糊的 error code 當成給客戶的全部指引。

白話例子:櫃台沒回應,不等於申請單沒收到

假想客戶提交設備需求,櫃台收件後對講機斷線,申請人聽不到回覆。若直接叫他重填,可能留下兩張單;若說已完成,又可能誤報狀態。合理做法是先保留原填寫內容,說明目前尚未確認結果,提供查詢或經設計的重試方式,而不是要求客戶自己猜是否再排一次隊。

申請單對應提交資料,收件紀錄對應伺服器狀態,對講機對應前台回應。這是流程比喻,不表示所有網站都有可查詢的收件編號。技術團隊需先實作可辨認同次提交的方式,前台才能提供相應操作;只有一個漂亮的「重試」按鈕,不能自動保證不重複。

讓錯誤訊息靠近欄位,也讓鍵盤找得到

例如電子郵件格式不符,訊息應說清需要修正的欄位與格式示例,不只把框線變紅。多個錯誤可在表單上方提供摘要並連到相關欄位;修正後狀態同步清除,不讓舊提示一直存在。W3C WAI 的表單教程說明驗證與可存取通知的重要性,實際訊息仍需對應你的欄位及處理狀態。

必填、選填與特殊格式在填寫前就交代,不能全部等送出後才揭露。對可接受的輸入方式保持合理彈性,但伺服器仍需驗證。鍵盤與輔助工具使用者也應能找到錯誤位置,修正後回到接續流程;不要只靠短暫出現、未保留文字的浮動通知,讓人錯過後無從查起。

狀態與前台指引示例
情境可以告訴使用者應提供的下一步
欄位格式不合尚未完成,請修正指定欄位保留其他內容並定位錯誤
附件未通過說明可確認的原因及條件保留文字並顯示需重選附件
送出後結果未知目前尚未確認是否完成按系統能力查詢或接手
已確認完成顯示完成與合理接續說明不再引導重複送出

保留內容要有範圍,重試要有明確語意

一般可保留使用者已填的需求文字與不需重選的欄位,避免因單一錯誤清空整份表單。附件是否仍保留需明確顯示,不假設瀏覽器會自動重新帶入檔案。若要跨頁或長時間保存,先定義保存位置、時限與清除方式,不為了方便把不適合的資料永久留在共用裝置。

已確認未送出的錯誤可讓使用者修正再送;結果未知則先提供系統能支援的狀態核對,或帶著追查資訊交由接手窗口。是否重試沿用同次提交、何時建立新次提交,由前後端共同定義。本文不重寫去重機制,但介面不能給出與後端實際處理相矛盾的指示。

用失敗情境驗收,別只測成功一次

在適當測試環境安排必填缺漏、格式錯誤、附件不合、網路中斷與回應逾時。每題先寫可觀察的預期:填寫資料是否保留、訊息能否理解、鍵盤到哪裡、接手者如何追查。不要以正式客戶需求或無標記測試單反覆試送,避免測試結果混入業務工作。

復原完成,是能安全接回流程,不是讓錯誤提示消失。修改後重走原失敗題,再驗證成功流程仍正常;記錄已知限制與替代方式。前台、網站紀錄及後續系統各自保存哪些證據,應能對到同一次提交,才容易分辨問題在哪一層。

錯誤復原測試矩陣
測試要觀察的結果完成證據
缺必填或錯格式位置、原因與修正可理解修正後不需重填全部
鍵盤修正多個錯誤摘要、欄位與焦點可接續不依滑鼠才能找到提示
附件失敗是否保留及重選狀態清楚內容不被默默丟掉
逾時後重試結果與同次提交規則一致前後端可追查且不誤報

常見問題

只把「發生錯誤」改得親切一點就夠嗎?

不夠。訊息需要對應已知狀態,交代哪裡出問題、哪些內容仍保留及如何繼續。格式錯誤應定位欄位;系統問題不能假裝是使用者填錯。先用幾種失敗情境驗證訊息與操作,再由不熟悉網站的人試著復原。語氣可以友善,但不能用流暢文案掩蓋結果未知。

保留所有輸入越久,體驗就越好嗎?

不一定。先分清只在當前頁保留,或需要跨頁、跨次保存。保存哪些資料、放在哪裡、多久清除及共用裝置上的使用方式,都要有合適安排。附件也未必能自動保留,應讓使用者知道是否需重新選取。以完成必要任務為範圍,不為了少填一次而無限制保存不必要資料。

逾時後可以直接顯示失敗,叫客戶再送嗎?

若無法確認後端沒收到,就不應直接這樣下結論。前後端先定義結果未知時的查詢、同次重試與接手方式,介面再提供相符說明。測試回應中斷但已寫入的情境,核對是否重複或誤報。若目前系統無法查詢,清楚提供可追查的聯絡路徑,不承諾一鍵重試必定安全。

白話總結:先保住申請單,再說怎麼接著辦

錯誤不是一句提示,而是一段需要接回的工作。把已知、未知與可採取的動作講清楚。

  1. 分狀態:辨別欄位不合、未送出、結果未知與已完成。
  2. 留內容:保留合適資料,定位錯誤並說明附件與保存範圍。
  3. 走復原:測中斷與重試,核對前台說法及後端結果。

完成條件:使用者知道發生什麼、哪些資料還在,以及如何繼續;流程不靠猜測或反覆重填。

來源與方法範圍

資料查核:2026 年 10 月 24 日。來源支持文中對應的準則與平台說明;工作表、判斷步驟及已標示的假想情境由 AO2 整理,實際使用時依產品資料與現行設定核對。

KEEP EXPLORING

把觀點,連成自己的方法。

從同一個問題延伸,繼續找出能在企業現場採用的做法。

產品比較工具規劃:欄位、未知狀態與驗收

互動比較工具會依使用者選項改變結果,所以不只是一張可排序的規格表。需要說清使用哪份資料、條件不符時怎麼顯示、選到未知版本時如何繼續,以及更新資料後哪些結果必須重新驗證。畫面能切換,不代表比較已經可靠。

繼續閱讀 ↗

YOUR NEXT STEP / WordPress 與網站體驗

先用一個小步驟,把方法做起來。

接著讀同一個問題的下一步,或用工作表盤點你目前的情況。

返回頂端