diseño centrado en el usuario: ux, ixd, usabilidad aplicada

listadopelículas

alquiler

listadoclientes

detalle película

listado copias

Seleccionar copia

Copias + Cliente =

Ficha Cliente

Seleccionar

película

Buscar peliculas o clientes

Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago BusteloDirector de diseño, KambricaIxDA Latin America Regional Coordinator

Universidad de la Cuenca del Plata19 de abril, 2013

Presentación bajo licencia Creative CommonsAtribución 2.5 Argentinahttp://creativecommons.org/licenses/by/2.5/ar

@sbustelo

MEMBER

MEMBER

Me presento…

• Santiago Bustelo, diseñador de interacción.• Fundador y Director de Diseño, Kambrica.

• Fundador y Coordinador IxDA Buenos Aires y Coordinador Regional de IxDA en Latinoamérica. Organizador de los principales eventos de UX en Argentina desde 2010 y de Interaction South America 2014.

• Desde 1997 he participado en proyectos de diseño y desarrollo para Microsoft, Staples, Coca-Cola, HP, TetraPak, MetLife, HSBC, Telefónica, Jumbo, Molinos, Banco Santander, Bumeran.com, Guía Óleo y Universidad de Stanford, entre otros.

• He dictado presentaciones y talleres sobre Usabilidad, Diseño de Interacción y Experiencia de Usuario (UX) desde el año 2001 en Argentina, Brasil, Colombia, EEUU, Canadá, Irlanda y Holanda.

Evolución en Experiencia de Usuario •MEMBER

IxDA (Interaction Design Association)

• Organización abierta, voluntaria y gratuita, con la misión de liberar a la condición humana de las malas experiencias que la desafían, avanzando la disciplina de Diseño de Interacción.

• Foro global, más de 76.000 miembros, 160 grupos locales, 36 grupos en América Latina.

• En Argentina:• Buenos Aires: ixda.com.ar• Córdoba: ixdaCba.com.ar• Corrientes / Resistencia:

facebook/IxdaCorrientesResistencia• La Plata: ixdaLaPlata.com.ar• Mar del Plata: @IxDAMDQ• Mendoza: ixdaMza.com.ar• Rosario: ixdaRosario.com.ar• Tucumán: ixdaTucuman.com.ar

3

ixda.org

Santiago Bustelo (@sbustelo) •MEMBER

¿Cuál es el rol del diseñador en elSiglo XXI?

4

Santiago Bustelo (@sbustelo) •MEMBER

Leer el diario1993 2013

5

Santiago Bustelo (@sbustelo) •MEMBER

1993 2013

Buscar trabajo

6

Santiago Bustelo (@sbustelo) •MEMBER

1993 2013

Trabajo administrativo

7

Santiago Bustelo (@sbustelo) •MEMBER

1993 2013

Hacer las compras

8

Santiago Bustelo (@sbustelo) •MEMBER

1993 2013

Reencontrarse con compañeros de escuela

9

Santiago Bustelo (@sbustelo) •MEMBER

El mundo digital que nosotros construimos

10

• En un mundo cada vez más conectado e interdependiente, los diseñadores y desarrolladores tenemos la llave para lograr que cada producto o servicio interactivo sea usable y accesible para todas las personas, sin importar el nivel de alfabetización digital y las capacidades físicas, sensoriales, e intelectuales que tengan.

Santiago Bustelo (@sbustelo) •MEMBER

Diseño Centrado en el Usuario

• Filosofía de diseño:

• Creación de productos que resuelvan necesidades concretas de sus usuarios finales, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el mínimo esfuerzo de su parte.

• Proceso de diseño:

• Conocer a fondo a los usuarios finales reales.

• Diseñar un producto que resuelva sus necesidades y se ajuste a sus capacidades, expectativas y motivaciones.

• Poner a prueba lo diseñado.

11

Santiago Bustelo (@sbustelo) •MEMBER

User Experience (UX)

“Inventé el término porque pensé que interfaz y usabilidad eran demasiado limitados. Quise cubrir todos los aspectos de la experiencia de una persona con un sistema, incluyendo el diseño industrial, gráficos, la interfaz, la interacción física, y el manual. Don Norman

12

Santiago Bustelo (@sbustelo) •MEMBER

• Diseño de Experiencias (UX)• Dirigir la forma en que se siente una persona usando un producto, sistema o

servicio.• Diseño de Servicios

• Planificar y organizar personas, infraestructura, comunicación y componentes materiales de un servicio para mejorar su calidad y relación con sus clientes.

