Diseño de Interacción:
Usabilidad aplicada
Presentación bajo licencia Creative Commons
Atribución 2.5 Argentina
http://cre...
Diseño de Interacción •M E M B E R
IxDA (Interaction Design Association)
• Red global dedicada a la práctica
profesional d...
Diseño de Interacción •M E M B E R
• Diseño de Experiencias (UX)
• Diseño de Interacción (IxD)
• Define el modelo de opera...
DISEÑO DE
INTERACCIÓN
INTERACCIÓN
HUMANO-COMPUTADOR
IxD
DISEÑO
INDUSTRIAL
DISEÑO
DE SONIDO
DI
ARQUITECTURAARQUITECTURA
DE ...
Diseño de Interacción •M E M B E R
Funciones del diseño
Información
Presentación
Uso
5
Diseño de Interacción •M E M B E R
Forma versus Función
1
2 3 4
567
891011
12
1314
15
16 17 18 19
20
21
222324
25
26272829...
Diseño de Interacción •M E M B E R
Forma y Función
7
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
1...
Diseño de Interacción •M E M B E R
• La usabilidad de una interfaz es una medida
de la efectividad, eficiencia y satisfacc...
Efectividad: Incorporando al usuario
Diseño de Interacción •M E M B E R
Eficiencia: análisis y cuantificación
10
Diseño de Interacción •M E M B E R
Satisfacción: experiencia óptima
Simplificación del modelo de Mihaly Csikszentmihalyi
F...
Diseño de Interacción •M E M B E R
¿Cuándo está terminado nuestro trabajo?
• Cuando nos gusta a nosotros
• Cuando funciona...
Diseño de Interacción •M E M B E R
Entendiendo al usuario
• Su fin es realizar una tarea.
• Nuestra interfaz es sólo un me...
Diseño de Interacción •M E M B E R
Sitios que te inspiran vs. sitios que usás
14
Diseño de Interacción •M E M B E R
Proceso de diseño
y caso de ejemplo
15
Diseño de Interacción •M E M B E R
• Administración de un videoclub
• Requerimientos:
• Alquilar una pelicula
• Devolver u...
Diseño de Interacción •M E M B E R
Programador cavernario
• 3 entidades
• Películas: Datos
• Clientes: Datos
• Alquileres:...
1234
1234
1234
Gonzalez
GonzalezDiego760 Rivadavia 5000 11 B Buenos	
  Aires 12
1234
760
No	
  hay	
  stock.
