La empresa sostenible: Principales Características, Barreras para su Avance y...
Desarrollo de Interfaces de Usuario Basadas en Modelos
1. Desarrollo de Interfaces de Usuario
Basadas en Modelos
Dr. Juan Manuel González Calleros
juan.gonzalez@cs.buap.mx
@Juan__Gonzalez
1 CONACIC 2011 @Juan__Gonzalez
2. Plan
Complejidad del Desarrollo de Interfaces de
Usuario
Diseño Basado en Modelos como Solución
Ejemplo Práctico
Conclusiones
2 CONACIC 2011 @Juan__Gonzalez
5. Diversidad de usuarios (2)
Usuarios “Tradicionales”
Sin ninguna discapacidad
Personas con discapacidad
Visual, motora, cognitiva
Diversidad Cultural
CONACIC 2011
5
@Juan__Gonzalez
9. Incluir Aspectos de Usabilidad en el desarrollo (6)
CONACIC 2011
9
@Juan__Gonzalez
10. Mayor reto hoy en día proliferación
de desarrollos
Plataforma#1 Plataforma #2 Plataforma #3 Plataforma#4
Aplicación 1 IU #1 IU #2 IU #3 IU #4
Aplicación 2 IU #5 IU #6 IU #7 IU #8
Aplicación 3 IU #9 IU #10 IU #11 IU #12
Modelo Plataforma #1 Plataforma #1
Aplicación 1 IU modelo #1
Modelo Plataforma #2 Plataforma #2
Aplicación 2 IU modelo #2
Modelo Plataforma #3 Plataforma #3
Aplicación 3 IU modelo #3
Modelo Plataforma #4 Plataforma #4
CONACIC 2011
10 Proliferación de desarrollos [Abrams et al.,2001] @Juan__Gonzalez
11. ¿Cuál es la situación actual?
Los aspectos tecnológicos del desarrollo de Interfaces de
Usuario (IU) progresan de forma significativa mas rápido
que:
1. Los aspectos relacionados con la ingeniería de software
Toma tiempo desarrollar una IU para un nuevo dispositivo, una nueva
técnica de interacción
Toma mas tiempo hacer un toolkit para ese propósito
Toma aun mas tiempo basarte en un desarrollo basado en modelos
2. Los aspectos de ingeniería de usabilidad
Una nueva IU es entregada con problemas de usabilidad ya que
Poca o nula experiencia previa
No hay evidencia empírica pasada
Los experimentos empíricos requieren de muchos recursos si se hace
de buena manera
CONACIC 2011
11
@Juan__Gonzalez
12. Diseño basado en modelos como
solución
CONACIC 2011
12
@Juan__Gonzalez
13. ¿Qué es el diseño basado en
modelos?
El diseño basado en modelos consiste en
Describir la IU en un modelo de IU
Basarse en este modelo para guiar el ciclo de vida de desarrollo de
IU
Mientras se siguen las siguientes metas:
Generar ambientes de desarrollo de IU compresibles
Soporte robusto al ciclo de vida de desarrollo de IU
Mejorar la portabilidad
Integrar la usabilidad en el desarrollo
de IU
13 CONACIC 2011 @Juan__Gonzalez
14. ¿Qué es el diseño basado en
modelos?
Una estructura de 3 dimensiones
CONACIC 2011
14
@Juan__Gonzalez
15. ¿Qué es el diseño basado en
modelos?
Una estructura de 3 dimensiones
CONACIC 2011
15
@Juan__Gonzalez
16. Widgets independientes de la tecnología
Porqué hay muchos lenguajes o
representaciones para ejecutar una tarea
Por que el mismo widget aparece en diferentes
tecnologías
Check Box XmToggleButton BoxArray
(Windows) (OSF-Motif) (Garnet)
Por que hay muchas formas de alcanzar un objetivo
(e.g., selector)
CONACIC 2011
16
@Juan__Gonzalez
17. Widgets independientes de la tecnología
La interfaz final (FUI)
Cualquier lenguaje: (X)HTML, Java, Visual Basic,
C++
Cualquier plataforma de computo: Windows, Linux,
MacOS
Es abstraída en un modelo concreto (CUI)
Independiente del lenguaje
Independiente de la plataforma
Dependiente de la modalidad de interacción
Vocal, 3D, GUI Concrete user
Interface S
Final user
Interface S
CONACIC 2011
17
@Juan__Gonzalez
18. Requerimos soluciones más
generales
IU no sólo son gráficas, si no que pueden ser
vocales, táctiles, 3D, hapticas, multimodales
Entonces, hay necesidad de hacer mayores
abstracciones Abstract Container
Abstract Individual Component with Output
Abs. Ind. Comp. with Input
Abs. Ind. Comp. with Control
CONACIC 2011
18
@Juan__Gonzalez
19. Modelos independientes de la
modalidad de Interacción
Con este segundo nivel de abstracción, se va de
lo concreto (CUI) a lo abstracto (AUI)
Consecuentemente, una AUI es independiente de
Cualquier modalidad de interacción
Abstract user
Interface S
Concrete user
Interface S
Final user
Interface S
CONACIC 2011
19
@Juan__Gonzalez
20. Requerimos plantear el problema
más general
IUs, incluso si son abstractas, están
estructuradas acorde al sistema objetivo lo que
va en contra del paradigma centrado en el Task and
Domain S
usuario
Entonces, hay necesidad de modelar los
problemas independientemente de la Abstract user
Interface S
plataforma de computo
Modelos de Tarea y datos (UML Class Diagram)
Con este tercer conjunto de abstracciones, Concrete user
Interface S
pasamos del modelo AUI al de tareas y datos
(T+D)
Consecuentemente, el T+D es independiente Final user
Interface S
de cualquier implementación de computo
CONACIC 2011
20
@Juan__Gonzalez
21. Hay que tomar en cuenta el contexto de
uso
•El contexto de uso que se define como el usuario, el
dispositivo y el ambiente de trabajo
Location Role Device Experience
Deportivo Programa de viaje multimedia
Trabajo Sitio de reserva de viajes
Interfaz avanzada para operaciones complejas
Viaje Notificaciones de reservas
Conecctvidad donde sea para la transferencia de
datos simples
Familia TV es el dispotivo familiar #1
CONACIC 2011
21
@Juan__Gonzalez
22. Que tenemos hasta ahora
Marco de Referencia Cameleon
Contexto de uso
User S Plataforma SEnvironment S http://www.plasticity.org
[Calvary et al.,2003]
Task and
Domain S
UsiXML
supported
model
Abstract user
Interface S
Concrete user Reification
Interface S
Abstraction
Final user Reflexion
Interface S
CONACIC 2011
22
@Juan__Gonzalez
23. ¿Qué es el diseño basado en
modelos?
Una estructura de 3 dimensiones
CONACIC 2011
23
@Juan__Gonzalez
24. MDE basado en UsiXML
MDA
Componentes
Computing Plataforma Plataforma
Independent Model to Model Independent Model to Model Specific Model to Code
Model (CIM) Model (PIM) Model (PSM) Source code
Tecnicas propuestas en
UsiXML
UsiXML UsiXML model: UsiXML model:
models: task, Graph Abstract user Graph Concrete user Final user
transformations transformations Rendering
domain interface interface interface
CONACIC 2011
24
@Juan__Gonzalez
25. MDE basado en UsiXML
S=Source context of use T=Target context of use
Industrial applications Public applications
User S Platform S Environment S User T Platform T Environment T
is applied on
UI Development methodology Computing Task and Task and
Independent Domain S Domain T
Software tools Model (CIM)
support
Step-wise method
Abstract User Abstract User
involves
Interface S Interface T
Models
Platform Independent
described Model (PIM)
UsiXML Language in
Reification
Concrete User Concrete User
is submitted to Interface S Interface T
Platform Specific Abstraction
Model (PSM)
Standardisation actions:
W3C, OASIS, MAUSE, Reflexion
ISO 24744 Final User Final User
Final code Interface S Interface T Translation
Cameleon Reference Framework [Calv03]
CONACIC 2011
25
@Juan__Gonzalez
26. Ejemplo simple
S=Source context of use T=Target context of use
User S Plataforma S Environment S User T Plataforma T Environment T
Task and Task and
Domain S Domain T
UsiXML
supported
model
Abstract user Abstract user
Interface S Interface T UsiXML
unsupported
model
Concrete user Concrete user Reification
Interface S Interface T
Abstraction
Reflexion
Final user Final user
Interface S Interface T
Translation
CONACIC 2011
26
@Juan__Gonzalez
31. Una descripción – Muchas
representaciones
CONACIC 2011
31
@Juan__Gonzalez
32. Tomando en cuenta el contexto de
uso
Propiedades de
plasticidad =
adaptación al
contexto de uso
mientras satisface
propiedades de
usabilidad
[Grolaux et al.,2002]
CONACIC 2011
32
@Juan__Gonzalez
33. Escenario-Multi-plataforma para
Emergencias
Tres plataformas
Pocket PC
Desktop PC
Wall Screens
CONACIC 2011
33
@Juan__Gonzalez
34. Escenario
Múltiples usuarios
Paciente ¿Como resolver este
Doctor problema ?
Recepcionista
Enfermero
Radiólogo
..
Múltiples ambientes
Sala de espera
Quirófano
Consultorio
34 CONACIC 2011 @Juan__Gonzalez
35. Solución Propuesta
Modelo y método
Diseñar primero la pantalla de referencia
Refinar las otras pantallas después
Aplicando degradación gradual (se vera a detalle mas
adelante)
Aplicando técnicas de transformación
Énfasis también fue puesto sobre los iconos
usados
CONACIC 2011
35
@Juan__Gonzalez
36. Usando técnicas de degradación gradual de la IU se lograron las diferentes versiones de
pantallas, menús grandes fueron modificados por menús más pequeños, con
herramientas y reglas de degradación agradable
CONACIC 2011
36
[Florins & Vanderdonckt,2004]
@Juan__Gonzalez
38. [Grolaux & Vanderdonckt,2005]
Problema: cómo diseñar una IU que tome en cuenta múltiples
pantallas?
Solución: Migración = DEMIPLAT
DistriXML = arquitectura de software para migración de una plataforma
a otra en tiempo de ejecución
Painting
Pencil
Painting
tool
Palette
CONACIC 2011
38
@Juan__Gonzalez
39. Así luce la aplicación
CONACIC 2011
39
@Juan__Gonzalez
44. Esto no es una toolbar
flotante es un control
independiente
Process
CONACIC 2011
44
@Juan__Gonzalez
45. Esto Migración de la IU
Computer A Computer B
Process Process
CONACIC 2011
45
@Juan__Gonzalez
46. ¿Qué es el diseño basado en
modelos?
Una estructura de 3 dimensiones
CONACIC 2011
46
@Juan__Gonzalez
47. Enfoque de Ingeniería de Lenguajes
UsiXML es diferente de cualquier otro lenguaje de
desarrollo de sistemas ya que sirve también como
lenguaje de especificación.
La meta más importante del lenaguje no sólo es la
generación de código sino además tener la capacidad
de hacer rasonamientos sobre la especificaciones de
la IU:
Verificación de modelos
Evaluación de IU
Desarrollo sistemático (model-driven engineering)
Almacenamiento de un repositorio de casos de uso o
patrones de IU
Análisis estático y dinámico
Pruebas de modelos
CONACIC 2011
47
@Juan__Gonzalez
48. Principios de ingeniería de lenguaje
Semántica:
meta modelos como
diagramas UML
48 CONACIC 2011 @Juan__Gonzalez
49. Principios de ingeniería de lenguaje
Semántica:
meta modelos como
diagramas UML
Sintaxis:
lenguaje UsiXML
Abstracta XML
schema
CONACIC 2011
49
@Juan__Gonzalez
50. Principios de ingeniería de lenguaje
C2: Se requiere cubrir
Root
Semántica:
meta modelos como
diagramas UML
Sintaxis: insert search
criteria
view
results
lenguaje UsiXML
Estilística:
¿Qué Notación edit submit
aux show
gráfica para criteria
item
tus modelos? edit submit
details
show list items select item
insert criteria
show show
select
view details
view items
view results
CONACIC 2011
50
@Juan__Gonzalez
51. ¿Qué es el diseño basado en
modelos?
Una estructura de 3 dimensiones
CONACIC 2011
51
@Juan__Gonzalez
53. Lo más complejo del MBUID
Esfuerzo incremental y motores de render
UsiXML interpretes para
Interfaces de Usuario Grafica: XHTML, XUL, Java, Flash,
Tcl-Tk
Interfaces de Usuario Vocal : VoiceXML
Interfaces de Usuario Multimodal : X+V
Interfaces de Usuario Hapticas : HaptiXML
Soporte para
Interfaces de Usuario Distribuidas
Interfaces de Usuario de Realidad Mixta
Interfaces de Usuario 3D
CONACIC 2011
53
@Juan__Gonzalez
56. Modelos de mapeo
These mappings can be established:
triggers (tg): { , }x
updates (up): x
observes (ob): x
isExecutedIn (ex): x
manipulates (ma): { , }x
CONACIC 2011
56 [Montero,2005]
@Juan__Gonzalez
58. GrafiXML- Lenguaje
GrafiXML permite la creación de GUI multi – idiomas
El idioma es un elemento del contexto de uso
Soporta
mnemonicos y
shortcuts
CONACIC 2011
58
@Juan__Gonzalez
61. Ejemplo Práctico
Aplicación del diseño basado en Modelos para cabinas
de pilotaje
61 CONACIC 2011 @Juan__Gonzalez
62. El problema
El porcentaje de accidentes aéreo es estable,
varia entre 3 y 4 accidentes por millón de salidas
Para el futuro se anticipa un aumenta en el
volumen de vuelos
En consecuencia se espera tener un accidente
serio cada semana si no se logra reducir el
procentaje de accidentes
55% de los accidentes involucra a la tripulación
CONACIC 2011
62
@Juan__Gonzalez
63. El problema
La principal causa son
errores humanos
Incremento en la
automatización del
vuelo
Piloto se olvida de
volar
Exceso de confianza
sobre las maquinas
Sorpresas que los
sistemas no
consideran
Tomar en cuanta
factores humano en el
diseño de sistemas es
crucial
CONACIC 2011
[Osterloh 2011]
63
@Juan__Gonzalez
64. El problema
Tenemos que tomar en cuenta al piloto (usuario)
en la fases de desarrollo de un avión
Hay que reducir el porcentaje de errores
humanos
Los sistemas de automatización de cabinas de
pilotaje han contribuido de forma notable a la
reducción de este porcentaje
CONACIC 2011
64
@Juan__Gonzalez
65. El problema
Pilotos
Son difíciles de conseguir, tienen una agenda muy
apretada
Son muy caros, usarlos para hace pruebas sobre
prototipos tiene un costo prohibitivo
Sistemas de Pruebas (Simuladores)
Caros
Difícil acceso
Pilotos + Sistemas de Pruebas
Exclusivo para centro muy especializados
65 CONACIC 2011 @Juan__Gonzalez
66. Propuesta de Solución
Crear un modelo cognitivo de la tripulación
Piloto Volando (PF) y Piloto no Volando (PNF) para
reducir necesidad de usar pilotos reales
Herramientas de software para dar soporte
Simulador de sistema de vuelo
Desarrollo basado en modelos de la ergonomía
de las interfaces
Con esto se espera predecir ciertos
comportamientos del piloto que causen errores y
diseñar sistemas que los prevengan
66 CONACIC 2011 @Juan__Gonzalez
67. Que tipo de errores comete el piloto
Se aburre y no sigue
el procedimiento
Sobre carga de
información y omite
mensajes de alerta
importantes que lo
hace no seguir los
procedimientos
[Osterloh 2011]
Acciones Predicción de
Reales Acciones
67 CONACIC 2011 @Juan__Gonzalez
68. La arquitectura Cognitiva
Modela el comportamiento
humano tomando en
cuenta factores:
Psicológicos
búsqueda en la memoria
Olvido
procesamiento de
conocimiento)
Fisiológicos
movimiento de ojos
Manos
voz
pies
68 CONACIC 2011 @Juan__Gonzalez [Osterloh 2011]
69. La Interfaz de Usuario requiere un
modelo
CONACIC 2011
69
@Juan__Gonzalez
70. Task &
Concepts
Abstract User
Interfaz para navegación
Interface
Concrete
User Interface
Final User
Interface
70 CONACIC 2011 @Juan__Gonzalez
71. Task &
Concepts
Layout-Interfaz para navegación
Abstract User
Interface
Concrete
User Interface
Final User
Interface
71 CONACIC 2011 @Juan__Gonzalez
72. Task &
Concepts
Plano de la IU
Abstract User
Interface
Concrete
User Interface
Final User
Interface
72 CONACIC 2011 @Juan__Gonzalez
73. Task &
Concepts
Semántica del modelo de IU
Abstract User w in d o w
Interface w i n d o w L e ftM a r g i n : i n te g e r
b o rd e rB o x w i n d o w T o p M a r g i n : i n te g e r
1 is R e s iza b le : b o o le a n
0 ..1
to p B o x 1 1 1 1
Concrete 0 ..1
User Interface 0 ..1 0 . .1
b o tto m B o x r i g h tB o x
l e ftB o x
b u tto n
Final User b u t to n
Interface
b u tto n
b u t to n b u t to n
m enu
m e n u It e m p o p U p M e n u : b o o le a n
ty p e : s t r i n g to o l B a r M e n u : b o o l e a n
m e n u It e m m e n u Ite m
ty p e : s t r i n g t y p e : s tr i n g
m e n u Ite m
m e n u Ite m
t y p e : s tr i n g m e n u Ite m m e n u It e m
t y p e : s tr i n g
t y p e : s tr i n g ty p e : s t r i n g
73 CONACIC 2011 @Juan__Gonzalez
74. Task &
Concepts
Ingeniería Inversa-Interfaz
Abstracta
Abstract User
Interface
Concrete
User Interface
Final User
Interface
74 CONACIC 2011 @Juan__Gonzalez
75. Task & Ingeniería Inversa-Modelo de
Concepts
Tareas
Abstract User
Interface
Concrete
User Interface
Final User
Interface
75 CONACIC 2011 @Juan__Gonzalez
76. A partir de este modelo se pueden
generar muchas soluciones
76 CONACIC 2011 @Juan__Gonzalez
77. Pruebas de usabilidad de IUs
A representa la Interfaz de usuario tal cual es usada en un tiempo n
B representa una de tantas posibles variantes de la interfaz para
Page 77 CONACIC 2011 misma@Juan__Gonzalez
ejecutar la tarea
78. Pruebas de usabilidad de IUs
La trayectoria es más visible si
usamos un control de checkboxes
78 CONACIC 2011 @Juan__Gonzalez
79. Conclusiones
MBUI Logros y Fracasos
79 CONACIC 2011 @Juan__Gonzalez
80. Conclusion
Puede realmente darse soporte a todo esto
usando el enfoque MBUI interface
Aplicación logic User
16000
14000
12000
Generated code
10000
Word
8000
6000
4000
Models
2000
0
KB
Query
Update
Actions
UI states
KB Parser
Interactions
Presentation
Network ops.
CONACIC 2011
80 [Skezely,1996]
@Juan__Gonzalez
81. Conclusion
Éxitos:
Funciona muy bien en dominios bien definidos
Favorece la colaboración
Soporta flexibilidad, mantenimiento
Fallas
No funciona para IU complejas y muy dinámicas
Requiere mucho trabajo
Modelos (algo)
Método (más)
Herramienta (aún más) Support for
mnemonics and
shortcuts
CONACIC 2011
81
@Juan__Gonzalez
82. ¿Por qué debería ser el desarrollo de
Interfaces de Usuario un proceso formal?
Para mantener la consistencia entre la diferentes
herramientas de software y así favorecer:
Modificaciones: Si hay un cambio en el modelo entonces la IU
cambia.
Manejo de Complejidad: Dado que una IU es parte de un
sistema, pudiera representarse con gran cantidad de código.
Las herramientas de diseño y construcción de la IU deben
proveer mecanismos para enfrentar dicha complejidad así
como ser confiables.
Seguridad en sistemas críticos: Los modelos favorecen la
inspección e investigación del comportamiento de la
funcionalidad del sistema. El uso de una herramienta formal
es extremadamente valiosa ya provee una forma de expresar
un sistema de forma: no ambigua, completa y concisa.
Rigurosa: El ciclo de desarrollo de IU debe tener el mismo
nivel de rigor que lo que se usa para la ingeniería de software.
CONACIC 2011
82
@Juan__Gonzalez
83. ¿Por qué debería ser el desarrollo de
Interfaces de Usuario un proceso formal?
Razonar sobre modelos es posible para:
Evaluación automática. Un sistema de computo podría
analizar datos relacionados con una IU y predecir su
comportamiento.
Análisis sobre producción de errores. Los modelos
pueden ser procesados y estudiados.
Verificar propiedades. Análisis de los efectos producidos
por diferentes IU modificando propiedades de
componentes, por ejemplo, cambiar el color de fondo
(background), tipos de letras, etc.
Que nos comuniquemos los humanos. Los modelos
pueden y deberían tener como propiedad de ser
comprensible por los humanos y como tales servir de
medio de discusión entre expertos y usuarios.
CONACIC 2011
83
@Juan__Gonzalez
84. ¿Por qué tendríamos que estandarizar un
método de desarrollo de IU?
Un estándar permitiría:
Comunicación: Diferentes herramientas de software requieren
de un estándar como canal de comunicación.
Consistencia. Diferentes herramientas requieren de un
estándar para que la información que comparten sea
consistente.
Conocimiento común: al recaer sobre un estándar diferentes
herramientas podrían compartir conocimiento de la IU,
formulación de tareas, procesos pudieran incluir conocimiento
de la IU, incluso modelos cognitivos para predecir
comportamiento de usuarios requieren el conocimiento de la
IU.
Escalabilidad (los modelos pueden crecer más fácilmente al
paso del tiempo en comparación del código): un modelo bien
estructurado puede incrementarse mejor.
CONACIC 2011
84
@Juan__Gonzalez
85. Hacia donde va la evolución de los
lenguajes para definir IU
Hoy
Programming languages: Visual Basic, Java, C++,
Markup languages: HTML, XUL,
Mañana
Multimodal interfaces: XHTML + VoiceXML = X+V
Vectorial interfaces: SVG, LZX
Virtual reality interfaces: VRML97, XVRML
3D user interfaces: X3D, MEL
Tabletop interface: OpenGL
Muchas modalidades han llegado
Conclusión
Es imposible evolucionar/sobrevivir sin un enfoque de
modelado, incluso para las interfaces de usuario
También se requiere progresar en el proceso de diseño
CONACIC 2011
85
@Juan__Gonzalez
86. Síguenos en las redes sociales
@usixml
http://www.facebook.com/UsiXML
86 CONACIC 2011 @Juan__Gonzalez
87. ¿Les gustaría participar?
¡Únete al consorcio UsiXML hoy!
www.usixml.eu
El tema será ampliamente cubierto en 2012
OPT.TOPIC.SELECT.COMPUTAC. II (LCC 595 )
sección 101 NRC 40550
La platica estará disponible
http://buap.academia.edu/JuanGonzalez
Contacto en la facultad
Dra. Josefina Guerrero-García jguerrero@cs.buap.mx
Dr. Juan Manuel González-Calleros juan.gonzalez@cs.buap.mx
@Juan__Gonzalez
CONACIC 2011
87
@Juan__Gonzalez
88. Muchas Gracias por su
atención
Preguntas
“La persona más inteligente no es aquella que tiene las
mejores respuestas sino aquella que hace las preguntas
correctas" (Voltaire)
Dr. Juan Manuel González Calleros
Benemérita Universidad Autónoma de Puebla
juan.gonzalez@cs.buap.mx
Twitter: @Juan__Gonzalez
Page 88 CONACIC 2011