8 de Abril 2005 Capitulo 11. Notaciones para interfaces de usuarios Capitulo 13. Diseño conceptual: el modelo mental del usuario Capitulo 14. Diseño conceptual:

Presentación del tema: "8 de Abril 2005 Capitulo 11. Notaciones para interfaces de usuarios Capitulo 13. Diseño conceptual: el modelo mental del usuario Capitulo 14. Diseño conceptual:"— Transcripción de la presentación:

1 8 de Abril 2005 Capitulo 11. Notaciones para interfaces de usuarios Capitulo 13. Diseño conceptual: el modelo mental del usuario Capitulo 14. Diseño conceptual: métodos

2 Capitulo 11. Notaciones para interfaces de usuarios para exploración, análisis y comunicación Diferentes estrategias para describir diseños: delineación, enumeración, instanciación y el uso de esquemas Diagramas de transición de estados y otras técnicas para describir la sintaxis de las entradas de la interfaz del usuario Métodos para describir la salida del programa Métodos para describir objetos interactivos El uso de herramientas para prototipos de interfaces para describir la interfaz del usuario

3 ESTRATEGIAS PARA DESCRIBIR DISEÑOS Diferentes estrategias para describir diseños: delineación, enumeración, instanciación y el uso de esquemas Figura 11.1 Representando el diseño de un reloj digital a)Dibujo rápido b) Representación esquemática para uso en análisis c) foto del reloj d)especificaciones precisas Presione HR para avanzar las horas Presione set para habilitar el reset del tiempo Presione minutos para avanzar en minutos Presione LOCK para deshabilitar el reset del tiempo

4 Estrategias de representación Delineación: se aplica a diseños que no varían, consiste en dibujar el diseño estático de la interfaz figura 11.2 página 274. Enumeración: se aplica a diseños que varían, consiste en dibujar todas las posibles formas. Figura 11.3 página 275 Instanciación: si la enumeración es muy grande se presentarán una o dos instancias de la interfaz y a partir de allí se inferirá el resto Fig. 11.3 b Fig. 11.3.c El uso de esquemas:Esto requiere el uso de una representación abstracta desde la cual se generan todas las otras formas posibles.

5 Carta de Transición de Estados Figura 11.4 Diagrama de transición de estados representando la sintaxis de entrada de el reloj digital Mantenga apretado Min incremente Min 4 12 Presione Lock Presione Set Presione Min Libere Min 3 Mantenga apretado HR incremente HR Libere Min Toque Min incremente min Presione HR incremente HR

6 Métodos para describir la salida del programa Los métodos de instanciación y delineación son los más usados Ver figura 11.6 donde se enumeran todas las formas posibles de cierre de tres canales de trafico de una autopista Cómo Ud. describiría la salida de su programa?

7 Métodos para describir objetos interactivos Figura 11.7 La sala de la Torre de Control del aeropuerto de San José a. Representación de la información que usan los controladores: banco de videos monitores donde se muestran las puertas de llegada de los aviones, el display de la información de los vuelos y y el papel impreso donde están los vuelos del día su hora de llegada y de salida b. Trascripción de Julie resolviendo un problema de en la puerta, con los símbolos que muestran que está usando

8 Métodos para describir objetos interactivos Figura 11.8 Objetos interactivos en una pantalla, cada uno es capaz de sostener un diálogo con el usuario

9 El uso de herramientas para realizar prototipos de interfaces Diseñe una máquina para llevar el total gastado en el supermercado de una forma fácil y rápida Esta máquina leerá los precios del código de barra de los productos y bajo el comando del comprador lo sumará al total. Deberá poseer un diseño tal que permita que se le fije a cada carrito y no moleste al comprador

10 El uso de herramientas para realizar prototipos de interfaces Realice un dibujo rápido del equipo Haga una representación esquemática para el análisis ver figura 11. 1 Realice el diagrama de transición de estados ver figura 11.4

11 Tarea Ejercicio 1. Delineación, enumeración, instanciación y el uso de esquemas figura 11.2 y 11.3 página 274. Cual técnica usaría para describir: La barra horizontal del menú de Word Los submenús que salen de cada opción del menú principal Cual usaría para su página principal de su software?

12 Tarea Ejercicio 2 Hacer el diagrama de estado para la transacción telefónica bancaria usando su tarjeta de débito Hacer el diagrama de estado para su interfaz, considere en llegar al ultimo nivel de su jerarquía

