Implementacion de Interfaces

Presentación del tema: "Implementacion de Interfaces"— Transcripción de la presentación:

1 Implementacion de Interfaces
Basado en material de David Aspinall Informatics, University of Edinburgh

2 Focalizandonos en la Implementacion
HCI en el proceso de desarrollo de software Ingeniería de Usabilidad y “design rationale” (principios de diseño) Programacion de interfaces Apoyo a la implementación

3 HCI en Ingenieria de software
Model de cascada con retroalimentación

4 HCI en Ingenieria de software
Modelos tradicionales de procesos requieren de modificación. . . Model de cascada con retroalimentación

5 HCI en Ingenieria de software
Modelos tradicionales de procesos requieren de modificación. . . Participacion del usuario Durante el diseño Durante la evaluacion Model de cascada con retroalimentación

6 HCI en Ingenieria de software
Modelos tradicionales de procesos requieren de modificación. . . Participacion del usuario Durante el diseño Durante la evaluacion Evaluacion de la usabilidad Model de cascada con retroalimentación

7 HCI en Ingenieria de software
Modelos tradicionales de procesos requieren de modificación. . . Participacion del usuario Durante el diseño Durante la evaluacion Evaluacion de la usabilidad se debe diseñar la interfaz tempranamente ! UI en el proceso Model de cascada con retroalimentación

8 Proceso “Virtual Windows” De Lausen y Hanning
El diseño de la interfaz de usuario comprende tres actividades principales: Organizar datos en un conjunto de ventanas o marcos, definir funciones que le permitan al usuario controlar el sistema, y diseñar la apariencia gráfica de ventanas y funciones. Estas actividades de diseño pueden basarse en resultados de análisis como el análisis de tareas y el modelado de datos, Pueden incluir actividades de control tales como revisiones y pruebas de usabilidad. El objetivo es crear un sistema que sea fácil de aprender, fácil de entender y compatible con el usuario

9 Dos enfoques tradicionales
Enfoque orientado a datos comienza con descripción de los datos del sistema (modelo de datos, clases UML) Luego diseñadores definen conjunto de ventanas para ver, crear, actualizar, eliminar datos diseño gráfico dominado por las herramientas integradas a la base de datos Ejemplos Microsoft Access u Oracle Forms. Problema: no garantiza un soporte de tareas eficiente. Enfoque orientado a tareas lista de tareas de usuario (casos de uso) Analizar pasos por cada tarea Definir una ventana por cada paso que contiene campos de I/O necesarios Problema: el usuario nunca obtiene una descripción general de los datos disponibles. el sistema admite solo las tareas más sencillas y no las variantes (a veces útil, ej. Cajero automatico)

10 Propuesta de Virtual Vindows
Empleo de datos y tareas al mismo tiempo. Diseñar y probar la apariencia gráfica antes que las funciones están definidas. Ventana virtual: una imagen en una imagen idealizada de la pantalla muestra datos pero no tiene botones, menús u otras funciones. Pueden tener “links” que permiten pasar de una ventana a otra

11 Forma de usarlo Idea básica: crear tan pocas virtuales ventanas como sea posible mientras se asegura Que todos los datos están visibles en algún lado y Que tareas importantes solo necesitan unas pocas ventanas. Diseñar la apariencia gráfica de las ventanas de modo de mostrar los datos real convenientemente Asegurar que los usuarios puede entender lo que muestran las ventanas. Importante: en el diseño gráfico decidir si los datos aparecen como texto, curvas, marca, imágenes, etc. Más tarde, el diseñador desarrolla la interfaz de usuario: él o ella organiza las ventanas virtuales en ventanas o pantallas físicas; agrega botones, menús y otras funciones; y agrega mensajes, ayuda, etc.

12 Proceso “Virtual Windows” De Lausen y Hanning
Conecta tareas modelo de datos y diseño de UI

13 Consecuencia de esta idea
Hoy hay varios programas que implementan esta idea Ventanas virtuales: se conocen popularmente como “mockups” o “maquetas” Moqups balsamiq NinjaMock Wireframe wireframe.cc Axure

