寵物業進行網站外包時,常把「線上預約」寫成一個功能名稱,等到驗收才發現雙方理解完全不同。業主想的是顧客選服務、填寵物狀況、送出後有人接手;製作方可能只交付一張能寄出電子郵件的聯絡表。問題不一定出在技術,而是需求書沒有定義欄位目的、資料規則、失敗情境與完成證據。

比較穩妥的發案方式,是先畫出顧客完成任務的順序,再把每一步改寫成可操作、可觀察的驗收條件。寵物美容、住宿、到府照護或用品諮詢需要的資料不同,不宜複製一般聯絡表後不斷加欄位。網站外包範圍應清楚區分「送出預約需求」與「確認預約成立」;若仍需門市人工核對時段、寵物狀況或服務資格,完成頁就不應宣稱預約已確定。

先定義服務規則,再決定要問什麼

需求訪談可從四類資料開始:聯絡方式、寵物基本資料、服務選擇,以及希望日期或據點。每一欄都要說明用途、是否必填、可接受格式、誰能查看、送出後如何處理。若某項資料只是「可能有用」,卻不影響分流或服務判斷,就應先問是否真的要在第一步蒐集。

W3C 的表單教學指出,表單控制項應有能描述用途的標籤,並與欄位建立明確關聯。這對外包驗收很實際:不能只看畫面旁邊是否有一行字,還要測試點選標籤是否能聚焦對應欄位、鍵盤與輔助技術能否辨識名稱。像「其他」或「備註」這類模糊標籤,也應改成「需要門市先了解的寵物狀況」等符合實際用途的文字。

欄位分組也要反映操作順序。例如先選服務類型,才顯示該服務真正需要的問題;先選據點,再提供可申請的日期。若條件式欄位被隱藏,驗收時要確認它不會繼續阻擋送出,也不會把使用者已取消的選項留在資料裡。需求書應附上欄位矩陣,而不是只交一張桌面版設計稿。

錯誤訊息要能幫人修正,不只是紅框

W3C 的輸入驗證指南說明,必填項目要清楚標示,自訂驗證也要用可理解的方式通知使用者;對電話等可能有不同寫法的資料,驗證應盡量容納合理格式。據此,寵物預約表單的驗收案例至少要包含空白、格式不符、日期失效、條件切換與重複送出。

錯誤發生時,畫面需要指出哪一欄有問題、問題是什麼,以及如何修正。只有欄位變紅、跳回頁首或顯示「資料錯誤」都不夠具體。手機測試還要確認錯誤欄位會進入可見範圍,原本已填好的內容不會因一次錯誤全部消失。若表單分成多步,返回前一步也不應清空已確認資料。

MDN 的表單驗證文件特別提醒,瀏覽器端驗證能讓使用者較快修正,但不能取代伺服器端驗證,因為送往伺服器的請求仍可能被修改。發案規格因此不能只寫「前端有必填檢查」;還要要求後端對必要欄位與可接受值再次驗證,失敗時回傳可處理的狀態,不把不完整資料當成有效預約。

把送出後的狀態列入網站外包範圍

預約表單至少有尚未送出、傳送中、送出失敗與送出成功等狀態。使用者按下送出後,按鈕是否暫時停用、網路中斷能否重試、重複點擊會不會建立多筆紀錄,都應在測試案例中。成功畫面要說明系統已收到什麼、接下來由誰聯繫,以及這是否只是申請而非確認;不要讓顧客只能猜測表單有沒有送達。

通知信或後台紀錄也不是「有收到就好」。驗收可用測試資料逐欄對照,確認服務、據點、日期與寵物資料沒有錯位;同時檢查管理端能否辨認來源頁面與送出時間。敏感或自由輸入內容是否真的需要出現在電子郵件,也應由業主依實際作業與適用要求決定,而不是製作方預設全部轉寄。

用 LumiPaw 案例整理可測試的交付清單

展示作品「LumiPaw 光沐寵物美容」(lumipaw-petgroom)把洗護、造型與到府服務分流,並將 SPA 療程、會員儲值和站內購物放在同一個品牌體驗中。若以此作為寵物業網站外包的規格參考,重點不是照抄畫面,而是把不同任務的資料邊界說清楚:預約需要服務與時段,購物需要商品與收件流程,會員方案則有自己的權益說明。

驗收時可以準備幾組情境:新顧客替一隻寵物申請門市服務、既有會員選擇方案內服務、到府需求缺少必要地區資訊,以及顧客在送出前更換服務類型。逐一確認欄位顯示、標籤、錯誤訊息、後端拒絕與完成通知,並保存測試結果。這個案例是站內展示作品,不代表真實店家營運成果;引用它是為了說明頁面與流程如何分工。

網站需求書最後可把交付分成欄位矩陣、狀態流程、錯誤訊息、後台紀錄與通知範本。每項附上測試資料、預期結果與負責角色,報價時就能辨認哪些只是畫面製作,哪些包含資料驗證、後台處理與異常復原。如此一來,網站外包的預約功能不再是一句模糊承諾,而是一套雙方都能重現的驗收流程。