Principios de diseño: una introducción a la jerarquía visual

A medida que cambian las tecnologías y las interfaces de usuario, la necesidad de habilidades de diseño en el diseño visual continúa creciendo. Con nuevos ejemplos de una interfaz de usuario típica que surge cada año, ¿ha cambiado nuestra comprensión fundamental de la jerarquía visual, la percepción y la composición?

El concepto moderno de percepción visual tiene sus raíces no solo en la ciencia sino también en la psicología. En consecuencia, independientemente de las interfaces de usuario que cambian continuamente, la forma en que vemos y percibimos la información visual seguirá siendo la misma. Considerando esto, ¿es posible que el diseño de interacción contemporáneo mejore los cimientos de la composición gráfica y la jerarquía visual?

Las reglas fundamentales de la percepción visual son fundamentales para cualquier diseño visual, ya que indican cómo se puede transmitir la información con un significado integrado lo más rápido posible. Sin embargo, dado que el diseño visual es un primo cercano del diseño gráfico, estos estándares se establecieron para los medios impresos y aún no se han redefinido para los digitales.

Todavía no se ha formado algo así como una “escuela Bauhaus digital” que potencialmente podría establecer nuevos principios de diseño. A medida que las personas experimentan una interfaz de usuario de una manera completamente diferente a la impresa, las reglas de jerarquía visual y composición no solo están anticuadas, sino que simplemente colapsan en una interfaz de usuario.

En su mayor parte, los diseñadores aún tienden a tratar la pantalla como un objeto bidimensional estático, y el desafío para los diseñadores interactivos es innovar más allá de la simple aplicación de formatos impresos a sus proyectos de medios digitales. Pero antes de que puedan avanzar nuevos diseños, se debe revisar una comprensión fundamental de la jerarquía visual, la percepción y la composición.

Jerarquía visual: una nueva comprensión de la composición visual para interfaces interactivas

¿Qué es la jerarquía visual y por qué es importante? La jerarquía visual es la disposición del contenido en una composición para comunicar información de manera efectiva y transmitir significado. La jerarquía visual dirige a los espectadores primero a la información más importante y luego al contenido secundario.

Establecido a través del uso apropiado de tamaño, color, forma, distancia, proporción y orientación, el significado, concepto y estado de ánimo de una composición se transmite a través del uso creativo de elementos gráficos que determinan la jerarquía visual.

La jerarquía visual es fundamental para todo tipo de diseño visual, ya sea una página de destino que necesita guiar el ojo del visitante o la navegación de una interfaz de usuario móvil. La comprensión del usuario de cada elemento se basa en los otros elementos de la composición y su contexto. Los elementos compositivos se tratan en consecuencia para formar relaciones visuales y, por lo tanto, establecer una jerarquía visual en un diseño.

Color en jerarquía visual

Muchas de las reglas de la jerarquía visual pueden parecer bastante simples e incluso banales, pero son una base fundamental para un buen diseño visual. Por ejemplo, el color es el elemento creativo más impactante en el diseño visual.

Considere las connotaciones inmediatas de una cruz roja frente a una monocromática. Casi universalmente, la cruz roja significa neutralidad y protección. Tal es el potencial de comunicación inmediata con el uso del color. El color también se usa a menudo para identificar grupos, como cuando una cruz roja entre tres monocromáticas se destaca de alguna manera como más significativa.

Los colores vivos y brillantes destacan más que los apagados y, por lo tanto, tienen un mayor impacto visual. En una interfaz, el color podría usarse para presentar un sentido de estructura y señalar las interacciones disponibles. Un solo color dentro de una interfaz monocromática puede distinguir una selección e incluso sugerir qué hay más allá de un botón sobre el que el usuario se desplaza.

El color también está sembrado de significado y emoción que puede transmitir información explícita al subconsciente del espectador. En branding, se ha realizado una gran cantidad de investigación psicológica sobre el color porque crea una respuesta visceral en los consumidores antes de que tengan una interacción significativa con una marca. Por ejemplo, los azules a menudo se perciben como confiables, seguros y relajantes, mientras que los rojos son estimulantes y se sabe que aumentan la frecuencia cardíaca de las personas. Sin embargo, los colores pueden tener un significado diferente según la cultura.

Un buen ejemplo de un uso significativo y estructural del color en el diseño web es el sitio The Names for Change. El sitio comunica inmediatamente su estructura a través del uso del color; la organización está dispersa por defecto, pero se puede reorganizar por tema y/o color.

Sin embargo, los tonos elegidos ayudan a superar una de las posibles dificultades para el significado del sitio. La recaudación de fondos para artículos cotidianos, como calcetines o tampones, no es lo suficientemente emocionante como para venderse por sí sola, por lo que el tono gráfico radical del sitio aumenta el valor perceptible de los artículos cotidianos al tiempo que establece la estructura organizativa subyacente necesaria.

Tamaño en jerarquía visual

Imaginemos una ilustración de un pájaro grande sentado junto a tres más pequeños. Sin más información, este simple gráfico comunica de inmediato la relación entre sus elementos: un padre y sus hijos, lo que colectivamente comunica una familia.

