experiencia de usuario: diseñar más allá de las pantallas - googlelaunchpadba

EXPERIENCIA DE USUARIO

DISEÑAR MÁS ALLÁ DE LAS PANTALLAS GoogleLaunchPadBA

Santiago Bustelo User Experience Director, KambricaIxDA Buenos Aires Local Group Coordinator

Miércoles 9 de noviembre, 2016

M EM B E R

Obra bajo licencia Creative Commons Reconocimiento 4.0 Internacional

http://www.apple.com



M E M B E R

ME PRESENTO…

Santiago Bustelo, Consultor en Experiencia de Usuario (UX) y Diseñador de Interacción.

Fundador y Director de UX, Kambrica.

Fundador y Coordinador IxDA Buenos Aires. Coordinador IxDA Latinoamérica 2010-2015.Chair Interaction South America 2014.

Empecé a trabajar en diseño de interacción en 1996.Desde entonces participé en proyectos para Argentina, Chile, Colombia, Perú, España, Estados Unidos e Inglaterra, para empresas de todo tamaño de las más diversas industrias y también para organismos públicos.

Desde 2001 ha dictado presentaciones y talleres sobre UX, Usabilidad, Diseño de Interacción y Diseño Centrado en el Usuario en Argentina, Chile, Colombia, Estados Unidos, Canadá, Alemania, Irlanda, Finlandia y Países Bajos.

http://www.kambrica.com


http://www.ixda.com.ar/

http://www.ixda.org/

http://isa.ixda.org/2014/

M E M B E R

IXDA: INTERACTIONDESIGN ASSOCIATION

Organización mundial 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 80.000 miembros, 175 grupos locales, 41 grupos en América Latina.

ixda.com.ar En Argentina: Buenos Aires, Córdoba, Corrientes / Resistencia, La Plata, Mar del Plata, Mendoza, Rosario, Santa Fe y Tucumán.

isa.ixda.org Conferencia Interaction South America 2017: Noviembre 2017, Florianopolis, Brasil


http://ixda.com.ar

http://isa.ixda.org

M EM B E R

ESCALABILIDAD DEL NEGOCIO

http://www.ixda.com.ar


Startup: experimentar para llegar a un modelo…

…escalabe y replicable.

kambrica.com •M E M B E R

RESTAURANTE TRADICIONAL

9

1. Toma de pedido

2. Entrega

3. La cuenta


RESTAURANTE DE COMIDA RÁPIDA

10

1. Toma de pedido y pago

2. Entrega


• Optimización de procesos

• Oferta limitada

• Usuarios como parte del sistema

• Autoservicio

• No sobremesa

MODELO DE NEGOCIOS DE COMIDA RÁPIDA: BAJO COSTO, ALTA ROTACIÓN

11


SILLAS ANTI-SOBREMESA DISEÑANDO EL ENTORNO,INFLUENCIAMOS EL COMPORTAMIENTO

12


EL SOFTWARE ESCALA INFINITAMENTE …SI ESTÁ BIEN CONSTRUIDO

…Y LA GENTE LO USA.

13

LA INDUSTRIA DEL AUTOSERVICIO

M EM B E R

EL VALOR DEL SOFTWARE ESTÁ DELANTE DE LA PANTALLA




UX, DISEÑO DE INTERACCIÓN (IXD), DISEÑO DE INTERFACES (UI)

15

Interfaz (User Interface, UI),

(Diseño visual)

Interacción (Interaction

Design, IxD)

Experiencia (User Experience,

UX)

ARTEFACTO USUARIO

Lo que sucede delante de la pantalla

Lo que sucede en la pantalla


Lo que experimenta una persona (percepciones, emociones, ideas, acciones) usando un producto, sistema o servicio.

Satisfacción de las promesas de la marca y la puesta en práctica de sus valores.

EXPERIENCIA DE USUARIO

16


LAS MALAS EXPERIENCIAS YA FORMAN PARTE DE LA CULTURA POPULAR

17

XKCD: University WebsiteOffice Space (1999)

http://xkcd.com/773/


¿POR QUÉ LAS MALAS EXPERIENCIAS SON TAN FRECUENTES?

“ Nadie quiere creer que ofrece un producto de mala calidad o deficiente, porque nadie se propone un mal diseño como meta. Es siempre un riesgo. Los malos diseños y malas experiencias suceden”. (Kaleem Khan, consultor de UX)

18


