El documento describe una presentación sobre prototipado y metodologías de diseño centrado en el usuario. La presentación cubrirá temas como definir personas, mapas de contenido, modelado de contenido, prototipado interactivo y pruebas de usuario. El objetivo es definir un producto móvil orientado al usuario y basado en el contenido, construir un prototipo e involucrar a usuarios en pruebas del prototipo.
2. Prototipado y metodologías para el
diseño centrado en el usuario
Twittea este evento con la hashtag #eventosiebs
[2]
[2]
3. Objetivos
1. Entender para quién realizamos el producto: el
usuario.
2. Comprender la importancia del contenido como
materia prima de esa definición.
3. Conocer las principales técnicas de estrategia de
contenido aplicadas al desarrollo de productos.
4. Uso de prototipo como documento central del
proyecto.
5. Testing continuo del prototipo con usuarios.
Twittea este evento con la hashtag #eventosiebs
[3]
[3]
4. ¿Qué vamos hacer?
1. Definir un producto para el móvil
1. Orientado al usuario
2. Basado en el contenido
2. Construir un prototipo
3. Probar el prototipo con usuarios
Twittea este evento con la hashtag #eventosiebs
[4]
[4]
5. ¿Cómo lo vamos hacer?
1. Personas
2. Mapas de contenido
3. Modelización de contenido
4. Prototipado interactivo
5. Testing de usuario
Twittea este evento con la hashtag #eventosiebs
[5]
[5]
6. ¿Cómo lo vamos hacer?
1. Personas
2. Mapas de contenido
3. Modelización de contenido
4. Prototipado interactivo
5. Testing de usuario
Twittea este evento con la hashtag #eventosiebs
[6]
[6]
7. ¿Cómo lo vamos hacer?
Persona
Persona
Objetivo
Objetivo
Estado
Estado
Escenario
Escenario
Tarea
Tarea
Contenido
Contenido
Prototipo
Test
Twittea este evento con la hashtag #eventosiebs
[7]
[7]
8. “Personas”
• Técnica del mundo del marketing offline.
• Personas imaginarias, pero representativas del mercado
objetivo.
• Identificar sus objetivos, escenarios y tareas.
• Diseñar el producto pensando específicamente en las
personas creadas.
Twittea este evento con la hashtag #eventosiebs
[8]
[8]
9. “Personas”
Ventajas
Diseñar para una sola persona.
Eliminar al peligroso usuario elástico.
Twittea este evento con la hashtag #eventosiebs
[9]
[9]
11. “Personas”
Objetivos, tareas y escenarios
•
Las personas se mueven por objetivos.
•
Hay objetivos personales («no sentirme estúpido») y objetivos prácticos
(vivir mejor, vivir más, descansar, impactar, llegar rápido, sentirme
seguro...).
•
Los objetivos prácticos varían dependiendo del estado del usuario y el
escenario de uso.
•
Para cumplir sus objetivos, las personas necesitan ejecutar tareas.
•
Debemos identificar los tipos de contenidos que mejor asisten al usuario en
la ejecución de esas tareas en cada estado/escenario.
Debemos definir una interfaz que intente cumplir los objetivos prácticos sin violar
Debemos definir una interfaz que intente cumplir los objetivos prácticos sin violar
los objetivos personales
los objetivos personales
Twittea este evento con la hashtag #eventosiebs
[11]
[11]
12. “Personas”
Objetivos, tareas y escenarios
Persona
Persona
Objetivo
Objetivo
Estado
Estado
Escenario
Escenario
Tarea
Tarea
Mireia, 27
Quiere impactar
Frente al espejo,
con su aspecto en
en la peluquería,
la fiesta de esta
esperando que la
móvil
soltera,
noche
Test
peinados en el
madrileña,
Prototipo
Buscar tipos de
años,
Contenido
Contenido
atiendan
moderna,
divertida,
enganchada
al móvil
Twittea este evento con la hashtag #eventosiebs
[12]
[12]
13. Contenido
De las personas al contenido
Persona
Persona
Objetivo
Objetivo
Estado
Estado
Escenario
Escenario
Tarea
Tarea
Mireia, 27
Quiere impactar
Frente al espejo,
con su aspecto en
en la peluquería,
la fiesta de esta
esperando que la
móvil
soltera,
noche
Test
peinados en el
madrileña,
Prototipo
Buscar tipos de
años,
Contenido
Contenido
atiendan
moderna,
divertida,
enganchada
al móvil
Debemos identificar los tipos de contenidos que mejor asisten al usuario en la
Debemos identificar los tipos de contenidos que mejor asisten al usuario en la
ejecución de esas tareas en cada estado/escenario
ejecución de esas tareas en cada estado/escenario
Twittea este evento con la hashtag #eventosiebs
[13]
[13]
15. Contenido
Tipos de contenido
Formato
Tipo
El formato es la materia prima;
El formato es la materia prima;
El tipo es la aplicación de la materia prima con una intención específica
El tipo es la aplicación de la materia prima con una intención específica
Twittea este evento con la hashtag #eventosiebs
[15]
[15]
16. Contenido
Tipos de contenido
Formato: Texto
Tipo: Discurso
El formato es la materia prima;
El formato es la materia prima;
El tipo es la aplicación de la materia prima con una intención específica
El tipo es la aplicación de la materia prima con una intención específica
Twittea este evento con la hashtag #eventosiebs
[16]
[16]
17. Contenido
Tipos de contenido
Formato: Foto
Tipo
Un mismo formato puede originar muchos tipos de contenido
Un mismo formato puede originar muchos tipos de contenido
Twittea este evento con la hashtag #eventosiebs
[17]
[17]
18. Contenido
Tipos de contenido
Foto
Texto
Vídeo
En ocasiones, un tipo puede resultar de la combinación de varios formatos.
En ocasiones, un tipo puede resultar de la combinación de varios formatos.
Twittea este evento con la hashtag #eventosiebs
[18]
[18]
19. Contenido
Mapas de contenido
Persona
Persona
Objetivo
Objetivo
Mireia, 27 años,
un vestido de
soltera,
fiesta y que sea
moderna,
Tarea
Tarea
Contenido
Contenido
Prototipo
Test
Quiere comprar
madrileña,
Estado
Estado
Escenario
Escenario
barato
Exploración
Buscar
divertida,
enganchada al
móvil
Una misma persona
puede atravesar
diversos
estados/escenarios, y
cada uno puede ser
servido por un tipo de
contenido específico
Interés
Leer
Evaluación
Comparar
Decisión
Comprar
Disfrute
Usar
Galería de
Galería de
fotos / /vídeos
fotos vídeos
Comentarios / /
Comentarios
Opiniones
Opiniones
Ficha de
Ficha de
producto
producto
Proceso de
Proceso de
compra
compra
(Datos)
(Datos)
Whislist
Whislist
Twittea este evento con la hashtag #eventosiebs
[19]
[19]
20. Contenido
Modelado del contenido
Tipo
Tipo
Ficha película
Atributos
Atributos
Formatos
Formatos
Extensión
Extensión
¿Vocabulario
controlado?
Frecuencia
Frecuencia
Título
Texto
No
No
No
Año
Número
4 (año)
No
Si
Duración
Número
4 (h-m)
No
Si
Género
Texto
200
No
Si
Clasificación Número
2 (+/-)
No
Si
Cartel
Foto, texto
No
No
No
Trailer
Vídeo, texto
No
No
No
Director
Texto
200
No
No
Reparto
Texto, foto,
No
No
No
1000
No
No
vídeo
Sinopsis
Texto
Twittea este evento con la hashtag #eventosiebs
[20]
[20]
21. Contenido
Modelado del contenido
Una vez que he modelado todos los atributos de cada tipo
de contenido en mi proyecto…
• ¿Qué atributos son imprescindibles?
• ¿Qué atributos son prioritarios?
• ¿Cómo voy a producirlos/obtenerlos?
• ¿Cómo voy a actualizarlos?
Twittea este evento con la hashtag #eventosiebs
[21]
[21]
22. Contenido
Organizar mi contenido
Si modelizo el contenido antes de diseñar, tengo claro…
• lo que voy a diseñar o pedir al diseñador
• lo que voy a desarrollar o pedir al desarrollador
• lo que voy a pedir a mi proveedor de contenido
• cómo organizar mis recursos
• qué herramientas necesito
Twittea este evento con la hashtag #eventosiebs
[22]
[22]
23. Prototipado
¿Qué es un prototipo?
Twittea este evento con la hashtag #eventosiebs
[23]
[23]
24. Prototipado
¿Qué es un prototipo?
Twittea este evento con la hashtag #eventosiebs
[24]
[24]
25. Prototipado
¿Qué es un prototipo?
Twittea este evento con la hashtag #eventosiebs
[25]
[25]
26. Prototipado
¿Qué es un prototipo?
El prototipo es una herramienta que le permite a los
diseñadores explorar, comunicar y evaluar sus ideas.
•
El prototipado es un proceso iterativo que externaliza las ideas del
diseñador y le permite explorar y reflexionar sobre ellas.
•
El prototipo es un medio para que el diseñador comunique sus ideas.
•
El prototipo es la representación de una idea que puede ser evaluada
en un contexto.
Twittea este evento con la hashtag #eventosiebs
[26]
[26]
27. Prototipado
Ventajas
• Documento central de definición
• Ahorra tiempo, esfuerzo y dinero
• Reduce errores de interpretación
• Identifica de forma temprana errores importantes de
la interfaz
• Adaptable, rápido de actualizar
• Testeable
Twittea este evento con la hashtag #eventosiebs
[27]
[27]
28. Prototipado
Tipos de prototipo
• En papel
• Wireframe (baja y alta fidelidad)
• Diseño visual
• Pilotos
• Simulaciones
Twittea este evento con la hashtag #eventosiebs
[28]
[28]
29. Prototipado
¿Cuándo prototipar?
Persona
Persona
Objetivo
Objetivo
Estado
Estado
Escenario
Escenario
Tarea
Tarea
Contenido
Contenido
Mireia, 27
Quiere impactar
Frente al espejo,
Buscar tipos de
Galería de
años,
con su aspecto en
en la peluquería,
peinados en el
fotos/vídeos
madrileña,
la fiesta de esta
esperando que la
móvil
soltera,
noche
atiendan
moderna,
divertida,
enganchada
al móvil
Prototipo
Test
Representación
Representación
interactiva del proceso
interactiva del proceso
según:
según:
•La persona
•La persona
••Suescenario
Su escenario
••Tareas
Tareas
••Ycon el contenido
Y con el contenido
definido
definido
Twittea este evento con la hashtag #eventosiebs
[29]
[29]
30. Prototipado
Tipos de prototipo
• En papel
• Wireframe (baja y alta fidelidad)
• Diseño visual
• Pilotos
• Simulaciones
Twittea este evento con la hashtag #eventosiebs
[30]
[30]
36. Prototipado
Consejos para el prototipado
• Empezar con papel
• Usar texto como interfaz
• Que la apariencia no se te vaya de la mano
• Usar componentes (botones, formularios) y plantillas
(header, footer)
• Iterar, Iterar, Iterar
Twittea este evento con la hashtag #eventosiebs
[36]
[36]
38. Prototipado
Conceptos: Usabilidad
“La usabilidad es un atributo de calidad que
mide lo fácil que son de usar las
interfaces de usuario. La palabra
"usabilidad" también se refiere a métodos
para mejorar la facilidad de uso durante el
proceso de diseño.”
Jakob Nielsen’s Alertbox: January 4, 2012
Twittea este evento con la hashtag #eventosiebs
[38]
[38]
39. Prototipado
Conceptos: Usabilidad, 5 patrones de calidad
1. Facilidad de aprendizaje.
2. Eficiencia.
3. Memoria.
4. Errores.
5. Satisfacción.
Twittea este evento con la hashtag #eventosiebs
[39]
[39]
40. Prototipado
Conceptos: Diseño centrado en el usuario
(Persona)
Porque es quien usará la aplicación.
Hay que situar a la persona en el centro del diseño. Es decir, hay que hacer diseño
centrado en nuestra persona.
La usabilidad es un atributo de la calidad del diseño final, mientras que la DCU
es el camino para alcanzar y mejorar la usabilidad del producto. La
usabilidad es el “qué”, mientras que la DCU es el “cómo”.
Nuestro usuario es nuestra “Persona”
Nuestro usuario es nuestra “Persona”
Twittea este evento con la hashtag #eventosiebs
[40]
[40]
41. Prototipado
Conceptos: Diseño centrado en el usuario
(Persona)
Porque es quien usará la aplicación.
Hay que situar a la persona en el centro del diseño. Es decir, hay que hacer diseño
centrado en nuestra persona.
La usabilidad es un atributo de la calidad del diseño final, mientras que la DCU
es el camino para alcanzar y mejorar la usabilidad del producto. La
usabilidad es el “qué”, mientras que la DCU es el “cómo”.
Nuestro usuario es nuestra “Persona”
Nuestro usuario es nuestra “Persona”
Twittea este evento con la hashtag #eventosiebs
[41]
[41]
42. Test de usuarios
Cuando testear
Persona
Persona
Objetivo
Objetivo
Estado
Estado
Escenario
Escenario
Tarea
Tarea
Contenido
Contenido
Mireia, 27
Quiere impactar
Frente al espejo,
Buscar tipos de
Galería de
años,
con su aspecto en
en la peluquería,
peinados en el
fotos/vídeos
madrileña,
la fiesta de esta
esperando que la
móvil
soltera,
noche
Prototipo
Representació
Test
Test
Probar con
Probar con
usuarios
usuarios
atiendan
n interactiva
del proceso
moderna,
divertida,
enganchada
al móvil
ITERAR
ITERAR
Twittea este evento con la hashtag #eventosiebs
42
[42]
[42]
43. Test de usuarios
Low cost iterativo
Web/iPad broadcast con
GoToMeeting.com
Twittea este evento con la hashtag #eventosiebs
43
[43]
[43]
44. Test de usuarios
Cuánta gente necesito
Fuente Jakob Nielsen Testing con 5 usuarios: http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
Twittea este evento con la hashtag #eventosiebs
44
[44]
[44]
45. Test de usuarios
El test
El prototipo es el
documento central de
definición para
TODOS los
involucrados.
Clientes
Clientes
Técnicos
Técnicos
Usuarios
Usuarios
Una vez testado, se
Una vez testado, se
hacen ajustes rápidos
hacen ajustes rápidos
antes de entregarlo al
antes de entregarlo al
equipo de desarrollo.
equipo de desarrollo.
Twittea este evento con la hashtag #eventosiebs
45
[45]
[45]
46. Test de usuarios
El guión del test
Ejemplo de tarea:
Tarea 1:
(Ponemos a la usuaria en pantalla la nueva sección de
Trucos).
Acabas de salir de trabajar, estás en el autobús de camino
a casa y quieres averiguar como aplicarte el eyeliner para
que te dure todo el día.
Respuestas posibles:
• Opción a: En el buscador introduce el término
“eyeliner”. En el resultado de búsqueda hacer clic en
uno de los resultados sobre eyeliner
• Opción b: En las categorías, ir a cosmética. En el
resultado de cosmética hacer clic en el truco de
Eyeliner. – Cómo aplicarse el eyeliner para que dure
todo el día.
Twittea este evento con la hashtag #eventosiebs
46
[46]
[46]
47. Test de usuarios
La entrevista
Instrucciones:
Instrucciones:
1.Bienvenida al usuario.
1.Bienvenida al usuario.
2.El test es para detectar errores
2.El test es para detectar errores
de interfaz, el usuario nunca
de interfaz, el usuario nunca
comete errores, los detecta.
comete errores, los detecta.
3.Se leerán una serie de tareas
3.Se leerán una serie de tareas
que el usuario deberá llevar aa
que el usuario deberá llevar
cabo.
cabo.
4.El usuario deberá describir en
4.El usuario deberá describir en
voz alta aquello que está
voz alta aquello que está
haciendo, es importante que lo
haciendo, es importante que lo
haga de forma honesta.
haga de forma honesta.
5.En el caso de no resolver una
5.En el caso de no resolver una
tarea, no hay que ayudar al
tarea, no hay que ayudar al
usuario, se deberá pasar aala
usuario, se deberá pasar la
siguiente tarea.
siguiente tarea.
Sala de testing:
• Entrevistador
• Testers: Usuarios
6.El entrevistador solo podrá
6.El entrevistador solo podrá
contestar aalas dudas de la
contestar las dudas de la
interfaz que tenga el usuario con
interfaz que tenga el usuario con
respuestas neutrales: AHA!
respuestas neutrales: AHA!
Twittea este evento con la hashtag #eventosiebs
47
[47]
[47]
48. Test de usuarios
Bienvenida al usuario
El navegador web debe estar abierto aaGoogle ooalguna página “neutral”
El navegador web debe estar abierto Google alguna página “neutral”
Comience explicándole al usuario lo siguiente:
• Explicarle por qué está aquí, aunque ya tenga una idea, le comentaremos que necesitamos
su ayuda para ver si funciona la interfaz según lo esperado.
•El objetivo de la prueba es evaluar la calidad de uso de la interfaz, nunca la evaluación del
participante.
• Si el participante comete algún fallo durante la prueba, no será culpa suya, sino del diseño.
• Conforme vaya usando la interfaz, solicitarle que intente pensar en voz alta, que diga que
es lo que está mirando, tratando de hacer y que está pensando. Esto es de gran ayuda.
• Que no se preocupe de herir nuestros sentimientos, solo queremos mejorar la interfaz, por
ello es impotante manifestar las cosas de forma honesta.
Twittea este evento con la hashtag #eventosiebs
48
[48]
[48]
49. Test de usuarios
Instrucciones:
Instrucciones:
1.Bienvenida.
1.Bienvenida.
2.Observar, aprender yy tomar
2.Observar, aprender tomar
notas
notas
La observación
Sala de observación:
• Moderaror / Coordinador
• Invitados
3.Al final de cada sesión, escribir
3.Al final de cada sesión, escribir
los tres problemas más
los tres problemas más
importantens de usbailidad.
importantens de usbailidad.
4.Sugerir preguntas al
4.Sugerir preguntas al
entrevistador para que pregunte
entrevistador para que pregunte
al participante
al participante
5.Disfrutar de los aperitivos
5.Disfrutar de los aperitivos
6.Debatir sobre lo ocurrido al
6.Debatir sobre lo ocurrido al
termino de las sesiones
termino de las sesiones
Twittea este evento con la hashtag #eventosiebs
49
[49]
[49]