En la clase de introducción al UX/UI entrevistamos a Montse Morales, que cuenta con más de 10 años de experiencia, es experta en experiencia del usuario y ha trabajado para empresas como Disney y Fox. En este vídeo Montse nos contesta distintas preguntas relacionadas con el UX/UI y nos expone un caso práctico a modo ilustrativo.
¿Qué es el UX/UI?
Lo primero que hay que destacar es que el mundo del UX/UI está lleno de anglicismos que se irán explicando a lo largo de la entrevista. UX/UI son dos partes del proceso de diseño, UX significa User Experience (experiencia del usuario), este se ocupa de los aspectos más conceptuales, por ejemplo; define las funcionalidades y la experiencia que tendrá el usuario dentro de la APP, página web, etc. UI se refiere a la User Interface (interfaz del usuario), este se centra en los aspectos estéticos del producto. Se puede aplicar no solo a aplicaciones digitales sino también a productos físicos, procesos administrativos, etc.
¿En qué consiste hacer UX/UI?
El UX implica principalmente investigación, es necesario comprender aspectos como las necesidades del usuario, necesidades empresariales, hábitos de uso, psicología, el uso de la tecnología.
UI se centra en los aspectos estéticos del producto, intentando transmitir la personalidad de la marca a través la tipografía, paletas de colores, tipos de botón, animaciones, ilustraciones e incluso el tono de voz. El diseño de interfaz es también muy importante para la experiencia del usuario.
¿Cómo debe ser un buen diseño UX/UI?
Un buen diseño es invisible, esto quiere decir que como usuarios hemos satisfecho nuestras necesidades y no le damos importancia al hecho de que, por ejemplo, una aplicación, web o producto funcione correctamente. Le damos importancia cuando no funciona o no responde a nuestras necesidades. Un ejemplo de mal UX sería cuando el producto es poco intuitivo o muy complejo y como usuarios no acabamos de entender cómo funciona. En el caso de un mal UI, por ejemplo, sería una tipografía muy pequeña y por tanto difícil de leer, colores poco contrastados que dificultan la diferenciación de elementos, o un botón que parece ser um botón pero luego resulta que no lo es, etc.
¿Qué debe tener un buen UX/UI?
Un buen UX, principalmente ha de ser funcional, fiable y que los tiempos de carga sean rápidos. Hay que tener mucho cuidado con los tiempos de carga puesto que suele ser lo que más molesta al usuario, una página o aplicación que tarde en cargar es un mal UX. Una posible solución para aligerar tiempos de carga es evitar diseños con archivos pesados como imágenes e ilustraciones de muchísima calidad, evitar animaciones complejas o separar procesos.
El buen UX ha de satisfacer una necesidad, no puede ser un capricho. Si además conseguimos que el usuario tenga una experiencia placentera con nuestro producto, será un UX perfecto.
En el caso de la UI lo más importante es la consistencia y coherencia entre los distintos elementos gráficos. Es necesario trabajar los elementos visuales de forma estratégica para que el diseño sea legible, coherente y aporte personalidad de marca.
Por norma general, las PYMES en España hacen mal el UX/UI. Desde seosve nos encontramos que la gran mayoría de empresas publican contenidos sin tener en cuenta la coherencia y consistencia que acabamos de mencionar, dando muy poca importancia a la imagen de la empresa. Creemos que es importante remarcar esto puesto que, cuando un usuario entra por primera vez en una página web o perfil social, esa incoherencia visual será su primera impresión y toma de contacto con la marca. Dicho de otra forma ¿Alguna vez irías a una entrevista de trabajo en pijama? Pues eso…
Recordemos también que un buen UX responde a las necesidades del usuario y no a los caprichos de un CEO o jefe. Hay que tomar decisiones basadas en datos, no porque a uno le dé la gana o por que a su cuñado no le guste, estas no son razones válidas.
Ejemplo práctico de buen y mal UX/UI
Ejemplo de mal UX/UI
En esta aplicación para repartidores de comida a domicilio se hace una comparativa de un diseño con UX y sin UX, y como habéis leído en el subtítulo, pues está mal hecho.
Elementos mal pensados de este diseño:
- No sale el nombre del restaurante, los restaurantes pequeños como Bar Manoli por norma general no tienen logo ¿Qué pasa con ellos?
- Podemos leer la palabra Cheesburger, dando importancia al contenido del paquete cuando el repartidor no necesita saber el contenido, simplemente un número de referencia asignado al producto, que por supuesto este diseño no incluye.
- El repartidor tampoco tiene constancia de si el pago se efectuará en efectivo o ya se ha pagado online.
- En el apartado de la dirección postal, no se especifica cual es el punto de recogida y de entrega.
Para realizar un UX correcto, Montse ha hecho un estudio de las empresas de reparto de comida más importantes, ha tomado ideas y añadido o quitado lo necesario para terminar con un UX adecuado para la aplicación. En la siguiente imagen podéis ver su prototipo.
Como podéis ver en la imagen, el repartidor está contento, descubramos porqué:
- La parte más importante es el mapa, que ocupa una buena parte de la zona superior en pantalla, con 2 datos muy importantes ausentes en el ejemplo mal hecho, la distancia y el tiempo que tardará en hacer el trayecto. Ambos datos son vitales para el trabajo que realiza el repartidor, así podrá calcular y organizar su tiempo mucho mejor.
- Los punto de recogida y entrega están muy bien definidos, evitando cualquier posible duda.
- Tenemos el número de pedido en la parte superior derecha, esta referencia es vital para poder identificar correctamente el pedido por si pudiera surgir cualquier imprevisto.
- Fecha y hora también son importantes para marcar cuando se entrega el pedido.
- Se especifica correctamente cuanto cuesta el pedido y la forma de pago.
- Este prototipo cuenta con feedback del cliente, es decir, si el timbre no funciona o hay un bebé durmiendo, el repartidor lo sabrá y actuará en consecuencia, evitando perder tiempo innecesario.
- Por último, en la parte inferior Montse ha añadido 2 botones para llamar directamente al restaurante o al cliente por si surgen problemas durante el reparto. Siempre es importante tener un canal de comunicación directa.
En la siguiente imagen podéis ver la versión con diseño del prototipo anterior
- Se han añadido los colores corporativos de la empresa
- Se ha mejorado la tipografía
- Se han jerarquizado los textos
Herramientas para realizar UX/UI
El UX tiene más que ver con procesos que con herramientas, es decir, mayormente se hacen entrevistas para conocer el punto de vista del usuario, se analizan datos para sacar conclusiones, se hacen encuestas para detectar alguna opinión general, se generan flujos de interacción entre pantallas, se hacen bocetos básicos para plasmar una idea en una pantalla. Cuando hablamos de prototipos si que podemos recomendar algunas herramientas para testear hipótesis, por ejemplo: Invision y Marvel. Estas tienen planes freemium, puedes realizar 1 o 2 proyectos de forma gratuita, lo cual está muy bien para empezar.
Para hacer UI utilizamos las siguientes herramientas: Figma y Sketck. También utilizamos muchísimos recursos gráficos: Unsplash, Pexels, Freepik y Flaticon. Para tipografías: Fontsquirrel y Google Fonts.
¿Qué estudiar para ser UX/UI?
A día de hoy no existen estudios relacionados con el UX en educación pública, lo más cercano en el ámbito público es el grado de diseño. Si deseas salir rápidamente al mercado laboral, es en ocasiones necesario tirar de escuelas privadas, masters, posgrados, cursos especializados. Existen también unos perfiles profesionales que ayudan a convertirse en un buen UX, esto son psicólogos, sociólogos y antropólogos, personas que entienden el comportamiento y la mente humana. Estos perfiles comparten procesos y herramientas como encuestas y análisis. Las personas con conocimientos de programación también son perfiles adecuados para el UX.
En el caso de UI, estudiar el grado de diseño es perfecto puesto que enseñan diseño gráfico de una forma mucho más amplia. Perfiles como ilustradores y diseñadores gráficos suelen ser buenos UI. En diseño también encontramos la formación más especializada en escuelas privadas.
También se puede aprender de forma autodidacta con cursos gratuitos en internet, como los de seosve 😀
Y hasta aquí la entrada de hoy. Si tenéis dudas, podéis dejarlas en los comentarios, os contestaremos encantados.
