mobile design 01 _ diseño centrado en el usuario

30
Clase 01

Upload: madriaza

Post on 12-Jan-2015

1.084 views

Category:

Design


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Mobile design 01 _ Diseño centrado en el usuario

Clase 01

Page 2: Mobile design 01 _ Diseño centrado en el usuario

DISEÑO CENTRADO EN EL USUARIOMetodología

Page 3: Mobile design 01 _ Diseño centrado en el usuario

UCD

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

Page 4: Mobile design 01 _ Diseño centrado en el usuario

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.

Page 5: Mobile design 01 _ Diseño centrado en el usuario

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

Page 6: Mobile design 01 _ Diseño centrado en el usuario

METODOLOGIA UCDUser Centered Design

Page 7: Mobile design 01 _ Diseño centrado en el usuario

Metodología

Etapa 1 - Research• Entender / Establecer el problema– Insightment– Rebrief– Benchmark– Personas

Page 8: Mobile design 01 _ Diseño centrado en el usuario

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ónSe levantan observaciones por parte de los usuariosLas observaciones se categorizan y jerarquizanSe crean frases representativas con la estructura «Quiero___porque___pero___»

Page 9: Mobile design 01 _ Diseño centrado en el usuario

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 predefinidasSe elabora una ficha de proyecto que contenga los puntos más relevantes a abordarSe valida con el cliente

Page 10: Mobile design 01 _ Diseño centrado en el usuario

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 atingentesSe analizan en detalle y se seleccionan las razones de su selecciónSe monta una presentación con los hallazgos

Page 11: Mobile design 01 _ Diseño centrado en el usuario

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 usuariosSe hacen entrevistas con los involucradosSe crean fichas por cada usuario mencionando sus características como si estuviéramos definiendo a una persona real

Page 12: Mobile design 01 _ Diseño centrado en el usuario

Metodología

Etapa 2 – Diseño de concepto• Entender / Establecer el problema– Brainstorming– Design The box

Page 13: Mobile design 01 _ Diseño centrado en el usuario

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 creativoSe define a uno o dos escritores de ideasSe lanzan ideas a la mesaSe escriben en postitsSe categorizan los postitsSe jerarquizan y evalúan las ideas

Page 14: Mobile design 01 _ Diseño centrado en el usuario

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 lecheSe dibuja en la caja el nombre, tagline, promesas, gráfica, descripción detallada y requerimientos del proyecto

Page 15: Mobile design 01 _ Diseño centrado en el usuario

Metodología

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

Page 16: Mobile design 01 _ Diseño centrado en el usuario

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 personasSe crea un diagrama que permite ver los pasos y decisiones que debe tomar el usuario para completar cada tareaSe integran las distintas tareas en un único mapa

Page 17: Mobile design 01 _ Diseño centrado en el usuario

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 sistemaSe asignan niveles de importancia y complejidad a cada funcionalidadSe definen las funcionalidades que van finalmente en la solución

Page 18: Mobile design 01 _ Diseño centrado en el usuario

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 sistemaSe definen las distintas secciones, subsecciones y páginasSe crea un diagrama que permita entender las relaciones entre las distintas páginas de la solución

Page 19: Mobile design 01 _ Diseño centrado en el usuario

Metodología

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

Page 20: Mobile design 01 _ Diseño centrado en el usuario

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 papelSe van seleccionando y mejorando rápida y progresivamenteSe puede hacer una sesión de co-creación con el cliente

Page 21: Mobile design 01 _ Diseño centrado en el usuario

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 prototiparSe utiliza un software de wireframing (axure)Se validan los resultadosSe realizan iteraciones hasta estar convencido de la solución

Page 22: Mobile design 01 _ Diseño centrado en el usuario

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 usuariosSe le aplica interactividad a los wireframes seleccionados para poder probarlos en el dispositivo

Page 23: Mobile design 01 _ Diseño centrado en el usuario

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 probarSe captan usuarios reales que puedan probar la soluciónSe les solicita que traten de realizar las tareasSe toma registro de lo sucedidoSe hacen cambios en la interfaz que solucionen los problemas encontrados

Page 24: Mobile design 01 _ Diseño centrado en el usuario

Metodología

Etapa 5 – Diseño Visual• Proponer interfaces de solución– Key Visual– Diseño visual de interfaces

Page 25: Mobile design 01 _ Diseño centrado en el usuario

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ónNo deben ser pantallas de la solución, tienen una orientación netamente estético-comunicacionalSe validan con usuarios

Page 26: Mobile design 01 _ Diseño centrado en el usuario

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 interactivosSe procede a aplicar gráfica a las pantallas (colores, tipografías, texturas, imágenes, etc.)Se valida con usuarios

Page 27: Mobile design 01 _ Diseño centrado en el usuario

Metodología

Etapa 6 – ProgramaciónEtapa 7 – ValidaciónEtapa 8 – PublicaciónEtapa 9 – Actualización

Page 28: Mobile design 01 _ Diseño centrado en el usuario

Resumen

Page 29: Mobile design 01 _ Diseño centrado en el usuario

¿Preguntas?Gracias

Juan Paulo MadriazaDiseñador de Interfaces

www.uxd.cl

Page 30: Mobile design 01 _ Diseño centrado en el usuario

¿Preguntas?Gracias

Juan Paulo MadriazaDiseñador de Interfaces

www.uxd.cl