() translation by (you can also view the original English article)
La jerarquía visual es uno de los principios más importantes detrás de un diseño web efectivo. En este artículo examinaré por qué el desarrollo de una jerarquía visual es crucial en la web, la teoría detrás de ella, y cómo puedes usar algunos ejercicios muy básicos en tus propios diseños para poner esos principios en práctica.
El diseño = La comunicación
En su fundamento, el diseño se basa en la comunicación visual: Para ser un diseñador efectivo, tienes que ser capaz de comunicar claramente tus ideas a los espectadores o de lo contrario perderás su atención. La gente es inconstante; si les das un bloque masivo de información, es probable que 99 de cada 100 personas no se molesten en leerlo. ¿Por qué? Porque la mayoría de las personas son inherentemente pensadores visuales, no procesadores de datos.
Para averiguar por qué esto es cierto, es importante entender un poco sobre la forma en que vemos las cosas. La gente no es lo que se llamaría "espectadores de la igualdad de oportunidades". En lugar de tomar la información visual y procesarla de manera uniforme, la gente organiza lo que ve en términos de "relaciones visuales". Consideremos la siguiente imagen de dos círculos ordinarios:
Lo más probable es que no veas "dos círculos", sino "un círculo negro y un círculo rojo más pequeño".
La razón es bastante simple: Cuando se le presenta algo tan simple como dos círculos, una persona no solo verá dos círculos ordinarios, sino que encontrará una manera de diferenciar el uno del otro. Un círculo puede ser más grande, o más pequeño, o de color, o cualquier otra variedad de diferencias. Estas diferencias nos permiten distinguir entre los objetos y darles significados únicos.
Veamos ahora una imagen más compleja:
La complejidad añadida de hecho refuerza nuestro deseo de "clasificar" los objetos en términos de relaciones. Las similitudes y diferencias se convierten en el marco a través del cual vemos las formas. Las diferencias de escala sugieren que un objeto está más cerca de nosotros que otro o que uno es más dominante que el otro; las variaciones de color pueden sugerir que un objeto tiene una personalidad única que lo diferencia del otro. Mucha información puede ser entregada en una sola imagen usando algunas herramientas muy rudimentarias.
...Entender que la gente verá nuestros diseños en términos de relaciones es crucial para convertirse en un diseñador más efectivo.
Llevemos este ejemplo de vuelta al diseño web; Debido a que el diseño web se trata de la comunicación de la información visual, la comprensión de que la gente verá nuestros diseños en términos de relaciones es crucial para convertirnos en diseñadores más eficaces. Aunque podría parecer que es suficiente con solo dar información, como diseñadores web, nuestra tarea es descomponer esa información cruda en deliciosos trozos de información visualmente relevante que sea fácil de ver, y más importante, efectiva en la comunicación del mensaje detrás de una página web.
El amanecer de la jerarquía
Hay cien explicaciones de por qué la gente ve en términos de relaciones; si se rastrea antropológicamente, se podría concluir que la mentalidad de cazador-recolector obligó a los humanos en un momento dado a reconocer que ver relaciones es una habilidad de supervivencia.
Verás, incluso el hombre prehistórico tenía un saludable respeto por el contraste visual.
Tal vez una explicación más práctica es que es simplemente la forma en que nuestros cerebros categorizan la información: agrupar elementos visuales similares y organizarlos en patrones significativos es tan inherente a nuestra naturaleza humana como comer o beber. De cualquier manera, el hecho es que incluso en su forma más básica, la información que se organiza con una jerarquía en mente siempre será más efectiva en la comunicación que la información no organizada.
Consideremos la siguiente imagen de dos bloques de texto:
En el ejemplo anterior, vemos la forma más rudimentaria de un sistema de jerarquía visual aplicada al texto. La información en cada uno de los dos ejemplos no es diferente, pero la forma en que ha sido dividida cambia dramáticamente la forma en que el lector la verá y la asimilará. Cuando hablamos de jerarquía visual en términos de tipografía, esto es a lo que nos referimos. La proximidad, escala y similitud del formato del texto permite al lector organizar el ejemplo inferior en títulos y párrafos. La jerarquía da a los títulos más significado que el resto de la información, y hace más fácil el escaneo.
Muy bien, así que todo esto es bastante básico, ¿verdad? Vamos a sumergirnos en algunos ejemplos más profundos de cómo se puede aplicar este principio básico a algunos diseños muy sofisticados:
La caja de herramientas del jerarca
Entender que la jerarquía visual es importante está muy bien, pero ¿cómo la crea realmente un diseñador? Las "herramientas" que veremos son tan simples como las de un carpintero -martillo, clavo, sierra, etc.- ¡Lo que cuenta es lo que haces con ellas!
El tamaño
Los objetos más grandes exigen más atención. El uso del tamaño como herramienta jerárquica es una forma efectiva de guiar el ojo del espectador a una porción particular de la página. Debido a que el tamaño es una de las formas más poderosas de organización, es importante correlacionar el tamaño con la importancia en un diseño. Los elementos más grandes deben ser los más importantes en la mayoría de los casos; los elementos más pequeños deben ser los menos importantes.
El uso del texto GRANDE y en negrita añade un nivel de orden a este diseño, que de otra manera sería caótico. El ojo debe moverse naturalmente desde los elementos grandes hacia abajo a los elementos más pequeños.
El color
El color es una herramienta interesante porque puede funcionar tanto como una herramienta de organización como de personalidad. Los colores atrevidos y contrastantes en un elemento particular de un sitio web exigirán atención (como con botones o mensajes de error o hipervínculos). Cuando se usa como una herramienta de personalidad, el color puede extenderse más allá en tipos más sofisticados de jerarquía; el uso de colores exuberantes y reconfortantes puede traer un atractivo emocional a una página. El color puede afectar todo, desde la marca de un sitio web (por ejemplo: Rojo CocaCola) hasta el simbolismo (por ejemplo: colores fríos y apagados). Las aplicaciones avanzadas de color pueden incluso ser utilizadas para "clasificar" la información dentro de una jerarquía, como en el siguiente ejemplo:
El sitio de Spectra Viewer usa colores para representar diferentes categorías de noticias, así que es fácil encontrar un tipo de información particular basado en la clave de color.
El contraste
El contraste muestra una importancia relativa. Cambios dramáticos en el tamaño del texto o el color impartirán el mensaje de que algo es diferente y requiere atención. El cambio de un color de fondo claro a un color de fondo oscuro puede separar rápidamente el contenido principal de una página del pie de página.
El contraste entre la sección de cabecera clara y aireada y el pie de página oscuro y terrenal crea una jerarquía distinta de información.
La alineación
La alineación crea un orden entre los elementos. Puede ser tan simple como la diferencia entre una "columna de contenido" y una "columna de barra lateral", pero la alineación también puede asumir funciones jerárquicas más complejas. Consideremos, por ejemplo, el poder de la información colocada en la parte superior derecha de una página web. Dado que los usuarios en general esperan que la información en esa parte de la pantalla se asocie con perfiles, cuentas, carritos de compra, etc., les da a todos los lugares de esa zona una sensación de "oficial". La alineación también puede generar interés si se utiliza de manera única, como en los siguientes ejemplos:
La Plantilla Stuff utiliza un sistema de alineación horizontal único para separar la marca y la navegación del contenido de la entrada del blog.
La Plantilla Flex utiliza un diseño inspirado en la cuadrícula para desarrollar el interés visual, así como una jerarquía visual impulsada por la taxonomía.
La repetición
La repetición asigna un significado relativo a los elementos; si todo el texto del "párrafo" es gris, cuando un usuario ve un nuevo bloque de texto gris, puede suponer que se trata de otro párrafo básico; cuando ese mismo usuario encuentra un enlace azul o un título negro, puede suponer con seguridad que es diferente y único del texto gris.
El sitio Virgin crea elementos repetitivos como el texto del párrafo, y luego rompe la repetición cuando quiere llamar la atención (como el texto de la cita roja).
La proximidad
La proximidad separa los elementos entre sí y crea sub-jerarquías. Dentro de una página puede haber widgets que están separados unos de otros por el espacio; dentro de esos widgets hay una nueva jerarquía de título, subtítulo y contenido. La proximidad es también la forma más rápida de asociar contenidos similares. En el siguiente ejemplo, es fácil encontrar ciertos tipos de contenido simplemente por su proximidad entre sí.
Los sitios Tuts+ lo hacen muy bien (¡no es por alabarnos!). La columna izquierda de "contenido" está claramente separada en proximidad del espacio del widget de la barra lateral. Además, los metadatos de una entrada del blog en particular se colocan muy cerca de esa entrada y más lejos de otras, reforzando el sentido de "pertenencia".
La densidad y el espacio en blanco
El empaquetamiento denso de elementos en un espacio hace que se sienta "pesado" y desordenado; cuando los elementos están demasiado espaciados, pueden perder las relaciones entre ellos. Cuando una página está diseñada "justo a la medida", el ojo reconocerá fácilmente cuando los elementos están relacionados y cuando no lo están.
Al espaciar los elementos y mantener muchos espacios en blanco en la página, este diseño hace más fácil para la gente navegar y encontrar las pequeñas y densas cajas de contenido
El estilo y la textura
Tal vez la herramienta más abierta de la Caja de Herramientas de los Jerarcas, el estilo puede utilizarse para impartir una forma de jerarquía que abarque y trascienda las otras herramientas. Por ejemplo: un fondo gris plano se "sentirá" diferente a un fondo con textura de asfalto. Este estilo o personalidad dada por el diseñador jugará naturalmente un papel en cómo se hacen las diferentes relaciones visuales.
Vale la pena mencionar que el estilo es también una de las herramientas más peligrosas que un diseñador puede utilizar. Al igual que un carpintero que se corta el dedo con una sierra de cinta, un diseñador puede fácilmente engañar a la gente al hacer hincapié en ciertos elementos a través del estilo. Imagina un elemento de sitio con mucha textura y diseño que exige tanta atención que distrae en lugar de informar. Esta misma idea se extiende a los tipos de letra, botones, pestañas y otros elementos. Ten en cuenta el impacto en un diseño general cuando elijas añadir un estilo y un pulido adicionales a un elemento.
El sitio de Jeff Finley hace un gran trabajo al combinar muchas de las herramientas que discutimos aquí, pero su uso de elementos de estilo original sobre el forraje estándar de la interfaz de usuario es lo que le da al diseño entero una sensación de jerarquía intencional. Jeff se las arregla para agregar el estilo suficiente para que su sitio se sienta personal sin que se pase de la raya.
La jerarquía fallida
Una buena jerarquía visual no se trata de gráficos salvajes y locos o de los más recientes filtros de Photoshop, sino de organizar la información de manera que sea utilizable, accesible y lógica para el visitante diario del sitio.
Como acabo de sugerir en la última sección, es importante señalar que la jerarquía puede ser usada tanto para el bien como para el mal. ¡Piensa en todos los molestos anuncios en Flash, ventanas emergentes, banners con purpurina, etc. con los que la web ha estado plagada a lo largo de los años! Mientras que estos anuncios logran llamar la atención, al final le fallan al dueño del sitio y al espectador al romper la jerarquía visual dentro de un sitio. De manera similar, si un diseñador construye una jerarquía visual tal que ciertas piezas clave de información son casi imposibles de encontrar, el diseñador habrá fallado en su tarea. Una buena jerarquía visual no se trata de gráficos salvajes y locos o de los más recientes filtros de photoshop, sino de organizar la información de manera que sea utilizable, accesible y lógica para el visitante diario del sitio.
Por qué la jerarquía es especialmente relevante para los diseñadores web
"Los diseñadores pueden crear normalidad a partir del caos; pueden comunicar claramente las ideas a través de la organización y manipulación de palabras e imágenes". -Jeffery Veen, The Art and Science of Web Design (El arte y ciencia del diseño web)
Jeffrey Veen escribió esas palabras en 2001, pero todavía tienen mucho poder hoy en día donde la "sobrecarga de información" parece ser algo común. Como personas, siempre hemos tenido un agudo sentido de la organización visual. Sin embargo, como sociedad hemos sido bombardeados con un verdadero tsunami de información visual en las últimas dos décadas; como resultado, la gente hoy en día es hipersensible a la jerarquía visual. Esto es especialmente el caso en la web donde los estudios han demostrado que los navegantes habituales han aprendido a "escanear" el contenido de forma innata; buscando automáticamente la información que es relevante para sus intereses y descartando o desechando la información que no lo es.
Debido a esto, convertirse en un maestro de la jerarquía visual no es opcional, es obligatorio. A medida que las plataformas típicas de navegación por Internet se expanden desde el monitor tradicional a los teléfonos, tabletas e incluso televisores, se hace cada vez más importante que usemos sistemas visuales fuertes y claros para comunicarnos con los navegantes de Internet.
Un ejercicio para probar la jerarquía visual
Para concluir, me gustaría terminar con un ejercicio muy simple. Como ejemplo, usaremos un sitio web que frecuentas, o un proyecto en el que has trabajado recientemente; El ejercicio va así:
- Enumera los puntos clave de información que los visitantes probablemente buscan.
- Asigna valores (1-10) de acuerdo a su importancia para el visitante promedio.
- Ahora, mira el diseño real de nuevo.
- Asigna valores (1-10) de acuerdo a la importancia visual real tal como la ves en el diseño en vivo.
- Considera: ¿La importancia esperada coincide con la importancia real del diseño?
En la mayoría de los casos, la respuesta incluirá matices de "no". Hay muchas razones para eso: las demandas de los clientes, los diseñadores sin experiencia, el diseño por comité, o un centenar de otras razones que probablemente has leído. Rayos, en algunos casos, el diseñador puede querer engañar al espectador (piensa en un sitio "gratuito" que intenta guiar a los usuarios hacia el contenido de pago). Cualquiera que sea la razón, entender la jerarquía visual y tratar de interpretarla es una manera de mejorar la forma en que se ve el diseño web bajo una nueva luz. ¡Esperemos que eso también te ayude a mejorar tu propio trabajo!
