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

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

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

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

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

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

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

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

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)

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

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.

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

Consecuencia de esta idea Hoy hay varios programas que implementan esta idea Ventanas virtuales: se conocen popularmente como “mockups” o “maquetas” Moqups https://moqups.com/  balsamiq https://balsamiq.com/products/ NinjaMock https://ninjamock.com/ Wireframe wireframe.cc Axure www.axure.com/‎

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 https://usabilitygeek.com/usability-metrics-a-guide-to-quantify-system-usability/ Problemas: La especificación de usabilidad requiere nivel de detalle que pueden no ser posible en un diseño temprano

Ejemplo de especificación de usabilidad

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

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

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

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

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

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

Arquitectura de aplicaciones read-eval

Arquitectura basada en notificaciones

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)

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

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

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

Ejemplo en swing

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