Share
La jerarquía visual es uno de los principios más importantes detrás del diseño web efectivo. Este artículo examinará por qué el desarrollo de una jerarquía visual es crucial en la web, la teoría subyacente y cómo puede utilizar algunos ejercicios muy básicos en sus propios diseños para poner en práctica estos principios..
En su esencia, el diseño tiene que ver con la comunicación visual: para ser un diseñador efectivo, debe poder comunicar claramente sus ideas a los espectadores o, de lo contrario, perder su atención. Sin embargo, las personas son inconstantes; Si les da 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 pensadores visuales, no procesadores de datos.
Para entender por qué esto es cierto, es importante comprender un poco sobre la forma en que vemos las cosas. La gente no es lo que podríamos llamar "espectadores de igualdad de oportunidades". En lugar de tomar información visual y procesarla de manera uniforme, las personas organizan lo que ven en términos de "relaciones visuales". Consideremos la siguiente imagen de dos círculos ordinarios:
Es probable que no veas "dos círculos"; En cambio, vio "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 entre los dos. Un círculo puede ser más grande, más pequeño, o coloreado, o cualquier otra variedad de diferencias. Estas diferencias nos permiten distinguir objetos y darles significados únicos..
Veamos ahora una imagen más compleja:
La complejidad agregada en realidad refuerza nuestro deseo de "clasificar" los objetos en términos de relaciones. Similitudes y diferencias se convierten en el marco por el que 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 en el color pueden sugerir que un objeto tiene una personalidad única que lo diferencia del otro objeto. Se puede entregar mucha información 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.
Tomemos este ejemplo de nuevo al diseño web; Debido a que el diseño web se trata de comunicar información visual, comprender que las personas verán nuestros diseños en términos de relaciones es crucial para convertirse en un diseñador más eficaz. Si bien puede parecer que es suficiente solo para proporcionar información, como diseñadores web, nuestra tarea es dividir esa información sin procesar en pequeños trozos deliciosos de información visualmente relevante que sea fácil para la vista y, lo que es más importante, eficaz para comunicar el mensaje. detrás de una página web.
Hay cien explicaciones de por qué las personas ven en términos de relaciones; Si tuvieras que rastrearlo antropológicamente, podrías llegar a la conclusión de que la mentalidad de un cazador-recolector forzó a los humanos a reconocer que ver las relaciones es una habilidad de supervivencia..
Mira, incluso el hombre prehistórico tenía un sano respeto por el contraste visual.
Quizás una explicación más práctica es que es simplemente la forma en que nuestro cerebro clasifica 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 organizada con una jerarquía en mente siempre será más efectiva en la comunicación que la información no organizada..
Considere 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 aplicado al texto. La información en cada uno de los dos ejemplos no es diferente, pero la forma en que se ha dividido 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 lo que queremos decir. . La proximidad, la escala y la similitud del formato de texto permiten al lector organizar el ejemplo inferior en títulos y párrafos. La jerarquía otorga a los títulos un mayor significado que la otra información y facilita el escaneo..
Bien, entonces todo esto es bastante básico, ¿verdad? Analicemos algunos ejemplos más profundos de cómo puede aplicar esto muy BASIC principio a algunos muy sofisticado diseños:
Comprender que la jerarquía visual es importante está bien, pero ¿cómo lo crea realmente un diseñador? Las "herramientas" que veremos son tan simples como el juego de herramientas de un carpintero (martillo, clavo, sierra, etc.) Lo que cuenta con ellas es lo que haces con ellas.!
Los objetos que son más grandes demandan más atención. Usar el tamaño como una herramienta jerárquica es una forma efectiva de guiar el ojo de un espectador a una parte 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 tamaño con importancia en un diseño. Los elementos más importantes 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 de BIG, tipo negrita agrega un nivel de orden a este diseño, por lo demás caótico. El ojo debería moverse naturalmente de los elementos grandes a los elementos más pequeños..
El color es una herramienta interesante porque puede funcionar tanto como una herramienta de organización como una herramienta de personalidad. Los colores atrevidos y contrastantes en un elemento particular de un sitio web requerirán atención (como con los botones o mensajes de error o hipervínculos). Cuando se utiliza como personalidad herramienta, el color puede extenderse más allá en tipos más sofisticados de jerarquía; Usar colores exuberantes y reconfortantes puede traer un atractivo emocional a una página. El color puede afectar todo, desde una marca de sitios web (es decir, CocaCola Red) hasta el simbolismo (es decir, colores frescos y tenues). Las aplicaciones avanzadas de color pueden incluso usarse para "clasificar" 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, por lo que es fácil encontrar un tipo particular de información basada en la clave de color.
El contraste se muestra relativamente importante. Los cambios dramáticos en el tamaño del texto o el color transmitirán un mensaje de que algo es diferente y requiere atención. Cambiar de un color de fondo claro a un color de fondo oscuro puede separar rápidamente el contenido central de una página del pie de página.
El contraste entre la luz, la sección de encabezado aireada y el oscuro pie de página crea una jerarquía distinta de información.
La alineación crea 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 roles jerárquicos más complejos. Considere, por ejemplo, el poder de la información ubicada en la parte superior derecha de una página web. Debido a que los usuarios en general esperan que la información en esa parte de la pantalla se asocie con perfiles, cuentas, carritos de compras, etc., le da a todos los lugares en esa área un sentido de "oficial". La alineación también puede provocar interés si se usa de maneras únicas, como en los siguientes ejemplos:
La plantilla de Stuff utiliza un sistema único de alineación horizontal para separar la marca y la navegación del contenido de las publicaciones del blog.
La plantilla Flex utiliza un diseño inspirado en la cuadrícula para desarrollar un interés visual, así como una jerarquía visual basada en taxonomía.
La repetición asigna un significado relativo a los elementos; Si todo el texto de "párrafo" es gris, cuando un usuario ve un nuevo bloque de texto gris, puede asumir que es otro párrafo básico; cuando ese mismo usuario encuentra un enlace azul o un título negro, puede asumir con seguridad que es diferente y único del texto gris.
El sitio de Virgin crea elementos repetitivos como el texto de un párrafo, luego rompe la repetición cuando quiere llamar la atención (como el texto de comillas rojas).
La proximidad separa los elementos entre sí y crea sub-jerarquías. Dentro de una página puede haber widgets separados por espacio; dentro de esos widgets hay una nueva jerarquía de título, subtítulo y contenido. La proximidad también es la forma más rápida de asociar contenido similar. En el siguiente ejemplo, es fácil encontrar ciertos tipos de contenido simplemente en función de su proximidad entre ellos.
Los sitios de Tuts + realmente hacen esto muy bien (¡no para tocar nuestro propio cuerno!). La columna de "contenido" de la izquierda está claramente separada en la proximidad del espacio del widget de la barra lateral. Además, los metadatos dentro de una publicación de blog en particular se colocan muy cerca de esa publicación y más alejados de otras publicaciones, lo que refuerza el sentido de "pertenencia".
Empaquetar los elementos densamente en un espacio hace que se sienta "pesado" y desordenado; Cuando los elementos se espacian demasiado, pueden perder las relaciones entre sí. Cuando una página está diseñada "a la perfección", el ojo reconocerá fácilmente cuándo están relacionados los elementos y cuándo no..
Al espaciar los elementos y mantener un montón de espacios en blanco en la página, este diseño hace que sea más fácil para las personas moverse y encontrar las cajas de contenido pequeñas y densamente empaquetadas..
Tal vez la herramienta más abierta en el cuadro de herramientas de jerarquistas, el estilo puede usarse para impartir una forma de jerarquía que abarque y trascienda a 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, naturalmente, jugará 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 usar. Al igual que un carpintero que corta un dedo en una sierra de cinta, un diseñador puede engañar fácilmente a las personas al enfatizar demasiado ciertos elementos a través del estilo. Imagine un elemento de sitio con un diseño muy texturizado y con gran 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. Sea considerado con el impacto en un diseño general cuando elija agregar un estilo adicional y pulir 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 originalmente diseñados sobre el forraje de interfaz de usuario estándar es lo que le da a todo el sentido de diseño una jerarquía intencional. Jeff logra agregar el estilo suficiente para hacer que su sitio se sienta personal sin que se vaya por la borda.
La buena jerarquía visual no tiene que ver con los gráficos salvajes y locos o los nuevos filtros de photoshop, sino con la organización de la información de una manera que sea utilizable, accesible y lógica para el visitante del sitio todos los días.
Como sugerí en la sección anterior, es importante tener en cuenta que la jerarquía se puede usar tanto para el bien como para el mal. ¡Piense en todos los molestos anuncios en Flash, ventanas emergentes, banners con brillo, etc. con los que la web ha estado plagada a lo largo de los años! Si bien estos anuncios logran atraer la atención, al final fallan al propietario 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 de tal manera que ciertas partes clave de información sean casi imposibles de encontrar, el diseñador habrá fracasado en su tarea. La buena jerarquía visual no tiene que ver con los gráficos salvajes y locos o los nuevos filtros de Photoshop, sino con la organización de la información de una manera que sea útil, accesible y lógica para el visitante del sitio.
?Los diseñadores pueden crear la normalidad a partir del caos; pueden comunicar ideas de forma clara a través de la organización y manipulación de palabras e imágenes.? --Jeffery Veen, El arte y la ciencia del diseño web
Jeffrey Veen escribió esas palabras en 2001, pero aún hoy tienen mucho poder 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 estado estancados con un verdadero tsunami de información visual durante las últimas dos décadas; como resultado, las personas hoy en día son hipersensibles a la jerarquía visual. Este es especialmente el caso en la web donde los estudios han demostrado que los internautas habituales han aprendido a "escanear" el contenido de forma innata; buscar automáticamente información que sea relevante para sus intereses y descartar / ignorar información que no lo hace.
Debido a esto, convertirse en un maestro de la jerarquía visual no es opcional, es obligatorio. A medida que las plataformas de navegación web típicas se expanden del monitor tradicional a teléfonos, tabletas e incluso televisores, es cada vez más importante que usemos sistemas visuales sólidos y claros para comunicarnos con los internautas..
Para concluir, me gustaría terminar con un ejercicio muy simple. Como ejemplo, usaremos un sitio web que usted frecuenta, o un proyecto en el que ha trabajado recientemente; El ejercicio va así:
En la mayoría de los casos, la respuesta incluirá matices de "no". Hay muchas razones para esto: las demandas de los clientes, los diseñadores sin experiencia, el diseño por comité o otras cien razones que probablemente haya leído. En algunos casos, el diseñador puede querer engañar al espectador (considere un sitio "gratuito" que está tratando de guiar a los usuarios hacia el contenido pagado). Cualquiera sea la razón, entender la jerarquía visual y tratar de interpretarla es una forma de mejorar la forma en que se ve el diseño web desde una perspectiva completamente nueva. Esperemos que también ayude a informar su propio trabajo.!
Accentsconagua