0
San$ago	
  Bustelo,	
  Kambrica
Diego	
  Gonzalez,	
  Lagash	
  Systems	
  SA
Diseño	
  de	
  Interacción
en	
  el	
  sigl...
Bienvenidos	
  al	
  Siglo	
  XXI
Un	
  mundo	
  mejor
Agosto	
  1981,
IBM	
  PC-­‐XT
US$	
  3.000
Junio	
  2008,
Lenovo	
  ThinkStaKon	
  D10
US$	
  3.000
...
Un	
  mundo	
  mejorable
Calidad	
  de	
  un	
  Sistema
• Model	
  View	
  Controller
• Model	
  View	
  Presenter
• Components
• Shell
• Data	
  Binding
• Styles
• …?
Herramient...
• Modelos?
• Conceptos?
• Patrones?
• CuanUficación?
¿Herramientas?
Aplicación
Administración	
  de	
  un	
  videoclub
Requerimientos
• Alquilar	
  una	
  pelicula
• Devolver	
  una	
  pelicula
• Carga...
Caveman	
  programmer
3	
  en$dades
• Películas:	
  Datos
• Clientes:	
  Datos
• Alquileres:	
  Relaciones
Operaciones
• A...
Caso:	
  Caveman	
  Programmer
Caso:	
  Caveman	
  designer
Interfaces
• Modalidad	
  de	
  atención:	
  mostrador,	
  teléfono	
  y	
  buzón
• Búsqueda	
  de	
  clientes	
  y	
  `tulos
• Alta	...
GOMS
	
   Modelo	
  para	
  predecir	
  $empos	
  de	
  operación
de	
  una	
  interfaz	
  de	
  usuario
CuanHficación
0,2	...
Ley	
  de	
  Hick-­‐Hyman
Tiempo	
  decisión	
  =
50	
  +	
  150	
  log2	
  (	
  can$dad	
  de	
  opciones	
  +	
  1	
  )
...
Eficiencia	
  teórica	
  de	
  la	
  información
CuanHficación
Mínima	
  información	
  necesaria
para	
  realizar	
  una	
 ...
Eficiencia	
  teórica	
  de	
  la	
  información
CuanHficación
Mínima	
  información	
  necesaria
para	
  realizar	
  una	
 ...
Eficiencia	
  teórica	
  de	
  la	
  información
CuanHficación
Mínima	
  información	
  necesaria
para	
  realizar	
  una	
 ...
CuanHficación:	
  Búsqueda	
  1.0
Inicio	
  tarea:	
  1,35
Mover	
  mano	
  al	
  mouse:	
  0,40
Proxima	
  tarea:	
  1,35
...
CuanHficación:	
  Navegación	
  Clientes
Inicio	
  tarea:	
  1,35
Apuntar	
  al	
  fichero	
  home:	
  1,10
Click	
  Fichero...
Instant	
  Search
• Mínimo	
  input
• Corrección	
  sobre	
  la	
  marcha
• Relevancia
Búsqueda	
  2.0
Búsqueda	
  2.0:	
  Prueba	
  de	
  concepto
Prueba	
  de	
  concepto
Instant	
  search	
  AJAX:
hpp://kambrica.com/raf08/
CuanHficación:	
  Búsqueda	
  2.0
Inicio	
  tarea:	
  1,35
Mover	
  mano	
  al	
  mouse:	
  0,40
Proxima	
  tarea:	
  1,35
...
Diseño	
  con	
  bases	
  racionales
• Modelo	
  unificado
• Metáforas
• Mail,	
  address	
  book
• Sujeto	
  +	
  verbo
• No	
  intrusivo
• Meta:	
  E	
  ≥	
  ...
Esquema
Aplicación	
  2.0
1. Alta	
  diaria	
  de	
  20	
  nuevas	
  películas
2. Cliente	
  devuelve	
  y	
  alquila	
  en	
  mostrador
3. Carga	
 ...
Alta	
  diaria	
  de
20	
  nuevas	
  películas
Caso	
  1	
  /	
  4
• Reducción	
  de	
  input	
  y	
  pasos
• Applica$on	
  2.0
• Mejores	
  datos
• Eliminar	
  tareas	
  repe$$vas
Alta	
  ...
Alta	
  diaria	
  de	
  20	
  nuevas	
  películas
Alta	
  diaria	
  de	
  20	
  nuevas	
  películas
Alta	
  diaria	
  de	
  20	
  nuevas	
  películas
Alta	
  diaria	
  de	
  20	
  nuevas	
  películas
Alta	
  diaria	
  de	
  20	
  nuevas	
  películas
Cliente	
  devuelve	
  y	
  alquila
Caso	
  2	
  /	
  4
• An$cipación,	
  no	
  es	
  necesario	
  buscar	
  al	
  cliente
• Minimizar	
  input	
  y	
  pasos
• Permi$r	
  operaci...
Cliente	
  devuelve	
  y	
  alquila
Cliente	
  devuelve	
  y	
  alquila
Cliente	
  devuelve	
  y	
  alquila
Cliente	
  devuelve	
  y	
  alquila
Devolución	
  de	
  40	
  películas
Caso	
  3	
  /	
  4
• Soportar	
  un	
  proceso	
  batch	
  con
el	
  mismo	
  modelo	
  de	
  interacción
Devolución	
  de	
  40	
  películas
Devolución	
  de	
  40	
  películas
Devolución	
  de	
  40	
  películas
Devolución	
  de	
  40	
  películas
Devolución	
  de	
  40	
  películas
Reporte	
  de	
  atrasos
Caso	
  4	
  /	
  4
Comprensión	
  de	
  casos	
  de	
  uso
• Lo	
  importante	
  no	
  es	
  el	
  listado	
  sino	
  la	
  no$ficación
Report...
Reporte	
  de	
  atrasos
Reporte	
  de	
  atrasos
Resultado
Tarea 1,0 2,0 %
Búsqueda 15	
  a	
  33	
  seg. 5.45	
  seg. 275	
  a	
  600	
  %
Alta	
  de	
  20	
  nuevas	
  p...
• Proceso	
  itera$vo	
  de	
  análisis	
  y	
  diseño
centrado	
  en	
  la	
  operación	
  del	
  usuario
• Bases	
  raci...
Caveman	
  Programmer	
  Interface
hpp://kambrica.com/raf08/caveman.zip
Instant	
  Search	
  -­‐	
  proof	
  of	
  concept...
Jef	
  Raskin:	
  The	
  Humane	
  Interface
hpp://www.amazon.com/dp/0201379376/
Interface	
  Hall	
  of	
  Shame	
  /	
  ...
¡Muchas	
  gracias!
San$ago	
  Bustelo
Kambrica
Diego	
  Gonzalez
Lagash	
  Systems
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Diseño de Interacción en el Siglo XXI - Microsoft MIX08 Buenos Aires
Upcoming SlideShare
Loading in...5
×

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

521

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
521
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

Transcript of "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
  1. A particular slide catching your eye?

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

×