Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Comprensión de la jerarquía visual en diseño web

by
Length:LongLanguages:
This post is part of a series called Web Design Theory.
Designing for the New Fold: Web Design Post Monitorism

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

La Jerarquía Visual es uno de los principios más importantes detrás del diseño web efectivo. A través de este artículo examinaremos por qué desarrollar una jerarquía visual es crucial en el diseño y desarrollo web, también veremos la teoría que está detrás de cada unos de estos principios y como puedes usar algunos ejercicios muy básicos en tus propios diseños para poner en práctica estos principios.

Diseño = Comnicación

En esencia, diseño se trata, sobre todo, acerca de la comunicación visual, es decir; para ser un diseñador efectivo, tienes que ser capaz de comunicar con claridad tus ideas a los visitantes de tu sitio o, de lo contrario, perderás su atención. Por otra parte, las personas son volubles, ¿eso qué significa? Bueno, ¡qué cambian de parecer facilmente o se dejan influenciar con facilidad! Por ejemplo, sí es das un inmenso bloque de información, las posibilidades son que 99 de cada 100 personas ¡no se molestarán, ni siquiera, en leerlo! Pero, ¿por qué ocurre esto? Bueno, en primer lugar, eso es lo que queremos dejar claro cuando decimos que: “las personas son volubles”. Esto sucede porque la mayoría de las personas son, inherentemente: ¡pensadores visuales, no procesadores de texto!

Para averiguar por qué es verdad que las personas son: pensadores visuales y no procesadores de texto, es muy importante entender un poquito, por lo menos, sobre la manera de cómo todas las personas vemos las cosas. En primer lugar, las personas no son lo que llamaríamos; “visualizadores de iguales oportunidades”. En vez de tomar la información visual y procesarla de manera uniforme, las personas organizan lo que ven en términos de “relaciones visuales”. Y eso, ¿qué quiere decir? Qué a simple vista las personas no se detienen a ver los detalles, de hecho, asocian lo que ven a una figura completamente formada, no por partes, y no se detienen a analizar las partes de la figura, eso lo harán después. Y es así como “pensadores visuales” empieza a tener sentido, ¿lo ves?, sino, ya verás como todo va empezando a mejorar, gracias a Dios.

Para comprender esto, primeramente, empecemos por echar un vistazo a la siguiente imagen de dos círculos, aparentemente, sin nada fuera de lo común:

visual hierarchy in web design

Lo más probable es que no hayas visto simplemente “dos círculos”, para nada. En lugar de eso, viste: “un círculo negro grande y un círculo rojo pequeño”.

Aunque es obvio, la razón es muy simple: cuando el ejemplo de “las relaciones visuales” se presentan con algo ten sencillo como dos círculos, las personas no verán sencillamente dos círculos. En lugar de eso, la mayoría de las personas, subconscientemente por supueso, buscarán una manera para diferenciar ambos círculos. De hecho, un círculo podría ser más grande y el otro más pequeño, uno de los círculos podría estar coloreado y el otro no, o cualquier otro diferencia. Y son estas “diferencias” las que nos permiten distinguir entre cualquier objeto y darles un significado único, es decir; personalizarlos con un propósito.

Ahora veamos otro ejemplo, solamente que un poco más complejo:

visual hierarchy in web design

Al añadirle un poco más de complejidad a la ilustración, podemos confirmar, nuevamente, que se hace más agudo nuestro deseo de “clasificar” los objetos en términos de relaciones visuales. Son los semejanzas y las diferencias las que llegan a convertir el marco o la perspectiva a través de la cual vemos las cosas. Eso… ¿Qué significar? Qué diferencias en el tamaño de un objeto, por ejemplo, “sugieren” que un objeto está más cerca de nosotros que los otros objetos, de hecho, hasta se verá más grande y ese mismo objeto, por consiguiente, será más dominante que los demás objetos. De igual forma, variaciones en el color, por ejemplo, podrían sugerir que un objeto tiene una personalidad única que lo separa del resto de los objetos a su alrededor. Muchísima información puede transmitirse en una sola imagen con tan solo usar alguna herramientas muy rudimentarias.

…Comprender que las personas ven nuestros diseños en términos de relaciones visuales es crucial para convertirse en un diseñador mucho más efectivo.

Pero volvamos al ejemplo del diseño web, porqué, después de todo, diseño web se trata acerca de la comunicación visual de la información. Por otra parte, comprender que las personas ven nuestros diseños en términos de relaciones es crucial para convertirse en un diseñador mucho más efectivo. Hasta puede parecer obvio pensar que: con tan sólo llevar la información hast el usuario ya es suficiente. No obstante, como diseñadores web, nuestra principal tarea es convertir esa información sin revisar, ese “bloque de información” en trocitos deliciosos de información visual relevante, que son atractivos para nuestro ojo y, más importante aún, información efectiva que comunica el mensaje que está detrás de cada página web.

