Your SlideShare is downloading. ×
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

492
views

Published on

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

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
492
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. San$ago  Bustelo,  Kambrica Diego  Gonzalez,  Lagash  Systems  SA Diseño  de  Interacción en  el  siglo  XXI
  • 2. Bienvenidos  al  Siglo  XXI
  • 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. Un  mundo  mejorable
  • 5. Calidad  de  un  Sistema
  • 6. • Model  View  Controller • Model  View  Presenter • Components • Shell • Data  Binding • Styles • …? Herramientas
  • 7. • Modelos? • Conceptos? • Patrones? • CuanUficación? ¿Herramientas?
  • 8. Aplicación
  • 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. 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. Caso:  Caveman  Programmer
  • 12. Caso:  Caveman  designer
  • 13. Interfaces
  • 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. 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. 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. 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. 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. 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. 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. 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. Instant  Search • Mínimo  input • Corrección  sobre  la  marcha • Relevancia Búsqueda  2.0
  • 23. Búsqueda  2.0:  Prueba  de  concepto Prueba  de  concepto Instant  search  AJAX: hpp://kambrica.com/raf08/
  • 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. Diseño  con  bases  racionales
  • 26. • Modelo  unificado • Metáforas • Mail,  address  book • Sujeto  +  verbo • No  intrusivo • Meta:  E  ≥  70% Bases  del  diseño
  • 27. Esquema
  • 28. Aplicación  2.0
  • 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. Alta  diaria  de 20  nuevas  películas Caso  1  /  4
  • 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. Alta  diaria  de  20  nuevas  películas
  • 33. Alta  diaria  de  20  nuevas  películas
  • 34. Alta  diaria  de  20  nuevas  películas
  • 35. Alta  diaria  de  20  nuevas  películas
  • 36. Alta  diaria  de  20  nuevas  películas
  • 37. Cliente  devuelve  y  alquila Caso  2  /  4
  • 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. Cliente  devuelve  y  alquila
  • 40. Cliente  devuelve  y  alquila
  • 41. Cliente  devuelve  y  alquila
  • 42. Cliente  devuelve  y  alquila
  • 43. Devolución  de  40  películas Caso  3  /  4
  • 44. • Soportar  un  proceso  batch  con el  mismo  modelo  de  interacción Devolución  de  40  películas
  • 45. Devolución  de  40  películas
  • 46. Devolución  de  40  películas
  • 47. Devolución  de  40  películas
  • 48. Devolución  de  40  películas
  • 49. Reporte  de  atrasos Caso  4  /  4
  • 50. Comprensión  de  casos  de  uso • Lo  importante  no  es  el  listado  sino  la  no$ficación Reporte  de  atrasos
  • 51. Reporte  de  atrasos
  • 52. Reporte  de  atrasos
  • 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. • 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. Caveman  Programmer  Interface hpp://kambrica.com/raf08/caveman.zip Instant  Search  -­‐  proof  of  concept hpp://www.kambrica.com/raf08/ Demos
  • 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. ¡Muchas  gracias! San$ago  Bustelo Kambrica Diego  Gonzalez Lagash  Systems