Validación Visual en e-commerce: Introducción

por Leon Lau, August 10, 2021

La validación visual es una tendencia emergente en la innovación del comercio electrónico que ayuda a las empresas a ofrecer una experiencia visual consistente y óptima a sus clientes. Las herramientas de validación visual automatizadas, como Valido, le permiten monitorizar fácilmente la interfaz de usuario (UI), recibir notificaciones cuando aparezcan cambios y tomar medidas inmediatas basadas en análisis en tiempo real.

¿Qué es la validación visual?

La validación visual, simplemente, es una acción para verificar que todo se vea correcto.

Podemos ampliar la definición para mayor claridad:

Asegurándonos de que todo lo que queremos en un sitio web esté realmente allí
Asegurándonos de que todo lo que no queremos que esté allí no esté
Asegurarse de que el “look and feel” del sitio web sea el esperado

En el contexto de e-commerce, la validación visual es una actividad del control de calidad (QA) que se realiza para garantizar que la UI aparezca según lo previsto para el cliente, ya sea que esté navegando por una página de producto o completando los pasos de pago.

¿Por qué es importante la validación visual?

En esta era de comercio digital, la experiencia del usuario (UX) de un sitio web es esencial en el compromiso con el cliente, sobre todo su aspecto visual.

Las visuales ayudan a generar confianza y credibilidad. Refuerzan la imagen de una marca. Dirigen a los usuarios hacia acciones que son deseables para obtener resultados comerciales positivos. Evaluamos un producto o empresa al ver su sitio web o página de producto.

Entonces, ¿cómo puede la validación visual beneficiar al comercio electrónico?

Una parte integral de la ejecución de un sitio de comercio electrónico es realizar el mantenimiento y las actualizaciones de la plataforma. En el mundo agile del desarrollo incremental y los ciclos de lanzamientos frecuentes, pueden producirse efectos no deseados en la UI.

Como puede ver en los ejemplos anteriores, la oportunidad de venta se puede perder de muchas formas diferentes relacionadas con los errores de la interfaz de usuario.

Se puede desalentar al usuario de tomar medidas debido a que no se muestra cierta información del producto.
El usuario no puede realizar ninguna acción debido a un botón de llamada a la acción (CTA) roto o un error de carga de la página.
El usuario no puede completar el proceso de pago debido a la expiración inesperada de la sesión, lo que causa frustración y abandono del carrito.

Las pruebas visuales reducen la aparición de errores en la UI que afectan negativamente las ventas y la experiencia del cliente online.

¿Cómo se realiza la validación visual?

Antes de las herramientas de prueba visual automatizadas, los propios desarrolladores web solían realizar la validación visual de forma manual. Recientemente, los equipos de QA han comenzado a incorporar pruebas de regresión visual en sus planes de prueba, pero sólo en un grado limitado.

Con el método manual, los evaluadores interactúan manualmente en cada página de un sitio de comercio electrónico e inspeccionan en busca de errores visuales. Evidentemente, este es un proceso que requiere mucho tiempo, no solo por la cantidad de elementos visuales que deben escanearse, sino también por los diferentes sistemas operativos, dimensiones del navegador, orientaciones de pantalla y configuraciones de dispositivos involucrados. Las pruebas manuales plantean regularmente una preocupación de prioridad y recursos para muchas empresas.

Sin embargo, ahora estamos viendo un aumento en el uso de herramientas automatizadas, que ofrecen velocidad, repetibilidad y confiabilidad en la ejecución en una amplia gama de escenarios de prueba.

¿Qué estamos validando realmente?

¡Varias cosas!

Primero, establecemos la definición de que un elemento visual puede referirse a una imagen, texto, video, espacio visible, etc., básicamente cualquier cosa que esté destinada a ser presentada al usuario.

Las pruebas visuales o validación visual consta de:

Comprobar que los elementos visuales que pertenecen a una página son visibles y los elementos visuales que no pertenecen (ejemplo: mensajes de error técnico) no son visibles.
Verificar que los elementos visuales en una página web aparecen correctamente, en términos de su tamaño, color, brillo, contraste, densidad, textura, peso, forma y posición en relación con la ventana gráfica del usuario.
Asegurarse de que los elementos visuales no se superpongan entre sí, haciendo que estén ocultos o poco visibles.

Es importante tener en cuenta que una prueba visual es distinta de una prueba funcional. Por ejemplo, es posible que una empresa no desee que aparezca un mensaje de falta de existencias para sus productos aunque el cálculo de existencias sea correcto desde un punto de vista técnico y funcional.

Las herramientas de prueba visual escanean en busca de cambios visuales e informan al revisor si los cambios fueron intencionales o errores, asegurando que los usuarios no vean errores.

Esto nos lleva al punto de las características clave de una aplicación de validación visual:

La capacidad de ejecutar una variedad de pruebas de forma automática y en paralelo, para monitorizar y reportar los resultados en tiempo real, y para proporcionar análisis y acciones recomendadas al revisor de la prueba.

Conclusión

En los últimos años, las empresas de comercio electrónico han comenzado a dar más importancia a la validación visual. Los equipos de control de calidad se han dado cuenta de que las herramientas de pruebas funcionales automatizadas no son adecuadas para identificar errores visuales. Sin embargo, el método manual de validación visual es evidentemente un proceso tedioso y que requiere muchos recursos, sin garantías de una cobertura de prueba completa.

Por lo tanto, las pruebas visuales automatizadas basadas en la nube específicas para el comercio electrónico están ganando popularidad y es probable que se establezcan como una práctica de QA esencial en los próximos años. En artículos futuros investigamos en profundidad la aplicación de la validación visual en escenarios comerciales prácticos, y sus desafíos.