San$ago  Bustelo,  Icograma

Diego  Gonzalez,  Lagash  Systems  SA

Diseño  de  Interacciónen  el  siglo  XXI

Bienvenidos  al  Siglo  XXI

Un  mundo  mejorAgosto  1981,IBM  PC-­‐XTUS$  3.000

Junio  2008,Lenovo  ThinkStaKon  D10US$  3.000

Mejora

Intel  80884.77  MHz16  bits

2  x  Intel  Xeon  E5405  Quad  Core  2GHz64  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

Un  mundo  mejorable

Calidad  de  un  Sistema

• Model  View  Controller

• Model  View  Presenter

• Components

• Shell

• Data  Binding

• Styles

• …?

Herramientas

• Modelos?

• Conceptos?

• Patrones?

• CuanUficación?

¿Herramientas?

Aplicación

Administración  de  un  videoclub

Requerimientos

• Alquilar  una  pelicula

• Devolver  una  pelicula

• Cargar  una  película

• Cargar  un  nuevo  cliente

Ejemplo  de  aplicación

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  designerMetáforas

• Películas:  DVDs

• Clientes:  Fichas

• Alquileres:  Ficha  +  DVD

Representación• Experiencia  inmersiva

• Fotorealismo

Tecnología

• Silverlight  full  screen

• Renders  3D

Caso:  Caveman  Programmer

Caso:  Caveman  designer

Interfaces

• 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

GOMS

  Modelo  para  predecir  $empos  de  operaciónde  una  interfaz  de  usuario

CuanHficación

0,2  seg.   Tecla  /  mouse  click  &  release0,4  seg.   Paso  mouse  ←→  teclado

1,1  seg.   Apuntar  con  el  mouse

1,35  seg.   Preparación  mental  nueva  tarea

?       Respuesta  del  sistema

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

Eficiencia  teórica  de  la  información

CuanHficación

Mínima  información  necesariapara  realizar  una  tarea

Input  requerido  para  realizar  la  tarea

Eficiencia  teórica  de  la  información

CuanHficación

Mínima  información  necesariapara  realizar  una  tarea

Input  requerido  para  realizar  la  tarea

Eficiencia  teórica  de  la  información

CuanHficación

Mínima  información  necesariapara  realizar  una  tarea

Input  requerido  para  realizar  la  tarea

E  =  0

CuanHficación:  Búsqueda  1.0Inicio  tarea:  1,35

Mover  mano  al  mouse:  0,40Proxima  tarea:  1,35

Apuntar  menu  Clientes:  1,10click  menu  Clientes:  0,20

Apuntar  menu  Clientes  >  Modificación:  1,10click  menu  Clientes  >  Modificación:  0,20

Proxima  tarea:  1,35Apuntar  campo  texto:  1,10

click  campo  texto:  0,20Mover  mano  al  teclado:  0,40

Proxima  tarea:  1,35Tipear  apellido:  1,60

Mover  mano  al  mouse:  0,40Proxima  tarea:  1,35

point  OK:  1,10click  OK:  0,20

Obtuvimos  (o  no)  el  dato:  14.75  seg.

Recuperación:Mover  mano  al  mouse:  0,40

Proxima  tarea:  1,35point  Cancel:  1,10click  Cancel:  0,20

Volvemos  a  abrir  el  cuadro,  Tipeamos  apellido  otra  vez:  12,32

 Mover  mano  al  mouse:  0,40

Proxima  tarea:  1,35apuntarOK:  1,10

click  OK:  0,20

Total  c/recuperacion:  32,55  segundos

CuanHficación:  Navegación  ClientesInicio  tarea:  1,35

Apuntar  al  fichero  home:  1,10Click  Fichero  home:  0,20

Animacion  "files,  lots  of  files¨:  4Proxima  tarea:  1,35

Apuntar  boton  prox  serie  ficheros:  1,10Click  proxima  serie  ficheros:  0,20

Animacion  serie  de  ficheros:  1Prox  tarea:  1,35

Apuntar  fichero  "G":  1,10Click  fichero  "G":  0,20Animacion  fichero  G:  2

Proxima  tarea:  1,35Leer  eUquetas  x  4:  5,40

Proxima  tarea:  1,35Apuntar  GON:  1,10

Click  GON:  0,20Animacion  Cajon  GON:  2

Proxima  tarea:  1,35Leer  Apellido,  Nombre  x  5:  6,75

Proxima  tarea:  1,35Apuntar  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

Instant  Search

• Mínimo  input

• Corrección  sobre  la  marcha

• Relevancia

Búsqueda  2.0

Búsqueda  2.0:  Prueba  de  concepto

Prueba  de  conceptoInstant  search  AJAX:hpp://icograma.com/raf08/

CuanHficación:  Búsqueda  2.0Inicio  tarea:  1,35

Mover  mano  al  mouse:  0,40Proxima  tarea:  1,35apuntar  Buscar:  1,10

click  Buscar:  0,20Moer  mano  al  teclado:  0,40

Proxima  tarea:  1,35Tipear  3  caratacteres  apellido:  0,60

Proxima  tarea:  1,35Tipar  espacio:  0,20Proxima  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

• Modelo  unificado

• Metáforas

• Mail,  address  book

• Sujeto  +  verbo

• No  intrusivo

• Meta:  E  ≥  70%

Bases  del  diseño

Esquema

Aplicación  2.0

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

Alta  diaria  de20  nuevas  películas

Caso  1  /  4

• 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

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  operaciones  en  cualquier  orden

Cliente  devuelve  y  alquila

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

Reporte  de  atrasos

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%

• Proceso  itera$vo  de  análisis  y  diseñocentrado  en  la  operación  del  usuario

• Bases  racionales,  cuan$ficación

• Obtención  de  un  producto  como  resultadode  un  proceso  y  sa$sfaciendo  metas

Conclusiones

Caveman  Programmer  Interface

icograma.com/raf/caveman.zip

Instant  Search  -­‐  proof  of  concept

hpp://www.icograma.com/raf/

Demos

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

¡Muchas  gracias!

San$ago  BusteloIcograma

Diego  GonzalezLagash  Systems