Skip to main content

¡Lo prometido es deuda! En un post anterior os explicamos qué es el QA visual y porqué es importante llevarlo a cabo. Además, nos comprometíamos a hace otro post en el que os contaríamos cómo hacer QA visual. Pues bien, ese momento ha llegado. Hoy, siguiendo el hilo del anterior contenido, nuestra UX/UI Designer Maria Arnò nos explica en formato infografía cuál es la manera adecuada para llevar a cabo el QA visual. 

Para llevar a cabo una QA visual correcta debemos seguir cuatro pasos:

  • Abordar diseño y estándares: en este primer paso, debemos revisar que el diseño final es el esperado. En otras palabras, se trataría de verificar que los layouts entregados al equipo de desarrollo se corresponden con el resultado post code. También debemos verificar que se cumple con la normativa WCAG. Finalmente, debemos verificar que es coherente con la imagen de marca general de la compañía.
  • Revisar los componentes: como si fueras un policía (de los buenos) se trata de verificar que no hay irregularidades en el resultado final. Es un trabajo laborioso. Para que te resulte más sencillo, puedes seguir esta guía-chuleta para asegurar que pasas la lupa por todos los apartados:
    1. Estructura
    2. Márgenes
    3. Contraste colores accesibles
    4. Botones: estados, medidas y localización
    5. Estilos tipográficos accesibles
    6. Cards
    7. Carruseles
    8. Pop Ups 
    9. Filtros y resultados
    10. Formularios
    11. Mensajes de feedback y errores
    12. Iconos
    13. Imágenes
    14. Transiciones de pantallas
    15. Animaciones de componentes
  • Pruebas en diferentes dispositivos: ten en cuenta que debe verse y funcionar bien en cualquier dispositivo para el que esté pensado y diseñado. No olvides pasar el filtro de calidad suprema en versión responsive, en tablets, en desktops o pantallas adicionales si corresponde. 

En nuestro camino sobre cómo hacer QA visual, el último paso, pero no por ello menos importante, sería el reporte de errores.

Cómo reportar errores en QA visual

Es muy importante que tengas claro un punto. Cuando haces QA visual, estás haciendo una revisión del resultado final sobre tu trabajo, pero es el trabajo de otra persona la que estás analizando. Por eso es clave que todos los reportes se hagan con comunicación asertiva. Hablar desde un punto de vista constructivo, que haga que el producto final sea excelente sin dañar las relaciones entre compañeros. No es necesario que salten las alarmas a cada error que se encuentre. 

Una buena manera de hacer un reporte es elaborar un listado de todos los errores que encuentres. Para que se entienda mejor, es muy útil usar screenshots; así marcas dónde están las diferencias. Introduce en herramientas como Jira o la que uséis para la gestión de proyectos, tareas específicas para cada error. Así ayudas a que los developers puedan tratar cada incidencia de manera ordenada y asegurarnos de que no queda nada pendiente. Además, una vez ellos lo hayan trabajado pueden devolverte las tareas para que des el último visto bueno del resultado. Llevarse bien con ellos son todo ventajas.

Y para que os resulte más sencillo llevar a cabo vuestras QA visual, os dejamos una infografía para que os sirva de chuleta. 

 

Infografia QA visual