Principios de Gestalt y UX

Gestalt: es una corriente psicológica que nació en Alemania a inicios del siglo 20, y explica principios de cómo el humano percibe su entorno.

**Principio de semejanza: **
Tendemos a agrupar elementos que son similares aunque no estén juntos. Podemos relacionar forma, tamaño, color.

**Principio de proximidad: **
Si vemos elementos alineados de forma ordenada y en un mismo espacio, los tendemos a ver como un grupo.

**Principio de continuidad: **
Si vemos elemenos dispuestos en línea o curva de forma ordenada, los vamos a ver como si estuvieran agrupados.

Relación de figura-fondo:
Tenemos una figura o el foco principal de la atención del usuario, y el fondo que lo percibimos pero no tiene la misma jerarquía o relevancia. Nos permite mostrar diferentes planos de profundidad y ordenar de manera jerárquica el contenido.

**Principio de cierre (o cerramiento): **
Cuando vemos una imagen incompleta, nuestro cerebro automáticamente la llena. Nos ayuda en iconografía.

Leyes de UX

Ley de Fitt:
Se parece al principio de proximidad. El tiempo que lleva llegar a un objetivo tiene que ver con el tamaño y la distancia del mismo. Por ejemplo: el boton Enviar de un formulario debe estar cerca de los demás elementos, para que el usuario sepa qué acción debe realizar.

Ley de Hick:
Cuantas más opciones tenga el usuario, más dificil le será tomar una desición.

Ley de Jakob:
A los usuarios les gusta usar cosas que ya saben usar y que ya sabe como van a funcionar. Podemos lograrlo usando mejores prácticas y estándares de la industria.

**Ley de miller: **
El ser humano puede recordar hasta 7 (±2) elementos en su memoria a corto plazo.

Principio de Semejanza, los teléfonos tienen la misma forma y se agrupan mentalmente

Principio de proximidad, los cuadros son parte de un mismo grupo por estar en un mismo espacio

Principio de continuidad, las características del producto se alinean verticalmente

Principio de cierre, icono de oreja incompleto

Ley de Fitt, botón correspondiente al contenido

Ley de Hick, solo 4 modelos como opción

Ley de Jakob, Botones menú hamburguesa muy usados en aplicaciones

Ley de Miller, una cuadrícula de 6 marcas

En este enlace pueden encontrar la traducción de los 19 posters que creó Jon Yablonski en el sitio Laws of UX.

Leyes Gestalt

Leyes de UX

**LEYES DE LA GESTALT **
-Principio de semejanza = agrupación de formas aunque no estén juntas
-Principio de proximidad = elementos alineados y organizados los tendemos a ver como un grupo
-Principio de continuidad = elementos alineados los vamos a ver agrupados
-Figura fondo = figura foco principal del usuario, el fondo no tiene la misma jerarquía
-Principio de cierre = cerebro llena automáticamente una figura incompleta
**LEYES DE UX **
-Ley de Fitt = Similar a proximidad, el tiempo que lleva llegar a un objetivo tiene que ver con el tamaño y la distancia del mismo. / Ejemplo: botón de enviar cerca de todo el contexto, el usuario sabe qué hacer después.
-Ley de Hick = cuando el usuario tiene más opciones más complejo es tomar una decisión.
-Ley de Jakob = usuarios les gusta usar cosas que ya saben usar.
-Ley de Miller = ser humano puede recordar 7 elementos en memoria a corto plazo, se recomienda presentar la información en conjuntos de 5, 7 o 9.

Encontré la mayoría en el feed principal de youtube. Hace poco hicieron una actualización al diseño y ahora muestran menos opciones de video en pantalla, a lo que deduzco que aplicaron bien la ley de Miller C:

Encontré que en la mayoría de los Layouts de Facebook aplican la Ley de Miller, y algunos principios como los de la imagen:

