07_Análisis visual
Última actualización
¿Te fue útil?
Última actualización
¿Te fue útil?
Para el análisis visual de la página de Sanitas (challenge) aplico las metodologías de análisis (Heurísitcas, leyes de la Gestalt, etc). De primeras, se detectan problemas en las secciones y entre ellas de ritmo vertical. A continuación explico por puntos numerados y de color que indican su gravedad:
Leve (azul), grave (ambar), crítico (rojo)
1.Alineación. La alineación y el espaciado vertical que existe entre la navigation bar y el logotipo. Sanitas al tener un logotipo cuadrado, sus aristas claramente marcan un eje, si se alinea con la navigation bar, generará más armonía en el encabezado.
2. Breadcrum-tail (migas de pan). Según la ley del leguaje familiar del usuario de Jakob Nielsen, los breadcrum deberían llevar un underline con el fin de mejorar la affordance de los textos que son hipervinculos.
3. Proximidad y similitud. Según las leyes de la Gestalt, los objetos próximos y parecidos se perciben agrupados en bloque. En este caso, los tres bloques se perciben como uno siendo funcionalidades distintas.
4. Peso visual y diseño. El botón “Calcula tu seguro” tiene intención de ser un CTA. En cambio no cobra peso visual hasta que se activa el hover. Podría mejorar si se aplicara a la inversa. El icono que se añade genera carga visual innecesaria, el botón ya cumple la función de click.
5. Consistencia. Estos dos bloques de llamada, son agrupables, en cambio se perciben como 3 elementos diferentes. Hay una falta de consistencia entre elementos.
6. Opciones y priorización. En las pestañas del cuadro médico, se dan varias opciones similares entre ellas que pueden generar carga cognitiva y se podría reducir. A su vez se agrupan como si pedir cita y solicitar una urgencia médica de una misma jerarquía, quizá sería más conveniente distinguirlas.
7. Lenguaje. Sanitas emplea un lenguaje de estilo instructivo con un tono corporativo (Introduce..., escribe..., selecciona,...) y en cambio aquí ha empleado un tono neutro (activar...)
8. Lenguaje. En los campos para rellenar la localización, la especialidad y el nombre del médico o centro no se indica cuales son campos obligatorios. El usuario podrá sentirse más perdido a la hora de rellenarlo.
9. Alineación e iconografía. Los checkbox no siguen la guía vertical de la pagina. Los iconos tienen demasiado peso visual y según la ley de la Gestalt, la percepción los agrupa con los checkbox y no con el texto. Además existen también hay problemas de alineación horizontal.
10. Ruido visual. La barra inferior del cuadro, se emplea como un historial de búsqueda pero si no se ha buscado nada previamente permanece ahí, sin ninguna razón.
11. Consistencia y percepción. En esta sección hay un problema grave de consistencia. Al incluir un bloque informativo demasiado llamativo, el propio bloque ha cobrado identidad. Asimismo al ser introducido en mitad de una sección, se perciben como 3 bloques diferentes (título, bloque informativo, los drop-downs). Hay que sumar también el problema de ritmo vertical en esta sección.
12. Padding. El marco del texto es demasiado amplio y no deja espacio entre los diferentes elementos. El texto es demasiado largo. Mejoraría con menos texto y más interlineado.
13. Similitud y apartados. Los diferentes apartados no se diferencian entre sí mas que leyendo el place holder de los campos, que tiene muy poco contraste con el fondo.
14. Consistencia. El botón no sigue las guías verticales y tampoco hay una consistencia de botones. Algunos botones tienen border radius 50 (botón buscar centros, calcula tu seguro) y otros botones tienes border radius 10 (botón más información, activar localización). Falta de consistencia en botones de toda la página.
15. Espaciado e iconografía. La iconografía empleada en los place holders no tienen un margen a su alrededor, se juntan demasiado con el texto. Además opino que los iconos son demasiado complejos para la escala que tienen, optaría por iconos más sencillos y claros.
16. Iconografía y peso visual. El icono de alerta escogido tiene demasiado peso visual. Aumenta aun más con el color semántico rojo.
17. Padding y escala. El frame de la notificación de advertencia tiene demasiado poco padding, mejoraría mucho visualmente aumentando el margen o reduciendo los elementos internos.
18. Ritmo vertical. Los headings de la página no siguen un ritmo vertical, están ligeramente elevados.
19. Consistencia. El cuadro médico mejoraría su consistencia si se aplicaran los border radius en las 4 esquinas. La percepción completa del cuadro incluye las pestañas por lo que si las pestañas tienen border radius, el cuadro también debería.
20. Ruido visual. Las secciones pueden tener un fondo marcando un ritmo pero cuando no es necesario, por la ley de proximidad y similitud de elementos (cards), es mejor eliminar el fondo y eliminar ruido visual.
21. Sección. Estas secciones, son para facilitar la búsquedad por lo que si fuera necesario ponerla, será mejor bajo el cuadro médico de búsqueda. También, facilitaría más la lectura rápida si el texto fuera más corto.
