測試表單

在先前的單元中,您已瞭解如何建構表單、協助使用者避免重新輸入資料,以及如何驗證表單資料。如何確保表單可供使用? 如果要回答這個問題,您可以測試並分析表單。

請先確認表單已在自己的裝置上正常運作。 不過,使用者可能會使用不同類型的裝置。 如何測試你的表單是否能與其他裝置搭配使用?

首先,請使用電腦測試表單。 然後試著只使用鍵盤。 接下來,請在手機上進行測試。 您已使用各種輸入法 (鍵盤、觸控和滑鼠)、不同螢幕大小、瀏覽器和作業系統測試表單。

還有其他裝置可以進行測試嗎?在所有版本上測試表單。 可測試的不同裝置、瀏覽器、瀏覽器版本和作業系統越多越好!

此外,您也可以透過測試服務在多種不同瀏覽器、不同瀏覽器版本、不同裝置和作業系統上測試表單。BrowserStack 為開放原始碼專案提供免費的測試帳戶,以便在不同的瀏覽器、裝置和作業系統上進行測試。

如何測試你的表單是否適合他人使用?

您的第一份表單已準備就緒。為了確保成效良好,您投入了很多時間,如何確認這份表單可供所有人使用? 首先,您可以請朋友和同事填寫表單。

請坐在旁邊或分享螢幕畫面。這樣就能瞭解使用者與表單的互動情形。看看他們填寫表單。請聽眾大聲說出他們正在做的事,以及是否遇到任何問題。 在學生完成工作後,向他們提問。 問卷內容清楚易懂嗎? 是否無法順利填寫表單? 有任何不清楚的地方嗎? 這些問題能協助您製作更優質的表單。

如何評估表單成效?

您已確認自己的表單可供他人使用。 接下來,請評估表單成效。 我們提供了免費工具,方便您調整這項設定。一起來看看其中幾項做法。

PageSpeed Insights (PSI)

PSI 會評估您的網站成效,並提供改善提示。

試試看:PageSpeed 使用研究室和現場資料提供成效報表。載入速度快的網站是指表單可使用時的第一個指標。 您的網站速度還沒快嗎?PSI 會提供效能改善建議。

請再次查看您先前使用 PSI 測試的網站報告。 可以查看網站體驗核心指標的相關資訊嗎? 如果網站符合 Core Web Vitals 標準,我們就會顯示摘要。 網站體驗核心指標可協助您瞭解使用者瀏覽網頁的情形。

燈塔

Lighthouse 可協助您找出效能、搜尋引擎最佳化 (SEO)、最佳做法,以及無障礙功能問題。

Lighthouse 有多種運用方式。其中一種做法是直接在DevTools中執行,在 Chrome 中開啟表單網址,開啟開發人員工具,切換至 Lighthouse 分頁並執行稽核。

系統會顯示 PSI 的效能指標。此外,Lighthouse 會檢查網站是否符合 SEO、最佳做法和無障礙功能問題。 忘記將標籤連結到表單控制項嗎? Lighthouse 會發出警告,並提供問題修正指南。

找出常見問題的工具

有許多工具可以找出常見問題。其中一種方法是使用表單疑難排解工具擴充功能。系統會警告您缺少 autocomplete 屬性、非標準屬性、缺少或空白標籤等。

您也可以使用 WAVEaxe 等無障礙評估工具。這些工具會通知您缺少標籤、標籤和表單控制項之間的關聯、色彩對比不足,以及其他無障礙功能問題的通知。

您如何監控表單體驗?

監控表單的實際使用者體驗,有助您迅速找出新問題。 現在就來瞭解如何監控表單。

PSI

監控體驗的其中一種方式,就是再次使用 PSI。 您可以使用 PSI API 建構自己的監控工具。如需相關做法,請參閱 PageSpeed Insights API

PSI 會納入 Chrome 使用者體驗報告 (CrUX) 資料集的資料 (如有指定網址)。這樣就能直接在報表中查看欄位資料。

燈塔

Lighthouse 可做為指令列工具、Node 模組Lighthouse CI 工具使用。使用 Lighthouse CI 進行效能監控一文說明如何將 Lighthouse 新增至持續整合系統,例如 GitHub Actions。

此外,還有許多tools可用來評估及監控網站。有些可用網路工具的形式提供,有些可讓您使用指令列執行稽核,某些服務則可提供 API 讓您將這些工具整合到工具中。

如何分析表單

您邀請使用者測試過表單,並瞭解如何評估及監控表單。 如何收集有關使用者的統計資料,以及使用者與表單互動的方式? 你可以使用分析工具。我們來看看其中一個例子,瞭解其運作方式。

數據分析

Google Analytics (分析) (GA) 就是一項工具。設定完成後,系統會針對網站的每個網頁取得 JavaScript 程式碼片段。 此後,您可以瞭解使用者如何使用您的網站。

有多少使用者造訪有表單的網頁? 有多少人填寫表單並移至下一頁? 您可以使用分析工具取得這些問題的答案。

您也可以建立更多進階數據分析報表。 如要追蹤點選「提交」按鈕的使用者人數嗎?您可以定義並整合「事件」進行分析。

提供各式各樣的分析工具。有些則是極簡風,有些則提供許多個人化選項。嘗試各種工具,找出最符合使用者需求的工具。

隨堂測驗

測驗您對測試表單的瞭解程度

什麼是欄位資料?

實際使用者的資料。
在欄位中收集的資料。
來自實際狀況的資料。
在研究室中收集的資料。

RUM 會收集下列來源的指標:

預先選取的使用者
預先定義的瀏覽器
使用者的瀏覽器
實際使用者

資源