测试您的表单

在之前的单元中,您学习了如何构建表单、帮助用户避免重复输入数据,以及如何验证表单数据。 您现在如何确保表单可供使用? 您可以测试和分析表单来回答此问题。

您的表单在其他设备上使用吗?

首先,确认您的表单可在您自己的设备上使用。 不过,您的用户可能会使用多种类型的设备。如何测试您的表单能否在其他设备上正常显示?

首先,在桌面设备上测试您的表单。 然后尝试仅使用键盘。 接下来,在手机上进行测试。 现在,您已经使用不同的输入法(键盘、触控和鼠标)、不同的屏幕尺寸、不同的浏览器和不同的操作系统对表单进行了测试。

您是否有更多可以进行测试的设备?请在所有设备上测试您的表单。 您可以测试的不同设备、浏览器、浏览器版本和操作系统越多,效果就越好!

您还可以使用测试服务在许多不同的浏览器、不同的浏览器版本、不同的设备和不同的操作系统上测试您的表单。BrowserStack 为开源项目提供免费测试帐号,支持在不同的浏览器、设备和操作系统上进行测试。

如何测试您的表单是否可供他人使用?

您的第一个表单已准备就绪。您需要花费大量时间来确保它可正常运行。 如何确认其他人可以使用您的表单? 首先,您可以让朋友和同事填写表单。

彼此相邻或共享屏幕。 这样,您就可以了解他们如何与您的表单互动。观察他们填写表单。 请学生大声说出正在做什么以及是否遇到任何问题。 完成任务后,向他们提问。 他们是否清楚应该填写哪些信息? 他们在填写表单时是否遇到了问题? 有什么不清楚的地方吗? 这些问题可帮助您构建更好的表单。

如何衡量表单的效果?

您已确认,您的表单可供其他人使用。 接下来,您应该衡量表单的效果。 您可以借助一些免费工具实现此目的。我们来看一下其中一些。

PageSpeed Insights (PSI)

PSI 会衡量您网站的表现,并为您提供有关如何改进网站的提示。

试试看:PageSpeed 使用实验室和现场数据提供性能报告。加载速度快的网站是表单可以使用的第一个标志。 您的网站加载速度不够快?PSI 会向您提供有关如何提升效果的建议。

再查看一下您之前通过 PSI 测试的网站的报告。 查看与核心网页指标相关的信息? 如果您的网站符合核心网页指标标准,则此摘要中会显示相关信息。 核心网页指标可帮助您了解用户的网页体验。

灯塔

Lighthouse 可帮助您确定性能、搜索引擎优化 (SEO)、最佳实践和无障碍功能方面的问题。

您可以通过多种方式使用 Lighthouse。一种方式是直接在 DevTools 中运行它。在 Chrome 中打开包含您的表单的网址,打开开发者工具,切换到“Lighthouse”标签页,然后运行审核。

系统会显示 PSI 中的效果指标。 此外,Lighthouse 还会根据 SEO、最佳实践和无障碍功能问题检查您的网站。 忘记将标签关联到表单控件? Lighthouse 会向您发出警告,并为您提供解决该问题的指南。

发现常见问题的工具

您可以使用许多工具来发现常见问题。 一种方法是使用表单问题排查工具扩展程序。它会在出现以下情况时向您发出警告:缺少 autocomplete 属性、非标准属性、缺少标签或标签为空等。

您还可以使用无障碍功能评估工具,如 WAVEaxe。这些工具会通知您有关标签缺失、标签与表单控件之间未关联、色彩对比度不足以及更多无障碍功能的问题。

如何监控表单体验?

监控表单的实际用户体验有助于您快速发现新问题。 我们来看看如何监控表单。

PSI

监控体验的一种方法是再次使用 PSI。您可以使用 PSI API 构建自己的监控工具:PageSpeed Insights API 介绍了如何执行此操作。

PSI 包含 Chrome 用户体验报告 (CrUX) 数据集中的数据(如果适用于给定网址)。这样一来,您就可以直接在报告中查看字段数据。

灯塔

Lighthouse 可用作命令行工具、节点模块Lighthouse CI 工具使用 Lighthouse CI 进行性能监控介绍了如何将 Lighthouse 添加到持续集成系统(如 GitHub Actions)。

还有许多tools可用于衡量和监控您的网站。有的可作为 Web 工具使用,有的可让您在命令行中运行审核,有的则提供 API 以将它们集成到您的工具中。

如何分析表单

您邀请了真实用户来测试表单,并学习了如何衡量和监控表单。 如何收集关于用户及其如何与表单互动的统计信息? 您可以使用分析工具。下面我们就来了解一下它的运作方式。

分析

您可以使用 Google Analytics(分析) (GA) 这一工具。设置完成后,您会获得一段 JavaScript 代码段,用于添加到网站的每个网页中。 从现在开始,您可以了解用户如何使用您的网站。

有多少人访问了包含您表单的网页? 有多少人填写表单并进入了下一页? 您可以使用分析工具来获得这些问题的答案。

您还可以设置更高级的分析报告。 想要跟踪有多少用户点击了 Submit 按钮? 您可以定义和集成事件来分析这些数据。

我们提供了多种分析工具。 有些设计简约,有些则提供许多个性化选项。试用各种工具,找到最符合您需求的工具。

检查您的掌握程度

测试您对测试表单的掌握情况

什么是现场数据?

在现场收集的数据。
再试一次!
来自真实用户的数据。
🎉
来自真实情况的数据。
🎉
在实验室中收集的数据。
再试一次!

RUM 会从以下来源收集指标:

真实用户
🎉
预先选择的用户
重试
预定义的浏览器
重试
最终用户的浏览器
🎉

资源