> For the complete documentation index, see [llms.txt](https://jackyu-pf.gitbook.io/sanitas-citasonline-challenge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jackyu-pf.gitbook.io/sanitas-citasonline-challenge/08_analisis-visual.md). # 07\_Análisis visual Para el análisis visual de la [página de Sanitas](https://www.sanitas.es/sanitas/seguros/es/particulares/medicosycentros/cuadro-medico/index.html) *(challenge)* aplico las [metodologías de análisis](https://lawsofux.com/) *(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) ## Análisis 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 t**extos 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. ![](/files/-MNJUeLSKZP1W-2z96qz) 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. ![](/files/-MNJUeLSKZP1W-2z96qz) 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. ![](/files/-MNJW6JGIeYmMcfsn2T8) 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.** ![](/files/-MNJWQjQlaM3835QpZmY) 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**. ![](/files/-MNJWblK2HCVXg6KU1Zq) 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**. ![](/files/-MNJXKKv0ymneOIxi0ZW) 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. ![](/files/-MNJYJvIGnmwVSTiLcOC) 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.** ![](/files/-MNJYGx3LvGtzbc5hdgd) {% file src="/files/-MNJafzRBY0TAZxKTxnN" %} Imagen completa del análisis {% endfile %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://jackyu-pf.gitbook.io/sanitas-citasonline-challenge/08_analisis-visual.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.