{"id":24151,"date":"2023-03-23T11:00:19","date_gmt":"2023-03-23T09:00:19","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=24151"},"modified":"2023-11-28T11:11:54","modified_gmt":"2023-11-28T10:11:54","slug":"jerarquia-visual-5-aspectos-clave-para-mejorar-tus-prototipos","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/jerarquia-visual-5-aspectos-clave-para-mejorar-tus-prototipos\/","title":{"rendered":"Jerarqu\u00eda visual: 5 aspectos clave para mejorar tus prototipos"},"content":{"rendered":"

La forma en la que los dise\u00f1adores de experiencia de usuario jerarquizan el contenido de una p\u00e1gina web repercute directamente en la experiencia final del usuario<\/strong>.\u00a0<\/span>Es importante presentar el contenido de tal modo que el usuario pueda encontrar en la p\u00e1gina lo que desea y a su vez sepa qu\u00e9 contenido es el m\u00e1s relevante y as\u00ed mejorar la experiencia de usuario<\/a>. <\/span>A continuaci\u00f3n, te presentamos cinco aspectos clave a tener en cuenta a la hora de mejorar la jerarqu\u00eda visual de tus prototipos<\/strong>.<\/span><\/p>\n

5 aspectos clave para mejorar la jerarqu\u00eda visual de tus prototipos<\/h2>\n

1. Patrones de lectura<\/h3>\n

Los patrones de lectura<\/strong> est\u00e1n basados en los movimientos que hacen los ojos de una persona cuando leen por primera vez una p\u00e1gina web, una revista, etc. Estos patrones nos ayudan a entender c\u00f3mo los usuarios consumen y procesan la informaci\u00f3n<\/strong>.\u00a0<\/span><\/p>\n

Cuando los usuarios entran en una p\u00e1gina web no leen todo su contenido, sino que escanean la p\u00e1gina con el fin de encontrar r\u00e1pidamente respuesta a lo que est\u00e1n buscando. De hecho, Jakob Nielsen afirma que los usuarios leen menos del 28 % del contenido de una web por visita.<\/span><\/p>\n

Es importante que comprendamos de qu\u00e9 manera las personas procesamos la informaci\u00f3n para as\u00ed distribuir el contenido de tal modo que facilite la lectura al usuario. Los patrones de lectura m\u00e1s habituales son:<\/span><\/p>\n

Patr\u00f3n Z<\/h4>\n

\"jerarqu\u00eda<\/p>\n

Ejemplo de patr\u00f3n Z. Imagen extra\u00edda de Sepiia<\/p>\n

El usuario empieza a escanear la informaci\u00f3n desde la parte superior izquierda hasta la parte superior derecha, posteriormente mira hacia abajo en diagonal y se sit\u00faa de nuevo a la izquierda y vuelve a deslizar su mirada a la derecha. Si unimos los puntos que hace el movimiento ocular del usuario, veremos que es similar al de la letra Z.\u00a0<\/span><\/p>\n

Este patr\u00f3n lo solemos encontrar en p\u00e1ginas que tienen un contenido m\u00e1s visual<\/strong>, las cuales no est\u00e1n centradas en el texto. Podemos usar este patr\u00f3n para aquellas interfaces en las que lo principal es la llamada a la acci\u00f3n<\/strong> y predomina la simplicidad<\/strong>, como, por ejemplo, para p\u00e1ginas de inicio.\u00a0<\/span><\/p>\n

Patr\u00f3n F<\/h4>\n

\"mapas<\/p>\n

Ejemplo de patr\u00f3n F. Mapas de calor de los estudios de eye-tracking de los usuarios de tres sitios web. Imagen extra\u00edda de NNGroup.<\/p>\n

Como se puede ver al interpretar un mapa de calor<\/a>, el usuario comienza a escanear la informaci\u00f3n en una l\u00ednea vertical de izquierda a derecha buscando palabras o puntos claves. Una vez encuentra lo que est\u00e1 buscando su visi\u00f3n se mueve horizontalmente para saber m\u00e1s. Si unimos los puntos que hace el movimiento ocular del usuario, veremos que es similar al de la letra F.\u00a0<\/span><\/p>\n

Este patr\u00f3n lo solemos encontrar en p\u00e1ginas que tienen mucho contenido textual<\/strong>. Esta forma de consumir contenido hace que los usuarios procesen una cantidad de palabras muy reducidas<\/strong> de todo el contenido, por lo que es aconsejable que los t\u00edtulos, subt\u00edtulos, p\u00e1rrafos y vi\u00f1etas empiecen con palabras clave atractivas<\/strong>.\u00a0<\/span><\/p>\n

2. Espacio entre los elementos<\/h3>\n

Quiz\u00e1 uno de los aspectos que m\u00e1s marque la diferencia sea el uso de los espacios entre los diferentes elementos de nuestro prototipo<\/strong>. El espaciado tiene dos funciones principales: por un lado, ayuda a asimilar la informaci\u00f3n de una manera m\u00e1s sencilla y, por otro, permite que el usuario pueda centrarse en los diferentes grupos de informaci\u00f3n.\u00a0<\/span><\/p>\n

Es necesario encontrar un balance entre los elementos y el espaciado a la hora de establecer la jerarqu\u00eda visual, ya que, si no dejamos el espacio suficiente entre los elementos, el usuario tendr\u00e1 la sensaci\u00f3n de que todo el contenido est\u00e1 desordenado. Por el contrario, si los elementos est\u00e1n demasiado espaciados, el usuario no percibir\u00e1 la relaci\u00f3n entre ellos. Entre las ventajas de crear prototipos<\/a> est\u00e1 distinguir cuando los elementos est\u00e1n bien situados las personas pueden distinguir qu\u00e9 elementos est\u00e1n relacionados y cu\u00e1les no.\u00a0<\/span><\/p>\n

\"jerarqu\u00eda<\/p>\n

Ejemplo de espacio entre elementos. Dise\u00f1o de Rezwan Islam en Behance.<\/p>\n

3. Alineaci\u00f3n<\/h3>\n

La alineaci\u00f3n<\/strong> es uno de los recursos m\u00e1s b\u00e1sicos e importantes del dise\u00f1o, puesto que permite a los usuarios ver orden en una p\u00e1gina. Podemos usar la alineaci\u00f3n para organizar o agrupar elementos<\/strong>, aportar equilibrio y dar estructura al dise\u00f1o<\/strong>. Si alineamos bien nuestros elementos, conseguiremos una composici\u00f3n clara y elegante.\u00a0<\/span><\/p>\n

Para conseguir una buena alineaci\u00f3n podemos ayudarnos de una cuadr\u00edcula o grid que nos ayuden a garantizar un alineamiento entre elementos preciso.\u00a0<\/span><\/p>\n

\"jerarqu\u00eda<\/p>\n

Ejemplo de alineaci\u00f3n. Imagen extra\u00edda de El Pa\u00eds.<\/p>\n

4. Contraste<\/h3>\n

El contraste<\/strong> viene definido por la diferencia de intensidad entre el color<\/strong> de dos elementos pr\u00f3ximos o superpuestos. En un prototipo podemos ayudarnos del contraste para mostrar qu\u00e9 elementos tienen mayor relevancia. Por ejemplo, los botones de llamada a la acci\u00f3n o CTAs (Call to action<\/em>) suelen tener mayor contraste con el fondo que los botones secundarios.<\/p>\n

Tambi\u00e9n podemos hacer uso del contraste para separar contenido, ya que, si cambiamos el fondo de parte de una p\u00e1gina, el usuario entender\u00e1 que el contenido es diferente. Un claro ejemplo suele encontrarse en los footers <\/em>de los sitios web.<\/p>\n

\"ejemplo<\/p>\n

Ejemplo de contraste. Imagen extra\u00edda de Nespresso.<\/p>\n

5. Tama\u00f1o<\/h3>\n

Uno de los recursos visuales m\u00e1s importantes a la hora de jerarquizar elementos y transmitir importancia es el tama\u00f1o<\/strong>, puesto que, cuanto m\u00e1s grande sea prototipado un elemento, m\u00e1s destacar\u00e1 y m\u00e1s atenci\u00f3n atraer\u00e1 en comparaci\u00f3n con el resto. Por lo tanto, podemos usar el tama\u00f1o como recurso para conducir la mirada del usuario<\/strong> hacia un determinado lugar de la p\u00e1gina.<\/p>\n

Los elementos de mayor tama\u00f1o deber\u00edan poseer una mayor importancia que los elementos m\u00e1s peque\u00f1os. Esto podemos verlo reflejado en la tipograf\u00eda, ya que, habitualmente, los t\u00edtulos son m\u00e1s grandes que la letra de los p\u00e1rrafos.<\/p>\n

No obstante, no debemos abusar de este recurso, ya que, si aumentamos de tama\u00f1o muchos elementos, haremos que disminuya su importancia.<\/p>\n

\"ejemplo<\/p>\n

Ejemplo de tama\u00f1o. Dise\u00f1o de Oksana Savko en Behance.<\/p>\n

<\/h2>\n

La jerarqu\u00eda visual<\/strong> es un aspecto que se debe tener en consideraci\u00f3n pr\u00e1cticamente desde los primeros bocetos, ya que esas primeras decisiones de dise\u00f1o afectar\u00e1n al resto del prototipado.<\/p>\n

Para situar el contenido en el lugar adecuado es importante realizar una investigaci\u00f3n previa y un an\u00e1lisis posterior. Si necesitas ayuda, en Hiberus Digital<\/a><\/strong> tenemos un \u00e1rea especializada en proyectos UX formada por expertos en usabilidad. \u00bfQuieres saber m\u00e1s? \u00a1Contacta con nosotros y resolveremos tus dudas!<\/p>\n

\n
\n
\n
\n

\u00bfQuieres m\u00e1s informaci\u00f3n sobre nuestros servicios de UX\/UI?<\/p>\n

Contacta con nuestro equipo de User Research, User Experience y User Interface<\/p>\n <\/div>\n

\n \n
\n

<\/p>

    <\/ul><\/div>\n
    \n
    \n<\/fieldset>\n
    \n\t
    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t