Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires

559
-1

Published on

Presentación de Santiago Bustelo (icograma) y Diego González (Lagash Systems) para el MIX08 Buenos Aires organizado por Microsoft.

Se presenta cómo un programador y un diseñador gráfico estereotipados, desarrollarían un caso de ejemplo sin contemplar aspectos de usabilidad e interacción. Luego del análisis y cuantificación de estas interfaces, y la introducción de principios fundamentales de interacción, se expone cómo se desarrollaría el caso desde la perspectiva del diseño de interacción.

Published in: Design, Travel
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
559
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires

  1. 1. San$ago  Bustelo,  Kambrica Diego  Gonzalez,  Lagash  Systems  SA Diseño  de  Interacción en  el  siglo  XXI
  2. 2. Bienvenidos  al  Siglo  XXI
  3. 3. Un  mundo  mejor Agosto  1981, IBM  PC-­‐XT US$  3.000 Junio  2008, Lenovo  ThinkStaKon  D10 US$  3.000 Mejora Intel  8088 4.77  MHz 16  bits 2  x  Intel  Xeon  E5405   Quad  Core  2GHz 64  bits 13.416  veces 16  Kb  RAM 4  GB  DDR2  SDRAM 262.143  veces 160  Kb  5"  1/4 2  x  500GB  Serial  ATA 6.553.599  veces
  4. 4. Un  mundo  mejorable
  5. 5. Calidad  de  un  Sistema
  6. 6. • Model  View  Controller • Model  View  Presenter • Components • Shell • Data  Binding • Styles • …? Herramientas
  7. 7. • Modelos? • Conceptos? • Patrones? • CuanUficación? ¿Herramientas?
  8. 8. Aplicación
  9. 9. Administración  de  un  videoclub Requerimientos • Alquilar  una  pelicula • Devolver  una  pelicula • Cargar  una  película • Cargar  un  nuevo  cliente Ejemplo  de  aplicación
  10. 10. Caveman  programmer 3  en$dades • Películas:  Datos • Clientes:  Datos • Alquileres:  Relaciones Operaciones • Alta,  baja,  modificación  y   consulta  para  cada  en$dad Tecnología • Aplicación  WinForms • Base  de  datos  SQL  Server Diseño  (caveman  programmer  /  designer) Caveman  designer Metáforas • Películas:  DVDs • Clientes:  Fichas • Alquileres:  Ficha  +  DVD Representación • Experiencia  inmersiva • Fotorealismo Tecnología • Silverlight  full  screen • Renders  3D
  11. 11. Caso:  Caveman  Programmer
  12. 12. Caso:  Caveman  designer
  13. 13. Interfaces
  14. 14. • Modalidad  de  atención:  mostrador,  teléfono  y  buzón • Búsqueda  de  clientes  y  `tulos • Alta  de  20  nuevas  películas • Cliente  alquila  2  películas • Cliente  devuelve  peliculas  y  alquila  otras • Copia  dañada • Carga  de  40  devoluciones  de  buzón • Reporte  de  atrasos • Alta  de  un  cliente Relevamiento  de  usos
  15. 15. GOMS   Modelo  para  predecir  $empos  de  operación de  una  interfaz  de  usuario CuanHficación 0,2  seg.   Tecla  /  mouse  click  &  release 0,4  seg.   Paso  mouse  ←→  teclado 1,1  seg.   Apuntar  con  el  mouse 1,35  seg.   Preparación  mental  nueva  tarea ?       Respuesta  del  sistema
  16. 16. Ley  de  Hick-­‐Hyman Tiempo  decisión  = 50  +  150  log2  (  can$dad  de  opciones  +  1  ) Ley  de  FiXs Tiempo  para  apuntar  a  un  objeto  = 50  +  150  log2  (  distancia  /  tamaño  del  objeto  +  1  ) CuanHficación
  17. 17. Eficiencia  teórica  de  la  información CuanHficación Mínima  información  necesaria para  realizar  una  tarea Input  requerido  para  realizar  la  tarea
  18. 18. Eficiencia  teórica  de  la  información CuanHficación Mínima  información  necesaria para  realizar  una  tarea Input  requerido  para  realizar  la  tarea
  19. 19. Eficiencia  teórica  de  la  información CuanHficación Mínima  información  necesaria para  realizar  una  tarea Input  requerido  para  realizar  la  tarea E  =  0
  20. 20. CuanHficación:  Búsqueda  1.0 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  menu  Clientes  >  Modificación:  1,10 click  menu  Clientes  >  Modificación:  0,20 Proxima  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  seg. 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  c/recuperacion:  32,55  segundos
  21. 21. CuanHficación:  Navegación  Clientes Inicio  tarea:  1,35 Apuntar  al  fichero  home:  1,10 Click  Fichero  home:  0,20 Animacion  "files,  lots  of  files¨:  4 Proxima  tarea:  1,35 Apuntar  boton  prox  serie  ficheros:  1,10 Click  proxima  serie  ficheros:  0,20 Animacion  serie  de  ficheros:  1 Prox  tarea:  1,35 Apuntar  fichero  "G":  1,10 Click  fichero  "G":  0,20 Animacion  fichero  G:  2 Proxima  tarea:  1,35 Leer  eUquetas  x  4:  5,40 Proxima  tarea:  1,35 Apuntar  GON:  1,10 Click  GON:  0,20 Animacion  Cajon  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  seg. Beneficio  eilminar  animaciones:  9  seg. Total  sin  animaciones:  19,1  segundos
  22. 22. Instant  Search • Mínimo  input • Corrección  sobre  la  marcha • Relevancia Búsqueda  2.0
  23. 23. Búsqueda  2.0:  Prueba  de  concepto Prueba  de  concepto Instant  search  AJAX: hpp://kambrica.com/raf08/
  24. 24. CuanHficació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 Moer  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  mantener  foco  en  búsqueda:  4,80 Total  c/  foco:  5,45  segundos
  25. 25. Diseño  con  bases  racionales
  26. 26. • Modelo  unificado • Metáforas • Mail,  address  book • Sujeto  +  verbo • No  intrusivo • Meta:  E  ≥  70% Bases  del  diseño
  27. 27. Esquema
  28. 28. Aplicación  2.0
  29. 29. 1. Alta  diaria  de  20  nuevas  películas 2. Cliente  devuelve  y  alquila  en  mostrador 3. Carga  de  40  devoluciones  por  buzón 4. Reporte  de  atrasos Ejemplos  de  4  casos  de  uso
  30. 30. Alta  diaria  de 20  nuevas  películas Caso  1  /  4
  31. 31. • Reducción  de  input  y  pasos • Applica$on  2.0 • Mejores  datos • Eliminar  tareas  repe$$vas Alta  diaria  de  20  nuevas  películas
  32. 32. Alta  diaria  de  20  nuevas  películas
  33. 33. Alta  diaria  de  20  nuevas  películas
  34. 34. Alta  diaria  de  20  nuevas  películas
  35. 35. Alta  diaria  de  20  nuevas  películas
  36. 36. Alta  diaria  de  20  nuevas  películas
  37. 37. Cliente  devuelve  y  alquila Caso  2  /  4
  38. 38. • An$cipación,  no  es  necesario  buscar  al  cliente • Minimizar  input  y  pasos • Permi$r  operaciones  en  cualquier  orden Cliente  devuelve  y  alquila
  39. 39. Cliente  devuelve  y  alquila
  40. 40. Cliente  devuelve  y  alquila
  41. 41. Cliente  devuelve  y  alquila
  42. 42. Cliente  devuelve  y  alquila
  43. 43. Devolución  de  40  películas Caso  3  /  4
  44. 44. • Soportar  un  proceso  batch  con el  mismo  modelo  de  interacción Devolución  de  40  películas
  45. 45. Devolución  de  40  películas
  46. 46. Devolución  de  40  películas
  47. 47. Devolución  de  40  películas
  48. 48. Devolución  de  40  películas
  49. 49. Reporte  de  atrasos Caso  4  /  4
  50. 50. Comprensión  de  casos  de  uso • Lo  importante  no  es  el  listado  sino  la  no$ficación Reporte  de  atrasos
  51. 51. Reporte  de  atrasos
  52. 52. Reporte  de  atrasos
  53. 53. Resultado Tarea 1,0 2,0 % Búsqueda 15  a  33  seg. 5.45  seg. 275  a  600  % Alta  de  20  nuevas  películas 1.543  seg. 204  seg. 756% Cliente  devuelve  y  alquila 52  a  87  seg. 7.80  seg. 666% Buzón  40  devoluciones 636  seg. 156  seg. 400% NoUficación  de  9  atrasos 10  a  15  min.? 7  seg. 8500%
  54. 54. • Proceso  itera$vo  de  análisis  y  diseño centrado  en  la  operación  del  usuario • Bases  racionales,  cuan$ficación • Obtención  de  un  producto  como  resultado de  un  proceso  y  sa$sfaciendo  metas Conclusiones
  55. 55. Caveman  Programmer  Interface hpp://kambrica.com/raf08/caveman.zip Instant  Search  -­‐  proof  of  concept hpp://www.kambrica.com/raf08/ Demos
  56. 56. Jef  Raskin:  The  Humane  Interface hpp://www.amazon.com/dp/0201379376/ Interface  Hall  of  Shame  /  Hall  of  Fame hpp://hallofshame.gp.co.at    (mirror) Jared  Spool’s  User  Interface  Engineering:  web  &  product  usability hpp://www.uie.com Jakob  Nielsen’s  Alertbox:  Current  Issues  in  Web  Usability hpp://www.alertbox.com Referencias
  57. 57. ¡Muchas  gracias! San$ago  Bustelo Kambrica Diego  Gonzalez Lagash  Systems

×