En el mundo del UX, existen varias leyes que nos ayudaran a crear mejores experiencias de usuario, la ley de Fitt, la ley de gick, la ley de Jakob y la ley de Miller.
La ley de Fitt, indica que el tiempo que lleva encontrar un objetivo se determina por la posición y el tamaño de donde se encuentran, es decir, que podremos crear relaciones entre elementos según sus distancias, entre mas cerca mas relación y entre más lejos menos relación.
La ley de hick, nos indica que el humano cumple mejor sus acciones si tiene que elegir entre menos acciones en su entorno, es decir, entre menos pasos tenga que realizar para cumpli un objetivo le será mucho más fácil cumplir con este
La ley de Jakob indica que a las personas tienen mayor preferencia entre elementos que ya le son conocidos, para esto podremos utilizar patrones de diseños comunes y conocer como funciona los sistemas de la industria en la actualidad.
La ley de Miller, indica que las personas solo pueden recordar máximo 7 acciones en su memoria de corto plazo.

Ley de Fitt: darle continuidad a la acción
Ley de Hick: no darle muchas opciones
Ley de Jakob: uso cotidiano como las luces de un semáforo (atención)

Resumen de Clase:

Principios de Gestalt

Principio de Semejanza: Los humanos tendemos a agrupar cosas por forma tamaño o color.

Principio de Proximidad: Cuando vemos elementos que están organizados de una manera ordenada y en un mismo espacio lo tendemos a ver como un grupo

Principio de Continuidad: Cuando vemos elementos que están ordenados en línea o curva, los vamos a ver como si estuvieran agrupados.

Relación Figura-Fondo: Nos permite mostrar de forma jerárquica el contenido, es decir si ponemos una figura circular sobre un fondo azul, el circulo es el de más relevancia.

Principio de Cierre: Cuando vemos una imagen incompleta, nuestro cerebro tiene a completarla, esto nos ayuda por ejemplo en iconografía para hacer síntesis de un elemento muy complejo.

Leyes de UX

Ley de Fitt: El tiempo que lleva llegar a un objetivo tiene que ver con el tamaño y la distancia del mismo. Por ejemplo si tenemos un formulario, el botón de enviar debe estar cerca a los demás elementos que le dan contexto para que el usuario sepa la acción que debe realizar.

Ley de Hick: Mientras más opciones tiene el usuario a elegir, más complejo y dificil será para ellos tomar una decisión, por ello debemos darle la minima cantidad de opciones.

Ley de Jakob: A los usuarios les gusta usar cosas que ya saben usar, para ello es bueno seguir estándares de la industria.

Ley de Miller: El humano solamente puede recordar 7 opciones ±2 a corto plazo, por ello es recomendable presentar nuestra información en conjuntos de 5,7 o 9.Principios de Gestalt

Según yo, ubique estos principios en la pantalla de entrada de twitch…

Ley de Fitt:
El tiempo necesario para alcanzar un objetivo con un movimiento rápido es una función del tamaño de dicho objetivo y de la distancia que hay que recorrer hasta él

Leyes de UX
1- Ley de Fitt: El tiempo de llegar un objetivo tiene que su tamaño y distancia.
2- Ley de Hick: Más opciones, más complejo tomar decisiones.
3- Ley de Jakob: Nos gusta usar cosas que ya sabemos usar.
4- Ley de Miller: Solo podemos recordar 7 elementos a corto plazo +2 / -2. Se recomienda presentar nuestros elementos entre 5, 7 y 9.

NOTAS:
GESTALT: corriente psicológica alemana del siglo XX —Explican mediante principios como el humano percibe su entorno.
PRINCIPIOS:
Semenjanza—> tendemos a agrupar elementos similares aunque no estén juntos. (forma, tamaño. Color)
Proximidad —> elementos que se encuentran ordenados o alineados tendemos a verlos como un grupo.
Continuidad —> elementos alineados uno detrás de otro de manera ordenada se perciben como un grupo
Relación figura-fondo—> la figura es la principal; fx resaltar lo mas importante|| ordenar de manera jerárquica
Principio de cierre— > el cerebro completa estructuras sin terminar: fx en iconografía.

LEYES DE UX
Ley de Fitt—> el tiempo que se lleva en llegar a un objetivo se relaciona con el tamaño o la distancia del mismo.
Ley de Hick—> mientras mas opciones mas complejo es tomar una decisión
Ley de jakob—> los usuarios se sienten cómodos al manejar información ya conocida o utilizar objetos que ya saben utilizar.
Ley de miller —> el ser humano recuerda 7 +/- 2 elementos en la memoria de corto plazo.