1235
760
Diseño de Interacción •M E M B E R
Diseñador cavernario
• Metáforas
• Películas: DVDs
• Clientes: Fichas
• Alquileres: Fic...
Diseño de Interacción •M E M B E R
¿Qué es Calidad?
• “La Calidad de un producto es una función
del bien que hace al mundo...
Diseño de Interacción •M E M B E R
Cuantificación
• “Mide lo que sea medible y haz medible lo
que no lo sea” (Galileo Gali...
Diseño de Interacción •M E M B E R
Cuantificación: KLM-GOMS
Cada operación del usuario tiene un costo.
45
Key 0,2 seg. Tec...
Diseño de Interacción •M E M B E R
Cuantificación:
Buscar cliente (v. programador)
46
Inicio tarea: 1,35
Mover mano al mou...
Diseño de Interacción •M E M B E R
Cuantificación:
Buscar cliente (v. diseñador)
47
Inicio tarea: 1,35
Apuntar al fichero ...
Diseño de Interacción •M E M B E R
• Problemas bien definidos
• Algoritmos
• Resolución lineal
• Metodología estructurada
...
Diseño de Interacción •M E M B E R
Proceso lineal
1. Definición de requerimientos.
2. Diseño y desarrollo a nivel de produ...
Diseño de Interacción •M E M B E R
Proceso lineal interminable
1. Definición de requerimientos.
2. Diseño y desarrollo a n...
Diseño de Interacción •M E M B E R
Proceso convergente
1. Objetivos y análisis inicial.
2. Diseño y desarrollo en iteracio...
Diseño de Interacción •M E M B E R
Diseño Centrado en el Usuario:
Hipótesis inicial de casos de uso
52
• Modalidad de aten...
Diseño de Interacción •M E M B E R
Resultados del Relevamiento
(un videoclub, dos usuarios)
• Procesos y problemas reales ...
Diseño de Interacción •M E M B E R
Casos de uso reales priorizados
54
• Modalidad de atención:
mostrador, teléfono y buzón...
Diseño de Interacción •M E M B E R
Idea: Sistema centrado en la Búsqueda
• ¿Un campo con dos botones?
• ¿Un campo con dos ...
Diseño de Interacción •M E M B E R
Sistema con dos campos de búsqueda
56
Diseño de Interacción •M E M B E R
Sistema con dos campos de búsqueda
57
Diseño de Interacción •M E M B E R
Sistema con dos campos de búsqueda
58
Diseño de Interacción •M E M B E R
Sistema con dos campos de búsqueda
Diseño de Interacción •M E M B E R
Propuesta: un solo campo de búsqueda
60
• Resultado dependiente del contenido
• Ventaja...
Diseño de Interacción •M E M B E R
Prueba de concepto
61
Prueba de concepto publicada en
http://kambrica.com/raf08/
Diseño de Interacción •M E M B E R
Cuantificación: Búsqueda 2.0
Inicio tarea: 1,35
Mover mano al mouse: 0,40
Proxima tarea...
diseño de interacción •M E M B E R
• Evitar uso del mouse
• Modelo unificado y consistente
• Metáforas / Referencias: Mail...
Diseño de Interacción •M E M B E R
Esquema
64
Funciones secundarias
listado
películas
alquiler
listado
clientes
detalle pe...
Diseño de Interacción •
M E M B E R
Buscar peliculas o clientes
Películas
Alquiler: 3 películas
La Rosa Púrpura del Cairo
...
Diseño de Interacción •
M E M B E R
66
Mockup final
Diseño de Interacción •M E M B E R
• Alta diaria de 20 nuevas películas
• Cliente devuelve y alquila en mostrador
• Carga ...
Diseño de Interacción •M E M B E R
Alta diaria de
20 nuevas películas
• Caso 1 / 4
• Reducción de input y pasos
• Eliminar...
Diseño de Interacción •M E M B E R
Alta diaria de 20 nuevas películas
69
Diseño de Interacción •M E M B E R
Alta diaria de 20 nuevas películas
70
Diseño de Interacción •M E M B E R
Alta diaria de 20 nuevas películas
71
Diseño de Interacción •M E M B E R
Alta diaria de 20 nuevas películas
72
Diseño de Interacción •M E M B E R
Alta diaria de 20 nuevas películas
73
Diseño de Interacción •M E M B E R
Cliente devuelve y alquila
• Caso 2 / 4
• Anticipación, no es necesario buscar al
clien...
Diseño de Interacción •M E M B E R
Cliente devuelve y alquila
75
Diseño de Interacción •M E M B E R
Cliente devuelve y alquila
76
Diseño de Interacción •M E M B E R
Cliente devuelve y alquila
77
Diseño de Interacción •M E M B E R
Cliente devuelve y alquila
78
Diseño de Interacción •M E M B E R
Devolución de
40 películas
• Caso 3 / 4
• Soportar un proceso de lotes con el mismo
mod...
Diseño de Interacción •M E M B E R
Devolución de 40 películas
80
Diseño de Interacción •M E M B E R
Devolución de 40 películas
81
Diseño de Interacción •M E M B E R
Devolución de 40 películas
82
Diseño de Interacción •M E M B E R
Devolución de 40 películas
83
Diseño de Interacción •M E M B E R
• Caso 4 / 4
• Comprensión del caso de uso:
Lo importante no es el listado, sino la
not...
Diseño de Interacción •M E M B E R
Reporte de atrasos
85
Diseño de Interacción •M E M B E R
Reporte de atrasos
86
Diseño de Interacción •M E M B E R
Resultados
Tarea 1.0 2.0 %
Búsqueda 15 a 33 seg. 5.45 seg. 175 a 500 %
Alta de 20 nueva...
Diseño de Interacción •M E M B E R
• No hay User Experience
sin usuarios (Verónica Traynor)
• Proceso iterativo de análisi...
Diseño de Interacción •M E M B E R
Diseño de Interacción en América Latina
Oportunidades
• Interés creciente en Usabilidad...
w w w . k a m b r i c a . c o m
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Upcoming SlideShare
Loading in...5
×

Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)

