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

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

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

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.

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

1 2

Presione Lock

Presione Set

Presione Min

Libere Min3

Mantenga apretado HR incremente HR

Libere Min

Toque Min incremente min

Presione HR incremente HR

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?

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

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

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

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

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?

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

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

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

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

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

Identifique la forma de modelo mental para esta interfaz

PizarraFile Write Draw Erase Teleconference

LoadSave

Write textChange fontsHighlight

FreeTemplete

WordsParagraphA drawing

Start Stop Finish

Blackboard

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

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

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

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

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

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?

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