13 Capitulo 13. Diseño conceptual: el modelo mental del usuario Que significa el modelo mental del usuario Como los usuarios se basan en él durante el uso del sistema Las distintas formas que el modelo mental puede tomar Como el modelo mental soporta el ciclo de interacción del usuario

14 Que significa el modelo mental del usuario Figura 13.1 Alguno de los procesos que usan los usuarios para formar sus modelos mentales: por uso, por observación, por documentación Falta por entrenamiento

15 Como los usuarios se basan en el modelo mental durante el uso del sistema Figura 13.6 Como el modelo mental del usuario sirve de soporte para realizar una tarea con la cual no está familiarizado como es hacer una llamada al exterior

16 Las distintas formas que el modelo mental puede tomar Modelo de transición de estado Figura 13.5 El modelo mental de un usuario de como hacer una llamada telefónica Modelos objeto-acción figura 13.8 Un juego de cuadros a) como aparece en la pantalla b)representación como un conjunto de objetos conceptuales en el modelo mental Modelos de mapeo Ej.. Sistemas que tienen secuencias repetitivas de acciones Ej. La calculadora, interacción-acción Analogías: figura 13.7 y simulador de vuelo Fig. 13.11

17 Identifique la forma de modelo mental para esta interfaz Pizarra File WriteDraw Erase Teleconference Load Save Write text Change fonts Highlight Free Templet e Words Paragraph A drawing Start Stop Finish Blackboard

18 Como el modelo mental soporta el ciclo de interacción del usuario Figura 13.16 El ciclo de interacción del usuario de acuerdo a Norman (1986) Ejecución: donde el usuario entiende las funciones del sistema Evaluación donde el usuario entiende el estado del sistema

19 El ciclo de interacción del usuario de acuerdo a Norman (1986) Establece la meta Forma la intención de actuar para conseguir la meta Mapea la intención dentro de la secuencia de acciones Ejecuta físicamente la secuencia de acciones Evalúa e interpreta de acuerdo a sus expectativas Interpreta lo que percibe de acuerdo a las expectativas Percibe el estado del mundo EL MUNDO

20 Capitulo 14. Diseño conceptual: métodos Identificar la forma del modelo mental que nosotros deseamos que el usuario adquiera Esconder el modelo del sistema Promover la adopción del modelo mental diseñando una imagen apropiada del sistema Analizar el diseño por medio de una detallada caminata cognoscitiva Aplicación de heurística de diseño y normas

21 Ejercicio 4 Diseñe un ambiente virtual donde un niño de pre-escolar (6 años), pueda trabajar con una masa de plastilina para crear figuras, de una forma fácil y rápida

22 Estilo de interacción Modelo mental objeto acción: promueve la adopción del estilo de manipulación directa El modelo de transición de estados se presenta en los estilos de menús o el estilo basado en Voces Ej.: la llamada telefónica El modelo de mapeo (Interacción-> Acción) resulta de escoger los estilos de líneas de comando o el de teclas de función. Ej.: calculadora El modelo mental Analógico puede ser escogido como base en un sistema de estilo de manipulación directa. Ej. Simulador de vuelo

23 Paseo cognoscitivo extendido Q1: La acción correcta es suficientemente evidente para el usuario, vía su modelo mental existente o vía la imagen del sistema Q2: El usuario hará la conexión correcta entre la descripción de la acción y lo que él esta tratando de hacer ya sea vía su modelo mental propio o vía su descripción? Q3: El usuario interpretará la respuesta del sistema a la acción que realizó correctamente. Sabrá a partir de esta respuesta y su modelo mental propio si tomo la opción correcta o la incorrecta? Q4: El modelo mental del usuario será afectado? Se agregarán nuevos conceptos o se perderán conceptos que existían?

24 Heurística del Diseño Conceptual Escoja el modelo mental que Ud. quiere que el usuario adopte, preferiblemente antes de diseñar su interfaz Haga la conexión entre su selección de modelo mental a su selección de estilo de interacción Oculte todos esos aspectos del modelo del sistema que producen conflicto con las actividades del usuario o que comprometen su eficiencia Explote la imagen del sistema para producir el modelo mental deseado Realice los pasos necesarios para asegurarse que la imagen de su sistema es real y consistente