在之前的模块中,您学习了如何构建表单、帮助用户避免重新输入数据以及如何验证表单数据。现在,您如何确保表单可用?您可以测试和分析您的表单来回答这个问题。
您的表单在其他设备上是否有效?
首先,确认您的表单在您自己的设备上有效。但是,您的用户可能会使用多种类型的设备。您如何测试您的表单是否适用于其他设备?
首先,在桌面设备上测试您的表单。然后尝试仅使用键盘。接下来,在手机上测试它。您现在已经使用不同的输入方法(键盘、触摸和鼠标)、不同的屏幕尺寸、不同的浏览器和不同的操作系统测试了您的表单。
您是否有更多可以测试的设备?在所有设备上测试您的表单。您可以测试的设备、浏览器、浏览器版本和操作系统越多越好!
您还可以使用测试服务在许多不同的浏览器、不同的浏览器版本、不同的设备和不同的操作系统上测试您的表单。 BrowserStack 为开源项目提供免费测试帐户,以在不同的浏览器、设备和操作系统上进行测试。
您如何测试您的表单是否对其他人有效?
您的第一个表单已准备就绪。您花费了大量时间确保它运行良好。您如何确认您的表单对所有人可用?第一步,您可以请您的朋友和同事填写您的表单。
彼此相邻坐着或共享屏幕。这样,您就可以看到他们如何与您的表单互动。观看他们填写表单。请他们大声说出他们在做什么以及是否遇到任何问题。在他们完成任务后,向他们提问。他们应该填写什么内容是否明确?他们在填写表单时遇到任何问题吗?有什么不清楚的地方吗?这些问题可以帮助您构建更好的表单。
您如何衡量表单的性能?
您已确认您的表单对其他人可用。作为下一步,您应该衡量表单的性能。有免费工具可用于此。让我们看看其中的一些。
PageSpeed Insights (PSI)
PSI 衡量您网站的性能,并为您提供有关如何改进它的提示。
试用一下:PageSpeed 使用实验室数据和现场数据提供性能报告。一个快速的网站是您的表单可用的第一个迹象。您的网站还不够快?PSI 向您展示有关如何提高性能的建议。
再次查看您之前使用 PSI 测试的网站的报告。看到有关 Core Web Vitals 的信息了吗?这是您的网站是否符合 Core Web Vitals 标准的摘要。Core Web Vitals 帮助您了解用户如何体验网页。
Lighthouse
Lighthouse 帮助您识别性能、搜索引擎优化 (SEO)、最佳实践和无障碍功能问题。
有多种使用 Lighthouse 的方法。一种选择是直接在 DevTools 中运行它。在 Chrome 中打开包含您的表单的 URL,打开 DevTools,切换到 Lighthouse 标签页,然后运行审核。
将显示来自 PSI 的性能指标。此外,Lighthouse 还会根据 SEO、最佳实践和无障碍功能问题检查您的网站。忘记将标签连接到表单控件?Lighthouse 会警告您,并为您提供纠正问题的指南。
识别常见问题的工具
有很多工具可以识别常见问题。一种方法是使用 Form troubleshooter 扩展程序。它会警告您缺少 autocomplete
属性、非标准属性、缺少或为空的标签等。
您还可以使用无障碍功能评估工具,如 WAVE 或 axe。这些工具会通知您缺少标签、标签和表单控件之间缺少连接、颜色对比度不足以及许多其他无障碍功能问题。
您如何监控表单体验?
监控用户的真实表单体验有助于您快速识别新问题。让我们看看如何监控您的表单。
PSI
监控体验的一种方法是再次使用 PSI。您可以使用 PSI API 构建您自己的监控工具:PageSpeed Insights API 解释了如何执行此操作。
PSI 包含来自 Chrome 用户体验报告 (CrUX) 数据集的数据(如果给定 URL 可用)。这样,您也可以直接在报告中查看现场数据。
Lighthouse
Lighthouse 可以用作命令行工具,也可以用作 Node 模块,或者与 Lighthouse CI 工具 一起使用。使用 Lighthouse CI 进行性能监控 介绍了如何将 Lighthouse 添加到持续集成系统(如 GitHub Actions)。
还有更多 工具 可用于衡量和监控您的网站。有些工具作为 Web 工具提供,有些工具允许您在命令行上运行审核,有些工具提供 API 以将其集成到您的工具中。
如何分析您的表单
您已经与真实用户一起测试了您的表单,并学习了如何衡量和监控它。您如何收集有关您的用户以及他们如何与您的表单互动的统计信息?您可以使用分析工具。让我们看一下一个工具以及它是如何工作的。
分析
您可以使用的工具之一是 Google Analytics (GA)。设置好后,您会获得一个 JavaScript 代码段,您可以将其包含在您网站上的每个页面中。从那时起,您就可以了解人们如何使用您的网站。
有多少人访问了包含您的表单的页面?有多少人填写表单并转到下一页?您可以通过使用分析工具来获得这些问题的答案。
您还可以设置更高级的分析报告。想要跟踪有多少用户点击了提交按钮?您可以定义和集成 事件 来分析此情况。
各种各样的分析工具可供选择。有些是极简主义的,有些为个性化提供了很多选项。试用一系列工具,找到最适合您需求的工具。
检查您的理解情况
测试您对测试表单的知识
什么是现场数据?
RUM 从以下位置收集指标