La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

UIMLSketch: Editor de interfaces de usuario basado en bocetos Alumna: Sonia María Casero Peinado Directora: Ana Isabel Molina Díaz Septiembre 2012.

Presentaciones similares


Presentación del tema: "UIMLSketch: Editor de interfaces de usuario basado en bocetos Alumna: Sonia María Casero Peinado Directora: Ana Isabel Molina Díaz Septiembre 2012."— Transcripción de la presentación:

1 UIMLSketch: Editor de interfaces de usuario basado en bocetos Alumna: Sonia María Casero Peinado Directora: Ana Isabel Molina Díaz Septiembre 2012

2 UIMLSketch: Editor de interfaces de usuario basado en bocetos Í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

3 UIMLSketch: Editor de interfaces de usuario basado en bocetos Introducción Septiembre /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Diseño centrado en el usuario UIDLs Pen computing Bocetos Usabilidad

4 UIMLSketch: Editor de interfaces de usuario basado en bocetos 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 /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones

5 UIMLSketch: Editor de interfaces de usuario basado en bocetos Aplicaciones de diseño de interfaces de usuario basadas en bocetos Septiembre /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 DENIMGestual Menú contextual en forma de tarta Sitio webSiSó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 SILKGestual Comandos AplicaciónSiIndicado por el usuario al cambiar a la vista de ejecución. No genera código fuente. JavaSketchItGestual Comandos VentanaNoReconocimiento de los widgets definidos. Se realiza al terminar de dibujar el trazo. Código Java JavaSketchIt2Gestual Comandos VentanaNoAl terminar de dibujar el trazo. Código XML, Java, C# y HTML. UISKEIComandosVentanaSiAl 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.

6 UIMLSketch: Editor de interfaces de usuario basado en bocetos 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 /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Aplicaciones de diseño de interfaces de usuario basadas en bocetos

7 UIMLSketch: Editor de interfaces de usuario basado en bocetos 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 /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)

8 UIMLSketch: Editor de interfaces de usuario basado en bocetos 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 /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Medios utilizados

9 UIMLSketch: Editor de interfaces de usuario basado en bocetos 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 /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Análisis de requisitos

10 UIMLSketch: Editor de interfaces de usuario basado en bocetos Septiembre /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Estudio comparativo de lenguajes de especificación de interfaces de usuario UIDLDefinición presentación Definición interacción Reutilización componentes Multi Plataforma Independencia dispositivo Lenguajes soportados XAMLSi NoUnicamente para dispositivos que tengan la plataforma Longhorn. La utilización se restringe a aplicaciones web y PC no un móvil o PDA. Visual Basic y C# AUIMLSólo posición de componentes SiNoSi Java y HTML XIMLSi NoSi Existen conversores para varios lenguajes, como HTML y VML XULSi NoHTML UsiXMLSi Los modelos de mapeo permiten definir la correspondencia con cualquier lenguaje UIMLSi Contiene vocabularios para Java/J2ME, HTML, WML, PalmOS, SWF y VoiceXML. Permite crear vocabularios para nuevos lenguajes.

11 UIMLSketch: Editor de interfaces de usuario basado en bocetos Septiembre /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Estudio comparativo de lenguajes de especificación de interfaces de usuario UIDLDefinición presentación Definición interacción Reutilización componentes Multi Plataforma Independencia dispositivo Lenguajes soportados XAMLSi NoUnicamente para dispositivos que tengan la plataforma Longhorn. La utilización se restringe a aplicaciones web y PC no un móvil o PDA. Visual Basic y C# AUIMLSólo posición de componentes SiNoSi Java y HTML XIMLSi NoSi Existen conversores para varios lenguajes, como HTML y VML XULSi NoHTML UsiXMLSi Los modelos de mapeo permiten definir la correspondencia con cualquier lenguaje UIMLSi Contiene vocabularios para Java/J2ME, HTML, WML, PalmOS, SWF y VoiceXML. Permite crear vocabularios para nuevos lenguajes.

12 UIMLSketch: Editor de interfaces de usuario basado en bocetos 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 /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Elaboración del cuestionario

13 UIMLSketch: Editor de interfaces de usuario basado en bocetos 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 única Septiembre /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Resultados del cuestionario

14 UIMLSketch: Editor de interfaces de usuario basado en bocetos 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 /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Resultados del cuestionario