NOS HACEMOS UNA IMAGEN MENTAL DE LA REALIDAD, Y OPERAMOS CONTRA ESA IMAGEN.

PERO LOS RESULTADOS LOS TRAE LA REALIDAD.

19

¿POR QUÉ LAS MALAS EXPERIENCIAS SON TAN FRECUENTES?


PROCESO ITERATIVO LEAN: DECISIONES Y EJECUCIÓN BASADAS EN CONOCIMIENTO VALIDADO

20

Ideas

ProductoDatos

CONSTRUIR

MEDIR

APRENDER

M EM B E R

EMPRENDIENDODESDE LA CAVERNA




CASO DE EJEMPLO

Producto: Software de administración de un videoclub

Nuestros personajes:

22

Programadorcavernario

Diseñadorcavernario

Emprendedorcavernario

Iconos: FastIcon

http://www.fasticon.com/


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

23

http://www.lagash.com

1234

Gonzalez

GonzalezDiego760 Rivadavia 5000 11 B BuenosAires 12

1234

1

Nohaystock.

1235

1


DISEÑADOR CAVERNARIO

Metáforas:

• Películas: DVDs

• Clientes: Fichas

• Alquileres: Ficha + DVD Representación:

• Experiencia inmersiva

• Fotorealismo

39


EMPRENDEDOR CAVERNARIO

• Relevamiento competitivo

• Definición del mercado

• Especificación

• Recursos y plan de trabajo

• ????

• Profit!

51

Relevamiento competitivo

freemium



screencast



RELEVAMIENTO COMPETITIVO

54

amigable

touch


DEFINICIÓN DEL MERCADO

55

Foto: Ned Raggett Foto: Andrés Rueda

http://flickr.com/photos/nedraggett/257959520/

http://flickr.com/photos/andresrueda/5441397099/


“ESPECIFICACIÓN” PARA DISEÑO Y DESARROLLO

56

✓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.


RECURSOS Y “METODOLOGÍA”

57

Ejerce

r pres

ión Ejercer presión

Expectativa

En 3 meses

Foto: Wikipedia

http://en.wikipedia.org/wiki/File:Lion_waiting_in_Namibia.jpg

Resultado

Después de 1 año

Foto: Wikipedia

http://en.wikipedia.org/wiki/File:Platypus-sketch.jpg

M EM B E R

SALIENDO DELA CAVERNA




CUANTIFICACIÓN: KLM-GOMS

61

Cada operación del usuario tiene un costo.

Key 0,2 seg. Tecla / mouse click & release

Hover 0,4 seg. Paso mouse !" teclado

Point 1,1 seg. Apuntar con el mouse

Mental 1,35 seg. Preparación mental nueva tarea

Response ? Respuesta del sistema


CUANTIFICACIÓN: BUSCAR CLIENTE (V. PROGRAMADOR)

62

Inicio tarea: 1,35 Mover mano al mouse: 0,40

Proxima tarea: 1,35 Apuntar menu Clientes: 1,10

click menu Clientes: 0,20 Apuntar menú Clientes »

Modificación: 1,10 click menú Clientes »

Modificación: 0,20 Próxima tarea: 1,35

Apuntar campo texto: 1,10 click campo texto: 0,20

Mover mano al teclado: 0,40 Proxima tarea: 1,35

Tipear apellido: 1,60 Mover mano al mouse: 0,40

Proxima tarea: 1,35 point OK: 1,10 click OK: 0,20

Obtuvimos (o no) el dato: 14.75 segundos

Recuperación: Mover mano al mouse: 0,40

Proxima tarea: 1,35 point Cancel: 1,10 click Cancel: 0,20

Volvemos a abrir el cuadro, Tipeamos apellido otra vez: 12,32

Mover mano al mouse: 0,40 Proxima tarea: 1,35

apuntarOK: 1,10 click OK: 0,20

Total con recuperación:32,55 segundos


CUANTIFICACIÓN: BUSCAR CLIENTE (V. DISEÑADOR)

63

Inicio tarea: 1,35 Apuntar al fichero home: 1,10

Click Fichero home: 0,20 Animación "files, lots of files¨: 4

Proxima tarea: 1,35 Apuntar boton prox serie

ficheros: 1,10 Click proxima serie ficheros: 0,20

Animación serie de ficheros: 1 Prox tarea: 1,35

Apuntar fichero "G": 1,10 Click fichero "G": 0,20

