Presentación introductoria a la metodología de diseño centrado en el usuario para el diseño de aplicaciones móviles. Curso a cargo del profesor Juan Paulo Madriaza - Uniacc - 2011

1. Clase 01

2. Metodología
DISEÑO CENTRADO EN EL USUARIO

3. UCD
• Filosofía de diseño que tiene por objetivo la
creación de productos que resuelvan
necesidades concretas de sus usuarios finales

4. UCD
• Toma forma como un proceso en el que se
utilizan una serie de técnicas
multidisciplinares y donde cada decisión
tomada debe estar basada en las necesidades,
objetivos, expectativas, motivaciones y
capacidades de los usuarios.

5. UCD
• Tienen el siguiente esqueleto:
– Conocer a fondo a los usuarios finales
– Diseñar un producto que resuelva sus
necesidades y se ajuste a sus capacidades,
expectativas y motivaciones
– Poner a prueba lo diseñado

6. User Centered Design
METODOLOGIA UCD

7. Metodología
Etapa 1 - Research
• Entender / Establecer el problema
– Insightment
– Rebrief
– Benchmark
– Personas

8. Metodologías Etapa 1
Insightment
¿Para qué sirve?
Para encontrar productos o servicios que le
hagan sentido a los usuarios
¿Cuándo se hace?
Al momento de empezar un proyecto, para
definir la problemática a abordar
¿Cómo se hace?
Se define superficialmente un tipo de usuario y
un contexto de relación
Se levantan observaciones por parte de los
usuarios
Las observaciones se categorizan y jerarquizan
Se crean frases representativas con la
estructura «Quiero___porque___pero___»

9. Metodologías Etapa 1
Rebrief
¿Para qué sirve?
Para entender mejor a nuestro cliente y sus
solicitudes
¿Cuándo se hace?
Al momento de empezar un proyecto que es
solicitado por un cliente
¿Cómo se hace?
Se presenta al cliente un cuestionario de
preguntas predefinidas
Se elabora una ficha de proyecto que contenga
los puntos más relevantes a abordar
Se valida con el cliente

10. Metodologías Etapa 1
Benchmark
¿Para qué sirve?
Para no inventar la rueda, para no
cometer los mismos errores de otros, para
diferenciarme de mi competencia
¿Cuándo se hace?
Al momento de empezar un proyecto que
ya está relativamente definido en su
contexto
¿Cómo se hace?
Se seleccionan referentes atingentes
Se analizan en detalle y se seleccionan las razones
de su selección
Se monta una presentación con los hallazgos

11. Metodologías Etapa 1
Personas y escenarios
¿Para qué sirve?
Para entender a los usuarios, sus
intereses, motivaciones, contextos de
uso, preocupaciones, etc
¿Cuándo se hace?
Al momento de empezar un proyecto
¿Cómo se hace?
Se definen arquetipos de usuarios
Se hacen entrevistas con los involucrados
Se crean fichas por cada usuario mencionando
sus características como si estuviéramos
definiendo a una persona real

12. Metodología
Etapa 2 – Diseño de concepto
• Entender / Establecer el problema
– Brainstorming
– Design The box

13. Metodologías Etapa 2
BrainStorming
¿Para qué sirve?
Para crear ideas de manera colaborativa que
permitan resolver el problema
¿Cuándo se hace?
En cualquier momento del proyecto, cuando
sea necesario el acopio de ideas
¿Cómo se hace?
Se reúne al equipo creativo
Se define a uno o dos escritores de ideas
Se lanzan ideas a la mesa
Se escriben en postits
Se categorizan los postits
Se jerarquizan y evalúan las ideas

14. Metodologías Etapa 2
Design The Box
¿Para qué sirve?
Para asentar las ideas y funcionalidades de
la solución
¿Cuándo se hace?
Cuando está terminando el proceso
creativo del concepto
¿Cómo se hace?
Se forra con papel una caja de leche
Se dibuja en la caja el
nombre, tagline, promesas, gráfica, descri
pción detallada y requerimientos del
proyecto

15. Metodología
Etapa 3 – Diseño de Interacción
• Proponer estructuras de solución
– Mapas de flujo
– Capacidades del sistema
– Mapas de navegación

16. Metodologías Etapa 3
Mapas de Flujo
¿Para qué sirve?
Para visualizar los pasos necesarios para
completar las tareas disponibles
¿Cuándo se hace?
Cuando están definidas las tareas posibles a
realizar en el sistema
¿Cómo se hace?
Se definen las tareas de los personas
Se crea un diagrama que permite ver los
pasos y decisiones que debe tomar el
usuario para completar cada tarea
Se integran las distintas tareas en un único
mapa

