Dibujando la experiencia de usuario

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