1,242

Published on

Diseño de Interacción: Usabilidad aplicada - Presentación en el Día de la Usabilidad en Bogotá, Colombia, el 11 de noviembre de 2011 (www.diadelausabilidad.com.com)

Video: https://www.youtube.com/watch?v=KK-TnDPlx4o


El Diseño de Interacción es una nueva disciplina de diseño, relacionado con la Usabilidad y la Ingeniería de Software.

En la charla se presentan diferencias y puntos en común del Diseño de Interacción con el Diseño Gráfico y Diseño Industrial, qué nuevas habilidades requieren los profesionales del diseño para desempeñarse dentro de estas disciplinas, y técnicas y metodologías de trabajo específicas.

Se muestra cómo un programador, un diseñador visual y un diseñador de interacción tomarían el mismo encargo, exponiendo las diferencias de criterio y proceso, y la aplicación de un modelo cuantificado para comparar los resultados y lograr calidad.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,242
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
45
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)

  1. 1. Diseño de Interacción: Usabilidad aplicada Presentación bajo licencia Creative Commons Atribución 2.5 Argentina http://creativecommons.org/licenses/by/2.5/ar Santiago Bustelo Director de diseño, Kambrica IxDA Latin America Regional Coordinator Día de la Usabilidad • Bogotá, Colombia 11 de noviembre, 2011 @sbustelo M E M B E R
  2. 2. Diseño de Interacción •M E M B E R IxDA (Interaction Design Association) • Red global dedicada a la práctica profesional del Diseño de Interacción • Comunidad • Educación • Evangelismo • Profesionalismo • Innovación • Foro global, 28.000 miembros • 20 grupos en América Latina y creciendo! • ixda.org/local/ixda-bogota 2 ixda.org
  3. 3. Diseño de Interacción •M E M B E R • Diseño de Experiencias (UX) • Diseño de Interacción (IxD) • Define el modelo de operación de productos interactivos para lograr mejores experiencias para la mayor cantidad de usuarios • Diseño de Interfaces • Define los elementos concretos empleados en la interacción ABSTRACTO CONCRETO Diseño de Interacción 3
  4. 4. DISEÑO DE INTERACCIÓN INTERACCIÓN HUMANO-COMPUTADOR IxD DISEÑO INDUSTRIAL DISEÑO DE SONIDO DI ARQUITECTURAARQUITECTURA DE INFORMACIÓN ARQ DISEÑO DE EXPERIENCIAS UX AI DISEÑO GRÁFICO DG HCI Señalética Entornos Interactivos Diseño de Interfaces Computación ubicua Ingeniería de Usabilidad Controles Diseño de Información Navegación PRODUCCIÓN DE CONTENIDO (Texto, Imagen, Video, sonido) Dan Saffer, Designing for Interaction
  5. 5. Diseño de Interacción •M E M B E R Funciones del diseño Información Presentación Uso 5
  6. 6. Diseño de Interacción •M E M B E R Forma versus Función 1 2 3 4 567 891011 12 1314 15 16 17 18 19 20 21 222324 25 262728293031 6
  7. 7. Diseño de Interacción •M E M B E R Forma y Función 7 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
  8. 8. Diseño de Interacción •M E M B E R • 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 8
  9. 9. Efectividad: Incorporando al usuario
  10. 10. Diseño de Interacción •M E M B E R Eficiencia: análisis y cuantificación 10
  11. 11. Diseño de Interacción •M E M B E R Satisfacción: experiencia óptima Simplificación del modelo de Mihaly Csikszentmihalyi Frustración Fluencia desafío habilidad Aburrimiento 11
  12. 12. Diseño de Interacción •M E M B E R ¿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 12
  13. 13. Diseño de Interacción •M E M B E R Entendiendo al usuario • Su fin es realizar una tarea. • Nuestra interfaz es sólo un medio que puede ser transparente, o un impedimento. • Nuestra interfaz no debe ocupar lugar en la mente del usuario. • Cuando el usuario tiene que pensar en nuestra interfaz, es porque se está preguntando lo que espera o necesita que sea evidente. Y eso, es señal de que no hicimos bien nuestro trabajo. 13
  14. 14. Diseño de Interacción •M E M B E R Sitios que te inspiran vs. sitios que usás 14
  15. 15. Diseño de Interacción •M E M B E R Proceso de diseño y caso de ejemplo 15
  16. 16. Diseño de Interacción •M E M B E R • Administración de un videoclub • Requerimientos: • Alquilar una pelicula • Devolver una pelicula • Cargar una película • Cargar un nuevo cliente Ejemplo desarrollado junto con Diego González (Lagash Systems, fundador) Caso de ejemplo 16
  17. 17. Diseño de Interacción •M E M B E R Programador cavernario • 3 entidades • Películas: Datos • Clientes: Datos • Alquileres: Relaciones • Operaciones • Alta, baja, modificación y consulta para cada entidad 17 Prototipo de interfaz publicado en http://kambrica.com/raf08/ caveman.zip(ejecutable para Windows)
  18. 18. 1234
  19. 19. 1234
  20. 20. 1234 Gonzalez
  21. 21. GonzalezDiego760 Rivadavia 5000 11 B Buenos  Aires 12
  22. 22. 1234 760
  23. 23. No  hay  stock.
  24. 24. 1235 760
  25. 25. Diseño de Interacción •M E M B E R Diseñador cavernario • Metáforas • Películas: DVDs • Clientes: Fichas • Alquileres: Ficha + DVD • Representación • Experiencia inmersiva • Fotorealismo 31
  26. 26. Diseño de Interacción •M E M B E R ¿Qué es Calidad? • “La Calidad de un producto es una función del bien que hace al mundo” (Tom DeMarco) • Calidad = Resultados del esfuerzo / Costos totales (W. Edwards Deming) • “Calidad es lo que nuestros usuarios valoran. Todo lo demás es desperdicio” (Lean Software Development) 43
  27. 27. Diseño de Interacción •M E M B E R Cuantificación • “Mide lo que sea medible y haz medible lo que no lo sea” (Galileo Galilei) • Cuantificar nos permite: • Comparar alternativas de manera objetiva • Análisis en lugar de opiniones • Identificar áreas de oportunidad 44
  28. 28. Diseño de Interacción •M E M B E R Cuantificación: KLM-GOMS Cada operación del usuario tiene un costo. 45 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 Más información: Artículo en Wikipedia sobre KLM-GOMS (en inglés)
  29. 29. Diseño de Interacción •M E M B E R Cuantificación: Buscar cliente (v. programador) 46 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
  30. 30. Diseño de Interacción •M E M B E R Cuantificación: Buscar cliente (v. diseñador) 47 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
  31. 31. Diseño de Interacción •M E M B E R • Problemas bien definidos • Algoritmos • Resolución lineal • Metodología estructurada • Foco en análisis y documentación • Problemas dinámicos • Heurísticas • Resolución asintótica • Metodología ágil • Foco en entregables ¿Qué estamos tratando de resolver? 48
  32. 32. Diseño de Interacción •M E M B E R Proceso lineal 1. Definición de requerimientos. 2. Diseño y desarrollo a nivel de producción. 3. Entrega. 49
  33. 33. Diseño de Interacción •M E M B E R 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 quería, retrocede tres casilleros. 5. Se repite hasta el hartazgo de una o ambas partes. 50
  34. 34. Diseño de Interacción •M E M B E R Proceso convergente 1. Objetivos y análisis inicial. 2. Diseño y desarrollo en iteraciones avanzando progresivamente en: • Funcionalidad • Estructura y elementos • Lenguaje visual 3. Entrega y puesta en producción. 51
  35. 35. Diseño de Interacción •M E M B E R Diseño Centrado en el Usuario: Hipótesis inicial de casos de uso 52 • 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
  36. 36. Diseño de Interacción •M E M B E R Resultados del Relevamiento (un videoclub, dos usuarios) • 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 • No tomamos requerimientos del usuario. Nos enfocamos en lo que el usuario hace. 53
  37. 37. Diseño de Interacción •M E M B E R Casos de uso reales priorizados 54 • Modalidad de atención: mostrador, teléfono y buzón • Búsqueda de clientes: por nombre del titular, dirección o teléfono. • Búsqueda de copias: por título o código • Cliente alquila hasta 3 películas • Cliente devuelve hasta 3 películas • Cliente devuelve hasta 3 películas y alquila hasta 3 • Alta de 20 nuevos títulos, asignación de copias • Carga de 40 devoluciones de buzón • Alta o modificación de un cliente • Editar película: ABM copias, “baja” si no hay copias • Copia dañada • Listado de películas por géneros / estrenos • Reporte de atrasos • ¿Qué temporadas vio el cliente? • Se desordena fila en mostrador
  38. 38. Diseño de Interacción •M E M B E R Idea: Sistema centrado en la Búsqueda • ¿Un campo con dos botones? • ¿Un campo con dos radio buttons y botón “Buscar”? • ¿Dos campos de búsqueda? • Tal vez funcione, empezamos un prototipo… 55
  39. 39. Diseño de Interacción •M E M B E R Sistema con dos campos de búsqueda 56
  40. 40. Diseño de Interacción •M E M B E R Sistema con dos campos de búsqueda 57
  41. 41. Diseño de Interacción •M E M B E R Sistema con dos campos de búsqueda 58
  42. 42. Diseño de Interacción •M E M B E R Sistema con dos campos de búsqueda
  43. 43. Diseño de Interacción •M E M B E R Propuesta: un solo campo de búsqueda 60 • Resultado dependiente del contenido • 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
  44. 44. Diseño de Interacción •M E M B E R Prueba de concepto 61 Prueba de concepto publicada en http://kambrica.com/raf08/
  45. 45. Diseño de Interacción •M E M B E R Cuantificación: Búsqueda 2.0 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 manteniendo foco en búsqueda: 5,45 segundos 62
  46. 46. diseño de interacción •M E M B E R • Evitar uso del mouse • Modelo unificado y consistente • Metáforas / Referencias: Mail, address book • Sujeto + verbo • No intrusivo • Diseño respetando Guías de diseño de interfaz de Windows Vista / Windows 7 Bases del diseño 63
  47. 47. Diseño de Interacción •M E M B E R Esquema 64 Funciones secundarias listado películas alquiler listado clientes detalle película listado copias Seleccionar copia Copias + Cliente = Ficha Cliente Seleccionar película Buscar peliculas o clientes
  48. 48. Diseño de Interacción • M E M B E R Buscar peliculas o clientes Películas Alquiler: 3 películas La Rosa Púrpura del Cairo Woody Allen La Rosa Púrpura del Cairo Woody Allen La Rosa Púrpura del Cairo Woody Allen La Rosa Púrpura del Cairo Woody Allen Santiago Bustelo 32 años 4123-4567 Diego González 32 años 4123-4567 Santiago Bustelo 32 años 4123-4567 Diego González 32 años 4123-4567 Diego González 32 años 4123-4567 Juan de los Palotes 1638 Deuda $67 Clientes Activar Cliente + + Alquilar a Diego González 78079 78079 78079 78079 78079 78079 78079 78079 78079 ReservarRelacionadas 78079 78079 78079 78079 La Rosa Púrpura del Cairo (1985) The Purple Rose of Cairo La Rosa Púrpura del Cairo #78909 Mia Farrow Jeff Daniels Danny Aiello Irving Metzman Stephanie Farrow Actores Woody AllenDirector Sátira, Comedia, Woody AllenGéneros 1 hora 22 minutosDuración La Rosa Púrpura del Cairo #78909 La Rosa Púrpura del Cairo El ciudadano Eterno resplandor de una mente... Yo sé que tu sabes que yo sé reservada Mockup avanzado 65
  49. 49. Diseño de Interacción • M E M B E R 66 Mockup final
  50. 50. Diseño de Interacción •M E M B E R • Alta diaria de 20 nuevas películas • Cliente devuelve y alquila en mostrador • Carga de 40 devoluciones por buzón • Reporte de atrasos Ejemplos de 4 casos de uso 67
  51. 51. Diseño de Interacción •M E M B E R Alta diaria de 20 nuevas películas • Caso 1 / 4 • Reducción de input y pasos • Eliminar tareas repetitivas • Aplicación 2.0 • Mejores datos 68
  52. 52. Diseño de Interacción •M E M B E R Alta diaria de 20 nuevas películas 69
  53. 53. Diseño de Interacción •M E M B E R Alta diaria de 20 nuevas películas 70
  54. 54. Diseño de Interacción •M E M B E R Alta diaria de 20 nuevas películas 71
  55. 55. Diseño de Interacción •M E M B E R Alta diaria de 20 nuevas películas 72
  56. 56. Diseño de Interacción •M E M B E R Alta diaria de 20 nuevas películas 73
  57. 57. Diseño de Interacción •M E M B E R Cliente devuelve y alquila • Caso 2 / 4 • Anticipación, no es necesario buscar al cliente • Minimizar input y pasos • Permitir operaciones en cualquier orden 74
  58. 58. Diseño de Interacción •M E M B E R Cliente devuelve y alquila 75
  59. 59. Diseño de Interacción •M E M B E R Cliente devuelve y alquila 76
  60. 60. Diseño de Interacción •M E M B E R Cliente devuelve y alquila 77
  61. 61. Diseño de Interacción •M E M B E R Cliente devuelve y alquila 78
  62. 62. Diseño de Interacción •M E M B E R Devolución de 40 películas • Caso 3 / 4 • Soportar un proceso de lotes con el mismo modelo de interacción 79
  63. 63. Diseño de Interacción •M E M B E R Devolución de 40 películas 80
  64. 64. Diseño de Interacción •M E M B E R Devolución de 40 películas 81
  65. 65. Diseño de Interacción •M E M B E R Devolución de 40 películas 82
  66. 66. Diseño de Interacción •M E M B E R Devolución de 40 películas 83
  67. 67. Diseño de Interacción •M E M B E R • Caso 4 / 4 • Comprensión del caso de uso: Lo importante no es el listado, sino la notificación Reporte de atrasos 84
  68. 68. Diseño de Interacción •M E M B E R Reporte de atrasos 85
  69. 69. Diseño de Interacción •M E M B E R Reporte de atrasos 86
  70. 70. Diseño de Interacción •M E M B E R Resultados 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% 87
  71. 71. Diseño de Interacción •M E M B E R • No hay User Experience sin usuarios (Verónica Traynor) • Proceso iterativo de análisis y diseño centrado en la operación del usuario • Bases racionales, cuantificación, calidad • Obtener producto como resultado de un proceso, y satisfaciendo metas Conclusiones 88
  72. 72. Diseño de Interacción •M E M B E R Diseño de Interacción en América Latina Oportunidades • Interés creciente en Usabilidad • Diseño como requerimiento Desafíos • Baja integración del diseñador con Desarrollo y Negocios • Falta de visión y lenguaje común • Falta de percepción de valor • Poca madurez del mercado • Alto riesgo de innovación deseable usable confiable funcional 89
  73. 73. w w w . k a m b r i c a . c o m
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×