Validación visual en el comercio electrónico: ¿Qué se debería validar?

En el artículo anterior, proporcionamos una descripción general de la validación visual en el contexto del comercio electrónico: qué es, por qué es importante y cómo se realiza (herramientas de prueba manuales o automatizadas). En este artículo profundizaremos en lo que se puede y debería validar en un sitio de comercio electrónico para garantizar una experiencia visual sin errores para sus usuarios.

 

Resumen: la validación visual para el comercio electrónico

Ya hemos establecido la importancia de la validación visual para los negocios en línea, y también hablamos sobre los beneficios de usar una herramienta de prueba visual automatizada (fácil, rápida, confiable, flexible, personalizable, uso óptimo de recursos y mucho más).

Pero es posible que se pregunte: "¿Qué debería validar visualmente exactamente en el sitio web?"

Para responder a esta pregunta, vamos a pensar en el trayecto del cliente en un sitio de comercio electrónico moderno. Si bien es probable que los usuarios que regresan inicien sesión y naveguen directamente a las páginas de PLP y PDP, los nuevos clientes siguen un viaje distinto en el que quieren descubrir más sobre una marca y la empresa. Algunos clientes nuevos pueden decidir registrarse antes de comenzar a comprar, otros pueden optar por registrarse durante el proceso de pago. Evidentemente, hay bastantes escenarios por los que pasan los clientes, e incluso antes de que se considere una compra.

 

Centrándose en la experiencia del cliente

Idealmente, la interfaz de usuario de un sitio web de comercio electrónico debe validarse en función de las posibles interacciones que puede realizar un cliente. El trayecto del cliente se puede dividir en tres áreas principales:

• Registro de cuenta
• Navegación
• Checkout y pago

Podría ser útil crear una estrategia de validación visual desde esta perspectiva y luego profundizar para probar la interfaz de usuario en función de acciones más específicas del usuario dentro de estas tres áreas del trayecto del cliente.

Ten en cuenta que las acciones del usuario pueden variar y no solo consisten en clics del ratón. También pueden consistir en acciones de toggle / selección, desplazamientos, y entradas de texto.

Para dar algunos ejemplos sin entrar en todos los tipos de escenarios posibles, aquí están algunos de los aspectos visuales que se pueden validar:

 

Registro de cuenta

A un usuario se le muestra una página de registro donde puede inputar detalles como nombre de usuario, contraseña, fecha de nacimiento, etc. El input se presenta correctamente al usuario y el envío de detalles dirige a la confirmación de un registro exitoso.

Navegación

La página de PDP muestra la información del producto y el precio correctamente, es decir, sin información errónea o faltante, superposición de elementos o problemas de diseño. Si hay opciones de color disponibles, alternar entre distintas opciones mostrará la imagen correcta del producto.

Checkout

El usuario puede identificar y realizar acciones de clic en los botones de llamada a la acción (agregar al carrito, finalizar la compra). Además, puede inputar los detalles de envío y pago, y la confirmación se presenta correctamente al usuario.

Teniendo en cuenta el trayecto completo del cliente, ¿es necesario validar todas o algunas partes de mi sitio de comercio electrónico?

 

Validación visual personalizada para comercio electrónico

En teoría, parecería una buena idea validar cada aspecto visual en un sitio web de comercio electrónico. Esto es posible para la mayoría de las herramientas de prueba visuales.

Sin embargo, debido a la naturaleza dinámica de los sitios web de comercio electrónico, es posible que desee personalizar la validación visual dentro de una página, de modo que ciertos elementos visuales que son de naturaleza fluida se ignoren en el proceso de validación. Por lo tanto, es esencial tener una herramienta de prueba visual que tiene la función de ignorar ciertos elementos de la página y esperar a que aparezcan elementos (como un pop-up de chatbot).

Ahora sabemos lo que puede y debe validarse. Pero, ¿qué tipo de errores visuales veríamos si optamos por no realizar pruebas visuales?

 

Ejemplos de errores visuales detectados a través de validación visual

Repasamos un par de ejemplos para explicar cómo los errores visuales pueden afectar significativamente la experiencia del cliente en un sitio web de comercio electrónico.

El primer ejemplo es un problema con la visualización de tachado de precios en una página PDP.

A algunos les puede parecer una preocupación menor en el tema de diseño y que no afecta directamente la capacidad del cliente para comprar el producto. Sin embargo, este error resulta en:

• Confundir al usuario final sobre cuál es el precio real del producto: $ 72.00 o $ 180.00.
• Una apariencia de un sitio de comercio electrónico inestable, lo que puede provocar una sensación de incertidumbre o desconfianza al usuario final.

 

El segundo ejemplo muestra un problema durante el proceso de pago.

El error en la pantalla de entrada de la dirección se debe a que la entrada del usuario se superpone con el texto por defecto ("Example: 97531"), en lugar de reemplazarlo.

La consecuencia de este error es que interrumpe el proceso de pago. El cliente potencial no puede confirmar visualmente que ha inputado correctamente la dirección de envío, por lo que es probable que no continúe con el resto del checkout.

 

Scope y priorización de la validación visual

Es importante encontrar el equilibrio adecuado en el alcance de sus pruebas visuales. Una buena idea es establecer un alcance lo suficientemente amplio para cubrir todo lo que necesita probar en el trayecto del cliente, pero lo suficientemente estrecho como para no capturar elementos visuales de páginas web que serían problemáticos para incluir en su prueba.

Puede parecer que es necesario priorizar los recursos de prueba debido a que la mayoría de las herramientas de prueba visual tienen costes significativos asociados con su uso. Por tanto, es fundamental elegir una herramienta de validación visual que sea escalable de acuerdo con las necesidades del negocio y, por tanto, rentable sin sacrificar el rendimiento.