Una mirada más de cerca al cierre: la pequeña regla de diseño que hace una gran diferencia

El principio de cierre es un sesgo visual fascinante que afecta nuestra percepción de elementos u objetos. Explica nuestra tendencia natural a “rellenar los espacios vacíos” cuando se nos presenta información incompleta. Como diseñadores, podemos aprovechar esta tendencia y usarla como herramienta para crear diseños y experiencias de usuario intuitivas y atractivas.

Estas ilusiones visuales fueron descubiertas y estudiadas por el psicólogo checo Max Wertheimer, quien fundó la escuela Gestalt en 1911 junto con Wolfgang Köhler y Kurt Koffka, quienes propusieron que, en términos de percepción humana, “el todo es diferente a la suma de sus partes”, expresión que a menudo se interpreta erróneamente como “el todo es mayor que la suma de sus partes”.

Los íconos y logotipos son ejemplos comunes de cierre en acción. Piense en el espacio negativo que forma la cara blanca del panda en el logotipo de WWF (Fondo Mundial para la Naturaleza):

Los iconos son otra forma de mostrar este principio en acción. Los diseñadores tienden a simplificarlos porque son más fáciles de percibir que los complejos, especialmente en una interfaz recargada. Por eso usamos atajos al crearlos.

Como se puede observar en estos íconos, hay espacios entre los elementos. El principio de cierre sugiere estos elementos al observador, de modo que vemos la agrupación como un todo:

Cierre en acción: El carrusel

Los carruseles son esos deslizadores rotatorios de imágenes o contenido, omnipresentes en sitios de noticias y otros. Si bien su origen es incierto, su utilidad es innegable. Permiten mostrar una variedad de contenido, a la vez que minimizan la saturación de la pantalla y fomentan el descubrimiento.

Cómo funciona el cierre en un carrusel

Usemos los carruseles como ejemplo de cierre. Una vez que aprendas sus principios, verás cierres por todas partes.

Visibilidad parcial

Un vistazo a una imagen recortada por el borde sugiere algo más. Esta técnica, aunque sencilla, simula lo que percibimos en el mundo real, como un vistazo a la vuelta de la esquina. Los efectos que revelan más contenido al pasar el cursor, a los que me gusta llamar “peekaboo”, son efectos que revelan más contenido al pasar el cursor.

Si la imagen parece completa, por así decirlo, o la interfaz parece demasiado uniforme y no hay ninguna señal que muestre que hay más contenido, esto se llama ilusión de completitud:

Transiciones sugerentes

Las transiciones suaves, como imágenes que se deslizan hacia la izquierda o hacia la derecha, sugieren sutilmente que existe contenido adicional más allá de la vista actual. Esto, con suerte, incita a los usuarios a interactuar y explorar más.

Más señales

Los omnipresentes “tres puntos suspensivos” son una forma común de indicar más contenido. El desvanecimiento del contenido (efecto fantasma) al final del carrusel también indica visualmente que hay más que ver:

Más allá de los carruseles: cierre para el diseño de UI

El cierre va más allá de los carruseles. Dejar elementos de diseño incompletos puede crear una sensación de misterio, fomentando la interacción del usuario. Las barras de progreso son un buen ejemplo de ello. Una barra con un degradado sutil, en lugar de un relleno sólido, sugiere contenido en curso y anima a los usuarios a esperar a que se complete la descarga.

Beneficios del cierre en el diseño de UI

Simplifica la complejidad al dividir la información compleja en fragmentos digeribles, mejorando la comprensión del usuario.

Aumentar la participación al completar mentalmente la imagen puede ser intrínsecamente gratificante, lo que genera una experiencia más atractiva. Sin embargo, para que el cierre sea realmente efectivo, es necesario un contenido intrínsecamente atractivo.

Señala contenido oculto al sugerir de forma sutil la presencia de información adicional, incitando a los usuarios a explorar más.

Herramienta de diseño potente y sutil

El cierre es una herramienta poderosa para los diseñadores de UI. Mediante el uso estratégico de elementos incompletos, espacio negativo y animaciones sugerentes, los diseñadores pueden crear interfaces que no solo sean visualmente atractivas, sino también intuitivas, fáciles de usar y, en definitiva, más atractivas.

Si quieres conocer otros artículos parecidos a Una mirada más de cerca al cierre: la pequeña regla de diseño que hace una gran diferencia puedes visitar la categoría Guias.