Animación fichero G: 2

Proxima tarea: 1,35 Leer etiquetas x 4: 5,40

Proxima tarea: 1,35 Apuntar GON: 1,10

Click GON: 0,20 Animación Cajón GON: 2

Proxima tarea: 1,35 Leer Apellido, Nombre x 5: 6,75

Proxima tarea: 1,35 Apuntar Gonzalez, Diego: 1,10

Click Gonzalez, Diego: 0,20

Obtuvimos la ficha: 28.10 segundos

Beneficio eliminar animaciones: 9 segundos

Total sin animaciones: 19,1 segundos


CASO CENTRADO EN EL USUARIO

64

• Objetivos antes que requerimientos

• Proceso iterativo • Construir prototipos • Medir, validar con usuarios • Aprender, ajustar, mejorar

hasta lograr objetivosUsaurio

Ideas

ProductoDatos

CONSTRUIR

OBSERVAR, MEDIR,

VALIDAR

APRENDER


CASOS DE USO: HIPÓTESIS INICIAL

• Modalidad de atención: mostrador, teléfono y buzón

• Búsqueda de clientes y títulos

• Alta de un cliente

• Alta de nueva película

• Cliente alquila más de una película

• Cliente devuelve películas y alquila otras

• Carga de devoluciones de buzón

• Copia dañada

• Reporte de atrasos

65


RESULTADOS DEL RELEVAMIENTO (UN VIDEOCLUB, DOS USUARIOS)

No tomamos requerimientos de los usuarios.Nos enfocamos en lo que los usuarios hacen.

• Procesos y problemas reales del negocio

• Gestión actual, áreas de mejora

• Aprox. 5000 clientes y 5000 películas

• Los clientes casi nunca saben el Nro. de Cliente, menos aún cuando no son titulares

• Se dan de alta 10 a 20 títulos por día, con datos mínimos

• Cargar devoluciones de buzón puede llevar toda la mañana

• Muchas copias para una película

• No se dan clientes de baja

67


CASOS DE USO REALES Y PRIORIZADOS

1. Modalidad de atención: mostrador, teléfono

2. Búsqueda de clientes: por nombre del titular, dirección o teléfono.

3. Búsqueda de copias: por título o código

4. Alta o modificación de un cliente

5. Editar película: ABM copias, “baja” si no hay copias

6. Cliente alquila hasta 3 películas

7. Cliente devuelve hasta 3 películas

8. Cliente devuelve hasta 3 películas y alquila hasta 3

9. Alta de 20 nuevos títulos, asignación de copias

10. Modalidad de atención: buzón

11. Carga de 40 devoluciones de buzón

12. Copia dañada

13. Listado de películas por géneros / estrenos

14. Reporte de atrasos

15. ¿Qué temporadas vio el cliente?

16. Se desordena fila en mostrador

68

PRIMER ITERACIÓN SISTEMA CON DOS CAMPOS DE BÚSQUEDA


PROPUESTA: UN SOLO CAMPO DE BÚSQUEDA

• Resultado dependiente del contenido. No hace falta especificar el tipo de dato.

• Ventajas del patrón Instant Search

• Mínimo input

• Corrección sobre la marcha

• Podemos usar [enter] para próxima acción: el proceso es predecible en base a los datos

• Necesitamos prueba de concepto.

73


PRUEBA DE CONCEPTO

74

Prueba de concepto publicada en http://kambrica.com/raf08

http://icograma.com/raf08/


CUANTIFICACIÓN: BÚSQUEDA 2.0

82

Inicio tarea: 1,35 Mover mano al mouse: 0,40

Proxima tarea: 1,35 apuntar Buscar: 1,10

click Buscar: 0,20 Mover mano al teclado: 0,40

Proxima tarea: 1,35 Tipear 3 caratacteres apellido: 0,60

Proxima tarea: 1,35 Tipar espacio: 0,20 Proxima tarea: 1,35

Tipear 3 caracteres nombre: 0,60

Total: 10,25 segundos

Beneficio de mantener foco en búsqueda: 4,80 segundos

Total manteniendofoco en búsqueda:

5,45 segundos


ESQUEMA DE INTERACCIÓN

83

Funciones secundarias

listadopelículas

alquiler

listadoclientes

detalle película

listado copiasSeleccionar copia

Copias + Cliente =

Ficha Cliente

Seleccionarpelícula

Buscar peliculas o clientes


