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