17. Metodologías Etapa 3
Capacidades del sistema
¿Para qué sirve?
Para definir específicamente todas las
funcionalidades de la solución
¿Cuándo se hace?
Cuando se tiene claridad sobre las necesidades
de interacción del usuario
¿Cómo se hace?
Se crea una tabla con todas las posibles
funcionalidades del sistema
Se asignan niveles de importancia y
complejidad a cada funcionalidad
Se definen las funcionalidades que van
finalmente en la solución

18. Metodologías Etapa 3
Mapa de navegación
¿Para qué sirve?
Para visualizar las distintas pantallas de la
solución
¿Cuándo se hace?
Cuando se tiene claridad sobre las
funcionalidades del sistema
¿Cómo se hace?
Se establecen todos los contenidos del sistema
Se definen las distintas secciones, subsecciones y
páginas
Se crea un diagrama que permita entender las
relaciones entre las distintas páginas de la
solución

19. Metodología
Etapa 4 – Diseño de Prototipos
• Proponer prototipos de solución
– Sketching
– Wireframing
– Prototipado Interactivo
– User Testing

20. Metodologías Etapa 4
Sketching
¿Para qué sirve?
Para proponer mediante dibujos el diseño de
las pantallas de la solución
¿Cuándo se hace?
Cuando está definido el mapa de navegación
¿Cómo se hace?
Se dibujan propuestas preliminares de las
principales pantallas en hojas de papel
Se van seleccionando y mejorando rápida y
progresivamente
Se puede hacer una sesión de co-creación con el
cliente

21. Metodologías Etapa 4
Wireframing
¿Para qué sirve?
Para especificar el diseño de cada página,
comprobar su funcionalidad
¿Cuándo se hace?
Cuando se está conforme con los resultados del
sketching
¿Cómo se hace?
Se definen las plantillas a prototipar
Se utiliza un software de wireframing (axure)
Se validan los resultados
Se realizan iteraciones hasta estar convencido de
la solución

22. Metodologías Etapa 4
Prototipado Interactivo
¿Para qué sirve?
Para agregar interactividad a la solución
antes de poder probarla con usuarios
¿Cuándo se hace?
Cuando se obtiene la validación del
proceso de wireframing
¿Cómo se hace?
Se definen tareas a probar por parte de los
usuarios
Se le aplica interactividad a los wireframes
seleccionados para poder probarlos en el
dispositivo

23. Metodologías Etapa 4
User testing
¿Para qué sirve?
Para testear el funcionamiento de la solución
antes de entrar a la propuesta visual
¿Cuándo se hace?
Cada vez que se pueda ;)
¿Cómo se hace?
Se definen tareas a probar
Se captan usuarios reales que puedan probar la
solución
Se les solicita que traten de realizar las tareas
Se toma registro de lo sucedido
Se hacen cambios en la interfaz que solucionen
los problemas encontrados

24. Metodología
Etapa 5 – Diseño Visual
• Proponer interfaces de solución
– Key Visual
– Diseño visual de interfaces

25. Metodologías Etapa 5
Key Visual
¿Para qué sirve?
Para acercarse a la definición visual de la
solución
¿Cuándo se hace?
Cuando se tiene claridad sobre las
funcionalidades del proyecto
¿Cómo se hace?
Se crean «posters» de la gráfica de la
solución
No deben ser pantallas de la solución,
tienen una orientación netamente estético-
comunicacional
Se validan con usuarios

26. Metodologías Etapa 5
Diseño visual de interfaces
¿Para qué sirve?
Para definir el diseño de las pantallas de la
solución
¿Cuándo se hace?
Cuando se tiene aprobado el prototipo
interactivo
¿Cómo se hace?
Se toman de referencia los prototipos
interactivos
Se procede a aplicar gráfica a las pantallas
(colores, tipografías, texturas, imágenes, etc
.)
Se valida con usuarios

27. Metodología
Etapa 6 – Programación
Etapa 7 – Validación
Etapa 8 – Publicación
Etapa 9 – Actualización

28. Resumen

29. ¿Preguntas?
Gracias 
Juan Paulo Madriaza
Diseñador de Interfaces
www.uxd.cl

30. ¿Preguntas?
Gracias 
Juan Paulo Madriaza
Diseñador de Interfaces
www.uxd.cl