escucha la versión de audio de este artículo
el espacio negativo ha sido durante mucho tiempo un elemento básico del buen diseño. Dejar espacio en blanco alrededor de los elementos de un diseño es lo primero que suele venir a la mente. Pero luego hay diseños que utilizan ese espacio en blanco para inferir un elemento que no está realmente allí (la flecha oculta entre la E y la X en el logotipo de FedEx viene inmediatamente a la mente como un ejemplo).
el cerebro humano es excepcionalmente bueno para llenar los espacios en blanco en una imagen y crear un todo que es mayor que la suma de sus partes. Es por eso que vemos caras en cosas como hojas de árboles o grietas en las aceras.
Este principio es una de las ideas subyacentes más importantes detrás de los principios gestalt de la percepción visual., La propuesta temprana más influyente escrita sobre la teoría fue publicada por Max Wertheimer en sus leyes Gestalt de 1923 sobre la organización perceptual, aunque la discusión de Wolfgang Köhler de 1920 sobre la Gestalten física también contiene muchas ideas influyentes sobre el tema.
independientemente de quién propuso por primera vez las ideas (ha habido ensayos que datan de 1890), los principios gestalt son un conjunto importante de ideas para que cualquier diseñador aprenda, y su implementación puede mejorar en gran medida no solo la estética de un diseño, sino también su funcionalidad y facilidad de uso.,
en los términos más simples, la teoría de la gestalt se basa en la idea de que el cerebro humano intentará simplificar y organizar imágenes complejas o diseños que consisten en muchos elementos, organizando subconscientemente las partes en un sistema organizado que crea un todo, en lugar de solo una serie de elementos dispares. Nuestros cerebros están construidos para ver la estructura y los patrones para que podamos comprender mejor el entorno en el que vivimos.,
Hay seis principios individuales comúnmente asociados con la teoría de la gestalt: similitud, continuación, cierre, proximidad, figura/suelo y simetría & orden (también llamado prägnanz). También hay algunos principios adicionales, más nuevos, a veces asociados con la gestalt, como el destino común.
similitud
es la naturaleza humana agrupar cosas similares. En gestalt, elementos similares se agrupan visualmente, independientemente de su proximidad entre sí. Se pueden agrupar por color, forma o tamaño., La similitud se puede usar para unir elementos que podrían no estar uno al lado del otro en un diseño.
Por supuesto, puede hacer que las cosas sean diferentes si desea que se destaquen entre la multitud., Es por eso que los botones para llamadas a la acción a menudo se diseñan en un color diferente que el resto de una página, para que se destaquen y atraigan la atención del visitante hacia la acción deseada.
en el diseño de UX, el uso de similitud deja claro a sus visitantes qué elementos son iguales. Por ejemplo, en una lista de características que utiliza elementos de diseño repetitivos (como un icono acompañado de 3-4 líneas de texto), el principio de similitud haría que sea fácil de escanear a través de ellos., Por el contrario, cambiar los elementos de diseño para las características que desea resaltar los hace destacar y les da más importancia en la percepción del visitante.
incluso las cosas tan simples como asegurarse de que los enlaces a lo largo de un diseño tengan el mismo formato se basan en el principio de similitud en la forma en que sus visitantes percibirán la organización y la estructura de su sitio.
continuación
la Ley de continuidad postula que el ojo humano seguirá el camino más suave al ver las líneas, independientemente de cómo se dibujaron realmente las líneas.,
Esta continuación puede ser una herramienta valiosa cuando el objetivo es guiar el ojo de un visitante en una dirección determinada. Seguirán el camino más simple en la página, así que asegúrese de que las partes más vitales que deben ver caen dentro de ese camino.,
dado que el ojo sigue naturalmente una línea, colocar elementos en una serie en una línea atraerá naturalmente el ojo de un elemento al siguiente. Los deslizadores horizontales son un ejemplo, al igual que los listados de productos relacionados en sitios como Amazon.
Closure
Closure es uno de los principios gestalt más cool y uno que ya mencioné al principio de esta pieza. Es la idea de que tu cerebro rellene las partes faltantes de un diseño o imagen para crear un todo.
en su forma más simple, el principio de cierre permite que su ojo siga algo como una línea punteada hasta su final., Pero a menudo se ven aplicaciones más complejas en logotipos, como el del Fondo Mundial para la naturaleza. Faltan grandes trozos del contorno del panda, pero tu cerebro no tiene problemas para rellenar las secciones que faltan para ver al animal entero.
El cierre se usa a menudo en el diseño de logotipos, con otros ejemplos, incluidos los de USA Network, NBC, Sun Microsystems e incluso Adobe.
otro ejemplo muy importante de cierre en el trabajo en UX y diseño de interfaz de usuario es cuando se muestra una imagen parcial que se desvanece de la pantalla del usuario con el fin de mostrarles que hay más que se encuentra si deslizan hacia la izquierda o la derecha. Sin una imagen parcial, es decir,,, si solo se muestran imágenes completas, el cerebro no interpreta inmediatamente que podría haber más para ser visto, y por lo tanto su usuario es menos probable que se desplace (ya que el cierre ya es evidente).
Proximity
Proximity se refiere a lo cerca que están los elementos entre sí. Las relaciones de proximidad más fuertes son aquellas entre sujetos superpuestos, pero simplemente agrupar objetos en una sola área también puede tener un fuerte efecto de proximidad.
lo contrario también es cierto, por supuesto., Al colocar espacio entre los elementos, puede agregar separación incluso cuando sus otras características son las mismas.
Tome este grupo de círculos, por ejemplo:
en el diseño de UX, la proximidad se usa con mayor frecuencia para que los usuarios agrupen ciertas cosas sin el uso de cosas como bordes duros. Al poner las cosas más juntas, con espacio entre cada grupo, el espectador captará inmediatamente la organización y la estructura que desea que perciban.,
figura / Tierra
el principio figura/tierra es similar al principio de cierre en que se aprovecha de la forma en que el cerebro procesa el espacio negativo. Probablemente haya visto ejemplos de este principio flotando en memes en las redes sociales o como parte de logotipos (como el logotipo de FedEx ya mencionado).
Su cerebro distinguirá entre los objetos que considera que están en primer plano de una imagen (la figura o punto focal) y el fondo (el área sobre la que descansan las figuras)., Donde las cosas se ponen interesantes es cuando el primer plano y el fondo realmente contienen dos imágenes distintas, como esta:
un ejemplo más simple se puede ver con esta imagen, de dos caras creando un candelabro o jarrón entre ellas:
en términos generales, su cerebro interpretará el área más grande de una imagen como el suelo y la más pequeña como la figura., Como se muestra en la imagen de arriba, sin embargo, se puede ver que los colores más claros y oscuros pueden influir en lo que se ve como la figura y lo que se ve como el suelo.
el principio figura / suelo puede ser muy útil cuando los diseñadores de productos desean resaltar un punto focal, particularmente cuando está activo o en uso, por ejemplo, cuando aparece una ventana modal y el resto del sitio se desvanece en el fondo, o cuando se hace clic en una barra de búsqueda y se aumenta el contraste entre ella y el resto del sitio.,
simetría y orden
La Ley de simetría y orden también se conoce como prägnanz, la palabra alemana para «buena figura».»Lo que este principio dice es que tu cerebro percibirá formas ambiguas de la manera más simple posible. Por ejemplo, una versión monocromática del logotipo Olímpico se ve como una serie de círculos superpuestos en lugar de una colección de líneas curvas.,
Este es otro buen ejemplo del principio de diseño gestalt «prägnanz»:
su cerebro interpretará la imagen de la izquierda como un rectángulo, un círculo y un triángulo, incluso cuando los contornos de cada uno estén incompletos porque son formas más simples que la imagen general.
destino común
aunque el destino común no se incluyó originalmente en la teoría de la gestalt, desde entonces se ha añadido. En el diseño de UX, su utilidad no puede pasarse por alto., Este principio establece que las personas agruparán cosas que apunten o se muevan en la misma dirección.
en la naturaleza, vemos esto en cosas como bandadas de aves o bancos de peces. Se componen de un montón de elementos individuales, pero debido a que se mueven aparentemente como uno, nuestros cerebros los agrupan y los consideran un solo estímulo.
esto es muy útil en UX ya que los efectos animados se vuelven más frecuentes en el diseño moderno. Tenga en cuenta que los elementos en realidad no tienen que moverse para beneficiarse de este principio, pero tienen que dar la impresión de movimiento.
principios de Gestalt en el diseño de UX
al igual que con cualquier principio psicológico, aprender a incorporar los principios de percepción visual de gestalt en su trabajo de diseño puede mejorar en gran medida la experiencia del usuario., Comprender cómo funciona el cerebro humano y luego explotar las tendencias naturales de una persona crea una interacción más fluida que hace que el Usuario se sienta cómodo en un sitio web, incluso si es su primera visita.
Los principios de Gestalt son relativamente fáciles de incorporar en casi cualquier diseño y pueden elevar rápidamente un diseño que parece fortuito o como si estuviera luchando por la atención de un usuario a uno que ofrece una interacción perfecta y natural que guía a los usuarios hacia la acción que desea que tomen.