26
Joan Fons [email protected] Universitat Politècnica València MOSKitt Sketcher Diseño rápido de interfaces de usuario Marc Gil [email protected] Prodevelop dimarts 30 de novembre de 2010

MOSKitt Sketcher: Diseño rápido de interfaces de usuario

  • Upload
    jjfons

  • View
    1.843

  • Download
    6

Embed Size (px)

DESCRIPTION

MOSKitt Sketcher es una herramienta que permite la rápida prototipación de interfaces de usuario usando técnicas de sketching. Se introduce dentro del entorno de desarrollo dirigido por modelos definido en MOSKitt para permitir la construcción automática (generación de código) de prototipos funcionales a partir de los sketches realizados. La herramienta se puede encontrar en la web del proyecto MOSKitt (http://www.moskitt.org)

Citation preview

Page 1: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

Joan [email protected]

Universitat Politècnica València

MOSKitt SketcherDiseño rápido de interfaces de

usuario

Marc [email protected]

Prodevelop

dimarts 30 de novembre de 2010

Page 2: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

Índice

Modelando interfaces de usuario

Diseñando interfaces de usuario

MOSKitt Sketcher

Demo/Vídeo

dimarts 30 de novembre de 2010

Page 3: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

Modelando Interfaces de Usuario

dimarts 30 de novembre de 2010

Page 4: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

Modelando Interfaces de Usuario

lenguajes de especificación complejos

dimarts 30 de novembre de 2010

Page 5: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

Modelando Interfaces de Usuario

Modelar interfaces de usuario no es una tarea sencilla, dada la naturaleza compleja de la Interacción Persona-Ordenador ...

diferentes tipos de interacción IPO

lenguajes de especificación

complejos

lenguajes de especificación complejos

faltan estándares gran cantidad de conceptos a representar

...

comportamiento interfaz

dimarts 30 de novembre de 2010

Page 6: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

MOSKitt UIM apareció debido a la carencia de estándares que formalicen el desarrollo de interfaces de usuario.

Define un entorno MDD para trabajar con interfaces de usuario que incluye:

lenguaje de especificación

editores y diagramas para representar los conceptos

flexible y adaptable a las necesidades de diferentes organizaciones

!!

Modelando Interfaces de Usuario

dimarts 30 de novembre de 2010

Page 7: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

Modelando Interfaces de Usuario

lenguajes de especificación complejos

dimarts 30 de novembre de 2010

Page 8: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

Modelando Interfaces de Usuario

Puntos fuertes de MOSKitt UIM:

Expresividad (completitud)

Flexibilidad (uso de patrones de interfaz personalizables)

Abstracción tecnológica

Entorno MDD (transformación modelos y generación código)

dimarts 30 de novembre de 2010

Page 9: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

Modelando Interfaces de Usuario

Puntos débiles de MOSKitt UIM:

“Complejidad” de la notación

Requiere aprendizaje

Notación no estándar, ni “cercana al usuario”

No se pueden representar aspectos “estéticos”

dimarts 30 de novembre de 2010

Page 10: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

Diseñando Interfaces de Usuario

dimarts 30 de novembre de 2010

Page 11: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

DiseñandoInterfaces de usuario

Diseñar una interfaz de usuario implica definir:

qué elementos/widgets tecnológicos se usarán para construir el sistema

cómo se van a organizar, distribuir y comunicar estos elementos en la solución final

cómo garantizar la satisfacción de los requisitos de análisis

Pero, cómo damos soporte a esto con MOSKitt UIM?

dimarts 30 de novembre de 2010

Page 12: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

DiseñandoInterfaces de usuario

La creación de “bocetos” es una técnica ampliamente aceptada para representar ideas u objetos de una manera preliminar:

es un dibujo realizado de forma esquemática y sin preocuparse de los detalles o terminaciones para representar ideas, lugares, personas u objetos.

es un dibujo hecho a mano alzada, utilizando lápiz, papel y goma de borrar, realizado generalmente sin instrumentos de dibujo auxiliares. Puede ser un primer apunte del objeto ideado que aún no está totalmente definido.

Wikipedia

dimarts 30 de novembre de 2010

Page 13: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

DiseñandoInterfaces de usuario

En la actualidad, una de las técnicas más exitosas para representar interfaces de usuario es utilizar “bocetos” o sketches

El Sketching de interfaces de usuario permite representar las interfaces, describiendo “a mano alzada” la apariencia que tendrán una vez desarrolladas

dimarts 30 de novembre de 2010

Page 14: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

DiseñandoInterfaces de usuario

Existen numerosas herramientas para “bocetar” interfaces de usuario en la actualidad:

AxureBalsamiq

Expression Blend + Sketchflow

ForeUIiPlotz

Just In Mind Prototyper

Pencil

Prototype Composer

Stencils

WireframeSketcher

XULdimarts 30 de novembre de 2010

Page 15: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

DiseñandoInterfaces de usuario

dimarts 30 de novembre de 2010

Page 16: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

DiseñandoInterfaces de usuario

Puntos fuertes del sketching:

proporcionan elementos para construir interfaces usando notación cercana al usuario (ventanas, botones, listas, enlaces, etc.)

permiten expresar una representación inicial de cómo será la interfaz

se puede mostrar y validar con el cliente en etapas tempranas (sin hacer desarrollo)

dimarts 30 de novembre de 2010

Page 17: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

DiseñandoInterfaces de usuario

Puntos débiles del sketching:

los bocetos sólo sirven como documentación

no se puede asegurar que los bocetos sean válidos ni correctos

los bocetos no están “enlazados” con modelos conceptuales, y por tanto, no se pueden usar en entornos MDD

dimarts 30 de novembre de 2010

Page 18: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

MOSKitt Sketcher

dimarts 30 de novembre de 2010

Page 19: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

MOSKitt Sketcher

Herramienta desarrollada para introducir técnicas de sketching en desarrollos con MOSKitt

Los bocetos creados, se pueden usar como:

documentación

entrada para especificar modelos

diseño de la interfaz de usuario

entrada para la generación de código

dimarts 30 de novembre de 2010

Page 20: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

MOSKitt Sketcher

MOSKitt Sketcher usa la notaciónestándar en las herramientas de Sketching

dimarts 30 de novembre de 2010

Page 21: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

MOSKitt Sketcher

dimarts 30 de novembre de 2010

Page 22: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

MOSKitt Sketcher

MOSKitt Sketcher permite un uso con diferentes objetivos:

Diseñador de interfaces: especifica qué componentes se usarán para desarrollar la interfaz y cómo se organizarán en las pantallas. En esta fase, es habitual disponer a priori de diagramas de UML, UIM, BPMN, etc.

dimarts 30 de novembre de 2010

Page 23: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

MOSKitt Sketcher

MOSKitt Sketcher permite un uso con diferentes objetivos:

Analista de sistemas: desde fases de desarrollo tempranas, se podrá bocetar la interfaz, y a partir de ésta derivar otros modelos (UIM, UML, etc...)

dimarts 30 de novembre de 2010

Page 24: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

MOSKitt Sketcher

.sketcher_diagram

.uim

Sketch2UIM(ATL)

dimarts 30 de novembre de 2010

Page 25: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

MOSKitt Sketcher.sketcher_diagram

.uim

UIM+Sketch2gvHidra(XPand)

gvHidra (HTML/PHP)dimarts 30 de novembre de 2010

Page 26: MOSKitt Sketcher: Diseño rápido de interfaces de usuario

Demo/Vídeo

dimarts 30 de novembre de 2010