Orienteed logo verde y blanco
Ir al blog

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

por Leon Lau, 8/10/2021, 12:00:00 AM

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.

UI Error - Content not loaded Broken web formatting Page loading error Unexpected session expiry

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.

 

¿Querer aprender más?

Validación visual con Selenium por Rúnar Sverrisson

Charla sobre Validación Visual en el eShow 2021 de Barcelona

Entradas relacionadas

Suscríbete a nuestra newsletter

¿Quieres saber más sobre comercio electrónico, tendencias, artículos y eventos de la industria eCommerce? ¡Suscríbete ahora a nuestro boletín mensual!

Utilizamos cookies para mejorar su experiencia y nuestros servicios, analizando la navegación en nuestro sitio web. Si continua navegando, consideramos que acepta su uso. Puede obtener más información pulsando aquí:
Política de cookies
Logotipo de Orienteed

Política de Cookies

Una cookie es un fichero que se descarga en su ordenador al acceder a determinadas páginas web. Las cookies permiten a las páginas web, entre otras cosas, almacenar y recuperar información sobre los hábitos de navegación de un usuario o de su equipo y, dependiendo de la información que contengan y de la forma en que utilice su equipo, pueden utilizarse para reconocer al usuario.
Son aquellas cookies imprescindibles para prestar el servicio solicitado, recordar las preferencias de configuración, así como para fines de seguridad y prevención de fraude. La página web no puede funcionar adecuadamente sin estas cookies.
Son aquellas cookies que nos ayudan a analizar el uso que nuestros usuarios hacen de la web y el número de visitantes. Permiten obtener información del número de visitantes, del origen de los mismos, del navegador que utilizan, del tiempo que permanecen en cada página, cuantifican el impacto de los anuncios, etc.

Cómo denegar o revocar el consentimiento de cookies

Las cookies pueden bloquearse o eliminarse mediante la configuración del navegador. En los siguientes enlaces se detalla cómo hacerlo en cada uno de los navegadores más utilizados.