En algunas pruebas, tendrás la opción de reportar errores visuales. Los errores visuales están relacionados con las interfaces gráficas de sitios web o aplicaciones, por ejemplo:
Problemas en la estructura del diseño, como textos o elementos desalineados
Problemas de diseño adaptable (Responsive Design), por ejemplo, un elemento que se muestra en un dispositivo móvil pero no en otro
Textos o elementos que se superponen entre sí de manera no intencional
Textos o elementos que quedan cortados
Cualquier problema que se pueda corregir mediante HTML o CSS
Problemas Repetitivos
Cuando ocurre un problema visual de manera repetitiva, solo se debe enviar un reporte aunque cada ocurrencia tenga una URL, enlace, imagen, etc., diferentes. Esto aplica incluso si las ocurrencias están en la misma página o en páginas distintas. Este único reporte de error debe indicar que otras URLs, enlaces, imágenes, etc., también se ven afectados.
No se deben enviar reportes de errores individuales para cada ocurrencia del problema, ya que estos serán rechazados. El cliente solo necesita una referencia para ser informado sobre el problema visual. Investigarán el problema y lo resolverán para todas las ocurrencias.
Ejemplos:
Algunos elementos muestran el mismo problema gráfico, por ejemplo, texto o imágenes más grandes que sus contenedores.
Campos de entrada (input fields) no son lo suficientemente grandes para mostrar su texto predeterminado completo.
Teasers (elementos visuales destacados) se superponen con otros elementos sin querer.
Convertir a error Funcional
Tan pronto como un error visual impide una funcionalidad, debe reportarse como un error funcional, incluso si no es la función en sí la que está defectuosa.
Supongamos que la funcionalidad se puede alcanzar de forma intuitiva y fácil a través de una ruta u opción diferente. En ese caso, de facto, los usuarios no están impedidos de utilizar la funcionalidad, por lo que el problema no debe ser reportado como un error funcional. Permanece como un problema visual.
Documentación de problemas visuales
Los informes de errores visuales deben incluir capturas de pantalla (screenshots). Además, puede ser necesario un screencast si una acción desencadena el problema visual. Para más detalles sobre cómo deben documentarse los informes de errores, consulta nuestro artículo Requisitos para Reporte de Errores.
Web adaptable vs. no adaptable: errores visuales ocultos
Los errores de responsividad pueden confundirte en cuanto a su clasificación entre errores de contenido y errores visuales: problemas creados por el diseño responsivo del sitio web.
Estos problemas son menos perceptibles cuando se navega rápidamente por el sitio web hasta que, de repente, encontramos una página con toda la información necesaria, pero mostrada de forma extraña. Si este es el caso, es posible que lo pasemos por alto y no enviemos un informe de error.
Caso de ejemplo
Al probar el diseño adaptable, puede que veas una página que se muestra perfectamente en un smartphone (por ejemplo, una página de “Géneros populares de TV y películas”), pero al navegar a una página de categoría (como “Comedia”), el contenido se vuelve casi ilegible porque los elementos son demasiado pequeños.
Cómo identificarlo
Observa si el escalado entre páginas es inconsistente
Verifica si el texto se vuelve ilegible en tu tamaño de pantalla
Nota si los elementos de navegación se vuelven demasiado pequeños para tocar
Presta atención a si aparece desplazamiento horizontal en algunas páginas pero no en otras
Prueba gratuita en línea para contenido adaptable
Google Chrome Lighthouse (antes conocido como Google Mobile Friendly Test) puede ser una ayuda valiosa para garantizar que las páginas web estén optimizadas para dispositivos móviles. Esta herramienta puede ayudar a los evaluadores a identificar cualquier problema visual en las páginas web mediante la evaluación de factores de usabilidad móvil, como el tamaño de la fuente, los objetivos táctiles y la configuración de la ventana gráfica (sección SEO). Si encuentra un error visual, esta herramienta podría ayudarle a determinar si la causa principal es la capacidad de respuesta de la página. A diferencia de la anterior Google Mobile-Friendly Test, que se ejecutaba en un sitio web independiente, Google Chrome Lighthouse debe añadirse al navegador Google Chrome y ejecutarse directamente en el sitio web que se desea probar. El proceso de instalación y el tutorial detallado están disponibles aquí.