嗨，
我是 Taony
上期私房菜聊完返回鍵，這期繼續分享 UI/UX 避雷指南
今天的主角是表單裡最愛「插嘴」的那個設計
「Inline Validation 即時驗證」
你有沒有遇過這種情況？
註冊帳號的過程中，Email 才打了第一個字母
欄位下方就跳出一行紅字：「請輸入有效的 Email」
就… 我都還沒打完，急什麼？
表單還沒填完，心情就先被弄差了
去年我寫過一期網頁表單的避雷指南
即時驗證在那份清單裡，只寫了 3 條
這次我覺得應該把它單獨拉出來，好好講清楚
即時驗證，其實是一門對話的學問
Inline Validation 簡單來說就是：
使用者還在填寫表單的時候，介面會先告訴他填得對不對
不用等到按下送出，才看到一整排提醒
聽起來很貼心吧？
但做不好，它就會變成一個很愛插嘴的人
想像一下你跟朋友聊天
你才講了半句，他就打斷你說「誒，不對喔」
另外一種是，等你真的講完了，他又沒有任何的回饋
這兩種人，都讓人很難聊下去
即時驗證也是一樣
難的不是「即時」，而是「什麼時候開口」
下面我會分成四組，每一條都附上具體的例子
一樣可以先收藏起來喔！
一、什麼時候該開口？
使用者剛點進欄位，還沒輸入，有沒有避免直接報錯？
例子：游標一點進「手機號碼」，紅框就亮起來，使用者什麼都還沒做就先被罵了使用者打字打到一半，有沒有避免馬上報錯？
例子：Email 打到「xxx@」就跳出格式錯誤，其實他只是還沒打完大部分欄位，是不是等使用者離開欄位（on blur）才檢查？
例子：填完 Email 按 Tab 跳到下一格，這時候才提示格式有沒有問題
（少數例外像密碼強度條，邊打邊顯示反而有幫助，因為是在陪他填，而不是在罵他）使用者正在填寫時，有沒有避免在別的欄位冒出新錯誤？
例子：正在填寫地址，上面的「確認密碼」突然變紅，注意力一下子就被拉走了
去年那期提過「改錯時要邊打邊回饋」，也就是使用者打對的那一刻，紅字就消失
例子：Email 欄被標紅之後，使用者回去補上「.com」
最後一個字母打完，紅字馬上消失
今天要講的是：使用者還沒錯，就先別開口
兩期放在一起看，才是完整的時機規則
二、使用者的思緒，跳來跳去的時候
老實說，表單很少是從上到下乖乖填完的
使用者會跳過某一項，會回頭修改，也會不小心重新整理頁面
空白欄位被跳過，要不要馬上標紅？
例子：先跳過「公司名稱」去填 Email，打算等一下再補
這時候不用急著提醒，按下送出時判斷再說填到一半的欄位被跳過，提示有沒有說出差多少？
例子：手機號碼只填了 6 位數字就跳去填姓名，提示「還少 4 位數字」
比「號碼格式錯誤」更貼心使用者把原本正確的內容改掉，狀態有沒有跟著更新？
例子：Email 旁邊原本有綠色勾勾，改成另一個信箱時，勾勾要先拿掉
等他改完再重新檢查重新整理頁面之後，填過的資料還在嗎？
例子：填到第 8 個欄位，手指不小心往下一拉，頁面重新整理，全部清空
（手機真的很容易誤觸！）切去別的 App 再回來，表單還是原本的樣子嗎？
例子：跑去信箱複製驗證碼，回到瀏覽器時頁面重新載入
結果剛剛填的姓名、地址全部不見
三、錯誤訊息，要怎麼說出口？
錯誤訊息的位置，全站有沒有統一？
例子：固定出現在欄位正下方，使用者無需再學習錯誤訊息有沒有跟著「錯的方式」改變？
例子：同一個密碼欄位，少了數字就說「還少 1 個數字」
太短就說「還少 3 個字元」，而不是每次都只有一句「格式錯誤」錯誤訊息是不是一直留著，直到錯誤被修好？
例子：紅字顯示 3 秒就自己消失，使用者還沒看清楚錯在哪，畫面上只剩一個紅框除了紅色，還有沒有圖示和文字？
例子：只把框線變紅，色弱的使用者可能看不出差別
加上一個驚嘆號圖示和一行說明就更棒了錯誤訊息會被螢幕閱讀器讀出來嗎？
例子：視障使用者靠聲音操作，紅字出現了卻沒被讀出來，對他來說等於沒有提示
他只會一直按送出，然後不知道為什麼送不出去能不能直接幫使用者把錯誤改好？
例子：輸入「[email protected]」，下方提示「你是不是要輸入 gmail.com？」
然後按一下就修正
四、比挑錯更重要的事
前面三組，講的都是「錯了怎麼辦？」
但其實最好的即時驗證 UX，是讓使用者減少犯錯
最常填錯的欄位，能不能拆成更小的格子？
例子：簡訊驗證碼拆成 6 個格子，一格一個數字，使用者一眼就知道還差幾碼填對了，有沒有提供一點正向回饋？
例子：使用者名稱沒人用過，旁邊馬上出現綠色勾勾「這個名稱可以用」
不用等到送出才被告知「已被註冊囉」又長又難的欄位，能不能給一顆「驗證」按鈕？
例子：統一編號、護照號碼這類容易打錯的欄位，旁邊放一顆「驗證」
讓使用者自己決定什麼時候檢查系統判斷不了的資料，能不能請使用者確認後繼續？
例子：地址系統查不到，不要直接擋住，改問「找不到這個地址，確定沒有打錯嗎？」
讓他自己選擇要不要繼續 （新社區、新大樓的地址，系統查不到很正常）
這些使用細節加起來，決定了一張表單是在
「檢查使用者，還是在幫助使用者？」
這也正是 UI/UX 設計師的價值體現，做真正好用的產品
而不是僅僅做出來
把驗證規則，做成一張表
上期私房菜說過，返回鍵要回到哪裡，要寫進 Figma 的 comments 裡面
即時驗證也一樣，而且更需要
因為「什麼時候開口、開口說什麼」
設計稿上只畫一個紅框，開發工程師是看不出來的
我的建議是：交付設計稿時，附一張簡單的驗證規則表
每個欄位只要寫清楚三件事
例如
欄位類型：Email
檢查時機：離開欄位時檢查 / 改錯時邊打邊檢查
錯誤文案：「Email 少了 @，請再確認一次」
再舉一個手機號碼的例子
欄位：手機號碼
檢查時機：離開欄位時檢查，少於 10 位就提示還差幾位數字
錯誤文案：「手機號碼還少 4 位數喔」
這些規則寫起來不到十分鐘，但開發工程師們不用再靠猜
如果你正在 Vibe coding，這張表也可以直接丟給 AI 當作表單的規則
比一句「幫我加上驗證」精準太多了
這張表不用一開始就很完美
產品上線之後，看哪一步最常讓人卡住，再回來調整
從去年的表單清單、停用按鈕，到這期的即時驗證
表單設計這條線，算是告一個段落了
好的即時驗證，就像一個會等你把話講完的朋友
該提醒的時候提醒，該安靜的時候安靜
喔對了，過幾天會另外寄一份一分鐘的小問卷
想問問你，現在在 UI/UX 這條路上卡在哪裡
那我們就下次見囉～
Have a great week & Happy Halloween!
Best,
Taony
