Dibujando la experiencia de usuario - UX Ediciรณn: Jorge Ivรกn Pincay Ponce @jpincay1983 Versiรณn original: Antonio de Pasquale @myinteraction
Page 1 of 53
Most people think like this
Interaction Vs Visual Concept Design research Benchmark Wireframe Information architecture User Requirements User testing User experience flow Motion prototype Prototype ...
Concept Visual research Moodboard Grid design Iconography Typography UI Elements Screen design Motion design Prototype ...
Page 2 of 53
In reality is like this
Interaction & Visual
Page 3 of 53
Sketching the UX Experience
Introduction
A different design approach The responsive age Visualizing the UX Design prototype
Levels of fidelity The right tool Make it real!
Page 4 of 53
INTRODUCCIÓN
Page 5 of 53
1
Un enfoque de diseño diferente
La perfección se logra, no cuando no hay nada más que agregar, pero cuando no queda nada por quitar. ANTOINE DE SAINT EXUPÉRY
Page 6 of 53
¿Qué es la Experiencia de Usuario UX? La experiencia del usuario abarca todos los aspectos de la interacción del usuario final con la empresa, sus productos o servicios
Sketching the user experience Page 7 of 53
Un típico proceso de diseño de UX en (metodología) cascada Desde el diseño conceptual al producto final en el mercado
User test
Research
Concept
Wireframe
Visual
Document
Develop
Investigación
Concepto
Wireframe
Visual
Documento
Desarrollo Pruebas de/con usuarios
Sketching the user experience Page 8 of 53
Se acabó... El modelo de cascada no tiene mucho sentido en la era del diseño responsivo.
Ese modelo funcionó hace 10 años +/cuando vivíamos en un contexto diferente con diferentes dispositivos
Sketching the user experience Page 9 of 53
Yesterday Desktop app, fixed grid, mobile interfaces
Sketching the user experience Page 10 of 53
N95 first release to the market in Italy: March 2007 - 700€ http://www.youtube.com/watch?v=U-PxHUdur9Q
Page 11 of 53
Today Smart Tv, Web App, Mobile, Console, Responsive design
Page 12 of 53
Amazon Kindle Fire HD - 150€ http://www.youtube.com/watch?v=ryYPduoGNjc
Sketching the user experience Page 13 of 53
Un flujo de trabajo de diseĂąo diferente Las cosas estĂĄn cambiando. Necesitamos evolucionar el proceso
Review
Research
Concept
User test
Sketch
Prototype
Wireframe
Visual
Sketching the user experience Page 14 of 53
Develop
2
La era responsiva
Form follows function DIETER Â RAMS
Page 15 of 53
¿Cuál es la forma de las experiencias digitales? La evolución de la tecnología está cambiando los límites del diseño
Sketching the user experience Page 16 of 53
Video
Clear, iphone & Mac app https://vimeo.com/51690799
Sketching the user experience Page 17 of 53
Introducciรณn La era responsiva
Mismos contenidos, diferentes formas El sitio web, la aplicaciรณn, el software digital... ya no son una plantilla estรกtica, sino un marco con una experiencia fluida
Sketching the user experience Page 18 of 53
Introducción La era responsiva
Diseñando para la era responsiva Necesitamos esbozar, visualizar, probar, prototipar y comprender los comportamientos dinámicos en diferentes dispositivos con diferentes proporciones y resoluciones Nuestro trabajo es crear ecosistemas de diseño amigables en el futuro 1920 px
1440 px 1024 px 320 px
Dibujando la experiencia de usuario Page 19 of 53
Introducciรณn La era responsiva
Desde las plantillas a la experiencia
Dibujando la experiencia de usuario
Page 20 of 53
Consistent (consistente) Signature (constante) Continuos (contĂnuo)
Contexto
Transferable (transferible) Shareable (compartible) Augmented (aumentado)
Patrones para ayudar a comprender y definir estrategias para el mundo multipantalla
Dibujando la experiencia de usuario
Page 21 of 53
Usuarios
IntroducciĂłn La era responsiva
Consistente Sistema de lenguaje de diseĂąo unificado para productos y servicios Dibujando la experiencia de usuario Page 22 of 53
Introducción La era responsiva
Signature / Marca Experiencia de marca única a medida que se hace que los productos se distingan por un modelo de interacción consistente Page 23 of 53
Introducción La era responsiva
Contínuo Sincronice sus datos, creando una experiencia continua de o en múltiples pantallas Page 24 of 53
Introducciรณn La era responsiva
Transferible En lo posible habilite el cambio de contenido en varios dispositivos o pantallas compartidas en caso de o para uso simultรกneo Page 25 of 53
Introducción La era responsiva
Compartible Permitir que múltiples actores tengan una interacción simultánea, compartiendo y/o personalizar el mismo dispositivo Page 26 of 53
Introducción La era responsiva
Aumentado Las interacciones físicas van más allá de las pantallas digitales
Page 27 of 53
3
Visualizando la UX
Nos gusta que el diseĂąo sea visualmente poderoso, intelectualmente elegante y sobre todo, atemporal. MASSIMO Â VIGNELLI
Page 28 of 53
Visualizando la UX
Configurar una visiรณn Dar forma a una idea es un proceso continuo que necesita muchos ciclos de iteraciones para enfocarlo
Page 29 of 53
Visualizando la UX
Explore los detalles Analice problemas y restricciones. Refina ideas y explore todos los detalles para hacerlo posible
Page 30 of 53
Visualizando la UX
Sienta la experiencia Haga prototipos y visualice su concepto. Obtenga la sensaciĂłn de un impacto real de una manera fĂsica
Page 31 of 53
Visualizando la UX
Nuestras Herramientas
Prototipos de papel Wireframes interactivos Wireframes en movimiento Diseño HTML
¿Cómo podemos esbozar y prototipar la experiencia del usuario?
Page 32 of 53
Visualizando la UX
Baja fidelidad / No interactivo Page 33 of 53
Visualizando la UX
Prototipos en papel Baja fidelidad / No interactivo
Page 34 of 53
Visualizando la UX
Interactive wireframes Fidelidad Media / Baja interacciรณn
Page 35 of 53
Visualizando la UX
Interactive wireframes
Page 36 of 53
Visualizando la UX
Keynote Animated Prototype http://www.lukew.com/ff/entry.asp?1171
Motion prototype Fidelidad media / baja interacciรณn
Page 37 of 53
Visualizando la UX
Redefining Android (Frog) http://www.frogdesign.com/work/sharp-aquos.html - https://vimeo.com/43224490
Motion prototype Alta fidelidad / baja interacciรณn
Page 38 of 53
Visualizando la UX
HTML Design Alta fidelidad / alta interacciรณn Page 39 of 53
Visualizando la UX
Lo bueno y lo malo... Paper prototyping
Interactive wireframes
Motion wireframes
HTML Design
Pros Rápido y no limpio Fácil de hacer Retroalimentación rápida Muy inclusivo
Pros Detallado y sólido Bueno para definir contenidos y explicar comportamientos
Pros Emocional Feedback de alta calidad Pruebas en entornos dinámicos
Pros Test interacCvo Perfecto para pruebas de procesos y flujos Experiencia en respuestas
Hate No es lo suficientemente rápido
Hate Hard for user tesCng To funcConal with less experience of the flow
Hate Time to build them SoHware knowledge Work beJer in an advanced state
Hate SoHware knowledge Time for building the prototype LimiCng the design process
No es limpio Es difícil de compartir No es autoexplicativo
Page 40 of 53
DESIGN PROTOTYPE
Page 41 of 53
1
Niveles de fidelidad
Los pequeños detalles son vitales. Las pequeñas cosas hacen que sucedan cosas grandes. COACH JOHN WOODEN
Page 42 of 53
Niveles de Fidelidad
¿Qué es el prototipado rápido? Un prototipado rápido es una metodología de diseño centrada en el usuario para diseñar, comunicar y evaluar interfaces de usuario, pero también para obtener retroalimentación tan pronto como sea posible y validar el modelo de interacción.
Page 43 of 53
Niveles de Fidelidad
Release Early, Release Often Siempre pruebe, para verificar todos los diferentes aspectos de su diseĂąo con diferentes niveles de fidelidad de acuerdo con la etapa del proyecto
Page 44 of 53
Niveles de Fidelidad
Fail Early, Fail Often Es importante no "cerrar todo" para probar nuestro concepto de diseĂąo. Cada etapa es un posible punto de entrada para verificar, discutir, iterar, diseĂąar.
Page 45 of 53
Niveles de Fidelidad
Hand Sketch
Linked pdf
InteracCve Wireframe
Video simulaCon
Semi funcConal prototype
Full funcConal prototype
Baja fidelidad
Concept evaluation
Alta fidelidad
Prototipo de arquetipo Vs Fidelidad No existe la alta o baja fidelidad, solo la fidelidad apropiada que le permite alcanzar los objetivos que ha establecido para hacer un prototipo
Page 46 of 53
User test
2
La herramienta correcta
Dame una palanca y puedo mover el mundo. ARCHIMEDE DI SIRACUSA Físico, ingeniero, inventor, astrónomo y matemático griego
Page 47 of 53
La herramienta correcta
¿Cuál es la herramienta perfecta? Depende. Depende de lo que tienes que probar, cuál es tu audiencia, el escenario del proyecto y también sus habilidades personales
Experience
Functional
? Designer
Technologist
Page 48 of 53
La herramienta correcta
Ciclo de vida de un prototipo La vida de un prototipo estรก directamente relacionada con el problema que tiene para resolver mรกs ciclos, mรกs refinamientos: ยกmejores resultados!
Design
Short cycle
Iterate
Communicate
Evaluate
Page 49 of 53
Long & progressive
Lo que es relevante es
Comunicar That's our job
Page 50 of 53
La herramienta correcta
No hay una herramienta perfecta La herramienta correcta es la que te ayuda a comunicar tu concepto Necesitamos explicar problemas complejos y proyectos grandes de una manera simple y evaluar si son claros y significativos para las personas.
Paper prototype
Keynote
AGer effects
InteracNve pdf
Fireworks
Experience
Proto UI
Adobe edge
HTML/Code
Functional
Page 51 of 53
3
Hazlo real
¿Qué sería la vida si no tuviéramos valor para intentar algo? VINCENT VAN GOGH
Page 52 of 53
ยกGracias! Antonio de Pasquale en twitter @myinteraction
Page 53 of 53