.png)
Utilizando los principios de la Gestalt para interacciones naturales
Gestalt es un término utilizado en Psicología que expresa la idea de que la totalidad de algo es más importante para nuestra comprensión de las partes individuales. Los principios de la Gestalt describen la forma en que nuestra mente interpreta los elementos visuales. Los principios que encontré más útiles en el día a día son:
- - Similitud.
- - Cercamiento.
- - Continuación.
- - Cierre.
- - Proximidad.
- - Figura - Fondo.
Vamos a ver algunos ejemplos de cada principio y desglosaremos cómo se comunica en la manera de interactuar con una interfaz.
Similitud
Se obtiene al percibir los objetos que son similares, formar parte de un grupo o un patrón.
Puedes ver la similitud que se utiliza en la obra "Noche estrellada" de Van Gogh. Somos capaces de distinguir las estrellas del cielo nocturno, debido a dos atributos contrastantes:
Los orbes circulares que percibimos como estrellas son todas del mismo color, amarillo.
La dirección de las pinceladas que conforman las estrellas todas se mueven en la misma dirección circular.
Echemos un vistazo a un ejemplo de similitud utilizado en una interfaz. En este ejemplo de Tumblr, percibimos los enlaces, representados por iconos, a cada acto como un enlace para crear una entrada en el blog.
¿Cuáles son las similitudes?
- Cada opción está representada por un icono con el texto debajo.
- Cada icono y el texto debajo del icono son del mismo tamaño.
- Los iconos se distribuyen de manera uniforme en el espacio, cada una equiparación prevista.
- Como usuario, sabemos que cualquiera de estos iconos representan un medio para un final similar - la creación de una nueva entrada en el blog.
- Sabemos exactamente dónde ir, o qué elementos de la interfaz de usuario buscar cuando ocupamos crear una nueva entrada de blog.
Cercamiento
Cosas que parecen tener una frontera alrededor de ellas son percibidas al agruparse, y por lo tanto, relacionadas.
Este ejemplo de un mensaje de Facebook cuenta con 3 instancias de cercamiento que ofrece la claridad de esta interfaz.
El segundo recinto es la representación del enlace dentro del mensaje. La foto seguida por el título y la descripción que parece estar agrupada, y por lo tanto relacionados.
El tercer recinto es el área en la parte inferior del post. Todo lo relacionado con la interacción social está encerrado dentro de un fondo azul claro. Como usuario, esto me permite saber exactamente cómo y dónde interactuar con este post.
Continuación
El ojo crea un impulso, ya que está obligado a moverse a través de un objeto y continuar a otro.
Aquí hay una captura de pantalla de Google Maps para ir a pie. En lugar de una serie de puntos azules, percibimos esto como una sola línea.
También entendemos que debemos caminar físicamente en la dirección de esta "línea". Nada en la interfaz nos dice explícitamente que la línea de puntos indica la dirección. Un pequeño icono de una persona que camina y los puntos azules crean la idea de impulso y dirección.
Otra aplicación común de continuación, es la línea de tiempo de un reproductor de música. Esta línea representa la duración de la pista. A medida que la pista se reproduce, el color de la línea cambia.
El segundo color es percibido como una segunda línea. Como esa línea crece, percibimos el paso del tiempo. No esperamos que la segunda línea continúe más allá del punto final de la primera línea.
Esto nos da el entendimiento que cuando la segunda línea alcanza el final de la primera línea, la pista ha terminado. No imaginas que la segunda línea podría extenderse más allá de la primera.
La interfaz no necesita ofrecer ayuda en forma de "sustantivos" visuales (por ejemplo, una flecha que te indique la duración o el tiempo) porque los "verbos" visuales (por ejemplo, la animación / interacción cuando se reproduce la pista) enseña a los usuarios muy rápidamente cuándo la pista comienza y anticipar cuándo termina.
Cierre
Cierre
Cuando un objeto está incompleto, la mente percibe el objeto completo llenando mentalmente la información.
Echa un vistazo a el icono Notificaciones en la interfaz de Twitter. Cuando tienes una notificación, un número encerrado en un cuadrado se coloca sobre el icono.
Veamos otro ejemplo de cierre que se utiliza para completar una interacción. En la tienda online de Urban Outfitters, observe lo que sucede cuando se agrega un elemento a mi "carrito de compras".
Toda esta información se entiende sin tener que ir a la página del carrito de compras.
Proximidad (o agrupación)
Cuando los elementos están muy juntos, percibimos que forman parte de un grupo.
Echemos un vistazo a la información de un perfil de Twitter:
El avatar, la foto de la portada, el nombre para mostrar y el nombre de usuario se colocan muy juntos. Debido a que están muy juntas espacialmente, leemos esta información como un grupo, y por lo tanto, relacionada.
Las estadísticas asociadas a la cuenta de Twitter se encuentran unos pocos píxeles por debajo de la agrupación de información personal.
La línea rosa en esta imagen destaca el espacio negativo que separa las dos agrupaciones y crea la frontera que separa sus proximidades.
Podemos ver otro ejemplo de Twitter que utiliza el mismo principio:
Los elementos que le permiten interactuar con este tuit están muy cerca, y se encuentran más abajo, verticalmente, que el resto de los contenidos y elementos en el recinto.
Las áreas destacadas exponen las agrupaciones creadas por el diseño. Se puede ver cómo la proximidad de un número a sus respectivos iconos de interacción indica la relación entre el número y el icono.
Una nota sobre el espacio en blanco
Es posible que escuche diseñadores dicen cosas como, "necesitamos más espacio en blanco" de vez en cuando. El espacio en blanco es un término sinónimo de "espacio negativo".
En muchos casos (no en todos), el espacio en blanco se utiliza como una especie de recinto. El espacio negativo actúa como una frontera invisible. Al hacer esto, lo que realmente define a una región de la proximidad, lo que añade significado a algo que de otro modo podrían parecer demasiado "ocupado" o desordenado de darle sentido.
Lo realmente interesante es que este significado se crea sin tener que añadir líneas, colores u otros elementos visuales. Las áreas en las que están ausentes los elementos visuales (el espacio en blanco o negativo) en realidad sólo crea tanto significado que la presencia de elementos visuales (el espacio positivo).
Esta es la misma idea que los dígitos de agrupación de un número de teléfono. Es más fácil de leer y recordar si se agrupan los números. La agrupación se visualizó añadiendo espacio negativo entre los números.
Por ejemplo, 555-555-5555 vs 5555555555
Figura - Fondo
Al percibir ciertos objetos estando en el primer plano y otros objetos como en el fondo.
Un ejemplo común de figura-fondo es la interacción de la apertura de una ventana modal.
+
En el ejemplo del New York Times, la relación Figura-Fondo es manipulada por:
La relación figura-fondo nos permite comprender esta interacción. Percibes el modal para estar en el primer plano y la página principal del New York Times en el fondo. Esto nos dice que no hemos salido de la página en la que estábamos porque todavía podemos ver "por debajo" del fondo blanco transparente. Sin embargo, el contexto ha cambiado, ya que ahora parece haber pasado a un segundo plano, y los nuevos elementos se encuentran en el primer plano.
Una nota acerca de los estilos mínimos
Observe los estilos visuales mínimos aplicados a la interfaz de nuestro ejemplo New York Times. El borde alrededor de la entrada modal es de aproximadamente 1 píxel de ancho, la sombra tiene un margen muy limitado y un color claro para no crear demasiado contraste.
Al crear algo que sea mínimo, (que es diferente del minimalismo), queremos saber: ¿cuál es la menor cantidad de detalle que se puede agregar para crear el impacto necesario?
Veamos otro ejemplo de cierre que se utiliza para completar una interacción. En la tienda online de Urban Outfitters, observe lo que sucede cuando se agrega un elemento a mi "carrito de compras".
En esta interacción, una vez que se hace clic en el botón "Añadir a su bolsa", algunas cosas suceden:
- El texto dentro del botón cambia a "¡Añadido!".
- Un número aparece junto al icono del carrito de la compra en la navegación.
- Una ventana modal se desliza hacia abajo desde el icono del carrito de compras, que confirma, una vez más, el artículo se ha añadido a mi cesta de la compra
+
El hecho de que el artículo se ha añadido al carrito de la compra está implícito a través de la interfaz. Nosotros no fuimos a mi página de carrito de compras para ver los artículos en ella. Asimismo, no hay que utilizar un arrastrar y soltar interacción (que a menudo es más trabajo para el usuario) para crear esta tranquilidad. Recibimos suficiente información visual en la interfaz para asumir que el artículo ha sido añadido.Toda esta información se entiende sin tener que ir a la página del carrito de compras.
Proximidad (o agrupación)
Cuando los elementos están muy juntos, percibimos que forman parte de un grupo.
Echemos un vistazo a la información de un perfil de Twitter:
Las estadísticas asociadas a la cuenta de Twitter se encuentran unos pocos píxeles por debajo de la agrupación de información personal.
La línea rosa en esta imagen destaca el espacio negativo que separa las dos agrupaciones y crea la frontera que separa sus proximidades.
Podemos ver otro ejemplo de Twitter que utiliza el mismo principio:
+
+
+
Las áreas destacadas exponen las agrupaciones creadas por el diseño. Se puede ver cómo la proximidad de un número a sus respectivos iconos de interacción indica la relación entre el número y el icono.
Una nota sobre el espacio en blanco
Es posible que escuche diseñadores dicen cosas como, "necesitamos más espacio en blanco" de vez en cuando. El espacio en blanco es un término sinónimo de "espacio negativo".
En muchos casos (no en todos), el espacio en blanco se utiliza como una especie de recinto. El espacio negativo actúa como una frontera invisible. Al hacer esto, lo que realmente define a una región de la proximidad, lo que añade significado a algo que de otro modo podrían parecer demasiado "ocupado" o desordenado de darle sentido.
Lo realmente interesante es que este significado se crea sin tener que añadir líneas, colores u otros elementos visuales. Las áreas en las que están ausentes los elementos visuales (el espacio en blanco o negativo) en realidad sólo crea tanto significado que la presencia de elementos visuales (el espacio positivo).
Esta es la misma idea que los dígitos de agrupación de un número de teléfono. Es más fácil de leer y recordar si se agrupan los números. La agrupación se visualizó añadiendo espacio negativo entre los números.
Por ejemplo, 555-555-5555 vs 5555555555
Figura - Fondo
Al percibir ciertos objetos estando en el primer plano y otros objetos como en el fondo.
Un ejemplo común de figura-fondo es la interacción de la apertura de una ventana modal.
+
- Un blanco, fondo transparente, que suaviza la apariencia del contenido original que estaba centrado.
- Un borde y una sombra frontera alrededor de la caja que contiene el registro en los campos.
La relación figura-fondo nos permite comprender esta interacción. Percibes el modal para estar en el primer plano y la página principal del New York Times en el fondo. Esto nos dice que no hemos salido de la página en la que estábamos porque todavía podemos ver "por debajo" del fondo blanco transparente. Sin embargo, el contexto ha cambiado, ya que ahora parece haber pasado a un segundo plano, y los nuevos elementos se encuentran en el primer plano.
Una nota acerca de los estilos mínimos
Observe los estilos visuales mínimos aplicados a la interfaz de nuestro ejemplo New York Times. El borde alrededor de la entrada modal es de aproximadamente 1 píxel de ancho, la sombra tiene un margen muy limitado y un color claro para no crear demasiado contraste.
Al crear algo que sea mínimo, (que es diferente del minimalismo), queremos saber: ¿cuál es la menor cantidad de detalle que se puede agregar para crear el impacto necesario?
El último principio de Deiter Rams para un buen diseño, afirma que el diseño "es tan poco diseño como sea posible". La comprensión de cómo los principios de la Gestalt se están aplicado nos permite crear el significado esencial en nuestros productos sin exceso de diseño, estilos, o pasos.
Separado
Una interfaz debe ser más que una colección de interacciones aisladas. Nuestras mentes quieren percibir que las interacciones más pequeñas están relacionados unos con otros y trabajar juntos para completar una tarea grande
Si no somos capaces de percibir esto, la falta de conexión deja espacio para la confusión. La gente tiene que ver que todo se integra de alguna manera en el objetivo más grande en la mano.
Puedes usar estos principios para construir una interfaz más intuitiva, identificar los problemas y encontrar soluciones en una interfaz existente.
Fuente:
Using Gestalt Principles for Natural Interactions
Separado
Una interfaz debe ser más que una colección de interacciones aisladas. Nuestras mentes quieren percibir que las interacciones más pequeñas están relacionados unos con otros y trabajar juntos para completar una tarea grande
Si no somos capaces de percibir esto, la falta de conexión deja espacio para la confusión. La gente tiene que ver que todo se integra de alguna manera en el objetivo más grande en la mano.
Puedes usar estos principios para construir una interfaz más intuitiva, identificar los problemas y encontrar soluciones en una interfaz existente.
Fuente:
Using Gestalt Principles for Natural Interactions
![Las batallas en el desierto [Ensayo]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUe-zpJfpm_xwSqpyaI6RukGmz8EJPJgFYr60maW3vnb3IcSktto51U9gGvYQLs5RdCE0YEnYESFa_ow6sprklEmDB3okNe_xa6r0ExzR_7WId_vpFFiWaPcNQP-GMud62wMAe36NACbM/s72-c/413.jpg)