Hola, busqué también algunos principios de gestalt. Se acepta retro.

PRINCIPIOS DE UX

Ley de Fitt
El tiempo que lleva llegar a un objetivo es proporcional al tamaño y la distancia del mismo.

ley de Hick
Cuantas mas opciones tiene el usuario es mas difícil llegar a una decisión.

ley de Jackob
a los usuarios les gusta usar cosas que ya saben usar.

Ley de Miller
El ser humano solo puede recordar 7 elementos a corto plaso ±2

Apliqué las leyes de UX en un proyecto que realicé en equipo para mi universidad. http://equipofas1.fabricasoft.website/
Ley de Hick y Miller: Sólo son 5 opciones.

Ley de Miller: Resumen en 3 pasos del marco de trabajo.

Ley de Fitt: Resulta fácil para el usuario contactar.

Ley de Jakob: Navegación sencilla por los casos de éxito.

Con todo cariño, a mi me parece que la web de platzi y la app para móvil no sigue muchos de estos principios🥴

Espero un día poder contribuir algo a esta comunidad 💚

Podemos observar la semejanza y proximidad que maneja platzi, en el tamaño y colores de las tarjetas.

Les comparto esta página donde explican leyes de UX:
https://lawsofux.com/

• Ley de Fitts: Los distintos capos se encuentran a distancias cortas entre ellos, dándole continuidad a las opciones para publicar y las publicaciones.
• Ley de Hick: El dashboard para publicar un post se resume a solo 7 botones, cada uno con texto, delineado con un color distinto y un ícono que muestra a qué se refiere, facilitando la lectura de este.
• Ley de Jakob: La interfaz es muy parecida a cualquier otra red social que se basa en imágenes o fotos, dándole prioridad a la imágen de la publicación y dándole repetición y continuidad a las siguientes publicaciones a través de esto.
• Ley de Miller: Existen 7 elementos completos en la pantalla principal: La barra de búsqueda, el dashboard con las opciones de tu cuenta, el dashboard para realizar una publicación, el primer post, la lista de blogss recomendados y el radar.
• Efecto Von Restorff: El peso se dirige a la primer publicación, sin embargo el dashboard para publicar algo también llama la atención gracias a sus colores, dándole una importancia visual.

Les comparto mi reto 1, se acepta retroalimentación:
RETO 1

Principio de cierre

Leyes UX
App: NEQUI

Ésta página no es mi favorita jaja sin embargo si encontré varios principios y leyes ahí. Creo que aprenderlos aquí hace ya que empieces a verlos más fácil por todos lados.

LEY DE MILLER : Presentar en espacios de 5 7 o 9 . Y se le puso al final una opción de “Ver mas” (ley de Fitt)

Les comparto mis apuntes.

Princuipio de cierre

Principio de semejanza

¡Hola!
Aquí mis aportes, busqué referencias en las páginas de Figma, Contst contact, Hotjar, Didi food, Amazon y Mercadolibre.

Ley de la Gestalt: proximidad y fondo-figura.
Ley de Hick y ley de Fitt

Para este ejercicio quise identificar estas leyes en la pagina de Netflix

que buena clase!

No pude poner el screenshot, pero me parecio un ejemplo de ley de jakob los reproductores de las diferentes aplicaciones como Spotify o Deezer

Principio de Semejanza

Principio de Continuidad

Principio de Cierre

Principio Relación Figura - Fondo

Principio de Proximidad y Ley de Fitt

Ley de Miller

Mis ejemplos 🚀:

Pricipios Gestalt

Leyes UX.

1. Ley de Fitt
   

2. Ley de Hick
   

3. Ley de Jakob
   

4. Ley de Miller
   

Principio de continuidad

