Prueba tus formularios

En módulos anteriores, aprendiste a compilar un formulario, ayudar a los usuarios a evitar tener que volver a ingresar datos y validar sus datos. ¿Cómo puedes asegurarte ahora de que el formulario se puede usar? Puedes probar y analizar tu formulario para responder esta pregunta.

Para comenzar, debes confirmar que el formulario funciona en tu propio dispositivo. Sin embargo, existen muchos tipos de dispositivos que los usuarios pueden utilizar. ¿Cómo puedes probar si tu formulario funciona con otros dispositivos?

Primero, prueba el formulario en un dispositivo de escritorio. Luego, intenta usar solo el teclado. A continuación, pruébalo en un teléfono. Probaste tu formulario con diferentes métodos de entrada (teclado, panel táctil y mouse), tamaños de pantalla, navegadores y sistemas operativos diferentes.

¿Tienes más dispositivos que puedas probar? Prueba tu formulario en todos ellos. Cuantos más dispositivos, navegadores, versiones de navegador y sistemas operativos uses, mejor.

También puedes usar un servicio de prueba para probar tu formulario en muchos navegadores diferentes, versiones de navegador, dispositivos y sistemas operativos diferentes. BrowserStack ofrece cuentas de prueba gratuitas para proyectos de código abierto que permiten realizar pruebas en diferentes navegadores, dispositivos y sistemas operativos.

¿Cómo puedes probar si tu formulario funciona para otras personas?

Tu primer formulario está listo. Pasas mucho tiempo asegurándote de que funcione bien. ¿Cómo puedes confirmar que tu formulario se puede usar para todos los usuarios? Como primer paso, puedes pedirles a tus amigos y colegas que completen tu formulario.

Siéntate uno al lado del otro o comparte una pantalla. De esta manera, podrás ver cómo interactúan con tu formulario. Mira cómo completan el formulario. Pídeles que digan en voz alta lo que están haciendo y si tienen algún problema. Una vez que complete la tarea, hazle preguntas. ¿Estaba claro lo que debían completar? ¿Tuvieron algún problema para completar el formulario? ¿Algo no quedó claro? Estas preguntas te ayudan a crear formularios aún mejores.

¿Cómo puedes medir el rendimiento de tu formulario?

Confirmaste que otras personas pueden usar tu formulario. Como siguiente paso, debes medir el rendimiento de tu formulario. Hay herramientas gratuitas disponibles para hacerlo. Veamos algunos de ellos.

PageSpeed Insights (PSI)

PSI mide el rendimiento de tu sitio y te brinda sugerencias para mejorarlo.

Pruébalo: PageSpeed proporciona un informe de rendimiento con datos de lab y de campo. Un sitio rápido es el primer indicio de que tu formulario se puede usar. ¿Tu sitio aún no es rápido? PSI te muestra recomendaciones para mejorar el rendimiento.

Vuelve a revisar el informe del sitio que probaste antes con PSI. ¿Deseas consultar la información sobre las Métricas web esenciales? Este es un resumen si tu sitio cumple con los criterios de las Métricas web esenciales. Las Métricas web esenciales te ayudan a comprender la experiencia de los usuarios con una página web.

Faro

Lighthouse te ayuda a identificar problemas de rendimiento, optimización para motores de búsqueda (SEO), prácticas recomendadas y accesibilidad.

Existen diferentes formas de usar Lighthouse. Una opción es ejecutarlo directamente en DevTools. Abre la URL con tu formulario en Chrome, abre Herramientas para desarrolladores, cambia a la pestaña Lighthouse y ejecuta la auditoría.

Se muestran las métricas de rendimiento de PSI. Además, Lighthouse verifica si tu sitio tiene problemas de SEO, prácticas recomendadas y de accesibilidad. ¿Olvidaste conectar una etiqueta a un control de formulario? Lighthouse te advierte y te proporciona una guía para corregir el problema.

Herramientas para identificar problemas habituales

Existen muchas herramientas para identificar problemas comunes. Una forma es usar la extensión del solucionador de problemas de formularios. Advierte sobre atributos autocomplete faltantes, atributos no estándares, etiquetas faltantes o vacías, y mucho más.

También puedes usar una herramienta de evaluación de accesibilidad, como WAVE o axe. Estas herramientas te notifican sobre etiquetas faltantes, conexiones faltantes entre etiquetas y controles de formularios, contrastes de color insuficientes y muchos otros problemas de accesibilidad.

¿Cómo puedes supervisar la experiencia en un formulario?

Si supervisa la experiencia real de los usuarios en sus formularios, podrá identificar nuevos problemas rápidamente. Veamos cómo puedes supervisar tu formulario.

PSI

Una forma de supervisar la experiencia es volver a usar PSI. Puedes usar la API de PSI para compilar tu propia herramienta de supervisión: la API de PageSpeed Insights explica cómo hacerlo.

PSI incluye datos del conjunto de datos del Informe sobre la experiencia del usuario en Chrome (CrUX), si está disponible para la URL determinada. De esta manera, también puedes ver datos de campo directamente en el informe.

Faro

Lighthouse se puede usar como una herramienta de línea de comandos, como un módulo de Node o con las herramientas de CI de Lighthouse. En la supervisión del rendimiento con la CI de Lighthouse, se explica cómo agregar Lighthouse a un sistema de integración continua, como GitHub Actions.

Hay muchas más tools disponibles para medir y supervisar tu sitio. Algunas están disponibles como herramientas web, otras te permiten ejecutar la auditoría en la línea de comandos y otras ofrecen una API para integrarlas a tus herramientas.

Cómo analizar tu formulario

Probaste tu formulario con usuarios reales y aprendiste a medirlo y supervisarlo. ¿Cómo puedes recopilar estadísticas sobre tus usuarios y cómo interactúan con tu formulario? Puedes usar una herramienta de estadísticas. Veamos uno y veamos cómo funciona.

Análisis

Una herramienta que puedes usar es Google Analytics (DG). Después de configurarlo, obtendrás un fragmento de JavaScript que incluirás en cada página de tu sitio. A partir de este momento, puedes averiguar cómo utilizan los usuarios tu sitio.

¿Cuántas personas visitan la página que incluye el formulario? ¿Cuántos completan el formulario y pasan a la página siguiente? Puedes obtener las respuestas a estas preguntas mediante el uso de herramientas de estadísticas.

También puedes configurar informes de estadísticas más avanzados. ¿Deseas realizar un seguimiento de la cantidad de usuarios que hacen clic en el botón Enviar? Para analizar esto, puedes integrar y definir eventos.

Hay una amplia variedad de herramientas de estadísticas disponibles. Algunos son minimalistas, otros ofrecen muchas opciones de individualización. Prueba una variedad de herramientas para encontrar la mejor según tus necesidades.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre los formularios de prueba

¿Qué son los datos de campo?

Datos recopilados en un lab.
Datos provenientes de condiciones reales.
Datos recopilados en un campo.
Datos de usuarios reales.

RUM recopila métricas de:

usuarios reales
navegadores de los usuarios finales
navegadores predefinidos
usuarios preseleccionados

Recursos