“UX no es hacerlo bonito” es probablemente la frase que más he repetido a lo largo de los años, pero UX generalmente es algo que relacionamos con la estética de un sistema. Si UX no es hacer las cosas bonitas ¿Qué función tiene el Diseño Visual? Pues, Diseño Visual es un pilar fundamental para crear una experiencia, porque percibimos con nuestra vista, sin embargo exactamente cómo se aplican los principios de Diseño Visual en la creación de experiencias e interfaces tiene su chiste. Eso es lo que veremos en este programa.
Contexto
Antes de entrar en materia, primero necesitamos repasar algunos conceptos que hemos visto en programas anteriores. Porque el concepto que vamos a ver hoy está anclado a esos conceptos más grandes.
- Diseño
Diseño es el proceso de planear cómo algo va a funcionar antes de que lo construyamos, este proceso generalmente abarca la aplicación de una visión artística o creativa. Podemos Diseñar planes de negocios, presupuestos, edificios, ciudades, apps, sillas y prácticamente cualquier cosa que nos imaginemos. Diseño en sí mismo es un campo académico y abarca numerosas disciplinas como Diseño industrial, gráfico, automotriz, de modas, urbano, arquitectónico, de sistemas, de negocios, etc.
- Pensamiento de Diseño
A mediados del siglo XX, ingenieros que estaban lidiando con algunas barreras decidieron integrar más creatividad por medio de estructurar el proceso de pensamiento que siguen los Diseñadores. El Pensamiento de Diseño implicaba que ya no solo los Diseñadores de carrera podían ser creativos, sino que personas de otros campos también podían innovar.
- UX – Experiencia de usuario
UX es el término comercial con el cual nos referimos a un campo de Diseño llamado “Diseño Centrado en las Personas”. Este campo se estableció formalmente cuando un especialista en comportamiento humano y antecedentes en tecnología se dió cuenta que podíamos aplicar el pensamiento de Diseño en el territorio que él estaba investigando: interfaces digitales.
Este especialista es Donald Norman, el primer “User Experience”, con ese título, y Apple fue la primer empresa que tuvo uno.
Tenemos que hablar un poco de Apple, y como Steve Jobs fue el primero en tener un User Experience. Jobs tenía una afinidad particular por el Diseño, pasó mucho tiempo estudiando a marcas como Sony que tenían un diseño industrial brillante, mezclando estética y funcionalidad.
Jobs comenzó a empaparse mucho en el círculo de Diseño. Jobs comenzó a asistir a eventos y a involucrarse con el movimiento Bauhaus, un movimiento simple, geométrico, una separación del futurismo hi-tech que traía Sony. Jobs decía que el mantra de Apple debería ser la simpleza.
Para Jobs, la simpleza era una consecuencia de que algo fuera intuitivo.
Simpleza e intuitivo no siempre iban de la mano. Quitar botones a lo mejor le oculta al usuario que una acción es posible. Pero Jobs decía que las cosas tenían que ser “intuitivamente obvias”. Para la Mac original de 1984 Jobs buscó Diseñadores jóvenes, y con lo que había aprendido de Diseño Jobs comenzó a dar dirección “artística”
Uno de esos Diseñadores, Terry Oyama dice “Nosotros no sabíamos que una computadora podía ser “amigable” hasta que Steve nos dijo”. Steve no se sacó esto de la manga. Steve se la vivía en los laboratorios de investigación, que en ese momento era el PARC de Xerox en Palo Alto.
Jobs comenzó a trabajar con Diseñadores top y eventualmente estas exploraciones artísticas y el costo lo corrieron de Apple en el 95. Cuando regresó en el 97, trajo a Jony Ive y ambos soportaron una filosofía de que los Ingenieros y los Diseñadores tenían que trabajar juntos, con un foco principal en el Diseño. “Diseño dicta la ingeniería, no al revés”.
Este es la persona que habilitó el trabajo de Norman. UX como campo nació en un ambiente en dónde había una búsqueda por esa “simpleza intuitiva”. Norman aportó la información para definir que el que algo sea intuitivo sólo se puede definir a través de la empatía y la investigación.
UX nunca se ha tratado de hacer las cosas bonitas. Desde su origen se ha tratado de hacer cosas que son hermosas por que funcionan. Ese es el contexto del que vamos a partir hoy.
Definición
Diseño Visual es un pilar fundamental del Diseño de Experiencia. Norman encontró que nuestra vista juega un rol clave en nuestro entendimiento de cómo un sistema funciona. Nuestros ojos nos dicen qué es importante, qué componentes están relacionados y nos ayudan a descubrir y navegar lo que se nos pone en frente.
Norman no era, ni es, Diseñador Gráfico. Recordemos que UX “se inspira” de Diseño. Norman consideró que los principios de Diseño Visual deben tomarse en cuenta para crear algo que sea intuitivo. “Diseño Viceral” lo clasificó en su modelo emocional, porque es algo instintivo, de que ves algo y dices “uf, se ve muy complicado” o “wow! qué simple!”
Conforme UX se formalizó como campo profesional, apareció el Por qué, Qué y Cómo, en dónde nuevamente conceptos como la estética jugaban un rol pivotal en el -cómo-. Es decir, la estética es una función que le permite al usuario tener acceso a las funcionalidades, al qué.
JJ Garrett aportó una perspectiva más técnica, con los Elementos de Experiencia de Usuario.
En este diagrama podemos ver claramente que Diseño Visual es la capa superficial, soportada por otras 4 capas que determinan la estrategia, contenido y estructura de la experiencia; incluyendo la información, la navegación y los componentes de Interacción Humano Computadora.
Garret le llama a Diseño Visual: Tratamiento gráfico de los elementos de la interfaz. Look And Feel. Esto es lo que le conocemos como Interfaz de Usuario, UI.
El último diagrama que quiero mostrarles es el más reciente. De Aarron Walter, de su libro “Diseñando para la emoción”. Aarron se inspiró en la pirámide de necesidades de Maslow, y propuso este diagrama: la pirámide de necesidades del usuario
Al igual que tenemos necesidades de supervivencia, la necesidad fundamental de un usuario es que el sistema funcione.
A lo largo de todos estos diagramas, lo que quiero mostrarles es que el Diseño Visual es una consecuencia de UX. No es el principio, es el final, el cierre, lo que amarra una experiencia.
Diseño Visual no es, ni nunca ha sido la totalidad o si quiera el foco de UX.
Primero que nada, es una parte. Si tú te dices UX y sólo sabes de Diseño Visual, tu formación está incompleta.
Segundo. La interfaz es consecuencia de procesos previos. Los principios de Diseño visual viven en el contexto de la experiencia que se está construyendo. Si lo primero que haces al construir una experiencia es construir el Diseño Visual, no estás haciendo UX.
¿Cómo se hace?
Una experiencia es un Sistema. El Solcast 01 justo fue explicar qué es un sistema.
Un Sistema es un conjunto de partes interconectadas, cuyo resultado es más grande que la suma de las partes.
Si yo tengo un sistema para pedir cosas por Internet, y lo sumo con una interfaz para gráficamente comunicarle al usuario el proceso para pedir con un solo clic, como lo hace Amazon, implica que el resultado de estas dos partes es más que la suma de ambas.
Ahora, siendo que Diseño Visual es una parte del sistema, y es la parte “final”, necesitamos el resto del sistema definido para agregarle esta parte.
Si UI es el tratamiento gráfico de los componentes de la interfaz, entonces necesitamos primero los componentes de la interfaz. Esto es algo que en el diagrama de Garrett se define en las capas 3 y 4: llamadas Estructura y Esqueleto.
Aquí se aplican procesos que aún no hemos visto, pero que pueden buscar en lo que llegamos a ellos:
- Arquitectura de información – cómo se estructura una experiencia para facilitar que el usuario pueda navegar, encontrar y usar la información
- Diseño de contenido – como se estructura el contenido para ser útil y claro
Eso quiere decir que si tu eres un Diseñador de Interfaz, tu trabajo debe comenzar, o por pedirle esto a los roles especializados: arquitecto de información o estratega de contenido o UX Writer, o necesitas definirlo tú.
Si tienes que definirlo tú, va una guía general del proceso que se debe seguir antes de dibujar si quiera un cuadro:
- ¿Cuál es el objetivo del sistema? ¿Cuál es -la tarea- que la gente viene a hacer aquí? ¿Cómo voy a medir el éxito de esta experiencia?
- ¿Quién es mi usuario? ¿Es alguien familiarizado con esta tarea, o es una tarea nueva para el usuario? ¿Existe una expectativa previa de cómo debería funcionar el proceso? Tal vez el proceso existe ya en el mundo físico y la gente ya lo usa de manera cotidiana.
- ¿Cuál es el proceso que voy a estructurar? ¿Es un proceso que se hace en un solo paso o necesito varios pasos? ¿Dentro de estos pasos necesito llevar un orden en particular? ¿El usuario necesita cierta información antes de tomar una decisión? ¿O necesita información después? ¿El usuario regresa cuando termina su tarea?
- ¿En qué contexto se va a ocupar este sistema? ¿El usuario lo usa sentado en un escritorio? ¿De pié, caminando? ¿De día? ¿De noche? ¿Se usa colaborativamente o de manera grupal? ¿Es una herramienta de trabajo? ¿Es algo que se va a usar muchas veces?
Una vez que te hiciste estas preguntas Y LAS CONTESTASTE, ahora debes comenzar a hacer bocetos de la experiencia.
- Primero, las categorías de contenido que vas a necesitar. Por ejemplo, si necesitas primero un contenido de bienvenida porque van a llegar usuarios que no te conocen, y luego un contenido informativo, o una comparativa, o comentarios y testimoniales.
- Luego te preguntas ¿Cómo va a el usuario navegar todas estas diferentes categorías? Tal vez hay algunas que solo se pueden visitar en una dirección, tal ves, por ejemplo una vez que el usuario inicia un registro, no quieres que tenga opción de navegar a otro contenido.
Un diagrama que presenta eso se llama “flujo de navegación” y te sirve para saber que el usuario pueda iniciar y terminar la tarea. Y que no te falte ningún paso, distinguiendo los pasos más importantes de los opcionales.
- Ahora que tienes las categorías y el flujo, podemos comenzar a hacer un ejercicio de agrupación de este contenido, pensando si hay información que hace sentido que comparta una o varias pantallas.
Una pantalla es una estructura de información. La gente no ve sitios así:
Los usuarios solo ven una determinada parte de la pantalla al mismo tiempo, así que lo primero que tienes que hacer es estructurar la información que tienes identificada y pensar en lo que “cabe” o “hace sentido” tener en determinado momento en la pantalla.
Necesitas hacer bocetos como estos y preguntarte ¿Mi usuario tiene la información que necesita para saber qué hacer? Si es una misma pantalla ¿Sabe que tiene que hacer scroll? Si son varias pantallas ¿Sabe cómo avanzar? ¿Y si quiere abandonar? ¿Y si le llega una notificación o se distrae? - Aquí podemos presentar nuestros primeros Principios de Diseño Visual: La Psicología Gestalt, Jerarquía y escala.
Estamos trabajando en blanco y negro. Olvida el color. En blanco y negro ¿La parte más importante es la más grande? ¿Los elementos del menú están agrupados? ¿Los componentes que tienen que llamar la atención tienen algo que los destaque? Si hay varios módulos en una misma pantalla ¿Se nota la diferencia entre ellos? - El siguiente paso es probarlo. UX es derivado del Diseño Basado en Evidencia o en Investigación.
Tú no eres el usuario.
Tú no eres el usuario.
Tú no eres el usuario.
Tú no eres el usuario.
Tú no eres el usuario.
Tienes que validar con alguien que lo que estás poniendo en ese papel lo entiende alguien más ¿Ese alguien cree que lo más importante es lo que tu pensabas que era lo más importante? ¿Ese alguien entiende el proceso como tú lo estás visualizando? - A partir de prueba y error, puedes ir afinando tu interfaz EN BLANCO Y NEGRO. Primero evaluando la relación entre los componentes, el flujo entre las pantallas.
A esto le llamamos “incrementar la fidelidad” Y eso es porque Diseñar en alta fidelidad consume mucho tiempo, requiere ir prestando atención a detalles cada vez más pequeños.
Nosotros no somos el usuario, probablemente lo que estamos poniendo en papel está mal y lo vamos a tener que cambiar ¿Para que perder el tiempo detallando cosas que seguramente van a cambiar? Para ir rápido hay que ir lento.
Tu crees que te ahorras tiempo diseñando en alta fidelidad, pero realmente lo único que estás causándole es tener que ajustar decenas de componentes y una deuda que crece exponencialmente.
Ya quisiera ver a un Diseñador Industrial mandado a construir algo sin hacer pruebas estructurales. La soberbia de creer que tu sabes lo que el usuario quiere NO TIENE LUGAR EN UX. Incluso el mismo Norman ha escrito al respecto de eso.
- Ahora podemos agregar color.
El color complementa la experiencia. Comunica una identidad de marca, comunica un “mood” (Rojo si algo es una alerta crítica, por ejemplo).
El color debe usarse con mucho cuidado porque hay gente con padecimientos visuales que no los identifica de manera correcta, además los colores tienen diferentes significados en diferentes culturas.
Lo más importante del color es cuidar el contraste y cómo los colores se complementan, pero si quieres comunicar un “feel” como lujo o calor de hogar, con tus colores, asegúrate de haber hablado con tus usuarios primero.
Por ejemplo, dorado y negro suele ser una combinación que muchos relacionan con lujo, menos las personas que realmente compran cosas lujosas (según mi investigación de usuarios)
El color es la cereza del pastel, es algo que termina de complementar o informar el Diseño que estableciste en los pasos anteriores. - Animaciones y micro interacciones.
Las animaciones pueden complementar una experiencia, informando pasos y transiciones para guiar al usuario.
¿Para qué sirve?
Google no tuvo un solo Diseñador hasta 2007. En 2007 Google facturó 3 mil 200 millones de dólares.
Amazon, el ecommerce más utilizado del mundo, con un Market Share del 45% antes de la pandemia no cumple con lo que consideramos tradicionalmente “estético” o “simple”
Cuando Jobs murió, dejó un Apple con un valor de 7 Billions.
Estas empresas tienen algunos de los productos más exitosos en la historia, no porque sean bellos, sino porque entendieron que el Diseño Visual cumple una función.
Amazon usa Diseño Visual para decirle al cliente el precio final que va a pagar por algo. Antes los e-commerce no te mostraban el precio final, tenías que agregarle una serie de números al final.
Amazon usa Diseño Visual para ofrecer una experiencia consistente independiente si el vendedor son ellos o un tercero.
Amazon usa Diseño Visual para facilitarte encontrar productos que nunca se te hubiera ocurrido buscar ofreciendo productos recomendados en momentos clave de la navegación.
Estas empresas usan Diseño Visual para hacer que el producto sea útil. Es fascinante entrar a Dribble y ver decenas de “rediseños” de Amazon, bonitos, sin duda, pero sin investigación que lo soporte, son ejercicios superficiales que fallan en entregar valor de la manera en la que la interfaz genera.
Diseño Visual, cuando prioriza la estética a la funcionalidad, es responsable de algunas de las peores prácticas en el Diseño de Interfaz:
Los carruseles de producto, ignorados por la mayoría de los usuarios según NNg
Los menús hamburguesa que causan el 50% de abandono
Iconografía sin etiquetas que son ignoradas por completo por usuarios
Navegación adentro de navegación
Exceso de animaciones que alenta la plataforma o que la hace incompatible con dispositivos menos poderosos
Imágenes principales (Hero Images) que no informan nada del sitio
Diseño inaccesible imposible de usar para invidentes o con algún problema motriz.
De lo que se me ocurre ahorita.
¿Sabes cómo evitar todos y cada uno de esos problemas? hablando con usuarios, evaluando tu diseño.
El valor de Diseño Visual en UX está en que lo que el usuario percibe estético, tiene una mayor probabilidad de interacción. Se trata de influenciar la percepción del usuario.
Quiero cerrar con esto. Como Diseñador de Interfaz, tu trabajo es:
- Que el usuario sepa dónde está
Hacer evidente la navegación
- Que el usuario sepa qué hacer
Hacer evidentes las acciones posibles y enfatizar las “correctas”
- Que el usuario sepa qué va a pasar
Hacer evidentes las consecuencias
- Que el usuario sepa si algo está mal
Hacer evidentes los errores
- Que el usuario sepa que logró lo que quería
Hacer evidentes los resultados
Si no estás haciendo esto, probablemente estás haciendo Diseño Visual, pero definitivamente no estás haciendo UX
Cierre
Vamos a dejarla ahí. Si aprendieron algo invítenme un café con la liga en la descripción, compartan este episodio a quien creen que puede servirle y déjenme un like y un comentario platicandome lo que aprendieron.
Háganme llegar sus dudas por acá, Twitter o Linkedin para contestarlas en las siguientes ediciones y no olviden revisar la descripción del video para notas y referencias.
Nos vemos el próximo miércoles y… Felices trazos.
Notas del programa
How Visual Design Makes for Great UX
Visual Design Basics
https://www.usability.gov/what-and-why/visual-design.html
Why Visual Design Is More Than Meets the Eye
https://uxmag.com/articles/why-visual-design-is-more-than-meets-the-eye
The Principles of Design and Their Importance
https://www.toptal.com/designers/ui/principles-of-design
The Role of Visual Design In User Experience
https://xd.adobe.com/ideas/principles/web-design/role-visual-design-user-experience/
The Design Theory Behind Amazon’s $5.6 Billion Success
https://www.fastcompany.com/90160960/the-design-theory-behind-amazons-5-6-billion-success
A Theory of User Delight: Why Usability Is the Foundation for Delightful Experiences
https://www.nngroup.com/articles/theory-user-delight
How To Use Color In UI Design Wisely to Create A Perfect UI Interface?
https://blog.prototypr.io/how-to-use-color-in-ui-design-wisely-to-create-a-perfect-ui-interface-6e524bd023bc
