UI/UX 審查工作流:從任務到修正
「這頁看起來怪怪的」無法直接交給工程師。這個工作流把主觀感受轉成可重跑的證據。
Step 1:選一條任務
例如「新使用者在手機上完成退款申請」。準備一組代表資料、桌面與手機 viewport,並記錄目前版本的截圖和操作步驟。
Step 2:先測任務能否完成
檢查入口是否找得到、文案是否理解、表單是否能填、錯誤是否能恢復、完成後是否知道結果。這一層比調整陰影和圓角優先。
Step 3:用鍵盤與觸控重跑
純鍵盤檢查 Tab 順序、focus、Escape 和表單送出;行動裝置檢查觸控目標、固定列、橫向溢位與軟鍵盤遮蔽。
Step 4:檢查所有狀態
逐一觸發 loading、empty、error、disabled、hover、focus、success 和資料過期。狀態色不是唯一訊號,錯誤應同時有文字、位置和讀屏器語意。
Step 5:建立問題卡
### P1:錯誤欄位只能靠紅色辨識
- 證據:色覺模擬與鍵盤操作時無法定位欄位
- 影響:使用者不知道哪裡需要修正
- 修正:加入文字訊息,以 aria-describedby 關聯
- 驗收:視覺、鍵盤與讀屏器都能取得相同錯誤
Step 6:重跑並記錄
P0 是阻止任務或造成資料風險;P1 是嚴重阻礙;P2 是效率或一致性問題;P3 才是純視覺偏好。修正後使用相同任務、資料和 viewport 重跑,保留前後結果。
可交給 AI 的提示詞
請只根據以下任務和截圖提出問題:使用者在手機完成退款申請。
每個問題必須包含證據、影響、優先級、最小修正與驗收條件。
不要提出「更高級」或「更現代」這類無法驗證的建議。