El principio de la Jerarquía

Existen cientos de explicaciones de por qué las personas ven en términos de relaciones visuales, de hecho, si tuvieras que buscar en el pasado, antropológicamente, podrías concluir que la mentalidad de los cazadores forzó a los humanos en algún punto a reconocer que la visualización en términos de relaciones visuales era una habilidad de supervivencia.

visual hierarchy in web design

Cómo puedes apreciar, incluso los hombres de la prehistoria tenían un saludable respeto por el contraste visual.

Quizá, una explicación un poco más práctica es la siguiente: Es simplemente la forma en que nuestro cerebro categoriza la información. ¿Cómo lo hace? Primero, agrupando elementos visuales similares y organizándolos en patrones que son trascendentales para cada individuo. De hecho, es una cualidad tan inherente para nuestra naturaleza humana como lo es comer o beber. Cualquiera que sea el orden, el hecho es que aún en su forma más básica; la información que está organizada con una jerarquía en mente, siempre será mucho más efectiva al comunicar una idea que la información desorganizada.

Veamos el siguiente ejemplo, la imagen de dos bloques de texto:

visual hierarchy in web design

En el ejemplo de arriba, vemos la forma más rudimentaria de un sistema de jerarquía visual aplicada a un texto. La información en cada uno de los dos ejemplos no tiene ninguna diferencia, no obstante, la forma en la que han sido presentados ambos bloques de texto, cambiará dramáticamente la forma de cómo los lectores la verán y, desde luego, la forma en cómo tomarán la información. Ahora, cuando hablamos de jerarquía visual en términos de tipografía, es precisamente esto a lo que nos referimos, es decir, ¿cómo le estamos presentando la información a los usuarios? Bueno, atributos tales como, la aproximación, el tamaño y otras semejanzas de los formatos de texto, le permitirá a los lectores organizar el ejemplo de arriba en; títulos y párrafos. Entonces, ¿qué papel juega la jerarquía en esta situación? Sencillamente, la jerarquía da a los títulos mucha más importancia, de hecho más que al resto de la información, y cuándo se trata de la lectura a través de la web, la hace más fácil de escanear.

Bueno, pero apenas hemos visto “lo básico”. Entonces, veamos mucho más a fondo algunos ejemplos de cómo poder aplicar estos “principios muy básicos” a algunos diseños “más sofisticados”:

Las Herramientas de la Jerarquía

Comprender que la jerarquía visual es importante, no solamente está bien, sino que también es bueno, pero, actualmente, ¿cómo un diseñador podría crearla? Bueno, las “herramientas” que veremos a continuación son tan simples cómo lo son las herramientas de un carpintero, ya saben; martillo, sierra, clavo, etc. No son las herramientas… ¡es lo que haces con ellas lo que cuenta!

Tamaño

Los objetos que son más grandes exigen mucho más atención. Usar el tamaño como una herramienta de jerarquía es una manera efectiva para guiar el ojo de los usuarios a una parte particular de la página. ¿Por qué? Porqué el tamaño es una de las formas más poderosas de organización. De hecho, es muy importante correlacionar; tamaño con importancia, en un diseño. Por ejemplo; los elementos más grandes deberían ser los más importantes en la mayoría de los casos, evidentemente. Por otro lado, los elementos más pequeños deberán ser los menos importantes.

visual hierarchy in web design

El uso de los elementos GRANDES, así como el texto en negrillas, sin embargo, añade un nivel de orden a este diseño caótico. El ojo se movería naturalmente desde los elementos grandes hacia abajo a los elementos más pequeños.

Color

El color es una herramienta interesante. Porque puede funcionar de dos formas; cómo herramienta de organización así como también una herramienta de personalidad. Las negrillas y los colores contrastantes sobre un elemento en particular de un sitio web, demandará mucho más atención (tales como con los botones o mensajes de error o hiperenlaces). Pero cuando el color se utiliza como una herramienta de personalidad, puede mostrarse más allá de la personalidad, es decir; puede ir hasta diseños con estilos sofisticados de jerarquía. Por ejemplo, usar colores exuberantes o reconfortantes provoca un atractivo emocional hacia una página en particular. El color puede afectarlo todo; desde la marca de un sitio web (un claro ejemplo de esto es el sitio web de Coca-Cola, dominado por el uso del color rojo), hasta el simbolismo (al usar colores fríos, o colores tenues). Avanzadas aplicaciones de color inclusive pueden ser usadas para “clasificar la información” dentro de una jerarquía, como en el siguiente ejemplo::

