Diseño de Producto: UX, UI y UX Research
Contenido del curso
En esta clase vamos a conocer las tres disciplinas que hay dentro del diseño de producto, que es el diseño de las experiencias, el diseño de interfaz y la investigación de la Experiencia de Usuario - UX Research. Estos conceptos nos darán una visión general sobre diseño, producto, UI o interfaz.
Sin embargo, en este curso no sólo queremos centrarnos en el diseño de productos estéticos o funcionales, sino que buscamos que los productos que se creen sean adecuados a los usuarios y consigan resolver un problema. Por este motivo, también vamos a conocer otro tipo de términos que deben ir de la mano del diseño, que son la Experiencia de Usuario, UX Research y el diseño centrado en el usuario.
La Experiencia de Usuario en diseño
El UX design o en español; el diseño de la experiencia de usuario, es una disciplina que, a través de procesos de trabajo, se encarga de modelar y crear experiencias positivas en el uso de un producto.
La mayor parte de las funciones del diseño UX tienen que ver con la interacción entre el usuario y el producto, pero para conseguir que esta interacción proporcione experiencias positivas, se deben incluir procesos de investigación y Testing, desde el inicio del proceso hasta las últimas fases de la iteración del producto.
Lo que se trata de conseguir con el diseño UX es crear productos:
En definitiva, el diseño de la Experiencia de Usuario abarca todo el proceso desde la captación de la información correcta y comprensión del problema a resolver, hasta la creación del producto, que permita la facilidad de uso, para que las personas puedan realizar los procesos que desean de forma rápida y concisa.
Para profundizar en este concepto también es necesario conocer el término UX:
La UX o Experiencia de Usuario son las percepciones y respuestas resultantes del uso de un producto, sistema o servicio. La UX incluye todas las emociones, creencias, preferencias, percepciones, respuestas físicas y psicológicas, comportamientos y logros de las personas usuarias que ocurren antes, durante y después del uso. La UX también engloba el ambiente, contexto o entorno en el que se va a utilizar un producto.
La Experiencia de Usuario abarca todos los aspectos de la interacción del usuario final con un producto digital. La Experiencia de Usuario está compuesta por diferentes aspectos del producto:
De esta forma, la Experiencia de Usuario permite a las personas encontrar información en un producto digital de forma fácil y rápida, realizar las tareas que se proponen de forma óptima y vivir una interacción con el producto digital positiva.
La verdadera Experiencia de Usuario va mucho más allá de dar a los clientes lo que dicen que quieren o proporcionar las funciones de lista de verificación. El primer requisito para una Experiencia de Usuario positiva es satisfacer las necesidades exactas del cliente, sin complicaciones ni molestias. Tras esto se podrá pasar a trabajar en la simplicidad, la elegancia y un diseño visual estético.
Para lograr una Experiencia de Usuario de calidad, se debe conseguir una coordinación perfecta de los servicios de múltiples disciplinas ingeniería, marketing, diseño gráfico e industrial y diseño de interfaz.
Un ejemplo de Experiencia de Usuario es la forma que nos hace sentir un e-commerce de venta de tickets. Este sitio web puede ser que esté muy bien diseñado y que sea fácil e intuitivo, de forma que logremos satisfacer la necesidad de obtener el ticket que estamos buscando. Por otro lado, puede ocurrir que el e-commerce esté diseñado sin tener en cuenta la Experiencia de Usuario, por lo que la persona usuaria no logrará comprender la página web y se perderá realizando los pasos necesarios para realizar la compra. En este caso, el producto no logra satisfacer la necesidad de la persona y esta experiencia será negativa y frustrante.
Dentro de un producto digital, todo aquello que se puede percibir por los sentidos es lo que compone la UI, es decir, la interfaz con la que está en contacto el usuario.
El diseño de las interfaces de usuario o UI Design en un producto, es lo que se percibe por los sentidos por parte de las personas. Es el punto de contacto específico o activo con el que interactúa el usuario con un producto, incluyendo en ellas las interfaces visuales o de voz.
El diseño de la interfaz debe tener en cuenta la identidad de marca y la guía de estilo que debe tener un producto para desarrollar su diseño visual, sus iconos, tipografías, colores, ilustraciones y gráficos. Para crear una interfaz de calidad, es necesario que esta permita a los usuarios realizar las funciones que desean dentro de ella. La interfaz deberá poder adaptarse a todas las características y necesidades del usuario, así como facilitar el uso y su comprensión. Toda esta parte estética y visual del producto ayudará a que proporcione una experiencia al cliente satisfactoria.
Para entender mejor la diferencia entre el diseño de la Experiencia de Usuario y el diseño de Interfaz de Usuario podemos tomar como ejemplo la creación de las tartas que propone el NNGroup. La tarta tiene dos componentes:
Por otro lado, encontramos la composición de la tarta, es decir, las materias primas que se han utilizado para cocinarla, la forma en la que se ha horneado el bizcocho o incluso si la tarta tiene relleno. Todo esto, va a hacer que la tarta sepa mejor o peor o incluso que se adapte mejor a los gustos de unas personas u otras.
Como podemos ver hay grandes diferencias entre el diseño de la interfaz y el diseño de la experiencia, siendo la UI con lo que interactuamos, lo que se ve del producto, y la UX lo que nos transmite el producto y si logra cumplir con lo que las personas esperan de él.
Estas dos vertientes del diseño deben ir de la mano ya que son aspectos complementarios que garantizarán una buena experiencia a las personas. Imagina que un pastel tiene un buen sabor pero no es estético, será fácil de comer pero difícil de vender. Por otro lado, si el pastel es bonito en el exterior pero no está bien cocinado provocará una reacción negativa en los usuarios.
Para conseguir diseñar un producto que proporcione experiencias usuario positivas será necesario hacer investigaciones y conocer cuáles son sus necesidades. Esto se conoce como UX Research.
¿Cómo podemos conocer las necesidades del usuario?
El UX Research es una parte fundamental del diseño de Experiencia de Usuario. La investigación de UX abarca una variedad de métodos de análisis utilizados para agregar contexto y conocimiento al proceso de diseño.
El objetivo principal de la investigación es informar el proceso de diseño desde la perspectiva del usuario final, de forma que se aporte información sobre el contexto en el que el usuario utilizará este producto o servicio y qué necesita de este producto.
De esta forma el Research es el primer paso que debemos dar en el diseño y nos ayudará a conocer al usuario y tener un contexto sobre sus características y lo que necesita, para después poder comenzar a diseñar un producto centrado en el usuario.
Sin embargo, generalmente el ser humano no sabe lo que quiere, no sabe expresar cuáles son sus necesidades y desconoce que su percepción está sesgada. Por este motivo no logra verbalizar sus problemáticas y es complicado registrar estas circunstancias.
Por este motivo, las personas responsables de llevar a cabo la investigación previa al diseño de los productos tienen grandes retos:
Un ejemplo de un estudio que se puede realizar una persona encargada de Research para un producto digital es realizar un estudio etnográfico o de observación para comprender cómo utilizan los usuarios una aplicación, conocer sus necesidades y desarrollar mejoras en las funcionalidades de esta aplicación.
Una de las partes más básicas cuando hablamos de diseño de producto digital son el diseño de las pantallas y las interfaces, pero estos términos suelen dar lugar a confusión. A continuación se va a detallar cada una de ellas.
Diferencias entre pantallas e interfaces
El diseño de pantalla es la concepción y creación de la interfaz gráfica de usuario. El diseño de pantalla trabaja la composición de los diversos elementos y contenidos que crean la apariencia en su respectiva interfaz.
La disposición de los elementos que se pueden ver en la pantalla es de suma importancia en el diseño de producto y el diseño de la Experiencia de Usuario. En el diseño de pantallas, la atención se centra en maximizar la usabilidad y accesibilidad para proporcionar experiencias positivas haciendo que la interacción del usuario sea lo más simple y eficiente posible.
Un ejemplo de pantalla podría ser la pantalla de inicio de Airbnb.
En esta pantalla podemos ver una distribución de los elementos de la interfaz que nos transmiten los valores de la marca a través de un diseño emocional. Además, la interfaz tiene un diseño sencillo y fácil de comprender, lo que mejora la experiencia de los clientes.
La interfaz es la conexión que se crea entre un producto y **el usuario que interactúa con él. Este Software permite transformar las señales generadas por el dispositivo o sistema en señales comprensibles por las personas.
La interfaz es la parte del producto que las personas ven, sienten, tocan y escuchan, que captura la interacción del usuario y se comunica con él. Un buen diseño de Interfaz de Usuario puede ayudar a crear una experiencia específica conociendo el contexto específico de una persona y diseñando en base a los deseos que quiere satisfacer.
Un ejemplo de interfaz podría ser un asistente inteligente, como Siri o Alexa y en este caso estaríamos hablando de una VUI o una interfaz de voz.
Para concluir con los términos básicos de diseño vamos a finalizar con los términos diseño de la interacción, que nos ayudará a crear una comunicación con el usuario, y diseño centrado en el usuario, una de las orientaciones más importantes del diseño.
¿Qué es el diseño de interacción?
El diseño de la interacción (IxD) es la práctica de diseñar productos, entornos, sistemas y servicios digitales o físicos partiendo de la información que se ha hallado al explorar cómo los usuarios pueden interactuar con aquello que se esté creando. El Diseño de Interacción es una parte del diseño UX que define la estructura y el comportamiento de los sistemas interactivos.
El diseño de interacción es una fase en la que ya ha habido un proceso de investigación, un entendimiento del usuario y su contexto, y nos centramos en aplicar los aprendizajes a través del diseño de la interacción humano-máquina. Esta parte del diseño de la Experiencia de Usuario es la que se encarga de examinar concretar las formas en las que las personas y la tecnología responden ante una acción o uso concreto. La interacción tiene 5 dimensiones:
Un ejemplo de diseño de interacción podría ser el cambio de pantalla que se produce en una interfaz tras haber seleccionado un botón, por ejemplo, cuando un usuario hace clic en el botón “pagar” y se carga la pantalla de checkout para comenzar el pago de los productos. Esta interacción deberá dejar claro al usuario que se encuentra en una nueva pantalla en la que tendrá que introducir los datos personales y bancarios para continuar con el proceso de compra.
El diseño de interacción está basado en la creación de una comunicación efectiva con el usuario, de forma que le permitamos lograr sus objetivos.
Cuando diseñamos productos debemos asegurarnos de tener una visión centrada en las necesidades de las personas y construir productos involucrando a los usuarios en el proceso. A través de la investigación y la iteración de los productos podremos lograr construir productos accesibles y utilizables. Todo esto lo podemos resumir en el término UCD (User Centred Design) o diseño centrado en el usuario.
¿Cómo lograr centrar el diseño en el usuario?
El Diseño Centrado en el Usuario es una filosofía de diseño centrada en la creación de productos que resuelvan necesidades concretas, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el mínimo esfuerzo. Para conseguirlo es necesario realizar análisis con usuarios para utilizar el enfoque correcto.
El User Centred Design o Diseño Centrado en el Usuario es una colección de procesos que se llevan a cabo para poner a los usuarios en el centro del diseño y el desarrollo de los productos.
Cuando creamos DCU debemos tener en cuenta cinco principios esenciales:
Por otro lado, hay varios elementos esenciales que componen el DCU:
Un ejemplo de un diseño centrado en el usuario puede ser la herramienta Trello ya que la interfaz solo muestra características y elementos que benefician al usuario convirtiéndola en una herramienta sencilla e intuitiva.
CONCLUSIÓN:
Para lograr un diseño adecuado es esencial asegurarnos de tener una visión centrada en las necesidades de las personas y construir productos involucrando a los usuarios en el proceso. Para ello debemos realizar investigaciones e iterar los productos hasta lograr construir productos accesibles y utilizables. No solo es esencial diseñar interfaces y pantallas, el Research previo y el testeo con usuarios es esencial para conseguir un diseño centrado en el usuario.
RETO:
Escoge un producto digital que sea un diseño centrado en el usuario y explica los motivos por los que crees que es un buen diseño. Ahora escoge al menos 5 interacciones que se produzcan en la interfaz del producto y comenta el lenguaje que se utiliza en ellas .
Raul Chullo Valeriano
Andrea Reyes
Elder José López López
Alejandra Sarahí Monroy Vélazquez
Alejandro Guiberra
Ramón Ruiz
Pedro Isaac Aguilar
Arturo Ortiz Villegas
Oscar David Torres C.
Camila Ossa
ANDRES PRADA
Ana María Contreras Pantoja
Carlos Eduardo Granada Galvis
Federico Villanueva
Jean Mosqueda
Miguel Angel Reyes Moreno
Daniel Steven Carrera Osorno
Nathaly Milena Zelaya Caballero
Austen Bernard
Alejandro Velasco casco
Susana Cao Triñanes
Omar Lara
La pagina web de Netflix, es muy minimalista, fácil de usar y al inicio te brinda una introducción de lo que estas a punto de elegir.
Las características juegan con lo que los usuarios quieren Juan con la visibilidad, facilidad de encontrar contenido requerido.
La aplicación de Duolingo, es sencilla de entender, la interacción esa diseñada para que sea divertido aprender
Tiktok es una droga en gran parte debido a que usa una simbología muy común y con acciones predecibles para sus botones. Haciendo que personas que nunca hayan usado la aplicación entiendan su uso al instante. La interacción esta estratégicamente colocada para que este al alcance de la mano derecha al usar el móvil en modo vertical(la forma mas orgánica de sostener un teléfono), eso teniendo en cuenta que aproximadamente del 70% al 95% de la humanidad no es zurda. Interacciones: Seguir usuario, Recomendar, Comentar, Compartir and Swype. Aunque aun no entiendo ¿A que se refiere con el lenguaje que se utiliza en la interfaz?
La aplicación de Banco Azteca es una app centrada en el usuario, considero que hay muchos puntos que favorecen a la aplicación:
Interacciones dentro de la app:
¡Gracias por tu aporte esto era información que justo ahorita necesito para mi trabajo! No sabía que estaba tan bien hecha su app, ¡me sorprende! La puedes comparar con otra aplicación de banca en línea o tipo wallet? En particular el ecosistema de BBVA me parece muy bueno, además de las UI de otros neobancos como Fondeadora
Términos básicos de diseño y experiencia de usuario
La Experiencia de Usuario en diseño
El UX design se encarga de crear experiencias positivas en el uso de un producto con procesos de investigación y testing. La mayor parte de las funciones tienen que ver con la interacción entre el usuario y el producto.
El diseño UX trata de conseguir que el producto sea:
El UX design abarca todo el proceso desde la captación de información hasta la creación del producto.
UX(Experiencia de usuario) son las respuestas o percepciones por el uso del producto durante y después de este uso, englobando el ambiente, contexto o entorno en el que se utiliza el producto.
La UX incluye:
La UX abarca todos los aspectos de la interacción del usuario final con el producto digital. Los aspectos del producto en la UX son:
Al satisfacer las necesidades exactas del cliente, sin molestias se obtendrá una UX efectiva. Esto lo logramos coordinando los siguientes equipos:
UI es todo aquello que podemos percibir del producto por medio de los sentidos, es la interfaz que tiene contacto con el usuario. Esto incluye interfaces visuales y de voz.
Lo que debemos tener en cuenta en el diseño de interfaz es:
Un diseño de Interfaz efectivo puede adaptarse a todas las necesidades del usuario, facilitando su uso y comprensión.
UX y UI van muy de la mano, siendo la UI con la que interactuamos con el producto y UX lo que el producto nos transmite.
¿Cómo podemos conocer las necesidades del usuario?
UX Research es la forma con la que investigamos que necesidades tiene nuestros usuarios. Su objetivo es informar el proceso de diseño desde la perspectiva del usuario final, así sabiendo que contexto y necesidad tendrá el usuario con el producto. Siendo así el primer paso para empezar a diseñar.
Aún que a veces los usuarios no saben que quieren por lo que el UX Research se enfrenta a grandes retos como:
Diferencias entre pantallas e interfaces
Diseño de pantalla es la composición de elementos y contenido que crea la apariencia de la interfaz. Donde centramos nuestra atención en la usabilidad y accesibilidad creando una experiencia positiva con una interacción simple y eficaz.
Interfaz es crear una conexión entre un producto y el usuario, transformando las señales del dispositivo por algo comprensible para las personas. Siendo la parte del producto donde:
¿Qué es el diseño de interacción?
IX design es la forma de diseñar productos, entornos, sistemas y servicios en base a la información que tenemos de como los usuarios interactúan con el producto. Siendo una parte de UX que define la estructura y comportamiento de los sistemas interactivos. Usando nuestro conocimiento obtenido de investigación previa para entender la interacción que podemos lograr humano máquina.
La interacción tiene 5 dimensiones
El diseño de interacción crea la comunicación efectiva con el usuario para que este logre cumplir sus objetivos.
¿Cómo lograr centrar el diseño en el usuario?
UCD (Diseño centrado en el usuario) es la forma en la que centramos nuestra atención en resolver las necesidades exactas del usuario, consiguiendo la mayor satisfacción con el producto, teniendo el menor esfuerzo.
5 Principios esenciales del DCU:
4 Elementos esenciales del DCU:
La interfaz de Figma está centrada en el usuario, que usualmente son los diseñadores UI/UX y desarrolladores, al sólo mostrar unos pocos botones de herramientas sin saturar la vista del creador que trabaja en ella. Tiene una interfaz intuitiva, amigable con el usuario, minimalista y muy limpia visualmente. . El usuario tienen a la mano cada herramienta de manera sencilla y muchas veces es hasta más fácil de ubicar cada elemento que en programas de Adobe incluso, los cuales tienen más ventanas y casillas interpuestas o flotantes, algo que Figma simplificó en las columnas laterales.
Una producto digital que es muy centrado en el usuario productivo es Notion.
Mercadolibre
Considero que es una plataforma de fácil usabilidad que permite encontrar y adquirir el producto que necesito. Tiene todas las cualidad de un producto pensado en el usuario, puesto que, tiene listas de categoría, filtros, promociones, destacados, rankings entre otros.
Whatsapp: Es un buen diseño porque al ingresar directamente se encuentra en la sección del chat, que es lo que le interesa al usuario, si uno quiero acceder a las otras secciones o pantallas pues se encuentra al alcance del usuario, éstas son: comunidad, updates y llamadas, entonces:
Airbnb es un producto digital donde su diseño esta centrado en el usuario, ya que permite de una manera, agil, facil e intuitiva conseguir lo que deseas o buscas mas rapido y de forma satisfactoria.
La aplicación de NEQUI me parece que es un producto digital centrado en el usuario, ya que tiene se identifica cuales son las acciones que se puede hacer y cuales son los productos que pueden utilizar, además, es una de las aplicaciones bancarias en la que se puede verificar si el dinero que se manda es para la persona a la que se le envía.
Spotify y Pinterest en sus versiones móviles. Ambas APPs cuentan con un diseño simple, menús simplificados y un uso bastante sencillo. Ambas aplicaciones me permiten organizar mis elementos favoritos de manera sencilla en carpetas personalizadas que se pueden crear en apeas tres tiempos. Las recomendaciones tanto de imágenes como de música están altamente optimizadas según el contenido con el que interactúo permitiéndome conocer más y en algunos casos mejor contenido adaptado a mis gustos.
Producto elegido: Spotify
Spotify es un producto digital centrado en el usuario porque tiene una interfaz simple, intuitiva y fácil de usar. Permite encontrar y reproducir rápidamente distintos tipos de contenido, adaptándose a los intereses del usuario.
Algunas interacciones y el lenguaje que utilizan son:
Youtube mismo.
1-Posee un buscador para que las personas puedan encontrar lo que sea que quieran encontrar. 2- Listas de preferidos privadas y publicas para compartir o para guardar para más tarde. 3- El sistema de Me gusta y No me gusta alimenta a un algoritmo que tomara en cuenta estos para mostrarte más contenido que te gusta 4- "Compartir" para que con un solo botón lo puedas enviar a cualquier red social. 5- Los comentarios le dan un aspecto social a todo lo ya mencionado, haciendo que la plataforma tenga otro peso totalmente distinto ya que deja de ser una web de videos, y se convierte en también en un lugar para encontrarte con otras personas.
La aplicación de Spotify. Aquí podemos buscar canciones, cantantes, géneros musicales, podcasts. Además de escuchar, podemos darle like o dislike a lo que escuchamos para mejorar el algoritmo de recomendación de nuestros gustos. Podemos crear listas de reproducción y compartir las canciones con nuestros contactos.
El videojuego "Mini Metro" en su interfaz es bastante minimalista, su diseño hace uso de las convenciones globales de transporte para ilustrar los distintos elementos del mismo. Cuenta con una distribución de contenido equilibrada y ordenada de fácil aprendizaje y entendimiento. Aunque todos los niveles y escenarios pudiesen sentirse repetitivos, hace uso de simplificaciones de relieve que añaden suficiente diferenciación para conseguir un efecto representativo en cada uno.
WhattsApp:
I had trouble sorting through UI UX design companies in USA because search results can feel messy. This link gives a list that is more organized and simple to read. It helped me see which teams focus on apps, websites, or bigger digital products. I like that it shows many firms, not just one or two. If someone is planning a project and wants to see options side by side, this page may help. It does not feel pushy or confusing, just clear and useful.
no me queda muy en claro la diferencia entre "pantalla" e "interfaz"
Yo lo entiendo de forma que "Pantalla" es la gráfica de lo que vemos (por ejemplo, el fondo azul de Platzi, los botones con un azul más claro, mensajes en verde...); y la "Interfaz" es ese conjunto de gráficos en interacción con el usuario/a; es decir, el software con el que interactuamos al, por ejemplo, estudiar en Platzi (clicamos en botones, vemos la pantalla y leemos, escuchamos...).
Puede que con esta explicación lo entiendas mejor:
Una interfaz (interfaces, en plural) se utiliza en informática para nombrar a la conexión funcional entre dos sistemas, programas, dispositivos o componentes de cualquier tipo, que proporciona una comunicación de distintos niveles, permitiendo el intercambio de información. Ejemplos de interfaces en informática son las interfaces de usuario (entre computadora y persona), como sería una pantalla o un ratón (en el caso de hardware) o la ventana gráfica de un programa con el que se interactúa (en el caso de software)
Domestika presenta una interfaz altamente funcional, con una jerarquía tipográfica bien definida, lo que facilita la exploración del contenido y la priorización de información. La tipografía utilizada es versátil, legible y coherente, con un contraste cromático eficaz que mejora la accesibilidad y lectura prolongada en distintos dispositivos. El tono de los textos es claro, directo y empático, alineado con los principios de UX Writing, lo cual guía al usuario sin generar fricción.
La landing page está estructurada de manera modular e intuitiva, incorporando categorías personalizadas como:
Mis cursos
Cursos recomendados
Novedades
Something to learn
Cada bloque cuenta con imágenes contextuales de alta calidad, que refuerzan el contenido del curso mediante un sistema visual semántico que facilita la comprensión sin necesidad de texto adicional.
La plataforma tiene un diseño responsivo, optimizado para dispositivos móviles, laptops y desktop. Esto permite una experiencia fluida sin importar el punto de acceso.
Desde la investigación de contexto, se puede inferir que los entornos de uso más frecuentes son espacios tranquilos y controlados: habitaciones, oficinas, bibliotecas o zonas abiertas con bajo nivel de ruido, ya que el producto está pensado para el aprendizaje prolongado y técnico.
Domestika está diseñada para sesiones largas de interacción, propias de entornos educativos digitales. Los usuarios suelen pausar, retroceder o repetir contenido mientras siguen videotutoriales paso a paso, lo que implica que la plataforma ofrece resiliencia cognitiva y control de flujo, aspectos clave en el diseño UX educativo.
Además, la estructura de navegación promueve la exploración autónoma, permitiendo al usuario construir su propio itinerario formativo a través de diversas disciplinas como diseño gráfico, ilustración, animación, programación, fotografía y más.
El modelo de Domestika ofrece acceso a formación especializada a bajo costo, lo que incrementa el valor percibido, y actúa como motivador para usuarios que desean actualizar sus competencias profesionales de forma flexible y a su propio ritmo. Esto fortalece la percepción de autonomía, accesibilidad e inclusión digital, elementos fundamentales en experiencias educativas digitales exitosas.