15 UIMLSketch: Editor de interfaces de usuario basado en bocetos Septiembre /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Estudio comparativo de técnicas de reconocimiento de trazos Técnica de reconocimiento MultitrazoEscalabilidadOrientaciónRigidezComplejidad Multi dominio Basado en plantillas SiNo AltaBajaNo Basado en características Si Media No Basado en grafosSi MediaAltaNo Basado en geometría Si BajaMediaSi

16 UIMLSketch: Editor de interfaces de usuario basado en bocetos Septiembre /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Elección técnica de reconocimiento de trazos Técnica de reconocimiento MultitrazoEscalabilidadOrientaciónRigidezComplejidad Multi dominio Basado en plantillas SiNo AltaBajaNo Basado en características Si Media No Basado en grafosSi MediaAltaNo Basado en geometría Si BajaMediaSi

17 UIMLSketch: Editor de interfaces de usuario basado en bocetos 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 /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Definición gramática

18 UIMLSketch: Editor de interfaces de usuario basado en bocetos Septiembre /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Definición gramática ComponenteBocetoFormas básicasRelaciones EtiquetaTexto Cuadro de entrada de texto Rectángulo BotónRectángulo Texto Rectángulo contiene Texto

19 UIMLSketch: Editor de interfaces de usuario basado en bocetos Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Septiembre /31 Análisis

20 UIMLSketch: Editor de interfaces de usuario basado en bocetos Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Septiembre /31 Prototipado

21 UIMLSketch: Editor de interfaces de usuario basado en bocetos Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Septiembre /31 Diseño: Arquitectura multicapa

22 UIMLSketch: Editor de interfaces de usuario basado en bocetos Septiembre /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Implementación: Reconocedor Clasificador Reconocedor Texto Reconocedor Formas Reconocedor Componentes Fragmentador

23 UIMLSketch: Editor de interfaces de usuario basado en bocetos Alternativas: Clase Divider de Microsoft.Ink Divider I de Rachel Patel y Beryl Plimmer Divider II de Rachel Patel y Beryl Plimmer Septiembre /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Implementación: Clasificador

24 UIMLSketch: Editor de interfaces de usuario basado en bocetos Alternativas: Clase BezierCups de Microsoft.Ink ShortStraw de A.D. Wolin IStraw de Xiong y LaViola Septiembre /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Implementación: Fragmentador

25 UIMLSketch: Editor de interfaces de usuario basado en bocetos 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 /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Implementación: Reconocedor formas

26 UIMLSketch: Editor de interfaces de usuario basado en bocetos Agrupación de trazos reconocidos como texto en palabras Reconocimiento basado en: Distancia entre trazos Proximidad de los trazos Septiembre /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Implementación: Reconocedor textos

27 UIMLSketch: Editor de interfaces de usuario basado en bocetos Reconocimiento basado en: Formas básicas definidas en la gramática Restricciones existentes entre las formas básicas establecidas en la gramática Septiembre /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Implementación: Reconocedor componentes

28 UIMLSketch: Editor de interfaces de usuario basado en bocetos Septiembre /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Demostración práctica

29 UIMLSketch: Editor de interfaces de usuario basado en bocetos 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 /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Lanzamiento y evaluación

30 UIMLSketch: Editor de interfaces de usuario basado en bocetos 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 /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones Evaluación: Usabilidad interfaz gráfica

31 UIMLSketch: Editor de interfaces de usuario basado en bocetos 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 analizadas Septiembre /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones

32 UIMLSketch: Editor de interfaces de usuario basado en bocetos Conclusiones Septiembre /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 DENIMGestual Menú contextual en forma de tarta Sitio webSiSó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 SILKGestual Comandos AplicaciónSiIndicado por el usuario al cambiar a la vista de ejecución. No genera código fuente. JavaSketchItGestual Comandos VentanaNoReconocimiento de los widgets definidos. Se realiza al terminar de dibujar el trazo. Código Java JavaSketchIt2Gestual Comandos VentanaNoAl terminar de dibujar el trazo.Código XML, Java, C# y HTML. UISKEIComandosVentanaSiAl 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. UIMLSketchGestual Comandos VentanaNoEl 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

33 UIMLSketch: Editor de interfaces de usuario basado en bocetos 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 /31 Introducción > Objetivos > Estado del arte > Metodología > Resultados > Conclusiones

34 Gracias por su atención Septiembre 2012


Descargar ppt "UIMLSketch: Editor de interfaces de usuario basado en bocetos Alumna: Sonia María Casero Peinado Directora: Ana Isabel Molina Díaz Septiembre 2012."

Presentaciones similares


Anuncios Google