En el diseño gráfico tradicional, una estrategia típica es hacer que los elementos más importantes sean los más grandes y luego reducir el tamaño de los elementos jerárquicamente. El tamaño establece la jerarquía visual porque los elementos más grandes captan primero la atención y, por lo tanto, parecen ser los más importantes.

También se utilizan a menudo diferentes tamaños de fuente en los cuerpos de texto para indicar diferencias significativas, como encabezados, secciones y comillas. El contenido secundario, como los títulos de las imágenes, suele ser más pequeño para no competir con el cuerpo principal del texto.

Considere algunas de las interfaces visuales más utilizadas, como Instagram. Nada en la pantalla compite con las imágenes y los videos: ocupan más del 60 por ciento de la mayoría de las pantallas. El propósito de la interfaz de usuario es inmediato.

Un ejemplo que altera la estructura típica de la jerarquía visual en el diseño web es el sitio de cartera del estudio de arte/diseño Ro/Lu. Su sitio inusual puede no ser el más intuitivo, pero desafía la disposición visual del típico portafolio creativo en línea. Debido a la aleatorización intencional de sus variados proyectos, uno diferente aparece como dominante cada vez que un visitante ingresa al sitio, lo que hace que cada visita sea única e interesante.

El trabajo no está organizado jerárquicamente en los portafolios de la mayoría de los estudios de diseño creativo porque cada proyecto es único y se considera igualmente importante. El diseño del sitio de Ro/Lu crea una composición dinámica con diferentes niveles de interés en cada visita y alienta a los espectadores a investigar la amplia cartera del estudio. En consecuencia, la naturaleza ecléctica e interdisciplinaria del estudio de diseño está representada por la visualización aleatoria de contenido.

Alineación en jerarquía visual

La alineación en la jerarquía visual comunica una sensación de orden al conectar elementos espacialmente. Al igual que con los capítulos de una novela no lineal, imagina un cuadrado sobresaliendo de la línea en una composición gráfica. Cuando un solo elemento rompe una estructura establecida, se destaca de la composición y por lo tanto adquiere significado en relación con el resto.

Una composición rígida puede parecer estancada y visualmente poco interesante a menos que un elemento se destaque de la cuadrícula visual, es decir, de un sentido de orden. La desalineación, o "romper la cuadrícula", es una oportunidad para dar más peso visual a un elemento gráfico. Este concepto es fundamental para la jerarquía visual en el diseño.

Según un principio del diseño visual tradicional, los elementos que se colocan en el centro de un marco parecen ser más significativos. Por ejemplo, el contenido principal o los elementos de la interfaz se pueden colocar en el centro, mientras que la navegación, los menús y otros contenidos secundarios a menudo se mantienen a los lados.

Pero a los diseñadores pioneros les gusta desafiar el status quo. Cuando el diseño interactivo aplica los principios fundamentales de la jerarquía visual y luego empuja los límites hacia composiciones visuales innovadoras, se crean nuevas experiencias interesantes. Al usar una alineación diferente, se crean nuevas asociaciones y significados entre los elementos.

Por ejemplo, el proyecto DNA es un sitio que utiliza una serie de jerarquías inconexas para comunicar la construcción creativa del álbum del músico. La estructura del sitio es compleja, al igual que la construcción del álbum.

En primer lugar, se invita a los visitantes a escuchar la música haciendo clic en las pistas del álbum, que tradicionalmente se alinean en un formato de álbum. Sin embargo, al permitir a los visitantes realinear los elementos del ADN del sitio, se comunica el concepto del álbum, no solo como una serie de pistas, sino como una construcción no lineal de elementos fragmentados a lo largo del tiempo.

Formas en jerarquía visual

Cuando se trata de formas, consideremos cuán inmediatamente la forma de corazón simple comunica su uso potencial para "me gusta" en la mayoría de las interfaces de usuario de redes sociales. Para establecer la importancia o los grupos, considere un corazón entre cuatro círculos. Las formas geométricas son como los colores en el sentido de que las formas tienen ciertas connotaciones que dan personalidad o significado a los elementos.

En el diseño interactivo, las formas geométricas son esenciales para una comunicación eficiente, ya que transmiten significado de manera más rápida y universal que el texto. En lugar de texto, los íconos (símbolos), que a menudo son formas geométricas simples, se han convertido en el análogo para la mayoría de los sistemas de navegación e IU.

El objetivo detrás de "gustar" una imagen, descargar un archivo, hacer una llamada telefónica o revisar un mensaje se transmite de manera simple y directa con iconos (formas geométricas). Esta forma de comunicación visual eficiente se vuelve cada vez más importante en un mercado global donde los productos digitales a menudo sirven a una gran audiencia internacional con múltiples idiomas.

Para resaltar los diferentes modos de interacción entre la impresión tradicional y los medios digitales, considere la diferencia entre buscar la sección de Artes en un periódico real y usar el ícono de búsqueda en la mayoría de las aplicaciones. Hasta hace poco, la mayoría de los sitios web de los periódicos disponían sus páginas como si estuvieran impresos, y la experiencia de revisar el contenido era torpe y desorientadora.

