La similitud es un poderoso mecanismo de comunicación. ? Su poder proviene del hecho de que es la contraparte del elemento más básico del significado: el contraste. En la segunda parte de nuestra serie Principios Gestalt, analizamos el principio de similitud y cómo se puede aplicar como mecanismo de comunicación en el diseño web.
Los elementos pueden considerarse similares y por tanto relacionados entre sí de diversas formas. ¿Dar algunos ejemplos? , como color, tamaño, forma, textura, tamaño, dirección, etc. Para ilustrar estos patrones de similitud, hagamos algunas evaluaciones básicas:
P: ¿Están relacionados entre sí los elementos mostrados arriba?
Debido a que hay poca coherencia entre los elementos de la imagen de arriba, es casi imposible que alguien note similitudes significativas. Por lo tanto, no se considera que estos elementos estén relacionados entre sí de alguna manera.
Algunas similitudes más fáciles de entender:
P: ¿Qué elementos de la imagen de arriba parecen estar relacionados entre sí? ¿Cómo podría ser?
Muchos de los elementos anteriores son diferentes, pero también hay similitudes. Si se les pidiera clasificar los elementos anteriores, casi todos dirían que la forma es la clasificación más comunicativa. Por la forma, parece que los cuadrados están relacionados entre sí y los círculos están relacionados entre sí. Cabe señalar que en este ejemplo, es la forma, no la proximidad o el tamaño, lo que proporciona la comunicación más fuerte.
Cambiémoslo un poco y veamos cómo se guía nuestra cognición.
P: ¿Qué elementos de la imagen de arriba parecen estar relacionados entre sí? ¿Cómo podría ser?
Probablemente hayas establecido que los cuadrados grandes están relacionados entre sí y los cuadrados pequeños están relacionados entre sí. El tamaño es una forma de proporcionar contraste, por lo que la coherencia en el tamaño se puede utilizar para expresar relaciones.
Eche un vistazo rápido a las imágenes a continuación y luego lea las preguntas a continuación. ...
P: ¿Qué elementos de la imagen de arriba parecen estar relacionados entre sí? ¿Cómo podría ser?
La similitud de color (o contraste constante) es la forma más poderosa de expresar esta relación. También es la primera característica que nuestro cerebro percibe al comprender nuestro entorno. Los patrones y el desorden pueden enmascarar el tamaño y la forma, y estas características pueden cambiar sólo ligeramente, pero el color puede penetrar efectivamente estos elementos. Debido a este hecho (o quizás a causa de él), el color se utiliza a menudo como una poderosa herramienta para transmitir peligro en la naturaleza. A lo largo de la historia, una comprensión clara de la comunicación del color ha sido fundamental para la supervivencia de los humanos y otros seres vivos.
Bien, vayamos más allá de la simple supervivencia y usemos este principio para discutir cuestiones más prácticas sobre la efectividad del diseño web.
Al diseñar páginas web y aplicaciones, uno de los trabajos de los diseñadores es proporcionar pistas visuales sobre qué elementos de la interfaz están relacionados entre sí. Esto se hace para que los usuarios finales o visitantes de estas páginas o aplicaciones puedan percibir rápidamente la organización y comprender lo que los diseñadores han creado, y así entender cómo usarlos o interactuar con ellos.
Enlaces
Los enlaces permiten que las páginas web y las aplicaciones incorporen algunas interacciones básicas. Por lo tanto, deben distinguirse de otros elementos circundantes y, dependiendo del contexto relevante, deben tener algún grado de significado, obvio o ligeramente obvio. Pero dado que los enlaces * * * comparten una característica, normalmente deben ser similares entre sí (nuevamente, dependiendo del contexto).
En el ejemplo anterior, Douglas Bowman diseñó los enlaces en la copia del sitio web de Stopdesign en azul para contrastar con el gris general de la copia del texto. Aquellos de nosotros que podemos distinguir entre azul y gris nos daremos cuenta automáticamente de que todo el texto configurado en este estilo es texto de enlace, basado en el principio de similitud.
Pero no todos los enlaces deben utilizar un estilo similar para permanecer claros. En nuestra cognición, el principio de similitud tiene mucho que ver con el contexto.
Por ejemplo, el sitio web de AIGA utiliza una variedad de estilos y colores de enlaces, así como estilos de texto de enlaces, todos para propósitos específicos:
Aquí (arriba) podemos ver varios tipos diferentes de similitudes en el lugar de los enlaces de texto. Las diferencias de estilo transmiten diferencias de contexto, categoría o propósito. Los enlaces en la barra lateral son azules y están subrayados, lo que crea un contraste de color entre la barra lateral y el cuerpo principal (y un contraste más dramático de la diferencia de color cálido/frío). En el contenido principal, hay cuatro colores de enlaces. Palabras subrayadas y no subrayadas, fuentes regulares y cursivas, serif y sans serif, negrita y peso normal, todas las palabras en mayúsculas y mixtas.
Pero lo importante es que en este ejemplo, aunque hay muchos cambios en los colores y estilos de los enlaces, aún podemos percibir rápidamente las sugerencias de categoría:
Naranja, sin subrayado, negrita y El enlace en fuente serif es el título del artículo.
Los enlaces en gris claro, todo en mayúsculas y fuentes sans-serif subrayadas son categorías informativas.
Los enlaces de color marrón subrayados son personas o comentarios.
Los enlaces en gris oscuro, subrayados y en mayúsculas y minúsculas en el área gris claro son acciones dentro de la categoría del sitio (definida en esta área).
Todo es complejo y engorroso, pero aún hay un nivel de claridad en la comunicación. Con un poco de expansión y consideración, estoy seguro de que puedes pensar en varias permutaciones del principio de similitud aplicado a los enlaces... y otras cosas. Estoy seguro de que puedes pensar en varias permutaciones y combinaciones de enlaces que aplican el principio de similitud... y otras cosas.
Contenido de la páginaContenido de la página
Al diseñar contenido web y su estilo, una de las tareas más importantes es mostrar las relaciones del contenido, es decir, cómo algunos componentes del contenido se relacionan entre sí y menos. por lo que Asociación con otros elementos de contenido. Esto se puede utilizar para mejorar la jerarquía del contenido, reemplazar la estructura visual con una estructura implícita y transmitir contexto.
En el ejemplo anterior, la aplicación web proporcionada por 37signals se muestra aquí con un tema visual consistente. Lo que más destacó fue el ícono con su forma y paleta de colores únicas, por lo que inmediatamente nos dimos cuenta de que estos cuatro datos sobre su aplicación web estaban relacionados de alguna manera. Si leemos uno de los ejemplos, como el primer ejemplo de Basecamp, podemos asumir inmediatamente que todos los demás proyectos diseñados y configurados de esta manera también son aplicaciones web proporcionadas por 37signals. Aquí, coherencia de estilo y presentación significa coherencia de categoría o contexto.
Tenga en cuenta que esta similitud se ve reforzada por el fuerte contraste entre la información de la aplicación y el contenido circundante. Debido a este contraste y similitud, no hay necesidad de "aislar" estos cuatro elementos del contenido circundante para mostrar su relación.
En el ejemplo anterior, UX Magazine (¿ya no existe?) utiliza el principio de similitud para comunicar que todo el contenido que aparece en el cuadro gris cuadrado es una referencia (enlace) al artículo. La experiencia del usuario refuerza aún más la impresión de que estos elementos se comportan de manera consistente cuando se pasa el cursor sobre ellos (abajo).
Organización
La similitud perceptiva no solo nos ayuda a formular hipótesis sobre qué elementos de un diseño están relacionados entre sí, sino que también sugiere una estructura de patrón basada en la apariencia, como se muestra a continuación:
p>El ejemplo anterior muestra una cuadrícula de elementos sin una estructura de partición obvia. Todos los elementos parecen ser igualmente relevantes.
El ejemplo anterior muestra claramente que esta estructura es cilíndrica. Debido a que las formas son consistentes, el color es la característica comunicativa aquí.
En el ejemplo anterior, es obvio que los elementos están organizados en filas.
El ejemplo anterior muestra elementos divididos en dos categorías, donde los cuadrados grises están relacionados y los cuadrados marrones están relacionados (similar al ejemplo de AIGA anterior). Aunque este ejemplo tiene exactamente la misma estructura física que el ejemplo anterior, las dos partes son claramente diferentes.
En estos ejemplos, el color (o más básicamente, el contraste) se utiliza para sugerir relaciones y crear estructura. Estos ejemplos proporcionan una experiencia clara para los diseñadores web. Entre estas experiencias está el hecho de que la estructura física no es necesaria para describir la relación entre la estructura de la página y el contenido. En cambio, la estructura puede sugerirse claramente simplemente por la coherencia o el contraste en el estilo y el tamaño del contenido. Creo que se pueden inferir muchas lecciones de estos sencillos ejemplos.
Complejidad más simple Complejidad más simple
Como todas las ideas o principios básicos, este es muy simple. Pero este simple principio tiene una profundidad increíble. De hecho, hemos descubierto uno de los peligros de los conceptos simples: si simplemente extrapolamos a partir de ideas simples o principios básicos, nuestros esfuerzos siempre serán una mala mecánica y resultados poco creativos.
Si lees mis artículos con frecuencia, sabrás que dedico mucho tiempo a lo básico. Sin embargo, no confunda su interés en los fundamentos con la necesidad de mantener el diseño básico o simplificado. El propósito de los fundamentos es abrir la puerta a explorar la profundidad conceptual y percibir detalles profundos. Sin una comprensión profunda de (muchos) principios fundamentales, los diseñadores nunca podrán profundizar en estas áreas. ? Estudia mucho.
La siguiente parte de esta serie presentará algunos principios que definen cómo la estructura física de la página que diseñamos crea comunicación directa e indirecta.
Principio de percepción gestalt-1: relación figura-fondo
¿Texto original? Principio Gestalt 1: Figura/Fondo