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

on

  • 691 views

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.

Statistics

Views

Total Views
691
Views on SlideShare
690
Embed Views
1

Actions

Likes
0
Downloads
10
Comments
0

1 Embed 1

https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    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 Presentation Transcript

    • Diseño  de  Interacciónen  el  siglo  XXISan$ago  Bustelo,  IcogramaDiego  Gonzalez,  Lagash  Systems  SA
    • Bienvenidos  al  Siglo  XXI
    • Un  mundo  mejorAgosto  1981, Junio  2008, MejoraIBM  PC-­‐XT Lenovo  ThinkStaKon  D10US$  3.000 US$  3.000Intel  8088 2  x  Intel  Xeon  E5405   13.416  veces4.77  MHz Quad  Core  2GHz16  bits 64  bits16  Kb  RAM 4  GB  DDR2  SDRAM 262.143  veces160  Kb  5"  1/4 2  x  500GB  Serial  ATA 6.553.599  veces
    • Un  mundo  mejorable
    • Calidad  de  un  Sistema
    • Herramientas • Model  View  Controller • Model  View  Presenter • Components • Shell • Data  Binding • Styles • …?
    • ¿Herramientas? • Modelos? • Conceptos? • Patrones? • CuanUficación?
    • Aplicación
    • Ejemplo  de  aplicaciónAdministración  de  un  videoclubRequerimientos • Alquilar  una  pelicula • Devolver  una  pelicula • Cargar  una  película • Cargar  un  nuevo  cliente
    • Diseño  (caveman  programmer  /  designer)Caveman  programmer Caveman  designer3  en$dades Metáforas • Películas:  Datos • Películas:  DVDs • Clientes:  Datos • Clientes:  Fichas • Alquileres:  Relaciones • Alquileres:  Ficha  +  DVD RepresentaciónOperaciones • Experiencia  inmersiva • Alta,  baja,  modificación  y   consulta  para  cada  en$dad • Fotorealismo TecnologíaTecnología • Silverlight  full  screen • Aplicación  WinForms • Renders  3D • Base  de  datos  SQL  Server
    • Caso:  Caveman  Programmer
    • Caso:  Caveman  designer
    • Interfaces
    • Relevamiento  de  usos• 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
    • CuanHficaciónGOMS   Modelo  para  predecir  $empos  de  operación de  una  interfaz  de  usuario 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
    • CuanHficaciónLey  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ónEficiencia  teórica  de  la  información Mínima  información  necesaria para  realizar  una  tarea Input  requerido  para  realizar  la  tarea
    • CuanHficaciónEficiencia  teórica  de  la  información Mínima  información  necesaria para  realizar  una  tarea Input  requerido  para  realizar  la  tarea
    • CuanHficaciónEficiencia  teórica  de  la  información Mínima  información  necesaria para  realizar  una  tarea Input  requerido  para  realizar  la  tarea E  =  0
    • CuanHficación:  Búsqueda  1.0 Inicio  tarea:  1,35 Recuperación: Mover  mano  al  mouse:  0,40 Mover  mano  al  mouse:  0,40 Proxima  tarea:  1,35 Proxima  tarea:  1,35 Apuntar  menu  Clientes:  1,10 point  Cancel:  1,10 click  menu  Clientes:  0,20 click  Cancel:  0,20 Apuntar  menu  Clientes  >  Modificación:  1,10 click  menu  Clientes  >  Modificación:  0,20 Volvemos  a  abrir  el  cuadro,   Proxima  tarea:  1,35 Tipeamos  apellido  otra  vez:  12,32 Apuntar  campo  texto:  1,10   click  campo  texto:  0,20 Mover  mano  al  mouse:  0,40 Mover  mano  al  teclado:  0,40 Proxima  tarea:  1,35 Proxima  tarea:  1,35 apuntarOK:  1,10 Tipear  apellido:  1,60 click  OK:  0,20 Mover  mano  al  mouse:  0,40 Proxima  tarea:  1,35 point  OK:  1,10 Total  c/recuperacion:  32,55  segundos click  OK:  0,20Obtuvimos  (o  no)  el  dato:  14.75  seg.
    • CuanHficación:  Navegación  Clientes Inicio  tarea:  1,35 Proxima  tarea:  1,35 Apuntar  al  fichero  home:  1,10 Apuntar  GON:  1,10 Click  Fichero  home:  0,20 Click  GON:  0,20 Animacion  "files,  lots  of  files¨:  4 Animacion  Cajon  GON:  2 Proxima  tarea:  1,35 Proxima  tarea:  1,35Apuntar  boton  prox  serie  ficheros:  1,10 Leer  Apellido,  Nombre  x  5:  6,75 Click  proxima  serie  ficheros:  0,20 Proxima  tarea:  1,35 Animacion  serie  de  ficheros:  1 Apuntar  Gonzalez,  Diego:  1,10 Prox  tarea:  1,35 Click  Gonzalez,  Diego:  0,20 Apuntar  fichero  "G":  1,10 Click  fichero  "G":  0,20 Animacion  fichero  G:  2 Obtuvimos  la  ficha:  28.10  seg. Proxima  tarea:  1,35 Leer  eUquetas  x  4:  5,40 Beneficio  eilminar  animaciones:  9  seg. Total  sin  animaciones:  19,1  segundos
    • Búsqueda  2.0Instant  Search• Mínimo  input• Corrección  sobre  la  marcha• Relevancia
    • Búsqueda  2.0:  Prueba  de  concepto Prueba  de  concepto Instant  search  AJAX: hpp://icograma.com/raf08/
    • 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
    • Diseño  con  bases  racionales
    • Bases  del  diseño• Modelo  unificado• Metáforas • Mail,  address  book• Sujeto  +  verbo• No  intrusivo• Meta:  E  ≥  70%
    • Esquema
    • Aplicación  2.0
    • Ejemplos  de  4  casos  de  uso1. Alta  diaria  de  20  nuevas  películas2. Cliente  devuelve  y  alquila  en  mostrador3. Carga  de  40  devoluciones  por  buzón4. Reporte  de  atrasos
    • Alta  diaria  de20  nuevas  películasCaso  1  /  4
    • Alta  diaria  de  20  nuevas  películas• Reducción  de  input  y  pasos• Applica$on  2.0• Mejores  datos• Eliminar  tareas  repe$$vas
    • 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  alquilaCaso  2  /  4
    • Cliente  devuelve  y  alquila• An$cipación,  no  es  necesario  buscar  al  cliente• Minimizar  input  y  pasos• Permi$r  operaciones  en  cualquier  orden
    • Cliente  devuelve  y  alquila
    • Cliente  devuelve  y  alquila
    • Cliente  devuelve  y  alquila
    • Cliente  devuelve  y  alquila
    • Devolución  de  40  películasCaso  3  /  4
    • Devolución  de  40  películas• 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
    • Reporte  de  atrasosCaso  4  /  4
    • Reporte  de  atrasosComprensión  de  casos  de  uso • Lo  importante  no  es  el  listado  sino  la  no$ficación
    • Reporte  de  atrasos
    • Reporte  de  atrasos
    • ResultadoTarea 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%
    • Conclusiones• 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
    • DemosCaveman  Programmer  Interface icograma.com/raf/caveman.zipInstant  Search  -­‐  proof  of  concept hpp://www.icograma.com/raf/
    • ReferenciasJef  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.comJakob  Nielsen’s  Alertbox:  Current  Issues  in  Web  Usability hpp://www.alertbox.com
    • ¡Muchas  gracias!San$ago  Bustelo Diego  GonzalezIcograma Lagash  Systems