Rompiendo los diseños web tradicionales, el sitio web Signes du Quotidien utiliza formas básicas de cuadrados y círculos de manera sutil para presentar una jerarquía visual única que guía a los visitantes a través del contenido. El menú está en el centro de la página, y cuando los visitantes hacen clic en él, aparecen cuatro puntos de colores que representan las cuatro secciones del sitio. Luego, los visitantes arrastran uno de los puntos al cuadrado para ir a esa sección.

Movimiento en jerarquía visual

Un elemento en movimiento tendrá un mayor peso visual en un grupo de elementos inmóviles, y el movimiento en la jerarquía visual es un principio que es imposible de usar en forma impresa pero definitivamente puede incluirse en el conjunto de herramientas del diseñador visual.

¿Qué puede comunicar el movimiento aparte de una traducción literal de sí mismo? El movimiento se usa a menudo en una interfaz de usuario como una pista con la que se puede interactuar con un elemento. ¿Se puede llevar más lejos el uso del movimiento y usarlo como una forma de comunicar algo único? Si la jerarquía visual no se trata solo de la eficiencia de la comunicación, sino también del significado incrustado, ¿cómo podría usarse el movimiento como una herramienta de comunicación visual esencial?

Para el sitio I Remember, la interfaz principal (que está animada) se destaca inmediatamente ya que invita a la interacción. Aunque el movimiento y la interfaz son herramientas de navegación funcionales, los diseñadores visuales utilizaron la pérdida potencial de estos elementos como una forma de comunicar la misión subyacente del sitio web: la enfermedad de Alzheimer. Al igual que los recuerdos que se desvanecen de los pacientes para quienes la organización recauda fondos, el sitio web desaparece lentamente en la nada sin una interacción activa.

Sonido en la Jerarquía de la Información

El sonido es otra herramienta imposible de usar en los medios impresos, pero que aún debe desarrollarse dentro de los principios de la jerarquía. Dado que el sonido es completamente no visual, no hay reglas a las que referirse. Pero el sonido también puede ser una herramienta de diseño que comunique efectivamente el contenido, así como el estado de ánimo o el significado. Los elementos de diseño que llevan ciertos sonidos pueden agruparse entre sí, y aquellos que son más audaces pueden parecer los más importantes o pueden significar una separación del grupo.

La calidad de un sonido adjunto a un elemento debe identificar, caracterizar o ayudar a estructurar el contenido rápidamente. ¿Cómo podría un sonido que contrasta con su elemento visual asociado transmitir un nuevo significado?

Los sonidos en sí mismos pueden ser tan complejos que establecen un estado de ánimo completo o el mensaje de un diseño antes de que se perciba algo visual. Así como un fondo colorido establece un estado de ánimo, un sonido puede sentarse en el fondo o proporcionar comentarios en una interfaz de usuario, como responder al toque de un botón en un dispositivo móvil. El principio de la técnica es básico, pero la creatividad con la que se puede emplear es donde puede suceder la magia.

Debido a su importancia en el trabajo creativo del colectivo, el sitio web creado para la exposición del grupo de artistas alemanes ZERO en el Guggenheim utiliza el sonido como telón de fondo atmosférico, y también como una forma de retroalimentación al navegar por el sitio. Los tonos de llamada en negrita establecen las piezas que representan los inicios de un tema, mientras que los proyectos terciarios hacen clic en el fondo.

El concepto de jerarquía visual

La jerarquía visual es un concepto sencillo, y comprender la teoría es en realidad más fácil que la capacidad práctica de un diseñador para ejecutar una composición bien estructurada. Sin embargo, ser inventivo en un nuevo medio manteniendo un buen diseño es un desafío.

Nuevos medios aparecen todo el tiempo y las situaciones desafiantes no disminuirán, sino todo lo contrario. Hoy en día se utilizan más de 200 tamaños de pantalla diferentes. Y eso es sólo los bidimensionales. Primero, fue Internet, los navegadores de escritorio, luego llegaron los dispositivos móviles y las tabletas, y ahora nos estamos moviendo hacia un nuevo territorio con tecnologías como la televisión interactiva, IoT, dispositivos portátiles, realidad virtual y aumentada.

El diseño que realmente supera los límites de los medios digitales aún está en pañales. Con suerte, los principios de la jerarquía visual y el buen diseño se mantendrán al día con el rápido avance de la tecnología para que nuestra experiencia con los medios digitales permanezca llena de significado y placer.

Lectura adicional en el blog de diseño de Toptal:

• Mejore su experiencia de usuario con una jerarquía visual clara
• Fundamentos de diseño: una guía para la jerarquía visual (con infografía)
• Principios de diseño: Introducción a la jerarquía
• Mejores prácticas de diseño de interfaz de usuario para una mejor capacidad de escaneo
• Impulse su UX con estos principios de diseño de interacción exitosos