• Diseño de Interacción (IxD) • Define el modelo de operación de productos interactivos para lograr mejores

experiencias para más usuarios.• Diseño de Interfaces

• Define los elementos concretos empleados en la interacción.• Diseño visual

• Define lenguaje, carácter e identidad visual del producto.

ABSTRACTO

CONCRETO

UX y Diseño: definir cómo es, cómo funciona y cómo luce un producto digital

13

DISEÑO DEINTERACCIÓN

INTERACCIÓNHUMANO-COMPUTADOR

IxD

DISEÑOINDUSTRIAL

DISEÑODE SONIDO

DI

ARQUITECTURAARQUITECTURADE INFORMACIÓN

ARQDISEÑO DE

EXPERIENCIAS

UX

AI

DISEÑOGRÁFICO

DG

HCI

SeñaléticaEntornosInteractivos

Diseño de Interfaces

Computaciónubicua

Ingeniería deUsabilidad

Controles

Diseño de Información

Navegación

PRODUCCIÓNDE CONTENIDO(Texto, Imagen,Video, sonido)

Dan Saffer, Designing for Interaction

Santiago Bustelo (@sbustelo) •MEMBER

Arquitectura de Información(IA, Information Architecture)

• Organizar, jerarquizar y nombrar la información presente en sitios Web, dispositivos móviles e interfaces en general.

15

Santiago Bustelo (@sbustelo) •MEMBER

16

Jakob Nielsen, Hoa Lorenger: Prioritizing Web Usability

IA

75% de los problemas de UX involucran IA

Santiago Bustelo (@sbustelo) •MEMBER

Arq. de Información fuera de la pantalla

17

DISEÑO INTERACTIVO PARA TODOS: USABLE Y ACCESIBLE

Señalética: prototipos

Señalética: versión final

Santiago Bustelo (@sbustelo) •MEMBER

Factores que componen UX

18

time pressure,

pressure of success and fail,

explicit and implicit requirements, etc.

sex, fashion,

habits, norms, language,

symbols, religion, etc.

time, place,

accompanying persons,

temperature, etc.

cultural factorssocial factors

values,

emotions,

expectations,

prior experiences,

physical characteristics,

motor functions,

personality,

motivation,

skills,

age, etc.

user

usability,

functions,

size, weight,

language, symbols,

aesthetic characteristics,

usefulness,

reputation,

adaptivity,

mobility,

etc.

product

context of use

INTERACTION

User Experience

Arhippainen, L., Tähti, M. (2003). Empirical Evaluation of User Experience in Two Adaptative Mobile Application Prototypes. Proceedings of the 2nd International Conference on Mobile and Ubiquitous Multimedia, 10–12 December, 2003, Norrköping, Sweden.

Espacio de diseño

Impacto

Santiago Bustelo (@sbustelo) •MEMBER

Sitios inspiradores vs. sitios que usamos

19

Santiago Bustelo (@sbustelo) •MEMBER

Forma versus Función

1 2 3 4

5 6

7 8 9 10 11 12

13

14

15 16 17 18 19 20 21

22 23

24

25 26 27 28 29 30 31

20

Santiago Bustelo (@sbustelo) •MEMBER

Forma y Función

22

D L M M J V S

26 27 28 29 30 31 1

2 3 4 5 6 7 8

9 10 11 12 13 14 15

16 17 18 19 20 21 22

23 24 25 26 27 28 29

30 31 2 3 4 5 6

Santiago Bustelo (@sbustelo) •MEMBER

• La usabilidad de una interfaz es una medida de la efectividad, eficiencia y satisfacción con la cual determinados usuarios pueden alcanzar determinados objetivos en un entorno particular con dicha interfaz.(ISO 9241, Requerimientos ergonómicos para trabajo de oficina con terminales visuales, Parte 11 - 1997)

Usabilidad

24

Efectividad: Incorporando al usuario

Santiago Bustelo (@sbustelo) •MEMBER

Eficiencia: análisis y cuantificación

26

Santiago Bustelo (@sbustelo) •MEMBER

Satisfacción: experiencia óptima

Simplificación del modelo de Mihaly Csikszentmihalyi

Frustración

Fluencia

desafío

habilidad

Aburrimiento

27

Santiago Bustelo (@sbustelo) •MEMBER

Caso de ejemplo y proceso de diseño centrado en el usuario

28

Santiago Bustelo (@sbustelo) •MEMBER

