Cuando hablamos de diseño de producto, es común que la conversación se centre en la funcionalidad: qué hace el producto, cómo resuelve un problema, qué flujos optimiza. La estética muchas veces queda desplazada a un segundo plano, como si fuera una capa decorativa que se aplica al final del proceso.

Esa visión subestima el rol del diseño visual en la creación de un producto: la estética no es solo una fase superficial, es la primera conversación que nuestro producto tiene con el usuario, muchas veces definiendo si esa conversación continua o no.

Este artículo busca reivindicar la importancia de la estética en los procesos de diseño de producto, repasando algunos fundamentos básicos que nos ayudan a transmitir cuidado y armonía en las interfaces que diseñamos.

Comencemos con tres razones por las que la estética es parte esencial del diseño de producto:

1. Nuestra primera reacción ante una pieza visual es emocional

Antes de que un usuario haga clic, interactúe o incluso lea un sitio web, ya ha formado una opinión preliminar sobre el mismo.

Esta reacción es emocional, sucede a los 50 milisegundos desde que percibimos el diseño y tiene el poder para que un usuario se quede e indague más, o que abandone nuestra web sin mirar atrás.

Don Norman escribió un libro: "Diseño Emocional" donde describe tres niveles de procesamiento visual:

VisceralEste nivel es el descrito arriba, sucede de forma instantánea cuando vemos un diseño.

ConductualEl usuario evalúa de forma inconsciente que tan cómodo y fácil de usar es el diseño.

ReflexivoLuego de haber visto el diseño, el usuario evaluará el funcionamiento y beneficios del sitio. (la evaluación posterior).

El nivel visceral — esa primera impresión — está completamente en manos del diseño visual. Color, tipografía, proporción y espaciado: todos van a apelar a la reacción visceral de nuestros usuarios, y por tanto, son esenciales para el éxito de nuestro diseño.

2. Percibimos los diseños atractivos como más usables

O también conocido como el Efecto Estética-Usabilidad.

En 1995, Masaaki Kurosu y Kaori Kashimura descubrieron que los usuarios perciben las interfaces más atractivas como más fáciles de usar, incluso cuando la funcionalidad es idéntica.

Este efecto, no solo demuestra la predisposición de los usuarios a ver la plataforma como más usable, si no que se ha comprobado volverlos más tolerantes a errores, más pacientes con los tiempos de carga, y más dispuestos a volver.

La estética construye confianza antes de que el producto haya demostrado nada.

3. Piezas que siguen los principios de diseño ayudan a guiar al usuario en su experiencia

Cuando respetamos los principios de diseño, nuestra composición cuenta con jerarquías claras, contrastes y distancias proporcionadas. Lograr un buen balance visual ayuda al usuario a identificar rápidamente secciones y acciones dentro de la pantalla sin mayor gasto de energía cognitiva en interpretar la información presentada.

Esto contribuye a que se sienta más seguro y cómodo con la experiencia.

Cada decisión visual es, al mismo tiempo, una decisión de experiencia.

El diseño visual es la disciplina encargada de hacer que el producto tenga el balance correcto entre sorpresa y familiaridad.

‍

Los patrones visuales conocidos — como dónde va el menú, cómo se ve un botón primario, qué significa el color rojo — reducen la fricción cognitiva.

A su vez, tendemos a recordar más las cosas que se diferencian de lo común. Recordamos el diseño que nos sorprende, para bien o para mal.

Nuestro reto como diseñadores es encontrar el punto de equilibro entre familiaridad y sorpresa, logrando experiencias fáciles de usar y seguras, pero memorables.

¿Por dónde empezar?

Como diseñadores y diseñadoras aprendimos a respetar una serie de reglas fundacionales que guían nuestras decisiones estéticas. Si bien las conocemos, no siempre las tenemos presentes.

Repasar estos tres principios nos ayudará a ser más conscientes de ellos a la hora de diseñar:

1. Jerarquía visual

No todo puede tener la misma importancia. La jerarquía visual ayuda al ojo a saber por dónde empezar y a dónde ir después. Se construye con escala, color, contraste, alineación y proximidad.

Tres reglas claves:

• Si todo es diferente, nada lo es: Generar demasiados niveles de jerarquía genera ruido y confusión, mientras que limitar las jerarquías a pocos niveles ayuda a lograr el impacto necesario manteniendo la armonía de una interfaz.
• Alineaciones y espaciados claros generan armonía visual: Si las alineaciones son claras y el espacio negativo está bien utilizado, el ojo encuentra mayor comodidad con una guía clara de a donde mirar.
• La consistencia es tu mejor aliada: En sitios y plataformas con muchas pantallas, jerarquías consistentes ayudan al usuario a entender donde está parado e identificar las señales aún antes de leer.

2. Balance

El balance de la pantalla puede afectar la personalidad e intención que se le quiere dar a una pieza.

Para generar buen balance en nuestros productos necesitamos poner atención en varios recursos, como la distribución de los elementos en pantalla, el peso de estos y como aprovechamos el espacio negativo.

Veamos ejemplos de balance visual en dos tipos de diagramación diferente: simétricas y asimétricas.

Simetría

Hablamos de simetría cuando los elementos se distribuyen de forma equitativa al eje central. La cantidad de elementos y el lugar que estos ocupan será el mismo del lado izquierdo y derecho de la pantalla, o en la mitad superior e inferior.

Asimetría

La simetría no es la única manera de generar balance visual. Para lograr balance en diagramaciones asimétricas el peso visual de los elementos necesita estar distribuido de manera que el ojo no se canse, o que no haya sobrecarga de peso mayor en un lado o en otro. Un elemento grande puede equilibrarse con varios pequeños. Un color saturado puede equilibrarse con espacio en blanco.

3. Principios de Gestalt

El cerebro no ve elementos aislados, ve patrones y relaciones. Los principios de Gestalt describen cómo agrupamos visualmente la información, y si bien hay muchos, en este artículo repasamos tres principios esenciales:

Proximidad

Los elementos que están cerca tienden a interpretarse como parte del mismo grupo. Al diseñar interfaces es importante tener este principio en cuenta cuando queremos que los elementos se sientan agrupados (ej: varias partes de un mismo componente), o en oposición, cuando queremos que se perciban como separados (ej: sumando más espacio entre dos secciones independientes).

Similitud

Los elementos similares en forma, color, tamaño o estilo se perciben como parte del mismo conjunto aún cuando no están próximos. La similitud puede ser utilizada en el diseño de interfaces a la hora de categorizar elementos para que el usuario asocie que estos tienen las mismas propiedades o funcionalidades.

Prägnanz

Nuestro cerebro tiende a organizar información compleja en la forma más simple y estable posible. Nuestro rol como diseñadores de interfaz es ordenar la información de forma que resulte cómoda para el usuario. Buscamos reducir la carga cognitiva y el ruido, haciendo que estos usuarios interpreten secciones organizadas de forma lógica, en vez de muchos elementos independientes.

Resumen

La estética no es decoración. Un producto bien diseñado visualmente no solo se ve mejor, funciona mejor, porque guía la atención, genera confianza y reduce la fricción cognitiva.

El diseño visual no debería ser un agregado al final del proceso, es una decisión que impacta cada interacción, desde la primera impresión hasta la última acción.