visual hierarchy in web design

El sitio Spectra, usa los colores para representar diferentes categorías de noticias, de esa manera es muy fácil encontrar un tipo de información en particular basado en una clave de color.

Contraste

El contraste muestra relativa importancia. Los cambios dramáticos en el tamaño del texto o el tipo de color nos comunicarán un mensaje; de qué algo es diferente y requiere nuestra atención. Por ejemplo; hacer un cambio de color desde un fondo claro a un color oscuro, inmediatamente puede separar el contenido principal de una página del pie de página.

visual hierarchy in web design

El contraste entre la luz, la sección del encabezado con un toque de cielo y el tono oscuro del pie de página estilo tierra, crean una jerarquía distinta de información.

Alineación

La alineación crea orden entre los elementos. Puede ser tan simple como la diferencia entre una “columna de contenido” y una “columna del bloque lateral o sidebar”. Aunque la alineación puede tomar un rol más complejo de jerarquía. Consideré, al menos por un instante, el poder de la información ubicado en la parte superior derecha de una página web. Pero, ¿por qué en esa área en particular? Porqué los usuarios generalmente esperan que en esa parte de la pantalla la información sea asociada con: perfiles, cuentas, carritos de compras, etc. Eso le da a toda esa área un sentido de “área oficial”. La alineación también puede provocar interés si se usa en una forma única, como es el caso del siguiente ejemplo::

visual hierarchy in web design

La plantilla Stuff usa un sistema de alineación horizontal único para separar la marca y la navegación del contenido del blog.

La plantilla Flex usa un diseño inspirado en guias para desarrollar un interes visual así como una taxonomía conducida por una jerarquía visual.

Repetición

La repetición le asigna un significado relativo a los elemento. Por ejemplo, sí todos los “párrafos de texto” son grises y después, cuando el usuario vea un nuevo bloque de texto gris, entonces el puede asumir que simplemente se trata de otro párrafo de texto básico, y cuando ese mismo usuario se encuentre con un enlace azul o un título en negro, él seguramente asumirá que esto ya se trata de algo diferente y unico en comparación con el texto de color gris.

visual hierarchy in web design