Parte 1: Diseñando desde la caverna29

Verónica Traynor: UX y la caverna de Platón

Santiago Bustelo (@sbustelo) •MEMBER

• Producto: Software de administración de un videoclub

• Nuestros personajes:

Caso de ejemplo

30

Programadorcavernario

Diseñadorcavernario

Emprendedorcavernario

Iconos: FastIcon

Santiago Bustelo (@sbustelo) •MEMBER

Programador cavernario

• 3 entidades

• Películas: Datos

• Clientes: Datos

• Alquileres: Relaciones

• Operaciones

• Alta, baja, modificación y consulta para cada entidad

Ejemplo desarrollado por Diego González, Fundador Lagash Systems

31

1234

1234

1234

Gonzalez

GonzalezDiego760 Rivadavia 5000 11 B Buenos  Aires 12

1234

760

No  hay  stock.

760

1235

760

Santiago Bustelo (@sbustelo) •MEMBER

Diseñador cavernario

• Metáforas

• Películas: DVDs

• Clientes: Fichas

• Alquileres: Ficha + DVD

• Representación

• Experiencia inmersiva

• Fotorealismo

47

Santiago Bustelo (@sbustelo) •MEMBER

Emprendedor cavernario

• Relevamiento competitivo

• Definición del mercado

• Especificación

• Recursos y plan de trabajo

• ????

• Profit!

59

Santiago Bustelo (@sbustelo) •MEMBER

Relevamiento competitivo60

freemium

Santiago Bustelo (@sbustelo) •MEMBER

Relevamiento competitivo61

screencast

Santiago Bustelo (@sbustelo) •MEMBER

Relevamiento competitivo

62

amigable

touch

Santiago Bustelo (@sbustelo) •MEMBER

Definición del mercado

63

Foto: Ned Raggett Foto: Andrés Rueda

Santiago Bustelo (@sbustelo) •MEMBER

“Especificación” para diseño y desarrollo

64

✓ Más potente y con más funciones que la competencia.

✓ Gestión de uno o múltiples locales.

✓ Informes y estadísticas.

✓ Cálculo automático de recargos.

✓ Módulo avanzado de búsquedas.

✓ Tipos de artículos y formatos configurables.

✓ Módulo de Promociones.

✓ Sistema de premios y puntos de cliente.

✓ Soporte de lectores de códigos de barras.

✓ Módulo de diseño de catálogos.

✓ Módulo de diseño de páginas web.

✓ Control de envíos y retiros a domicilio (delivery) con emisión de ticket de retiro.

✓ Creación de abonos de alquiler con fecha de vencimiento.

✓ Módulo de envío de catálogo por e-mail a socios.

✓ Interfaz amigable y fácil de usar.

Santiago Bustelo (@sbustelo) •MEMBER

Recursos y “metodología”

65

Ejerce

r pres

ión Ejercer presión

Santiago Bustelo (@sbustelo) •MEMBER

Expectativa66

En 3 meses

Foto: Wikipedia

Santiago Bustelo (@sbustelo) •MEMBER

Resultado67

Después de 1 año

Foto: Wikipedia

Santiago Bustelo (@sbustelo) •MEMBER

Parte 2: Saliendo de la caverna68

Santiago Bustelo (@sbustelo) •MEMBER

¿Qué tienen en comúnlos tres casos anteriores?

69

• Diseño sin intención / autoreferencial

• El usuario final no participa del proceso

• Proceso lineal

• Falta de metodología

• Falta de política de calidad

Santiago Bustelo (@sbustelo) •MEMBER

La Calidad se declara en un equipo

70

Política de Calidad

Procesos

Técnicas

Herramientas

Santiago Bustelo (@sbustelo) •MEMBER

Proceso lineal

1. Definición de requerimientos.

2. Diseño y desarrollo a nivel de producción.

3. Entrega.

71

Santiago Bustelo (@sbustelo) •MEMBER

Proceso lineal interminable

1. Definición de requerimientos.

2. Diseño y desarrollo a nivel de producción.

3. Entrega.

4. No es lo que el cliente o el usuario querían,retrocede tres casilleros.

5. Se repite hasta el hartazgo de unao ambas partes.

72

Santiago Bustelo (@sbustelo) •MEMBER

¿Cuándo está terminado nuestro trabajo?(criterio de Calidad)

• Cuando nos gusta a nosotros

• Cuando funciona como queríamos

• Cuando le gusta al cliente

• Cuando el usuario logra lo que esperábamos

73