![](

¡Excelente curso!
Ahora veo las páginas web de diferente forma, me encanta. Aquí un ejercicio de una página. 😄

[](

Principios de Gestalt y UX:

Es una corriente psicologica que nacio en Alemania a principios del siglo XX, estudia como los seres humanos perciben su entorno, algunos de sus principios son:

• Semejanza: como humanos tendemos a agrupar elementos similares aunque no esten juntos, tendemos a hacer agrupaciones partiendo de forma, tamano y color.
• Proximidad: cuando vemos elementos que estan alineados y agrupados de forma ordenada en un mismo espacio, los tendemos a ver como un grupo.
• Continuidad: cuando vemos elementos que estan alineados en una linea o curva de forma ordenada, los veremos agrupados.
• Fondo y figura: permite mostrar diferentes planos de profundidad y ordenar de manera jerarquica el contenido a traves de las formas.
• Principio de cierre: cuando nuestros ojos ven una imagen que este incompleta, nuestro cerebro automaticamente la llena.

Leyes de UX:

• Ley de Fitt: el tiempo que lleva llegar a un objetivo tiene que ver con el tamano y la distancia del mismo.
• Ley Hick: cuando el usuario tiene mas opciones, mas complicado y dificil sera tomar una decision. Por lo cual es recomendable dar pocas opciones a nuestros usuarios para que a ellos no les cueste llegar a una decision.
• Ley de Jacob: a los usuarios les gusta usar cosas que ya saben usar y conocen su funcionalidad. Esto se logra usando mejores practicas y standares en la industria.
• Ley de Miller: estudios revelan que un usuario promedio solo puede recordar 7 elementos en su memoria a corto plazo, mas o menos 2(numeros de elementos ideales para mostrar 5, 7, 9)

Corrijanme si he cometido alguna equivocación

Excelente lecciòn, estos principios dictan la distrubuciòn de los intereses que se desean brindar al usuario

Reto 1

Gestalt.

Principio de semejanza
Principio de proximidad
Principio de continuidad
Relación figura-fondo
Principio de cierre

UX.

Ley de Fitt
Ley de Hick
Ley de Jakob
Ley de Miller

En el sitio detecto, de la Gestalt, los principios de semejanza y proximidad en los grupos que se pueden identificar claramente gracias al uso del tamaños, columnas, disposición de elementos. El principio de semejanza incide en esa “agrupación” que hace el cerebro y el de proximidad hace que entendamos los diferentes módulos que presenta el diseño. Lo anterior es clave para la navegación al poder identificar fácilmente bloques de contenido.
La disposición de los elementos permite entrever el principio de continuidad porque muestra al usuario la dirección que debe seguir para navegar por los diferentes contenidos. Otro principio que identifico, es el de cierre, ya que se puede identificar que en la parte inferior derecha falta “algo” por lo tanto invita a hacer scroll para descubrir el contenido.

En cuanto a las leyes de UX, identifico la Ley de Fitt, que se hace más evidente cuando el usuario conoce el sitio, ya que el enlace a cada artículo está en el título y en la fotografía del mismo. Aunque hay muchas opciones, son similares las acciones que debe tomar, entonces no es tan complejo y evidencia la Ley de Hick, en el sitio se utilizan recursos de navegación comunes que hacen más intuitiva la nevegación (Ley de Jakob).

Podemos observar aquí de las leyes de Gestalt los Principio de semejan y proximidad:

En Mercado Libre utilizan los principios y leyes. El uso de cómo presentan los elementos. La que me costó identificar fue el principio de cierre.

Gestalt

Corriente psicológica alemana del siglo XX para explicar como el humano percibe su entorno.

Principios de Gestalt:

1- Principio de semejanza: Agrupar elementos similares aunque no estén juntos.
2- Principio de proximidad: Agrupar elementos alineados y organizados dentro de un mismo espacio.
3- Principio de continuidad: Agrupar elementos dentro de una linea o curva ordenada (alineación).
4- Relación figura - fondo: Ordenar el contenido de manera jerárquica utilizando planos de profundidad.
5- Principio de cierre: Cuando nuestro cerebro completa una imagen incompleta.

Hola qué tal, aquí quiero dejarles mi tarea.

Me gusta mucho la web de Behance y decidí investigar cuántos de los principios de UX / Gestalt usan.

1. Ley de Proximidad.
   Me pude dar cuenta que es muy cierto, desde la perspectiva de consumidor y no creador ahora puedo ver que cada sección describe a nuestro cerebro que pertenece a un grupo, aquí es evidente que la ley de proximidad (color verde) está hecha para que entendamos que las secciones tienen un por qué. En la parte de la navegación, nos llevará a secciones específicas dentro de Behance y engloban a otras. Pero dentro de la sección de trabajos por software, El carrusel nos evoca movimiento y tiene un CTA de ir hacia la izquierda y derecha, además, que si te fijas en la parte derecha el elemento último no se termina de mostrar por lo que yo le llamo a este principio “EL PRINCIPIO DE CURIOSIDAD”.

2. Ley de Hick.
   Desde el nav podemos darnos cuenta que los colores están pensados para mostrar si en qué sección estamos activos, mira que “Descubrir” tiene mayor contraste.

Y hay un evidente CTA al lado derecho que dice “Crear un proyecto” es mucho más grande, tiene diferente color, peso visual y contraste. Por lo que considero válido que sea un elemento con ley de hick. las sección de la derecha en el nav no invade ni tiene un CTA a pesar de tener actividad dentro también.

1. Ley de Fitt.
   Desde el carrusel hasta el texto y los trabajos los considero con esta ley, ya que las mismas tienen CTA para entrar a “ver más”. Son evidentemente grandes porque están pensados para que les des clic y los consumas, quizás no leas el texto pero si la imagen y por la imagen entres a ver el proyecto. Creo que aquí se cumple la ley que se base en esto “El tiempo para adquirir un objetivo es una función de la distancia y el tamaño del objetivo”.

2. Ley de la curiosidad.
   Lo mencioné en el punto 1, mostrar en el carrusel una sección incompleta en la parte derecha no es adrede sino a priori, ellos quieren que le des clic que interactúes sino ¿por qué tendrían que ocultarlo? quieren tu acción causada por la curiosidad.

Sucede lo mismo en la muestra de proyectos, muestran una columna con 5 proyectos completos y los de abajo se muestran al 75% ¿Por qué? porque quieren que des scroll, que navegues, que busques más, etc.

Espero que esto te ayude, a mi esta clase me ha ayudado demasiado. ¡Gracias profe!

Continuidad

• LA pagina del autor es concatenada a las paginas de otros artistas dando continuidad de lectura.

Ley de Fitt

• Al finalizar el texto del autor principal el usuario es invitado a dejar un like para este autor.

Ley de Jakob

• El usuario al ya saber como funciona el sistema de likes va a ser mas sencillo oprimir el botón si es de su agrado el contenido.

Ley de Hick

• en el panel lateral se muestran unos accesos rápidos que están agrupados para no saturar las opciones de navegación del usuario.

![](

En la sección de archivos hay mas leyes, no se olvide de revisarlas para que sigan practicando

App: Spotify
Web: Seat

Un análisis de la plataforma de Wattpad.

me parece que Spotify es un buen ejempló ya que muestra los principios de semejanza de proximidad y continuo ,agrupando, las de relación figura fondo, ley de hick, ley de Jakobs,miller, me pareció una clase muy interesante

Me encanto esta clase sobre los principios y leyes de diseños, ya las había visto con anterioridad en otras fuentes, sin embargo, fue una clase sencilla de comprender y pude captar los ejemplos con bastante facilidad. Gracias

Ley de fit:
https://www.booking.com/ (Home/header/navegación)

Hola! Dejo aquí lo que arme según lo aprendido en la clase.

Según los conceptos presentados, este es mi ejercicio:

Según lo aprendido, esto es lo que veo:

• Ley de Fitt: “lo necesario debe estar cerca”.

• Ley de Hick: “pocas opciones, rápidas decisiones”.

• Ley de Jakob: “prefiero usar lo que ya vi funcionar”.

• Ley de Miller: “5, 7 o 9”.

Se pueden agrupar y asociar las secciones de talla y modelo. Aparte la proximidad de los botones de cta están posicionados convenientemente para reconocerlos y así a una acción.

![](

Super la explicación de los principios de gestalt 😃. Me fui a explorar al sitio web de mercado libre y ahí encontré varios.

https://www.mercadolibre.com.co/
 

Principio de proximidad y de continuidad
Ley de Miller

EJEMPLOS DE LEY DE HICK