1 / 29

Implementacion de Interfaces

Implementacion de Interfaces. Parcialmente 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)

lilam
Download Presentation

Implementacion de Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Implementacion de Interfaces Parcialmente 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 “designrationale” (principios de diseño) • Programacion de interfaces • Apoyo a la implementación

  3. HCI en Ingenieria de software Modelo de cascada con retroalimentación

  4. HCI en Ingeniería de software • Modelos tradicionales de procesos requieren de modificación. . . Modelo de cascada con retroalimentación

  5. HCI en Ingeniería de software • Modelos tradicionales de procesos requieren de modificación. . . • Participación del usuario • Durante el diseño • Durante la evaluación Modelo de cascada con retroalimentación

  6. HCI en Ingeniería de software • Modelos tradicionales de procesos requieren de modificación. . . • Participación del usuario • Durante el diseño • Durante la evaluación • Evaluación de la usabilidad Modelo de cascada con retroalimentación

  7. HCI en Ingeniería de software • Modelos tradicionales de procesos requieren de modificación. . . • Participación del usuario • Durante el diseño • Durante la evaluación • Evaluación de la usabilidad • se debe diseñar la interfaz tempranamente ! • UI en el proceso Modelo 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. • Normalmente, el sistema admite solo las tareas más sencillas y no las variantes (a veces útil, ej. Cajero automático)

  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 asegure lo siguiente: • Que todos los datos están visibles en algún lado y • Que tareas importantes solo necesitan unas pocas ventanas. • Esto implica: • Diseñar la apariencia gráfica de las ventanas de modo de mostrar los datos reales convenientemente • Asegurar que los usuarios puede entender lo que muestran las ventanas. • Importante: en el diseño gráfico hay que decidir si los datos aparecen como texto, curvas, marca, imágenes, etc. • Más tarde, el diseñador desarrolla la interfaz de usuario: • 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 https://moqups.com/  • balsamiq https://balsamiq.com/products/ • NinjaMock https://ninjamock.com/ • Wireframewireframe.cc • Axure www.axure.com/‎

  14. Ingenieria de Usabilidad • El test de usabilidaddefinitivo: medicion de la experiencia de usuario • Medidas de usabilidaddebenestarexplicitadascomorequerimientos • Especificacion de usabilidad: • Atributo/principio de usabilidad • Concepto medido • Método de medición • Nivelactial/peorcaso/nivelplanificado/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 posibleen un diseñotemprano

  15. Ejemplo de especificación de usabilidad

  16. Explicando el diseño: DesignRationale • Designrationale es información que explica el por qué un Sistema es como es • Beneficios del designrationale (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-basedInformationsystem • Orientado al proceso: principales elementos • Issues: estructurados jerárquicamente con una raíz • Positions: soluciones posibles • Arguments: modifica la relaciones de lo anterior

  18. DesignspaceAnalysis • 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? • Avancesen 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 losdispositivos y las aplicaciones • “multiplexa” los dispositivos de I/O devicespara permitir multiples aplicaciones • Indepedencia de dispositivos • Tradicionalemntetrésarquitecturasposibles: • Cadaaplicaciónadministratodoslosprocesos • Todostienen que preocuparse de la sincronización • Reduce la portabilidad de las aplicaciones • Rol de administraciónen el kernel del Sistema operativo • las aplicacionesestánatadas 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) presentoPAC, unageneralisacion de MVC: Sistema de ventanas Eventos (del sistema)

  26. PatronObserver-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 curso

More Related