uimlsketch: editor de interfaces de usuario basado en bocetos alumna: sonia maría casero peinado...
TRANSCRIPT
UIMLSketch: Editor de interfaces de usuario basado en bocetos
Alumna: Sonia María Casero PeinadoDirectora: Ana Isabel Molina Díaz
Septiembre 2012
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Índice • Introducción
▫ Diseño centrado en el usuario / Usabilidad
▫ Técnicas de prototipado: Bocetos
▫ Lenguajes de especificación de interfaces de usuario
▫ Interacción natural: Pen Computing
• Objetivos
• Estado de la cuestión
• Metodología
• Resultados
• Conclusiones
▫ Propuestas de mejora
Septiembre 2012
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Introducción
Septiembre 2012
1/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Diseño centrado en el usuario
UIDLs
Pen computing
Bocetos
Usabilidad
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Objetivo principal
“Diseño e implementación de una herramienta para Tablet PC que permita la creación de bocetos de interfaces de usuario mediante trazos naturales y la generación de la definición de la interfaz de usuario contenida en el boceto en un lenguaje de modelado de interfaces de usuario (independiente de la librería, plataforma o dispositivo en que dicha interfaz de usuario de desplegará), siguiendo una metodología centrada en el usuario”
Septiembre 2012
2/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Aplicaciones de diseño de interfaces de usuario basadas en bocetos
Septiembre 2012
3/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Herramienta Modo de interacción
Especificación estructura de
la interfaz
Especificación comportamiento
de la interfaz
Reconocimiento de trazos
Generación de código
DENIM GestualMenú contextual en forma de tarta
Sitio web Si Sólo reconoce las relaciones y las páginas web en la vista de sitio web.Se realiza al terminar de dibujar el trazo.
Código HTML
SILK GestualComandos
Aplicación Si Indicado por el usuario al cambiar a la vista de ejecución.
No genera código fuente.
JavaSketchIt GestualComandos
Ventana No Reconocimiento de los widgets definidos.Se realiza al terminar de dibujar el trazo.
Código Java
JavaSketchIt2 GestualComandos
Ventana No Al terminar de dibujar el trazo.
Código XML, Java, C# y HTML.
UISKEI Comandos Ventana Si Al terminar de dibujar el trazo en el modo de dibujo con reconocimiento o al cambiar a esta vista si se encuentra en el modo de dibujo libre.
No genera código fuente.
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
• Limitaciones:
• No realizan el reconocimiento de texto
• No representan otras características propias del aspecto de la
interfaz
• El reconocimiento se realiza al terminar de dibujar el trazo
• Realizan embellecimiento de los componentes dibujados
• No generan código en un lenguaje genérico de especificación
de interfaces de usuario
Septiembre 2012
4/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Aplicaciones de diseño de interfaces de usuario basadas en bocetos
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos • Modelo de trabajo
centrado en el usuario
• MPIu+a = Ingeniería del
Software + Ingeniería de la
Usabilidad y la
Accesibilidad + Interacción
Persona-Computador
• Ciclo de vida en cascada,
iterativo y evolutivo
Septiembre 2012
5/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Modelo de Proceso de la Ingeniería de la Usabilidad y la Accesibilidad (MPIu+a)
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos • Lenguaje de
programación C#
• Visual Studio 2008
Express Edition
• Framework .NET 4
▫ Windows Communication
Foundation (WCF)
▫ Windows Presentation
Foundation (WPF)
• Tablet PC Software
Development Kit 1.7
Septiembre 2012
6/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Medios utilizados
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
• Comparativa características de lenguajes de especificación
de interfaces de usuario
• Análisis técnicas de reconocimiento de trazos
• Elaboración de cuestionario para la definición de requisitos
• Extracción resultados y conclusiones del cuestionario
• Elección de técnica de reconocimiento de trazos
adecuada
• Elaboración de la gramática de gestos a reconocer
Septiembre 2012
7/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Análisis de requisitos
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Septiembre 2012
8/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Estudio comparativo de lenguajes de especificación de interfaces de usuario
UIDL Definición presentación
Definición interacción
Reutilización componentes
MultiPlataforma
Independencia dispositivo
Lenguajes soportados
XAML Si Si No Unicamentepara dispositivos quetengan la plataformaLonghorn.
La utilización serestringe aaplicaciones web y PC no unmóvil o PDA.
Visual Basic y C#
AUIML Sólo posición de componentes
Si No Si Si Java y HTML
XIML Si Si No Si Si Existen conversores para varios lenguajes, como HTML y VML
XUL Si Si Si Si No HTML
UsiXML Si Si Si Si Si Los modelos de mapeo permiten definir la correspondencia con cualquier lenguaje
UIML Si Si Si Si Si Contiene vocabularios para Java/J2ME, HTML, WML, PalmOS, SWF y VoiceXML.Permite crear vocabularios para nuevos lenguajes.
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Septiembre 2012
9/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Estudio comparativo de lenguajes de especificación de interfaces de usuario
UIDL Definición presentación
Definición interacción
Reutilización componentes
MultiPlataforma
Independencia dispositivo
Lenguajes soportados
XAML Si Si No Unicamentepara dispositivos quetengan la plataformaLonghorn.
La utilización serestringe aaplicaciones web y PC no unmóvil o PDA.
Visual Basic y C#
AUIML Sólo posición de componentes
Si No Si Si Java y HTML
XIML Si Si No Si Si Existen conversores para varios lenguajes, como HTML y VML
XUL Si Si Si Si No HTML
UsiXML Si Si Si Si Si Los modelos de mapeo permiten definir la correspondencia con cualquier lenguaje
UIML Si Si Si Si Si Contiene vocabularios para Java/J2ME, HTML, WML, PalmOS, SWF y VoiceXML.Permite crear vocabularios para nuevos lenguajes.
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
• Parte I:
▫ Experiencia con técnicas de prototipado
▫ Frecuencia de uso de técnicas de prototipado
▫ Utilización de aplicaciones informáticas para la realización de
prototipos.
• Parte II:
▫ Frecuencia de uso de componentes gráficos
▫ Boceto de componentes
▫ Número y orden de los trazos dibujados
• Parte III:
▫ Grado de representación de los bocetos propuestos
Septiembre 2012
10/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Elaboración del cuestionario
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
• Nº de participantes: 7 trabajadores de una empresa de SW
• Perfil: P, AP y A con distinto grado de experiencia
• Parte I:
▫ Uso extendido de técnicas de prototipado
▫ Baja frecuencia de uso de técnicas de especificación del
comportamiento (storyboards)
▫ Utilización de aplicaciones de dibujo para la realización de
prototipos (Paint, Gimp, Photoshop Snagit)
• Parte II.a:
▫ Componentes gráficos más frecuentes: botones, etiquetas,
cuadros de entrada texto, imágenes y combo, cuadros de
selección múltiple y únicaSeptiembre 2012
11/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Resultados del cuestionario
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos • Parte II.b:
▫ Distinto número de trazos y sentido
▫ Mismo orden de adyacencia
• Parte III:
▫ Alto grado de representación de los bocetos propuestos
Septiembre 2012
12/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Resultados del cuestionario
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Septiembre 2012
13/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Estudio comparativo de técnicas de reconocimiento de trazos
Técnicade
reconocimientoMultitrazo Escalabilidad Orientación Rigidez Complejidad
Multi
dominio
Basado en plantillas
Si No No Alta Baja No
Basado en características
Si Si Si Media Media No
Basado en grafos Si Si Si Media Alta No
Basado en geometría
Si Si Si Baja Media Si
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Septiembre 2012
14/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Elección técnica de reconocimiento de trazos
Técnicade
reconocimientoMultitrazo Escalabilidad Orientación Rigidez Complejidad
Multi
dominio
Basado en plantillas
Si No No Alta Baja No
Basado en características
Si Si Si Media Media No
Basado en grafos Si Si Si Media Alta No
Basado en geometría
Si Si Si Baja Media Si
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos • Formas básicas
▫ Círculo
▫ Triángulo
▫ Cuadrado
▫ Rectángulo
▫ Equis
▫ Texto
• Restricciones
▫ Contiene
▫ Izquierda de
• Componentes reconocidos
▫ Etiqueta
▫ Cuadro de texto
▫ Botón
▫ Imagen
▫ Combo
▫ Cuadro de selección única
▫ Cuadro de selección
múltiple
Septiembre 2012
15/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Definición gramática
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Septiembre 2012
16/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Definición gramática
Componente Boceto Formas básicas Relaciones
Etiqueta Texto
Cuadro de
entrada de
texto
Rectángulo
Botón Rectángulo
Texto
Rectángulo
contiene Texto
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Septiembre 2012
17/31
Análisis
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Septiembre 2012
18/31
Prototipado
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Septiembre 2012
19/31
Diseño: Arquitectura multicapa
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Septiembre 2012
20/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Implementación: Reconocedor
ClasificadorReconocedor
Texto
Reconocedor Formas
Reconocedor Componentes
Fragmentador
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
• Alternativas:
▫ Clase Divider de Microsoft.Ink
▫ Divider I de Rachel Patel y Beryl Plimmer
▫ Divider II de Rachel Patel y Beryl Plimmer
Septiembre 2012
21/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Implementación: Clasificador
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
• Alternativas:
▫ Clase BezierCups de Microsoft.Ink
▫ ShortStraw de A.D. Wolin
▫ IStraw de Xiong y LaViola
Septiembre 2012
22/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Implementación: Fragmentador
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
• Reconocimiento basado en:
▫ Número de segmentos
▫ Tipos de segmentos (rectas verticales, horizontales o
diagonales o curvas)
▫ Cercanía de puntos finales e iniciales de los segmentos
Septiembre 2012
23/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Implementación: Reconocedor formas
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
• Agrupación de trazos reconocidos como texto en
palabras
• Reconocimiento basado en:
▫ Distancia entre trazos
▫ Proximidad de los trazos
Septiembre 2012
24/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Implementación: Reconocedor textos
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
• Reconocimiento basado en:
▫ Formas básicas definidas en la gramática
▫ Restricciones existentes entre las formas básicas
establecidas en la gramática
Septiembre 2012
25/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Implementación: Reconocedor componentes
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Septiembre 2012
26/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Demostración práctica
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos • Realizar el boceto de los 7 componentes
• Participantes del proceso de evaluación: 10
• Se han evaluado los procesos de:▫ Clasificación
▫ Fragmentación
▫ Reconocimiento de componentes
Septiembre 2012
27/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Lanzamiento y evaluación
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
• Hacer todo simple y obvio
• Incorporar ayuda sensible a las tareas
• Ser cuidadoso con las agrupaciones
• Evitar el uso de menús desplegables
• Posición de la mano
Septiembre 2012
28/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Evaluación: Usabilidad interfaz gráfica
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Conclusiones
• Se ha diseñado e implementado una herramienta para Tablet PC
que permite el diseño de interfaces de usuario y genera el código
correspondiente en el lenguaje UIML
• Realiza el reconocimiento de los trazos dibujados a través de un
reconocedor geométrico obteniendo resultados satisfactorios
• Se ha utilizado para su desarrollo la metodología MPIu+a
centrada en el usuario
• Su diseño se ha realizado siguiendo pautas de usabilidad para
el diseño de aplicaciones para Tablet PC
• La aplicación solventa las limitaciones encontradas en las
aplicaciones analizadasSeptiembre
201229/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Conclusiones
Septiembre 2012
30/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Herramienta Modo de interacción
Especificación estructura de
la interfaz
Especificación comportamiento
de la interfazReconocimiento de trazos Generación
de código
DENIM GestualMenú contextual en forma de tarta
Sitio web Si Sólo reconoce las relaciones y las páginas web en la vista de sitio web.Se realiza al terminar de dibujar el trazo.
Código HTML
SILK GestualComandos
Aplicación Si Indicado por el usuario al cambiar a la vista de ejecución.
No genera código fuente.
JavaSketchIt GestualComandos
Ventana No Reconocimiento de los widgets definidos.Se realiza al terminar de dibujar el trazo.
Código Java
JavaSketchIt2 GestualComandos
Ventana No Al terminar de dibujar el trazo. Código XML, Java, C# y HTML.
UISKEI Comandos Ventana Si Al terminar de dibujar el trazo en el modo de dibujo con reconocimiento o al cambiar a esta vista si se encuentra en el modo de dibujo libre.
No genera código fuente.
UIMLSketch GestualComandos
Ventana No El usuario indica el momento en el que se realiza el reconocimiento, generándose el código correspondiente.
Código genérico de definición de interfaces de usuario
UIM
LSke
tch:
Edi
tor d
e in
terf
aces
de
usua
rio b
asad
o en
boc
etos
Propuestas de mejora
• Edición colaborativa
• Generación de código fuente y renderizado
• Definición del comportamiento
• Incorporación de un mayor número de comandos
gestuales
Septiembre 2012
31/31
Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones
Gracias por su atención
Septiembre 2012