El sitio Virgin, crea elementos repetitivos como párrafos de texto, entonces cuándo quiere dirigir la atención del usuario hacia un elemento en especial, rompe la repetición (por ejemplo, el texto de color rojo que se encuentra entre las comillas.

Aproximación

La aproximación, separa los elementos unos de otros y crea una subjerarquía. Dentro de una página web podría haber interacciones (widgets), que están separados entre sí por espacios y dentro de estas interacciones hay un nuevo título, además de subtítulos y contenido, por ejemplo, las entradas de los blogs a través de artículos individuales, como es el caso de psd.tuts.com La aproximación también es la manera más rápida para asociar contenido similar. En el siguiente ejemplo, es fácil encontrar ciertos tipos de contenidos, simplemente basados en su proximidad con cada uno de ellos.

visual hierarchy in web design

El sitio Tuts utiliza la herramienta de jerarquía, aproximación, y lo hace realmente bien (y no es por falsa modestia). Podemos apreciar como la columna de contenido de la izquierda esta claramente separada y con la aproximación del espacio de las interacciones de la barra que están a lado o sidebar. Además, la información meta dentro de una entrada de un blog en particular esta colocada en proximidad cercana de la entrada y además de las otras entradas, reforzando un sentimiento de: “pertenencia”

Densidad y Espacio en blanco

Los elementos densamente agrupados dentro de un espacio los hace sentir… mmm cómo decirlo; “pesados” y sobre todo, desordenados. Por el contrario, cuándo hay demasiado espacio entre los elementos, corren el riesgo de perder la relación unos con otros. Cuando una página web esta diseñada de la “manera correcta”, el ojo del usuario facilmente reconocerá cuando los elementos están relacionados entre si, y cuando no lo están.

visual hierarchy in web design

Separar los elementos y a su vez mantener bastante espacio en blanco en la página web, este diseño sencillamente hace más fácil para los visitantes del sitio vagar a lo largo de la página y encontrar contenido enmarcado.

Estilo y textura

Quizas sea la herramienta más abierta en la caja de herramientas de la Jerarquía. El estilo puede ser usado ya sea para impartir una forma de jerarquía que abarca y trasciende del resto de las herramientas. Por ejemplo, un fondo plano gris hará sentir una sensación diferente de un fondo con textura de asfalto. Este estilo o personalidad dada por los diseñadores naturalmente jugará un rol de cómo se hacen las diferentes relaciones visuales..

Cabe mencionar que el estilo es también una de las herramientas más peligrosas que un diseñador puede usar. Así como un carpintero se cortaria un dedo con una sierra, un diseñador puede engañar facilmente a las personas poniendo demasiado enfásis sobre ciertos elementos a través del estilo. Imagina un elemento de un sitio diseñado fuertemente y con mucha textura que demanda mucha atención, pero que distrae tanto en lugar de informar. Esta misma idea es valida para los tipos de fuentes, botones, etiquetas y otros elementos. Siempre considera el impacto que tendrá sobre el diseño general cuándo decidas añadir un toque de estilo extra o pulir algún elemento.

visual hierarchy in web design

El sitio de Jeff Finley hace un estupendo trabajo al combinar muchas de las herramientas que discutimos en esta lección. Jeff añade solamente el estilo suficiente para hacer sentir su sitio personal sin tener que salirse por la borda.

La Jerarquía Fallo

“La Jerarquía Visual Buena no se trata de gráficos salvajes ni alocados o de los filtros de Photoshop más nuevos, se trata de organizar la información en una forma útil, accesible y logica para después presentarla a los vistantes del sitio, diariamente”

Para terminar una última sugerencia: Es importante notar que la jerarquía puede ser usada para ambos propósitos; buenos o malos. Por un momento piense en todas las propagandas molestas en Flash, ventanas emergentes, banners, etc, con las que la web se ha visto afectada con el paso de los años. Si bien estos anuncios consiguen acaparar su atención, ultimamente han fallado al propietario del sitio y a los usuarios al romper con los estandares de la jerarquía visual dentro de un sitio. Similarmente, si un diseñador construye una jerarquía visual tal que ciertas piezas claves de información son casi imposible de encontrar, entonces el diseñador también ha fallado en su tarea. La Jerarquía Visual Buena, no se trata de gráficos salvajes ni alocados o de los filtros de Photoshop más nuevos, se trata de organizar la información en una forma útil, accesible y logica para después presentarla a los vistantes del sitio, diariamente.

¿Por qué la Jerarquía es especialmente relevante para los diseñadores web?

“Los diseñadores pueden crear normalidad apartir del caos, ellos pueden comunicar ideas claramente a través de la organización y manipulación de palabras he imágenes”.”—Jeffery Veen, El Arte de la Ciencia del Diseño Web

Jeffrey escribió estas palabras en 2001, pero aún en nuestros días estas palabras todavía tienen mucho poder sobre todo en donde “la sobre carga de información” parece ser muy común. Cómo seres humanos, siempre hemos tenido un afilado sentido de organización visual. Sin embargo, como una sociedad hemos estado siendo bombardeados con un verdadero tsunami de información visual en las últimas dos décadas, y como resultado; las personas hoy en día son híper-sensibles a la jerarquía visual. Este es especialmente el caso en la web donde los estudios han demostrado que los navegantes habituales en internet han aprendido a “escanear contenido” de forma innata. Automáticamente buscando información que sea relevante para su interés y descartando o dejando de tener en cuenta la información que no tiene relevancia.

Por causa de esto, convertirse en un maestro de la jerarquía visual ya no es opcional, es una obligación. Como las típicas plataformas de navegación en la web se expanden desde los monitores tradicionales hasta teléfonos, iPads e incluso televisores. Se esta volviendo cada día más importante que usemos un sistema visual fuerte y para comunicarnos con los navegadores web.

Un ejercicio para probar la Jerarquía Visual

Para concluir, me gustaría hacerlo con un ejercicio muy simple. Como ejemplo, usaremos un sitio web que frecuentas o un proyecto en el que hayas trabajado recientemente. El ejercicio es el siguiente::

  1. Enumera los puntos de información claves que los visitantes pueden buscar.
  2. Asigna valores entre (1 – 10), de acuerdo a su importancia para el navegante promedio.
  3. Ahora, hecha un vistazo al diseño actual, nuevamente.
  4. Asigna valores entre (1 – 10), de acuerdo a la importancia visual actual como tú lo ves en el diseño en vivo.
  5. Has la siguiente consideración: ¿La importancia esperada coincide con la importancia actual diseñada?

En la mayoría de los casos, las respuestas incluirán tonos de “no”. Y existen muchas razones, entre las cuales están; las demandas del cliente, diseñadores sin experiencia, diseño por comité, u otras cientos de razones que probablemente has leído. En la mayoría de los casos, el diseñador puede querer inducir mal al visitante (considere un sitio “gratis” que esta tratando de guiar a los usuarios a pagar contenido). Cualquiera que sea la razón, la comprensión de la jerarquía visual y tratar de interpretarla es una forma de mejorar la forma de como usted ve el diseño web en una nueva perspectiva. ¡Ojalá, te ayude a informarte también en tu propio trabajo!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.