Diseño de la arquitectura de IHC

3. Interacción Humano
Computadora
UNIDAD 03

4. Unidad III | Interacción Humano Computadora 03
III. Diseño de la arquitectura de la IHC. Competencia de la unidad de
aprendizaje: diseñar un prototipo
herramientas tecnológicas de Interacción
Humano – Computadora
3.1 Modelado del dominio
3.2 Estética de las interfaces
3.3 Balance entre funcionalidad y

5. Modelado del dominio | Interacción Humano Computadora 03
Modelo de StoryBoard

6. Modelado del dominio | Interacción Humano Computadora 03
Primeros pasos en Balsamiq
Balsamiq nos ofrece un menú básico de diferentes herramientas para empezar a desarrollar
nuestras Interfaces.
El siguiente ejemplo es una muestra de un
diseño realizado en Balsamiq de una plataforma
web, podemos notar varios elementos que nos
proporciona la herramienta implícitos en el
ejemplo como son: Browser Windows, Text,
Video Player entre otros.

7. Modelado del dominio | Interacción Humano Computadora 03
• Balsamiq ayuda al diseño fácil de interfaces.
• Este programa sirve para diseñar bocetos ya sea para páginas web y/o aplicativos para el celular.
• Contiene distintos elementos que nos ayudarán a contemplar el diseño posterior de algún proyecto
• Es necesario tener una idea clara al comenzar el boceto.
• Es un excelente método que nos permite agilizar los tiempos de cada proyecto y entregar un mejor
resultado nuestros clientes.
Características

8. Estética de las interfaces | Interacción Humano Computadora 03
ArgoUML es un entorno de diseño de software gráfico interactivo potente y fácil de usar que soporta el
diseño, desarrollo y documentación de aplicaciones de software orientadas a objetos.
Características:
• Open standards: XMI, SVG y PGML.
• 100% Plataforma independiente gracias al uso exclusivo de Java.
• Open Source.
• Características cognitivas como: reflexión en acción, diseño oportunista, comprensión y resolución de
problemas.
Primeros pasos con Argos

9. Estética de las interfaces | Interacción Humano Computadora 03
Interfaz

10. Estética de las interfaces | Interacción Humano Computadora 03
Ejemplo
Aquí podemos ver un diagrama
simple de Casos de Uso.

11. Estética de las interfaces | Interacción Humano Computadora 03
Ejemplo
Todos los elementos de cada diagrama
aparecerán en esta barra.
Tenemos cualquiera de las siguientes
opciones

12. El uso de modelos de tareas para el diseño y desarrollo de interfaces
de usuario está tomando cada vez una mayor importancia
principalmente de cara a obtener aplicaciones interactivas más
centradas en el usuario.
Imagen: Freepik.com. La imagen ha sido creada usando recursos de Freepik.com
03Balance entre funcionalidad y belleza | Interacción Humano Computadora 03
• Existen varios métodos para el análisis de tarea, que se diferencian
en el grado de formalismo y finalidad (predictivos, descriptivos y
cognitivos).
Modelado de la tarea del usuario

13. Balance entre funcionalidad y belleza | Interacción Humano Computadora 03
Características:
• Contar con una estructura jerárquica, que permita manejar distintos niveles de abstracción
• Facilidad para expresar relaciones temporales entre las tareas.
• Fácil de entender tanto para los usuarios como para los diseñadores, así como facilitar la comunicación
entre ellos.
• Realizar el modelado de las tareas.

14. Balance entre funcionalidad y belleza | Interacción Humano Computadora 03
Para llevar a cabo el análisis de tareas, podemos utilizar diferentes métodos que se diferencian en el
grado de formalismo de su notación, poder de expresividad y finalidad.
• Métodos de competencia o cognitivos.
Identifican secuencias de comportamiento correctas, generan una especificación del conocimiento del
usuario, como lo son: HTA(Hierarchical Task Analysis), GOMS (Goals, Operators, Methods, and Selection
rules), UAN (User Action Notation).
• Métodos predictivos para la evaluación del rendimiento humano.

15. Balance entre funcionalidad y belleza | Interacción Humano Computadora 03
Describen secuencias de comportamiento y el conocimiento que necesita el usuario para su ejecución.
KLM (KeyStroke Level Mode) y TAG (Task Action Grammar).
• Métodos descriptivos.
Permiten obtener una descripción más o menos completa del sistema a partir de la información obtenida
de las tareas.
CCT (Concur- TaskTrees).

16. Balance entre funcionalidad y belleza | Interacción Humano Computadora 03
CCT (ConcurTaskTrees)
Su principal finalidad es la de poder representar las relaciones temporales existentes entre las
actividades y usuarios que son necesarios para llevar a cabo en las tareas.
Notación especialmente útil para aplicaciones CSCW(Computer supported cooperative work).
Imagen: Notación desarrollada por Fabio Paternó (Paternó, 2000).

17. Balance entre funcionalidad y belleza | Interacción Humano Computadora 03
Facilidad de uso
Hace que sea aplicable a proyectos reales con aplicaciones de un tamaño medio–largo y que con llevan
especificaciones de cierta complejidad.

18. Balance entre funcionalidad y belleza | Interacción Humano Computadora 03
• La notación genera una representación grafica en forma de árbol de la descomposición jerárquica de
las tareas existentes en el sistema.
• Se permite la utilización de un conjunto de operadores, sacados de la notación de LOTOS, para
describir las relaciones temporales entre tareas (secuencialidad, concurrencia, recursión, iteración...)
• Podemos reutilizar partes de especificación para la creación de “arboles de tareas concurrentes” e
identificarlo como un patrón de tarea.

19. Balance entre funcionalidad y belleza | Interacción Humano Computadora 03
Categorías de tareas en función del actor
que la llevará a cabo
• Tareas del usuario
Son realizadas completamente por el usuario, son tareas cognitivas o físicas que no interactúan con el
sistema. Describen procesos realizados por el usuario usando la información que recibe del entorno
• Tareas de la aplicación
Tareas realizadas por la aplicación y activadas realizadas por la propia aplicación. Pueden obtener
información interna del sistema o producir información hacia el usuario.

20. Balance entre funcionalidad y belleza | Interacción Humano Computadora 03
Categorías de tareas en función del actor
que la llevará a cabo
• Tareas de interacción
Son tareas que realiza el usuario interactuando con la aplicación por medio de alguna técnica de
interacción.
• Tareas abstractas
Tareas que requieren acciones complejas y que por ello no es fácil decidir donde se van a realizar
exactamente. Son tareas que van a ser descompuestas en un conjunto de nuevas subtareas.

21. Balance entre funcionalidad y belleza | Interacción Humano Computadora 03
Ejercicio
Con base a los requerimientos de “Hogar
Seguro”, realizar el diseño de la interfaz con
Balsamig´, la interacción con CTT y el
modelado con ArgosUML

22. Bibliografía | Interacción Humano Computadora 01
•La interacción persona - ordenador. (Primera edición: diciembre 2001).
•Nombre de libro. (Edición: xx de xxxxxx del xxxx). Recuperado de:
https://direccionwebdelrecurso.com. Consultado el xx de xxxxxx del xxxx

23. ©2020
Es responsabilidad exclusiva de los autores el respeto de los derechos de autor sobre los contenidos e imágenes en el presente
documento, en consecuencia, la BUAP no se hace responsable por el uso no autorizado, errores, omisiones o manipulaciones de los
derechos de autor y estos serán atribuidos directamente al Responsable de Contenidos, así como los efectos legales y éticos
correspondientes.