El 92, 6% de los usuarios afirma que el diseño del sitio y los elementos visuales son los principales factores en la acción de compra, según la última infografía de Voucher Cloud. Pero, ¿qué ocurre con el abandono por problemas de visualización? Póngase en la piel de un internauta durante dos minutos. Estás navegando por una web, buscando una flamante moto para aprovechar el buen tiempo para dar largos paseos, cuando de repente... un gran bug hace que todas las fotos de las motos se superpongan unas a otras, lo que hace ilegible la pantalla. O te has fijado en la bicicleta de tus sueños, pero no encuentras por ningún lado el botón para añadirla a la cesta. Es un obstáculo bastante grande, ¿no? Y ahí radica el interés de realizar regularmente pruebas gráficas de no regresión.
Las pruebas de comparación gráfica, o pruebas visuales (sí, tantas variaciones diferentes de la misma cosa), se utilizan para comprobar que el sitio o la aplicación móvil se muestran correctamente para todos los usuarios. Básicamente, consiste en asegurarse de que cada elemento (botones, textos, fotos, imágenes...) de una misma página aparezca en el lugar correcto, con el tamaño/color/forma adecuados, etc. Se denomina comparación o no regresión porque estas pruebas sirven para comprobar que el sitio o la aplicación móvil se parece a su versión anterior al píxel (pixel perfect) y su cumplimiento legal.
Las pruebas de comparación gráfica se encuentran entre las pruebas que pueden automatizarse fácilmente con las tecnologías actuales. ¿Pero cómo funciona? En el contexto de la automatización de pruebas, consiste en generar, analizar y comparar las capturas de pantalla realizadas durante la ejecución de los escenarios, para detectar si los elementos han cambiado o se han movido a nivel visual. Al establecer un porcentaje de tolerancia, la solución evalúa la similitud entre la imagen de referencia y la imagen de la ejecución actual.
Un simple cambio de color no deseado en un botón, un cambio en el diseño o una diferencia en un tipo de letra es suficiente para que el caso de prueba de comparación gráfica falle. También podemos tomar el ejemplo de un Mr Suricate cliente para el que ya no se mostraban las opiniones de los clientes y la prueba de comparación gráfica detectó este fallo.
Además, las pruebas gráficas de no regresión (NRT ) también pueden utilizarse para comprobar las visualizaciones legales obligatorias en algunos países (sobre todo EE.UU. y países asiáticos) para garantizar su cumplimiento.
¿Y por qué no? Hay que admitir que esa es una respuesta un poco fácil y no es de lo que trata este artículo, ¿verdad? En realidad, hay muchas razones para hacer pruebas visuales.
Para empezar, podríamos invocar la misma razón que para realizar pruebas de no regresión (NRT). Cada vez que se produce una modificación o actualización de la interfaz, es importante comprobar que no ha alterado el diseño o la ergonomía. Y cuando se trata de diseño visual, a menudo hay rediseños o mejoras. Además, con la proliferación de sistemas operativos, navegadores y dispositivos, cada vez es más importante garantizar que la interfaz de usuario se muestre correctamente en todas las posibilidades.
Entonces, ¿por qué no realizar únicamente pruebas funcionales de no regresión (NRT)? Porque generalmente no cubren los aspectos visuales del sitio o de la aplicación móvil. Un sitio puede tener una visualización defectuosa y seguir siendo funcional, salvo si desaparecen los objetos, por lo que un autómata puede muy bien realizar un escenario funcional en una interfaz no conforme. Por tanto, las pruebas gráficas de no regresión pueden colmar estas lagunas y detectar posibles fallos visuales que, de otro modo, pasarían desapercibidos con las pruebas funcionales.
Dicho esto, si hubiera una sola buena razón para realizar pruebas de comparación de gráficos, sería la de garantizar la mejor experiencia de usuario posible. Como decíamos al principio de este artículo (y no está de más repetirlo), el 92,6% de los usuarios dicen que el diseño del sitio y los elementos visuales son los principales factores en la acción de compra. Por otro lado, no dejan pasar ningún fallo visual. Basta una para disuadirlos de comprar o para que abandonen el sitio o la aplicación móvil, lo que supone una pérdida de negocio y de imagen. Y la única forma de evitar estos fallos es realizar pruebas gráficas de no regresión con la mayor frecuencia posible.
¿Algunas últimas palabras? No te preocupes. Al entregar un sitio o una aplicación sin errores visuales, está asegurando un producto superior, y esto no sólo ayuda a construir la credibilidad y la confianza del usuario en su empresa, sino también, a su vez, la imagen de su marca.
¿Ha entendido lo que es la comparación gráfica / la no regresión gráfica / las pruebas visuales? ¿Lo hacías antes? Y si no, ¿le ha convencido este artículo para hacerlo? No dude en compartir su opinión en los comentarios.