{"id":3121,"date":"2025-10-06T16:06:54","date_gmt":"2025-10-06T14:06:54","guid":{"rendered":"https:\/\/tecnologia.euroinnova.com\/principios-de-la-gestalt-aplicados-en-el-diseno-ux\/"},"modified":"2025-10-07T14:55:29","modified_gmt":"2025-10-07T12:55:29","slug":"leyes-de-la-gestalt-en-el-diseno","status":"publish","type":"post","link":"https:\/\/tecnologia.euroinnova.com\/fr\/leyes-de-la-gestalt-en-el-diseno","title":{"rendered":"Les principes de la Gestalt appliqu\u00e9s au design UX"},"content":{"rendered":"

Las leyes de la Gestalt son principios psicol\u00f3gicos que describen c\u00f3mo percibimos y organizamos la informaci\u00f3n visual.<\/strong> Estas leyes o principios se basan en la teor\u00eda Gestalt, que se origin\u00f3 en la Alemania de principios del siglo XX de la mano de tres psic\u00f3logos: Max Wertheimer, Wolfgang K\u00f6hler y Kurt Koffka. Desde entonces su uso ha trascendido la psicolog\u00eda para colarse en otros dominios como el dise\u00f1o. Hoy d\u00eda, las leyes de la Gestalt son un eje fundamental de las pr\u00e1cticas de dise\u00f1o UX<\/a>\/UI.<\/span><\/p>\n

Si bien podemos leer los principios de la Gestalt y no le encontremos una aplicaci\u00f3n pr\u00e1ctica en dise\u00f1o de un primer vistazo, s\u00ed que tienen una vigencia incuestionable. En este art\u00edculo te vamos a explicar detalladamente cu\u00e1les son los principios de la Gestalt en dise\u00f1o y te ilustraremos con ejemplos textuales y gr\u00e1ficos<\/strong> para que interiorices su uso a la hora de dise\u00f1ar prototipos para las interfaces de apps y otros tipos de software.<\/span><\/p>\n

Principio de semejanza<\/span><\/h2>\n

Bajo el principio de semejanza se asume la premisa de que las personas tendemos a relacionar elementos que comparten alguna caracter\u00edstica visual.<\/strong> No es que deban ser id\u00e9nticos en apariencia, sino simplemente mostrar un rasgo com\u00fan como el color, la forma o el tama\u00f1o.<\/span><\/p>\n

Este principio se diferencia de los dem\u00e1s porque trasciende la distribuci\u00f3n espacial de los elementos. Es decir, para que conectemos visualmente los elementos a partir del principio de semejanza no hace falta que estos est\u00e9n colocados en un orden<\/strong>, por patrones o por cercan\u00eda. Al mezclar un batiburrillo de elementos que comparten caracter\u00edsticas con otro grupo de elementos d\u00edscolos, nuestro cerebro va a intentar de forma autom\u00e1tica a establecer asociaciones visuales para agrupar mentalmente los elementos que se asemejan entre s\u00ed, y separar aquellos que descuadren.<\/span><\/p>\n

En el dise\u00f1o UX, el principio de semejanza no solo sirve para agrupar elementos que guardan cierta relaci\u00f3n sem\u00e1ntica entre s\u00ed, sino tambi\u00e9n para lo contrario: resaltar ciertos elementos mediante la disimilaci\u00f3n. Es por eso que los textos ancla de los enlaces suelen resaltarse en un color diferente al del resto de texto.<\/strong> De igual forma, los sitios webs juegan con las tipograf\u00edas con el objetivo de destacar las partes que m\u00e1s nos interesan de cara al usuario.<\/span><\/p>\n

\"Principio<\/span><\/p>\n

En este di\u00e1fano men\u00fa de navegaci\u00f3n de categor\u00edas de Zara, vemos como se rompe el principio de la Gestalt de semejanza por una buena raz\u00f3n. Todos los botones comparten color y forman un grupo compacto a los ojos del usuario por su semejanza. Sin embargo, esta armon\u00eda crom\u00e1tica se ve perturbada por un bot\u00f3n de color amarillo chill\u00f3n destinado a las rebajas, que llama impertinentemente nuestra atenci\u00f3n.<\/span><\/p>\n

Principio de figura y fondo<\/span><\/h2>\n

Este principio de figura y fondo consiste de dos elementos evidentes: la figura (elemento que se quiere destacar) y fondo (elemento menos importante que sirve de apoyo a la figura). Al ver una imagen, nuestros ojos se dirigen por instinto hacia lo que consideran a primera vista m\u00e1s relevante<\/strong> (la figura) y obvian lo que no lo es tanto (el fondo). De esta forma, nuestro cerebro percibe las figuras como elementos al frente, y el fondo como un conjunto de elementos m\u00e1s alejado.<\/span><\/p>\n

En los prototipados de aplicaciones y programas de software es sencillo percibir este principio. Por ejemplo, el fondo est\u00e1ndar de muchos blogs y sitios webs es el blanco, o una variaci\u00f3n de \u00e9l, ya que se trata de un color que se percibe f\u00e1cilmente como fondo y en el que es sencillo resaltar elementos.<\/span><\/p>\n

Otro ejemplo m\u00e1s extendido del principio de figura y fondo lo encontramos en muchos formularios. Si est\u00e1n bien dise\u00f1ados, las cajas de texto sobresalen para que el usuario sepa d\u00f3nde tiene que teclear<\/strong> su informaci\u00f3n. Adem\u00e1s, cuando el usuario clica sobre un elemento del formulario, este se resalta para que sepa donde se dispone a escribir.<\/span><\/p>\n

\"Principio<\/span><\/p>\n

Mango nos muestra un ejemplo muy simple en una de sus ofertas de la Home: un fondo oscuro y sin muchos adornos del que sobresale un t\u00edtular en ma\u00fdusculas y blanco nuclear junto a un bot\u00f3n con relleno del mismo color para invitar a la conversi\u00f3n directamente.<\/span><\/p>\n

Principio de continuidad<\/span><\/h2>\n

Antes de explicarte este principio, te lo ilustramos con un ejemplo muy sencillo: la l\u00ednea discontinua de una larga carretera que se extiende hasta el horizonte.<\/strong> En cuanto la miras, no puedes ignorarla. Esto se debe a que nuestro cerebro da preferencia a los elementos que siguen un patr\u00f3n regular frente a elementos descolocados en desarmon\u00eda.<\/span><\/p>\n

As\u00ed pues, respetar el principio de continuidad es especialmente relevante en UX porque permite que el usuario se desplace de forma fluida y l\u00f3gica por todos los puntos de un sitio web o aplicaci\u00f3n en su interfaz. Para ello, la interfaz necesita un dise\u00f1o consistente, que emplee patrones<\/strong> y cuyo comportamiento no resulte extravagante o confuso al usuario. Un buen dise\u00f1o centrado en el usuario resulta intuitivo gracias a su continuidad, en cuanto el usuario es capaz de guiarse de forma aut\u00f3noma por la aplicaci\u00f3n sin grandes esfuerzos cognitivos.<\/span><\/p>\n

\"Principio<\/span><\/p>\n

En esta cronolog\u00eda dentro del apartado Sobre Nosotros del sitio web de la escuela de negocios Kenan Flagler, vemos como se emplea una l\u00ednea cont\u00ednua con puntos irregulares que se extiende desde arriba hasta abajo, desplegando bloques de informaci\u00f3n en un patr\u00f3n zigzagueante.<\/span><\/p>\n

Principio de cierre<\/span><\/h2>\n

Este principio de cierre lo podemos ver en uso en muchas ilusiones \u00f3pticas. En la Gestalt se describe c\u00f3mo el cerebro humano es capaz de conectar pistas visuales para visualizar una figura donde no la hay<\/strong>, pues est\u00e1 parcialmente escondida o cercenada. El principio de cierre resulta muy atractivo a la vista si se emplea sabiamente, y suele explotarse con exitoso resultado a la hora de crear logos.<\/span><\/p>\n

Tambi\u00e9n lo vemos en algunos sitios web minimalistas que generan espacios negativos<\/strong> entre figuras para que el cerebro vaya rellenando huecos. Sin embargo, la aplicaci\u00f3n m\u00e1s generalizada y conocida del principio de cierre en UX y UI es la de los carruseles.\u00a0<\/span><\/p>\n

Por ejemplo, al acceder a Instagram, vemos que las stories se organizan en un carrusel que rebasa, cortando la foto de los usuarios, lo que deja que nuestro cerebro complete este patr\u00f3n de figuras. En este caso, el principio de cierre deja saber de manera intuitiva al usuario que el carrusel de stories contin\u00faa.<\/span><\/p>\n

\"Principio<\/span><\/p>\n

Encontrar ejemplos de cierre claros en los sitios web es m\u00e1s complicado, pero el banco digital N26 nos deja un ejemplo sencillo, pero ideal, con tal de ilustrar el principio de cierre. En dos bloques diferentes se nos muestra un extracto de un tel\u00e9fono m\u00f3vil. No es necesario mostrar completamente toda la pantalla del tel\u00e9fono m\u00f3vil, ya que nuestra mente la completar\u00e1 de forma autom\u00e1tica. Para explotar el principio de cierre, el primer mock-up extiende la pantalla en una animaci\u00f3n.<\/span><\/p>\n

Principio de proximidad<\/span><\/h2>\n

Es quiz\u00e1 el principio de la Gestalt m\u00e1s elemental en UX. Consiste en que tendemos a relacionar entre s\u00ed elementos que se encuentran pr\u00f3ximos unos de otros,<\/strong> mientras que los que se ubican en la distancia lo percibimos como elementos diferentes.\u00a0<\/span><\/p>\n

Es una directriz muy importante debido a que los usuarios solemos escanear con suma rapidez todo lo que vemos en las pantallas, especialmente en m\u00f3viles, por lo que un buen dise\u00f1o debe agrupar los elementos que guardan relaci\u00f3n entre s\u00ed por proximidad o lejan\u00eda para que el usuario pueda identificarlos con facilidad.<\/span><\/p>\n

La forma de generar esta proximidad o lejan\u00eda entre elementos es simple: mediante el espacio<\/strong>, la vacuidad. El espacio en el dise\u00f1o UX nos deja respirar, pero tambi\u00e9n marca las conexiones o desconexiones sem\u00e1nticas entre grupos de elementos. Podemos jugar con varios elementos de dise\u00f1o para estimular que los usuarios realicen cierta acci\u00f3n.<\/span><\/p>\n

Por ejemplo, en las newsletters el bot\u00f3n de baja de la suscripci\u00f3n suele colocarse muy apartado del resto<\/strong> de cuerpo del texto para desincentivar que los usuarios salgan definitivamente del flujo de correos electr\u00f3nicos.<\/span><\/p>\n

\"Principio<\/span><\/p>\n

En esta imagen de Steam vemos c\u00f3mo hay dos barras de navegaci\u00f3n desagrupadas entre s\u00ed, pero con sendos elementos armonizados por su proximidad. Se aplica el principio de cercan\u00eda de tal forma que los botones Tienda, Comunidad, Acerca de y Soporte quedan alineados en un mismo conjunto, mientras que los seis botones de la navbar inferior se asocian dentro de un conjunto aparte. Por otro lado, en la esquina superior derecha vemos agrupados los botones de inicio de sesi\u00f3n, instalaci\u00f3n de Steam e idioma.<\/span><\/p>\n

Principio de simetr\u00eda y orden<\/span><\/h2>\n

Esta ley de la Gestalt dicta que el ser humano percibe lo sim\u00e9trico y ordenado como m\u00e1s agradable y balanceado a la vista<\/strong> que las composiciones con elementos asim\u00e9tricos o fuera de lugar. En cierta manera, tiene su filosof\u00eda detr\u00e1s: lo sim\u00e9trico es perfecto, intachable, un reflejo especular en el que todo est\u00e1 ordenado. Sin embargo, no toda la interfaz de un sitio web o aplicaci\u00f3n tiene por qu\u00e9 ser sim\u00e9trica. Si se abusa demasiado de la simetr\u00eda en el dise\u00f1o UX, tenderemos a crear interfaces muy intuitivas, pero demasiado aburridas.<\/strong><\/span><\/p>\n

La simetr\u00eda y el orden tienen por prioridad evitar distracciones innecesarias para que el usuario se centre en lo que realmente queremos que sobresalga. En cualquier caso, la simetr\u00eda no tiene por qu\u00e9 ser absoluta, sino estructural, por ejemplo, con bloques pares adyacentes iguales en tama\u00f1o y forma.<\/span><\/p>\n

A su vez, si nos regimos por un dise\u00f1o sim\u00e9trico, es m\u00e1s sencillo resaltar ciertos elementos de inter\u00e9s; solo tenemos que romper la simetr\u00eda para redirigir la atenci\u00f3n del usuario.<\/strong><\/span><\/p>\n

\"Principio<\/span><\/p>\n

En este ejemplo de pantalla de TheBodyShop observamos una imagen de productos seleccionados dispuestos de forma perfectamente sim\u00e9trica, lo que genera tranquilidad a la vista y una sensaci\u00f3n de uniformidad que no distrae. Solo hay un detalle que rompe la perfecta simetr\u00eda especular y el orden: el c\u00edrculo de \u201cfavorito\u201d en el centro del conjunto de elementos que, casualmente, hace destacar el producto m\u00e1s caro.<\/span><\/p>\n

Principio de direcci\u00f3n com\u00fan<\/span><\/h2>\n

Aunque este principio no estuviera incluido en las leyes de la Gestalt originales, se ha incorporado por su gran utilidad a la hora de dise\u00f1ar interfaces en las que se aplica cierto movimiento o ilusi\u00f3n de movimiento. Seg\u00fan el principio de direcci\u00f3n com\u00fan, nuestros ojos agrupan conjuntos de elementos que, aunque est\u00e9n claramente divididos, apuntan a una misma direcci\u00f3n<\/strong> o se desplazan en un mismo rumbo.\u00a0<\/span><\/p>\n

Un ejemplo pr\u00e1ctico fuera del dise\u00f1o UX de este principio lo vemos en las bandadas de p\u00e1jaros que, al volar en grupo hacia un mismo punto, forman ante nuestros ojos una forma caracter\u00edstica que percibimos como un todo.<\/span><\/p>\n

En dise\u00f1o UX, la ley de direcci\u00f3n com\u00fan no aplica solo a elementos m\u00f3viles, como las transiciones de pantalla, sino tambi\u00e9n a elementos que den la impresi\u00f3n ilusoria de moverse, como las flechas.<\/span><\/p>\n

\"Principio<\/span><\/p>\n

Por \u00faltimo, Samsung nos muestra un ejemplo gr\u00e1fico perfecto del atractivo que crea el principio de direcci\u00f3n com\u00fan bien aplicado. En esta imagen vemos como los cuatro m\u00f3viles expuestos miran hacia una misma direcci\u00f3n, incluida la flecha clicable a la derecha. Si la clicamos, nos llevar\u00e1 a otra pantalla con otro set de cuatro m\u00f3viles mirando, esta vez, en sentido contrario.<\/span><\/p>","protected":false},"excerpt":{"rendered":"

Las leyes de la Gestalt son principios psicol\u00f3gicos que describen c\u00f3mo percibimos y organizamos la informaci\u00f3n visual. Estas leyes o […]<\/p>\n","protected":false},"author":2,"featured_media":595,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3121","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categorizar"],"acf":[],"_links":{"self":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/posts\/3121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/comments?post=3121"}],"version-history":[{"count":0,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/posts\/3121\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/media\/595"}],"wp:attachment":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/media?parent=3121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/categories?post=3121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/tags?post=3121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}