Principios de Diseño UX y diseño UI
¿Qué es la experiencia de usuario?
¿Conocés Starbucks? ¿Alguna vez entraste a alguna sucursal o local? ¿Cómo te sentiste? Si se te vino a la mente algún recuerdo o experiencia, esto tiene que ver con cómo sentiste y relacionaste con la marca. Entonces, la experiencia de usuario se trata de eso, de cómo un individuo o persona se relaciona con un producto, empresa o servicio. No simplemente por comprar el café sino de toda la experiencia completa, cómo nos sentimos al entrar, cómo nos tratan los empleados, esto de escribir nuestro nombre en el café, cómo es todo ese proceso desde que entras hasta que salís. Es lo que experimentamos y vivimos cuando tenemos contacto con una marca. No se trata solamente de las interacciones digitales como suele confundirse, sino que se trata de todo el combo completo que ofrece una marca. En este caso, el diseño de experiencia de usuario se involucra en “cómo piensan los usuarios”, esto lo hacen a través de la recopilación de información sobre sus comportamientos, pensamientos a la hora de interactuar con un producto o servicio. Para después aplicar esa información para crear un producto en donde la utilidad/usabilidad sea lo más satisfactoria y placentera posible.
Principios de UX
Cuando entramos en el contexto digital, hay muchísimas aplicaciones que nos ayudan o forman parte de las funciones y rutinas de nuestro día a día. Es por eso que es importante que al utilizar productos o servicios digitales, lo hagamos de forma cómoda y segura. Algunos principios que podemos destacar para tener una buena experiencia de usuario son:
Predecir el comportamiento del usuario
Como mencionamos antes, investigar a los usuarios forma parte del rol del diseñador UX. A partir de esa información podemos saber un poco más sobre cómo se comporta el usuario y qué está esperando. Es crucial diseñar de forma estratégica con la finalidad de que el usuario pueda navegar en nuestro sitio o aplicación de forma intuitiva y que pueda obtener resultados de manera eficiente.
Reducir la carga cognitiva
En este caso para ejemplificar, vamos a “tomarnos” como ejemplo. Ambas vivimos en Pinamar, un lugar con mucha naturaleza y pocos habitantes. ¿Cómo creen que nos sentiríamos caminando por estas calles?
Es probable que nos abrume tantas luces, carteles para leer y movimiento ¿no? Este principio se trata de no saturar al usuario con tantas decisiones, botones malposicionados o dudosos ya que genera inseguridad a la hora de encontrar la información que está buscando y puede dar como resultado que el usuario huya o se frustre en el medio de una tarea.
Simplificar la funcionalidad
Tenemos como ejemplo mercado libre: si yo quiero un producto, voy a la lupa hago la búsqueda y ya tengo resultados de lo que estoy buscando ¿Cuántos pasos me llevó? Es importante que la funcionalidad de nuestros diseños ayuden a las personas usuarias a completar un objetivo en la menor cantidad de clics o acciones posibles.
Aclarar las llamadas en acción
Un ejemplo de llamada en acción es el botón “comprar” o “agregar al carrito” cuando estamos en un sitio web o app. Cuando creamos este tipo de botones es importante ser claros y precisos. No hay que generar ambigüedad en el usuario, esto hace que se le dificulte tomar una decisión o dudar.
Administre los errores de manera efectiva
Siempre pueden presentarse errores. En ese caso, cuando el usuario se encuentra ante esta situación, se debe ser lo más claro posible. Los mensajes de error deben ser directos y estar acompañados con información para que puedan solucionarse en el momento. Si no advertimos al usuario de forma correcta vamos a generar frustración, al contrario si se advierte de la mejor manera, ayuda a que la experiencia sea satisfactoria.
Qué es Diseño UI
El Diseño UI se trata de la capa externa de un producto digital, la superficie de un sistema digital, su cara visible. Son los elementos visuales con los que el usuario interactúa para que su experiencia sea lo más agradable y satisfactoria posible. Su objetivo es que a través de lo visual, las interacciones entre el usuario y la interfaz sea lo más fácil y eficiente posible para poder cumplir una tarea o resolver un problema.
Principios básicos (UI)
Identificar el problema
Lo principal es saber qué debemos solucionar, para qué estamos diseñando. Es importante definirlo con anticipación antes de empezar, caso contrario estaríamos realizando un trabajo sin saber para dónde apuntar. A futuro, esto puede traer problemas que se podrían haber evitado investigando a fondo para poder encontrar las solución adecuada.
Estructurar
Una vez detectado el problema, estructuramos nuestro producto. Esto debe plantearse con un propósito, con modelos claros y consistentes que el usuario ya conoce, que ya sepa identificar y sean reconocibles. Separar elementos que sean diferentes así como también agrupando los que sean similares unos con otros.
Menos es más
Para que el diseño sea reconocible, debemos hacerlo a través de tareas fáciles y comunes. Hay que diseñar de manera sencilla, con pocos elementos para no aumentar la carga cognitiva de la persona usuaria (¿Qué es la carga cognitiva? Es el esfuerzo utilizado para comprender cierta tarea). Es importante que se puedan identificar las principales funciones de manera rápida para agilizar la experiencia de la persona usuaria.
Consistencia
Cuando hablamos de consistencia nos referimos a mantener el aspecto y relación de los elementos a lo largo de toda la experiencia para no generar confusiones. Es decir, mantener el diseño de la tipografía, paleta cromática, morfologías, interacciones, entre otros. Para ello vamos a tener una guía de estilos definida que nos ayude a construir cada pantalla de forma dinámica y consistente, porque la consistencia ayuda a que la persona usuaria reconozca mucho más rápido los elementos lo que hará que fluya su interacción.
Jerarquía visual
Una buena forma de ayudar a la consistencia es crear jerarquías visuales, a través de tamaños de elementos, posiciones, colores, espacia-do. Establecer jerarquías permite que los elementos no compitan entre sí, además de permitirnos jugar con las composiciones de diseño.
Retroalimentación
Mantener al usuario informado a medida que interactúa con la interfaz, que sepa que es lo que está haciendo o qué consecuencia tendrá una acción. Qué es lo que va a pasar o qué va a cambiar si hace click en un botón o también si se presenta algún error.
Idioma del usuario
Conocer a nuestra persona usuaria es fundamental para saber cómo vamos a hablarles y utilizar el lenguaje apropiado. Definir un tono y una voz. Crear mensajes claros y concisos, con un tono amigable porque no queremos sonar como máquinas, debemos comprender que nos dirigimos a seres humanos.
No somos el usuario
No debemos encerrarnos en ideas sin tener en cuenta lo que la persona usuaria nos está marcando como necesidad. Si bien somos quienes tenemos a cargo el diseño, no somos quienes lo utilizarán. Debemos tener en cuenta la experiencia de la persona, su opinión para poder mejorar y perfeccionar nuestra interfaz para que sea accesible y navegable para ella.
Siempre mejorando
Debemos pensar en que un diseño nunca está terminado, a medida que vamos avanzando y las personas usuarias interactúan con la interfaz, se pueden ir encontrando mejoras para poder incrementar la experiencia y la evolución del diseño. Una vez que se lanza el proyecto siempre hay que ir verificando su rendimiento para ir iterando.
Conclusión
Ambas disciplinas necesitan una de otra, ya que una interfaz visualmente correcta y “bonita” no funcionaría por si sola, requiere de un análisis previo para ver si esos elementos marchan bien. Lo mismo sucede cuando un análisis UX no tiene aplicado UI. Se trataría simplemente de un wireframe o boceto sin un planteo que sea eficiente tanto visual como funcionalmente.
Bibliografía
- Cooper, A. About Face: The Essentials of Interaction Design. New Jersey. Wiley. 2014
- Tidwell, J. Designing Interfaces. California. O’Reilly. 2020
Mordecki D., Pensar Primero, Uruguay, Biblioteca Concreta; 2004 — Link: http://www.mordecki.com/html/libro.php - Mordecki D., Miro y Entiendo, Uruguay, Mastergraf; 2012 — : Link: http://www.mordecki.com/html/miroyentiendo.php
- Inkbot Design. What Makes A Good User Interface? 13 UI Design Principles. 2020 Link: https://inkbotdesign.medium.com/what-makes-a-good-user-interface-13-ui-design-principles-b156b1fb4c13
- 17Seven. UI Design Principles. 2020. Link: https://medium.com/17seven/ui-design-principles-c6e5e63690f0
- Tarun Kohli. UX Design Principles: A simple guide to create compelling experiences. 2019. Link: https://uxplanet.org/ux-design-principles-a-book-for-aspiring-designers-42f5cf6a8e5e
- DLT Labs. The Importance of UI and UX Design. 2021. Link: https://medium.com/dlt-labs-publication/the-importance-of-ui-and-ux-design-124e6be821f7
- Lalo González. ¿Qué es ser una UX Designer?. 2017. Link: https://medium.com/laboratoria/qu%C3%A9-es-ser-una-ux-designer-f81fbc45a44c
- Heath Umbach. What is User Interface Design?. 2018. Link: https://medium.com/fresh-tilled-soil/what-is-user-interface-design-d7bf8c4561dc#:~:text=UI%20Design%20generally%20refers%20to,makes%20the%20experience%20aesthetically%20pleasing
- Lollypop Design. 7 UX Design Principles. 2019. Link: https://uxplanet.org/7-ux-design-principles-dee24510a52c
