Mobile design 01 _ Diseño centrado en el usuario

Clase 01

DISEÑO CENTRADO EN EL USUARIOMetodología

UCD

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

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.

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

METODOLOGIA UCDUser Centered Design

Metodología

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

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___»

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

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

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

Metodología

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

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

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

Metodología

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

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

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

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

Metodología

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

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

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

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

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

Metodología

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

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

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

Metodología

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

Resumen

¿Preguntas?Gracias

Juan Paulo MadriazaDiseñador de Interfaces

www.uxd.cl

¿Preguntas?Gracias

Juan Paulo MadriazaDiseñador de Interfaces

www.uxd.cl