事前作業

在收集網站稽核的成效指標之前,您可以先進行幾項檢查,找出容易修正的問題和重點領域。

有效性檢查:架構和程式碼

解決技術債!

請盡可能在評估效能之前修正簡單的錯誤,並移除不必要的素材資源和程式碼,但請務必記錄問題和修正前後的情況。這些改善項目仍可納入稽核工作。

網站架構和素材資源
是否有任何內容可以輕鬆從程式碼存放區和網站中移除,例如未使用的舊版網頁、內容或其他素材資源?檢查是否有孤立網頁、多餘範本、未使用的圖片,以及未使用的程式碼和程式庫。

執行階段錯誤
檢查瀏覽器控制台回報的錯誤。應該不會有任何問題 :)。

Linting
HTML、CSS 或 JavaScript 程式碼是否有錯誤?將 Lint 檢查功能整合至工作流程,有助於維護程式碼品質,避免發生迴歸問題。建議您使用 HTMLHint、StyleLint 和 ESLint,這些工具可做為程式碼編輯器外掛程式,或在工作流程程序和持續整合工具 (例如 Travis) 中透過指令列執行。

無效連結和圖片
有許多工具可在建構和執行階段測試無效連結,包括 Chrome 擴充功能 (這個就不錯) 和 Node 工具,例如 Broken Link Checker。

外掛程式
Flash 和 Silverlight 等外掛程式可能會有安全風險,因此已淘汰,且無法在行動裝置上運作。使用 Lighthouse 檢查外掛程式。

使用各種裝置和情境進行測試

最有效的方法是讓真人實際試用網站,並使用多種瀏覽器和不同的連線能力環境。

其中有些檢查相對主觀,但可以找出影響感知效能的問題。舉例來說,無效連結會浪費時間,讓人覺得「沒有回應」。難以辨識的文字會降低閱讀速度。

跨裝置測試
嘗試不同的可視區域和視窗大小。請至少使用一部行動裝置和一部電腦裝置。如果可以,請在低規格、小螢幕的行動裝置上測試網站。文字是否清晰易讀?是否有任何圖片損毀?可以放大嗎?觸控目標是否夠大?Is it slow? 是否有任何功能沒有回應?將結果截圖或錄影。

跨平台測試
您指定哪些平台?您必須在使用者目前和未來使用的瀏覽器和作業系統上進行測試。

連線能力
在多種目標網路類型上進行測試:已連線、Wi-Fi 和行動網路。您可以使用瀏覽器工具模擬各種網路狀況。

裝置
請務必在使用者使用的裝置上測試網站。下圖顯示兩部不同手機上的同一個頁面。

在高規格和低規格手機上執行的網誌文章頁面

在大螢幕上,文字雖然小,但仍可閱讀。在較小的螢幕上,瀏覽器會正確顯示版面配置,但文字難以閱讀,即使放大也一樣。螢幕模糊且有「色偏」,白色看起來不像白色,導致內容不易辨識。

這類簡單的發現,可能比晦澀難懂的成效資料更重要!

試用 UI 和 UX

無障礙、可用性和可讀性
為確保所有人都能存取網站內容和功能,您需要瞭解使用者的多樣性。Lighthouse 和其他工具會測試特定的無障礙問題,但實際測試的效果最好。嘗試在各種情境下閱讀、瀏覽和輸入資料,例如在戶外陽光下或在火車上。邀請親友和同事試用網站,嘗試透過螢幕閱讀器瀏覽內容,例如 Mac 上的 VoiceOver 或 Windows 上的 NVDA。

如要進一步瞭解如何實作及審查無障礙功能,請參閱 Udacity 的無障礙功能課程和網站基礎知識文章「如何進行無障礙功能審查」。

請保留無障礙功能稽核記錄。您可能可以進行簡單的改善,讓所有使用者都能受惠。

基本的 UI 和 UX 問題
互動無法正常運作、較小的視窗和可視區域中元素溢位、輕觸目標過小、內容無法閱讀、捲動不順暢…請在網站上開啟多個頁面,試用導覽和所有核心功能。保留記錄。

圖片、音訊和影片
測試內容是否溢出、顯示比例是否正確、裁剪是否不當,以及是否有品質問題。

主觀 UI 測試
這些測試不一定都相關,但只要進行簡單變更,就能讓重構更輕鬆:

  • 開啟網站時,是否能立即清楚瞭解「我可以在這裡做什麼?」
  • 你是否會想瀏覽內容並點選連結?
  • 是否有視覺階層或路徑,還是所有內容的視覺權重都相同?
  • 版面配置是否雜亂?
  • 字型是否過多?
  • 是否有圖片或其他內容可以移除?
  • 內容設計與介面設計同樣重要。網站上的文字和圖片內容是否適合在行動裝置和電腦上顯示?Can anything be eliminated? 針對行動裝置撰寫內容。