Documentos de Académico
Documentos de Profesional
Documentos de Cultura
bienvenida!
¿Comenzamos?
Esta clase va a ser
grabada
DISEÑO UX-UI Semana #3
Clase en vivo
¿Comenzamos?
Semana 3. Diseño UX-UI
Meta: entrega de
Proyecto Final
✓ Lorem ipsum dolor sit amet
9 8 7 6
Objetivos de la clase
Identificar al usuario. Responder la pregunta ¿Para quienes
estamos haciendo lo que estamos haciendo?
Espacios para
consultas
. Recuerda durante la dinámica de cada clase se
abrirán breves espacios de consulta. Allí puedes
escribir en el chat tu pregunta.
Funcionalidades
Para evitar saturar el chat de mensajes, Por ejemplo: si se pregunta si se
utiliza los signos que figuran en el apartado escucha correctamente, debes
Participantes, dentro de Zoom.** seleccionar la opción “Sí” o “No”.
**Para quitar el signo, presiona el mismo botón nuevamente o la opción “clear all”.
Puesta en común
microdesafío
¡Vamos a recuperar lo trabajado durante la semana!
Duración: 10 minutos.
PUESTA EN COMÚN - MICRODESAFÍO
Armando la
userpersona
Descripción de la actividad.
Tiempo 15 min.
RESULTADOS - MICRODESAFÍO
Practicando con
userperona
¿Qué aprendimos?
Glosario
Persona: No es más que un individuo ficticio, Empatizar: Primera etapa de la metodología
creado para describir un usuario específico. Design Thinking o Pensamiento de diseño. En
No son personas reales, son modelos de esta instancia, el objetivo es conocer en
personas que actúan en representación de profundidad a nuestros usuarios, ¿qué
aquellas, durante todo el proceso de diseño. motivaciones y frustraciones tiene?.
Recuperamos los
temas vistos
● User persona
● Entrevistas
● Mapa de empatía
● Benchmarking
Personas
Usuario Persona
Competencias
Consumos culturales
Hábitos y costumbres
Modelos mentales
Contexto + situación
PERSONAS
Características
✔ A pesar de que son imaginarios, se definen con rigor
y precisión.
✔ Ante la imposibilidad de hablar con cada usuario
final, el “modelo persona” permite tener una
representación concreta de los usuarios finales.
Conozcamos a Carlos y Ozzy
Príncipe Carlos Ozzy Osbourne
Nació en 1948. Nació en 1948.
Creció en Inglaterra. Creció en Inglaterra.
Se casó dos veces. Se casó dos veces.
Tiene 2 hijos. Tiene 2 hijos.
Millonario. Millonario.
Le gustan los perros. Le gustan los perros.
¿Son iguales?
Construir personas no es diseñarlas según
su información demográfica.
User persona Proto persona
Una user persona ya está basada La proto-persona se basa en
en evidencia (mediante entrevistas suposiciones (como hipótesis)
por ejemplo).
Vamos a ver su
anatomía
Cuerpo de la ficha
Bloque 4: habilidades
Nuevas tecnologías, Internet, softwares,
dispositivos móviles. Se sugiere usar una
Justificación de elección escala del 1 al 5, donde 1 es nada y 5 es
Objetivo: argumentar por qué son mucho.
afines al proyecto.
Ejemplo en vivo
Duración: 10 a 15 minutos
ACTIVIDAD COLABORATIVA
1
ACTIVIDAD COLABORATIVA
2
Para pensar
Si tuviera que encontrar personas reales para
entrevistar, basándome únicamente en los
datos demográficos, ¿estaría por buen camino?
¿Si o no?
Contesta la encuesta de Zoom
Vamos armar una ficha
de persona en vivo
Ejemplo en vivo
Paso a paso
EJEMPLO EN VIVO
Ficha de persona
Caso testigo
Viaja y siéntete como en casa: alojamientos de mediano
plazo a bajo costo.
Armado de la ficha
Iremos desarrollando cada una de las partes más
importantes del armado de la ficha de persona:
✔ Introducción
✔ Datos demográficos
✔ Justificación
✔ Motivaciones y frustraciones
✔ Metas y objetivos, entre otros.
EJEMPLO EN VIVO
EJEMPLO EN VIVO
Santiago
EJEMPLO EN VIVO
Freelancer
Tipo de Usuario:
Quiere alquilar.
Santiago
EJEMPLO EN VIVO
Freelancer
Tipo de Usuario:
Quiere alquilar.
Tipo de Usuario:
Quiere alquilar.
Empatizar
Descripción de la actividad:
Pensar en 5 preguntas que le harías a tu usuario en busca de
información que te ayude a validar el problema, las frustraciones y
las motivaciones de tus usuarios.
G I E
RESEARCH RESEARCH
IDEACIÓN
GENERATIVO EVALUATIVO
Focus groups Brainstorming Pruebas de usabilidad
Entrevistas individuales Workshops Encuestas interactivas
Entrevistas en contexto Sesiones de ideación Mapas de calor
Encuestas Benchmarking Recording sessions
Desktop research Arquitectura de información Card sorting
Mapa de empatía Diagrama de usuarios Análisis de métricas
Observaciones en campo
El lugar en el proceso de diseño
G I E
Research Generativo Ideación Research Evaluativo
1 2 3 4
Definir las interfaces a Analizar cada interfaz, Comparar los Elaborar un informe.
comparar: entre 3 y 5. mediante pruebas de resultados.
usabilidad o análisis
heurístico.
Vamos a ver su
anatomía
BENCHMARKING
Página 1
Presentación
Colocar un icono y breve
reseña de las app que
formaron parte del
benchmarking.
BENCHMARKING
Página 2
APP elegidas
Colocar una captura de
las pantallas, para realizar
el benchmarking.
Tabla
El objetivo es analizar la
competencia desde
diferentes puntos. Estos
serán: vocabulario/diseño/
cantidad de pasos.
BENCHMARKING
Página 3
Página 4
Página 5
Fortalezas
Resultados
Por último, se deben presentar
los resultados del benchmarking Debilidades
realizado. El objetivo es colocar
fortalezas y debilidades de cada
competencia.
Ejemplo en vivo
Generando un Benchmarking
Antes de empezar, refresquemos cuál es el problema, el
objetivo y la solución.
Paso a paso
EJEMPLO EN VIVO
Competencia
Cantidad de Pasos
para Buscar
1 1 3 3
Cantidad de Pasos Debes hacerlo por fuera de la Debes hacerlo por fuera de la
3 3
para Reservar plataforma plataforma
EJEMPLO EN VIVO
Airbnb ZonaProp Booking.com SkyScanner
Usabilidad/ Cantidad
de pasos para buscar
y reservar
Cantidad de Pasos
para Buscar
1 1 3 3
Cantidad de Pasos Debes hacerlo por fuera de la Debes hacerlo por fuera de la
3 3
para Reservar plataforma plataforma
EJEMPLO EN VIVO Airbnb ZonaProp Booking.com SkyScanner
Usabilidad/
vocabulario
Usabilidad/
vocabulario
Usabilidad / Diseño:
ocupación del espacio
Accesible e intuitiva.
Balanceado: la relación entre los distintos elementos es
Saturación de
equIlibrada, visualmente lo más importante ocupa
información. Menú
mayor espacio, y se lee bien.
Hamburguesa
Usabilidad / Diseño:
ocupación del espacio
Accesible e intuitiva.
Balanceado: la relación entre los distintos elementos es
Saturación de
equIlibrada, visualmente lo más importante ocupa
información. Menú
mayor espacio, y se lee bien.
Hamburguesa
- Búsqueda rápida con gran variedad de - Búsqueda rápida con gran variedad - Búsqueda rápida con gran variedad - Búsqueda rápida y particular con filtros
filtros. de filtros. de filtros. interesantes para las ofertas.
- Navegación intuitiva. - Permite ordenar los resultados, - Permite ordenar los resultados, - Permite ordenar los resultados, dando al
- Comunicación directa, explicativa y dando al usuario una mejor dando al usuario una mejor usuario una mejor experiencia de
personalizada. experiencia de búsqueda. experiencia de búsqueda. búsqueda.
Fortalezas - Distribución equilibrada de la - Consistencia estética entre - Consistencia estética entre - Navegación intuitiva.
información. pantallas. pantallas. - Comunicación directa y explicativa.
- Consistencia estética entre pantallas. - Distribución equilibrada de la
- íconos, botones e imágenes de fácil información.
lectura - Consistencia estética entre pantallas.
- íconos, botones e imágenes de fácil
lectura
- No permite ordenar los resultados - Debes reservar por fuera de la - Navegación confusa, con categorías - Debes reservar por fuera de la
según las preferencias del usuario. aplicación. más o menos diferenciadas aplicación.
Perjudica la búsqueda. - Navegación confusa - Comunicación Confusa. Faltan
Debilidades - Le da poca importancia a la búsqueda. - Comunicación genérica y explicaciones y saturación de
Le da más jerarquía a las desorganizada información.
recomendaciones. - Saturación de información - Saturación de información
- íconos, botones e imágenes de - íconos, botones e imágenes de
difícil lectura difícil lectura
EJEMPLO EN VIVO
- Búsqueda rápida con gran variedad de - Búsqueda rápida con gran variedad - Búsqueda rápida con gran variedad - Búsqueda rápida y particular con filtros
filtros. de filtros. de filtros. interesantes para las ofertas.
- Navegación intuitiva. - Permite ordenar los resultados, - Permite ordenar los resultados, - Permite ordenar los resultados, dando al
- Comunicación directa, explicativa y dando al usuario una mejor dando al usuario una mejor usuario una mejor experiencia de
personalizada. experiencia de búsqueda. experiencia de búsqueda. búsqueda.
Fortalezas - Distribución equilibrada de la - Consistencia estética entre - Consistencia estética entre - Navegación intuitiva.
información. pantallas. pantallas. - Comunicación directa y explicativa.
- Consistencia estética entre pantallas. - Distribución equilibrada de la
- íconos, botones e imágenes de fácil información.
lectura - Consistencia estética entre pantallas.
- íconos, botones e imágenes de fácil
lectura
- No permite ordenar los resultados - Debes reservar por fuera de la - Navegación confusa, con categorías - Debes reservar por fuera de la
según las preferencias del usuario. aplicación. más o menos diferenciadas aplicación.
Perjudica la búsqueda. - Navegación confusa - Comunicación Confusa. Faltan
Debilidades - Le da poca importancia a la búsqueda. - Comunicación genérica y explicaciones y saturación de
Le da más jerarquía a las desorganizada información.
recomendaciones. - Saturación de información - Saturación de información
- íconos, botones e imágenes de - íconos, botones e imágenes de
difícil lectura difícil lectura
EJEMPLO EN VIVO
1 2 3 4 5
Definir Definir perfiles Diseñar el Recolectar Extraer
objetivos de usuarios cuestionario información conclusiones
Entrevistas
Definir 1
objetivos
“Voy a entrevistar para…”
Definir perfiles Ejemplos:
de usuarios
✓ Armar los respectivos user personas*1.
Diseñar el
✓ Conocer la aceptación que podría tener un nuevo
cuestionario
producto
✓ Conocer los gustos y preferencias de los
Recolectar
consumidores
información
✓ Medir la satisfacción/frustración del cliente.
Extraer
conclusiones
Entrevistas
Definir 1
objetivos
Recolectar
información
Extraer
conclusiones
Entrevistas
Definir 1
objetivos
Determinar si la propuesta de valor del nuevo producto
resuelve las necesidades de los usuarios.
Definir perfiles
de usuarios
Recolectar
información
✓ Validar el MVP de la experiencia de compra mediante
app.
Extraer
conclusiones
Entrevistas
Definir 2
objetivos
Recolectar
información
Extraer
conclusiones
USER PERSONA
Entrevistas
Definir 3
objetivos
Extraer
conclusiones
Entrevistas
Definir 3
objetivos
Como pauta general, con el cuestionario tenemos que
apuntar a descubrir:
Definir perfiles
de usuarios
✓ ¿Qué piensa y siente de ese producto/servicio?
Diseñar el
✓ ¿Qué cosas escucha y qué cosas ve?
cuestionario
✓ ¿Qué hace y qué dice en relación al producto?
Recolectar ✓ ¿Cuáles son sus frustraciones o problemas?
información
✓ ¿Cuáles son sus necesidades?
Extraer
conclusiones
Veamos su anatomía
DISEÑAR EL CUESTIONARIO
Cuerpo de la entrevista
Bloque 1: Sobre el entrevistado.
Objetivo y target
Importante tenerlos
Objetivo:
siempre en cuenta. Buscamos entender con quién
estamos hablando.
Objetivo: Cierre
Darle al entrevistado Ofrecer una síntesis.
información sobre la Preguntas de observador(es).
actividad, para que Responder dudas del
esté más relajado. entrevistado.
Agradecimiento + incentivo.
Entrevistas
Definir 3
objetivos
Tipos de preguntas
Definir perfiles
de usuarios
Diseñar el
cuestionario
Recolectar
información
Abiertas Cerradas
Extraer
conclusiones
TIPOS DE PREGUNTAS
¿Cómo te llamas?
General
¿Tomaste cerveza el último
mes?
(Pregunta cerrada)
Particular
¿Por qué? ¿Por qué? ¿Por
qué?
Entrevistas
Definir 4
objetivos
Definir perfiles
de usuarios
Procesar y mapear la información de manera tal
Diseñar el que pueda ser fácilmente analizada.
cuestionario
Recolectar
información
Extraer
conclusiones
Entrevistas
Definir 5
objetivos
Definir perfiles
de usuarios
Generar una lista de conclusiones justificadas, con
Diseñar el los resultados generados.
cuestionario
Recolectar
información
Extraer
conclusiones
Ejemplo en vivo
Veamos el guión de entrevistas disponible en la
carpeta de clases.
Duración: 10 minutos
TEMPLATE
Documento:
Entrevistas
cualitativas
Template genérico con la
estructura de una entrevista
cualitativa. Disponible en la
carpeta de la clase.
Acceder a template
Crear un cuestionario
De manera individual, escriban sus preguntas.
Duración: 10 minutos
ACTIVIDAD EN CLASE
Tu entrevista
cualitativa
Crear un cuestionario.
Duración: 20 minutos
Te invitamos a que realices
entrevistas con usuarios reales,
y vuelques los resultados en tu
mapa de empatía
Mapa de empatía
Empatizar Definir Idear Prototipar Evaluar
Mapa de empatía
Se trata de una herramienta que nos guía en la tarea
de ponernos en el lugar del usuario. Nos ayuda a
analizar en profundidad toda la información que
tenemos sobre nuestras personas usuarias o clientes.
MAPA DE EMPATÍA
Le importa su Qu
e
salud. y a sus f
mi am
g i
sal os co liares
ud m
os ab a
Co
me Product e le. n
sal alime les que s
saludab
uda n
ble tos cocinen
s. ente.
rápidam
MAPA DE EMPATÍA
Documento /
Mapa de empatía
Template genérico para la creación de
un mapa de empatía, que nos ayudará
a definir a nuestro usuario.
Ver documento
A raíz de las entrevistas, vas a poder iterar tus
proto-personas, para que pasen a estar basadas en
evidencia.
Te compartimos los
siguientes
recomendaciones
RECOMENDACIONES
Recursos
✓ ¿Que es un user persona? l Artículo
✓ How to Conduct User Interviews l Patrick Thornton
✓ Entrevistas (Coderhouse)
✓ Benchmarking | (Coderhouse)
Nota Informativa
✓ How to Conduct User Interviews | Patrick Thornton
RECOMENDACIONES
Lecturas recomendadas
✓ The Essential Persona Lifecycle: Your Guide to Building and Using
Personas. Burlington: Morgan Kaufmann | Adlin, T.; Pruitt, J. (2010)
✓ About Face 3: The Essentials of Interaction Design. Indianapolis: Wiley.
(Capítulo 3) | Cooper, A. et al. (2007), PDF, Libro.
¿Preguntas?
Resumen
de la clase hoy
✓ Comprender la importancia de las ✓ Identificar al usuario. Responder a la pregunta:
entrevistas con usuarios. ¿para quiénes estamos haciendo lo que
estamos haciendo?
✓ Entender los métodos principales para
entrevistar personas. ✓ Interiorizar en el concepto de persona como
parte del diseño de la experiencia de usuario.
✓ Poner en práctica una entrevista piloto, y
organizar las entrevistas para validar la ✓ Entender la importancia del benchmarking para
necesidad puntual de mi usuario. nuestro producto.
¡A tener en cuenta!