14 Ingenieria de Usabilidad
El test de usabilidad definitivo: medicion de la experiencia de usuario Medidas de usabilidad deben estar explicitadas como requerimientos Especificacion de usabilidad: Atributo/principio de usabilidad Concepto medido Método de medición Nivel actial/peor caso/nivel planificado/major caso ISO 9241 Problemas: La especificación de usabilidad requiere nivel de detalle que pueden no ser posible en un diseño temprano

15 Ejemplo de especificación de usabilidad

16 Explicando el diseño: Design Rationale
Design rationale es información que explica el por qué un Sistema es como es Beneficios del design rationale (fundamentos del diseño) counicacion durante el ciclo de vida Reuso del conocimiento para otros productos impone disciplina de diseño presenta argumentos para el trade-off del diseño captura información contextual Tipos de DR: Orientado al proceso: preserva el orden de deliberación y toma de decisiones Orientada a la estructura: enfatiza el post hoc estructuración de alternativas de diseño consideradas Ejemplos: Sistema de información basado en issues (IBIS) Diseño de análisis espacial Rationale del diseño psicológico

17 Issue-based Information system
Orientado al proceso: principales elementos Issues: estructurados jerárquicamente con una raíz Positions: soluciones posibles Arguments: modifica la relaciones de lo anterior

18 Design space Analysis Orientado a la estructura: Jerarquia QOC
Questions: issues principales del diseño Options: respuestas alternativas Criteria: medios para evaluar opciones

19 Rationale del diseño psicológico
Apoya el ciclo tarea-artefacto en el que el usuario las tareas se ven afectadas por los sistemas que usan Consecuencias del diseño para los usuarios explícitos Método: los diseñadores identifican las tareas que el sistema apoyará se sugieren escenarios para probar la tarea usuarios son observados en el sistema Declaraciones psicológicas del sistema explicitadas Aspectos negativos son utilizados para mejorar la próxima iteración

20 Programando la interfaz
¿Como el HCI afecta la tarea del programador? Avances en la codificación ha “elevado” la programación Especifico del hardware => específico de la técnica de interacción Capas de herramientas de desarrollo Sistema de venanas Toolkits de interacción Sistemas de administración de interfaces (UIMS) Arquitectura de aplicaciones con UI Model-View-Controller (MVC) Presentation-Abstraction-Control (PAC) Cuerpo de las tecnicas de programación Administración de la concurrencia

21 Sistema de ventanas Rol: media entre los dispositivos y las aplicaciones “multiplexa” los dispositivos de I/O devices para permitir multiples aplicaciones Indepedencia de dispositivos en la cumbre del modelo de imagenes Tradicionalemnte trés arquitecturas posibles: Cada aplicación administra todos los procesos Todos tienen que preocuparse de la sincronización Reduce la portabilidad de las aplicaciones Rol de administración en el kernel del Sistema operativo las aplicaciones están atadas al Sistema operativo El rol de la administración lo asume una aplicación separada Permite máxima portabilidad client-server, e.g. X Windows

22 Arquitectura de aplicaciones read-eval

23 Arquitectura basada en notificaciones

24 MVC: Model View Controller
Patron de diseño usado en Smalltalk ha influenciado mucho el diseño de aplicaciones con GUI Sistema de ventanas Eventos (del sistema)

25 PAC: Presentation-Abstraction-Control
Coutaz (1987) presento PAC, una generalisacion de MVC: Sistema de ventanas Eventos (del sistema)

26 Patron Observer-Observable
Se puede usar en conjunto con MVC (no son excluyentes)

27 Especificación grafica de la interfaz
El codificador dibuja las componentes Establece las acciones con scripts o links a programas Problemas: enfocado en una ventana, es difícil “ver” el hilo de ejecución a través del sistema Ejemplos: Visual Basic, Flash, DreamWeaver, NetBeans Interface Buider

28 Ejemplo en swing

29 Curso de los eventos En un proceso simple (como el ejemplo) los eventos siguen este cursovc Si usamos el patrón MVC los eventos siguen este cursoc