Desarrollo de Interfaces de Usuario Basadas en Modelos

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

Plan
Complejidad del Desarrollo de Interfaces de
Usuario

Diseño Basado en Modelos como Solución

Ejemplo Práctico

Conclusiones


Complejidad del Desarrollo de IU


Plataformas heterogéneas (1)

CONACIC 2011
4
@Juan__Gonzalez

Diversidad de usuarios (2)
Usuarios “Tradicionales”
Sin ninguna discapacidad

Personas con discapacidad
Visual, motora, cognitiva

Diversidad Cultural

CONACIC 2011
5
@Juan__Gonzalez

Multiplicidad de Modalidades de Interacción (3)

[Stephanidis,2001]

CONACIC 2011
6
@Juan__Gonzalez

Control de aspectos dinámicos (4)
Realidad Mixta

CONACIC 2011
7
@Juan__Gonzalez

Multiplicidad de Ambientes de trabajo (5)

CONACIC 2011
8
@Juan__Gonzalez

Incluir Aspectos de Usabilidad en el desarrollo (6)

CONACIC 2011
9
@Juan__Gonzalez

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



Modelo Plataforma #1 Plataforma #1
Aplicación 1 IU modelo #1

CONACIC 2011
10 Proliferación de desarrollos [Abrams et al.,2001] @Juan__Gonzalez

¿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

Diseño basado en modelos como
solución

CONACIC 2011
12
@Juan__Gonzalez

¿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


modelos?
Una estructura de 3 dimensiones

CONACIC 2011
14
@Juan__Gonzalez

modelos?

CONACIC 2011
15
@Juan__Gonzalez

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

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

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

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

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

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

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

modelos?

CONACIC 2011
23
@Juan__Gonzalez

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

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

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
Abstraction

Reflexion
Final user Final user
Translation

CONACIC 2011
26
@Juan__Gonzalez

Ejemplo simple

CONACIC 2011
27
@Juan__Gonzalez

Ejemplo simple

CONACIC 2011
28
@Juan__Gonzalez

Ejemplo simple

CONACIC 2011
29
@Juan__Gonzalez

Ejemplo simple

CONACIC 2011
30
@Juan__Gonzalez

Una descripción – Muchas
representaciones

CONACIC 2011
31
@Juan__Gonzalez

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

Escenario-Multi-plataforma para
Emergencias
Tres plataformas
Pocket PC
Desktop PC
Wall Screens

CONACIC 2011
33
@Juan__Gonzalez

Escenario
Múltiples usuarios
Paciente ¿Como resolver este
Doctor problema ?
Recepcionista
Enfermero
Radiólogo
..
Múltiples ambientes
Sala de espera
Quirófano
Consultorio


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

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

Video Clinica – Poly Medis


[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

Así luce la aplicación

CONACIC 2011
39
@Juan__Gonzalez

UI Migration: DEMIPLAT
Detach

CONACIC 2011
40
@Juan__Gonzalez

Detach - Migrate

CONACIC 2011
41
@Juan__Gonzalez

Detach - Migrate - Plastify

CONACIC 2011
42
@Juan__Gonzalez

Detach - Migrate - Plastify - Attach

CONACIC 2011
43
@Juan__Gonzalez

Esto no es una toolbar
flotante es un control
independiente
Process

CONACIC 2011
44
@Juan__Gonzalez

Esto Migración de la IU

Computer A Computer B
Process Process

CONACIC 2011
45
@Juan__Gonzalez

modelos?

CONACIC 2011
46
@Juan__Gonzalez

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

Principios de ingeniería de lenguaje
Semántica:
meta modelos como
diagramas UML


Semántica:
meta modelos como
diagramas UML
Sintaxis:
lenguaje UsiXML
Abstracta XML
schema

CONACIC 2011
49
@Juan__Gonzalez

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

modelos?

CONACIC 2011
51
@Juan__Gonzalez

Herramientas
MethodiXML

TransformiXML
FlashiXML
IdealXML QtkXML
JaviXML
Rendering
UsiXML UsiXML model: UsiXML model:
models: task, Graph Abstract user Graph Concrete user Generative Final user
domain transformations interface transformations interface programming interface

VisualiXML

Derivation rules

KnowiXML GrafiXML ReversiXML
VisiXML
SketchiXML
FormiXML

CONACIC 2011
52
@Juan__Gonzalez

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

Sistema de prototipos para IU


IdealXML

CONACIC 2011
55 [Montero,2005]
@Juan__Gonzalez

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

GrafiXML- Pestaña de Diseño

Components options

Components
Design window
toolbar

CONACIC 2011
57
@Juan__Gonzalez

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

GrafiXML- Vista Previa con ejemplo
de múltiples idiomas

CONACIC 2011
59
@Juan__Gonzalez

GrafiXML- Soporte a Multi Dispositivos

CONACIC 2011
60
@Juan__Gonzalez

Ejemplo Práctico
Aplicación del diseño basado en Modelos para cabinas
de pilotaje


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

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

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

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


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


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

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]

La Interfaz de Usuario requiere un
modelo

CONACIC 2011
69
@Juan__Gonzalez

Task &
Concepts

Abstract User
Interfaz para navegación
Interface

Concrete
User Interface

Final User
Interface


Task &
Concepts

Layout-Interfaz para navegación
Abstract User
Interface

Concrete
User Interface

Final User
Interface


Task &
Concepts

Plano de la IU
Abstract User
Interface

Concrete
User Interface

Final User
Interface


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


Task &
Concepts
Ingeniería Inversa-Interfaz
Abstracta
Abstract User
Interface

Concrete
User Interface

Final User
Interface


Task & Ingeniería Inversa-Modelo de
Concepts

Tareas
Abstract User
Interface

Concrete
User Interface

Final User
Interface


A partir de este modelo se pueden
generar muchas soluciones


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

Pruebas de usabilidad de IUs

La trayectoria es más visible si
usamos un control de checkboxes

Conclusiones
MBUI Logros y Fracasos


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

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

¿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

¿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

¿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

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

Síguenos en las redes sociales

@usixml

http://www.facebook.com/UsiXML


¿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

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

Desarrollo de Interfaces de Usuario Basadas en Modelos

Más contenido relacionado

La actualidad más candente (20)

Destacado (20)

Similar a Desarrollo de Interfaces de Usuario Basadas en Modelos (20)

Más de Juan Manuel Gonzalez Calleros (20)

Último (20)

Desarrollo de Interfaces de Usuario Basadas en Modelos