MOCKUP FINAL

84


CASO: CLIENTE DEVUELVE Y ALQUILA

85



86



87



88


CASO: DEVOLUCIÓN DE 40 PELÍCULAS

89



90



91



92


RESULTADOS

93

Tarea 1.0 2.0 %

Búsqueda 15 a 33 seg. 5.45 seg. 175 a 500 %

Alta de 20 nuevas películas 1.543 seg. 204 seg. 656%

Cliente devuelve y alquila 52 a 87 seg. 7.80 seg. 566%

Buzón 40 devoluciones 636 seg. 156 seg. 300%

Notificación de 9 atrasos 10 a 15 min.? 7 seg. 8400%

M EM B E R

LOGRANDO RESULTADOS DELANTE DE LA PANTALLA




CALIDAD ES LO QUE NUESTROS USUARIOS VALORAN. EL RESTO ES DESPERDICIO.

95

Cuando las personas y las organizaciones se enfocan en calidad, reducen los costos innecesarios, logran mayor valor diferencial y mejores relaciones con sus clientes.

Cuando las personas y las organizaciones se enfocan en costos, terminan generando desperdicio barato, mayores costos, peor calidad y menos valor.

FILOSOFÍA LEAN


ADOPCIÓN DE PRODUCTOS INNOVADORES: LA MEJOR ESTRATEGIA ES REQUERIR POCO CAMBIO DE CONDUCTA (HÁBITOS) DEL USUARIO

96

EASY SELLS

SMASH HITS

SURE FAILURES

LONG HAULS

Degree of behaviour

change required

Degree of product change involved

LOW

LOW HIGH

HIGH

Gourville, John T.: Eager Sellers & Stony Buyers - Harvard Business Review, Jun 2006, Vol. 84 Issue 6


KNOWLEDGE GAP: LO QUE EL USUARIO DEBE SABER PARA USAR EL PRODUCTO, VS. LO QUE YA SABE ANTES DE USARLO

97

Amado

Tolerado Cauteloso

Odiado Evitado

Uso VoluntarioRequerido

Know

ledg

e G

apPe

queñ

oG

rand

e

Usuarios con decisión sobre la adquisición

Usuarios sin decisión sobre la adquisición

Jared Spool:Riding the Magic Escalator of Acquired Knowledge


THE THREE QUESTIONS FOR AN INNOVATION COMPANY: THE VISION QUESTION

98

Everyone recites the same stories

The experience of use, not the biz or tech

Enough to escape current

constraints

Can everyone on the team describe the experience of using your product five years from now?

Jared Spool:The 3 Qs for Great Experience Design


THE THREE QUESTIONS FOR AN INNOVATION COMPANY: THE FEEDBACK QUESTION

99

Has to be recent, otherwise it’s forgotten

Enough time to see the subtleties & nuances

First-hand exposure to the

experience

In the last six weeks, have you spent more than two hours watching someone use your product or a competitor’s product?



THE THREE QUESTIONS FOR AN INNOVATION COMPANY: THE CULTURE QUESTION

100

Frequency makes it part of the culture

Using celebration to reward careful risk taking

This means you’re taking

risks

In the last six weeks, have you rewarded a team member for creating a major design failure?


M EM B E R

CASOS REALES



M EM B E R

PERSONAL PREPAGO



M EM B E R

OFFICENET STAPLES



Diseñar algoritmos

M EM B E R

ENFOQUE: “BUSCAR” EQUIVALE A IR AL MOSTRADOR A PREGUNTAR



Diseñar algoritmos

M EM B E R

BUMERAN



Bumeran: El usuario genera el valor

Bumeran: Visibilidad de procesos

M EM B E R

CONSULTORIO MÓVIL



Consultorio Móvil: Modelo IT vs. Modelo del usuario

M E M B E R


M EM B E R

MERCADOSHOPS DEVELOPERS



M EM B E R

MOVISTAR 4G




¿CUÁNDO ESTÁ TERMINADO NUESTRO TRABAJO?

•Cuando nos gusta a nosotros

•Cuando funciona como queríamos

•Cuando le gusta al cliente

•Cuando el usuario logra lo que esperábamos

127

¡MUCHAS GRACIAS!

(+54 11) 4783 5661 • Av. Juramento 2059 Piso 4 Of. 408 (C1428DNG)

Santiago Bustelo User Experience Director [email protected]

mailto:[email protected]