Página principal

El diseño Última modificación: 02/05/2002 Objetivos 3 Introducción 4


Descargar 266.68 Kb.
Página5/5
Fecha de conversión18.07.2016
Tamaño266.68 Kb.
1   2   3   4   5

Figura 23 Casillas de verificación

En ambos casos de selección, ya sea de tamaño fijo o variable, un factor muy importante es la ubicación espacial de los ítems (órdenes, objetos) para su rápida selección, el texto del identificador (para su reconocimiento) y la organización semántica (para recordar su posición).



Tarea de introducción de texto

Esta tarea consiste en la introducción de información textual. Existen alternativas a la introducción de texto por teclado como son los reconocedores de caracteres (OCR) y de gestos. Un aspecto importante relacionado con el texto es su resolución (tamaño en pantalla), que se mide en puntos o píxels. Se deben utilizar tamaños y tipos de letra que sean legibles y proporcionales a la resolución de pantalla que posea en ese momento el usuario. El texto puede ser longitud variable y ocupar más de una línea, por lo que se consideran dos tipos de presentación, una entrada de tamaño fijo (con posible control del formato) o un área de texto (con uso de deslizadores).



Tarea de introducción de valor

Esta tarea consiste en la introducción de un dato cuantificable. En caso de identificar un número, la forma habitual es mediante el teclado numérico, aunque en determinados casos, se utilizan representaciones gráficas (diales, deslizadores, etc.) que ayudan a una introducción mediante ratón.





Figura 24 Deslizador

En caso de valores porcentuales (sobre un valor de tamaño variable o de tiempo para completar una acción) también se pueden utilizar representaciones, pero en este caso, no son directamente manipulables por el usuario (son informativas).





Figura 25 Barra de progresión y de posición

Tarea de arrastre

Esta tarea consiste en la introducción de una secuencia de posiciones que denotan un movimiento. Esta tarea típicamente se ha utilizado para describir explícitamente manipulaciones de objetos gráficos (mover, rotar, escalar), y que ha sido utilizada para dar significado a las operaciones de un sistema de escritorio (drag and drop) y en operaciones de diseño gráfico. Esta tarea requiere de una realimentación continua del objeto desplazado (puede ser una instancia, una línea/caja elástica, un punto de una curva, etc.).



Gestión de entradas del usuario

La gestión de entradas se puede hacer mediante distintas técnicas de interacción entre aplicación–dispositivo [OLS98]. Esta interacción se puede realizar en diferentes modos: pregunta–respuesta, ordenes, etc. Los eventos es el principal mecanismo para la comunicación entre el usuario y el sistema interactivo. Cuando el usuario interacciona con los dispositivos, estas acciones se trasladan a eventos software que se distribuyen a la ventana apropiada (en un sistema de ventanas). Todos los eventos están identificados (mediante un tipo de evento) que permite al software que los recibe distinguir la información que se pretende comunicar.

Se puede establecer tres mecanismos de comunicación entre usuario y aplicación:


  • Petición (request). El programa espera hasta que se produzca una entrada. Los Dispositivos están en espera. Es un diálogo dirigido por la aplicación.

  • Muestreo (sample). Ambos trabajan concurrentemente. Consulta del estado del dispositivo al realizar una petición. Los datos no son almacenados, por lo que se consulta el estado actual.

  • Evento (event). Se provee de una cola de sucesos por parte del dispositivo. La aplicación está dirigida por los datos, y permite entradas asíncronas.

Los sistemas interactivos son programas dirigidos por eventos, y su estructura difiere de las aplicaciones tradicionales de procesamiento y de cálculo. El cuerpo principal del programa es simplemente un ciclo de obtención de eventos.

Inicialización

While(not salir) {

Obtener siguiente evento E

Gestionar evento E

}

Cola de eventos. Existen diferentes modelos para distribuir los eventos a los objetos. Al manipular el sistema interactivo, los eventos se ponen en una cola de eventos. Todos los sistemas de ventanas poseen rutinas para obtener el siguiente evento de la cola. A menudo, los eventos no poseen suficiente información como para ser procesados o son irrelevantes (movimiento continuado del ratón, pulsación de teclas no habilitadas), por lo que se deben proveer mecanismos de filtrado para eliminar aquellos eventos que no son significativos.

Algunos de los tipos de eventos que podemos encontrar son:


  • Eventos de entrada. Son los generados por el usuario. Clasificación: eventos del ratón. El evento del ratón siempre posee la posición actual del ratón. Teclado: Se puede considerar un array de botones de ratón (uso de modificadores)

  • Eventos de las ventanas. Se reciben de la propia ventana. La mayoría de los sistemas de ventanas envían un evento de creación/destrucción de la ventana, que permite al código de la aplicación gestionar la acción pertinente. Tipos de eventos: crear/destruir, abrir/cerrar, iconificar/deiconificar, redimensionar, mover, etc.

  • Eventos definidos por el usuario. Eventos de alto nivel creados por software.

Comunicación entre objetos

Un punto importante de la gestión de eventos es la comunicación con otros objetos interactivos. Un ejemplo de ello es el movimiento de la barra de deslizamiento, que provoca el cambio del texto presentado (relación entre dos componentes interactivos). Esta comunicación se realiza mediante pseudo–eventos (eventos que han sido creados por la comunicación entre objetos, y no son realmente eventos de entrada).

En sistemas de ventanas no orientados a objetos, un evento consiste en un registro de un tipo (entero), información estándar y otra adicional suministrada por el objeto que origina el evento. Existen tres modelos básicos para este tipo de comunicación:


  • Modelo de llamadas (callbacks). Permite asociar un procedimiento (código C) a un widget en tiempo de ejecución. Por ejemplo, se utiliza en sistemas de ventanas como Motif, y primeras versiones de Xwindows y lenguajes como Xtk, TK.

  • Modelo de notificación. Cada componente interactivo notifica a su ventana padre (de la que depende jerárquicamente) la ocurrencia de un evento significativo. Este modelo se utiliza en las primeras versiones de MS Windows.

  • Modelo de conexión o delegación. Permite a un objeto comunicarse con cualquier otro objeto (u objetos) mediante registro de los objetos receptores para un determinado evento. Modelo utilizado en NexTStep o Java.

  1. Modelo callbacks. Un callback es un procedimiento que se ejecuta inmediatamente después que se produce el evento. En Tcl/Tk, la conexión entre objetos (interactivos) evento y procedimiento se realiza mediante la siguiente orden

bind .boton1 { puts "Boton %b situado en %x,%y" }

Con esta orden se asocia al objeto interactivo “.boton1” cuando sucede el evento (pulsación del botón izquierdo del ratón) una secuencia de órdenes entre llaves.



  1. Modelo de notificación. Suministra un mecanismo interactivo más estructurado. Los componentes notifican a la ventana de nivel superior el evento sucedido. La ventana padre posee todo el código para decidir qué realizar con los eventos recibidos. Se puede prestar atención a eventos específicos (por ejemplo a eventos de aceptar–rechazar dentro de una ventana de opciones), que dirigen el modo de consulta y obtención del resto de eventos.

  2. Modelo de conexión de objetos. Permite a los objetos comunicarse directamente entre ellos. Por ejemplo: comunicación entre la barra de desplazamiento con el editor de textos, invocando un método del objeto editor de textos.

La organización de la información afecta a la impresión general del interfaz. Debe incluir los siguientes elementos:

  • Diseño (formato de pantalla, organización general)

  • Representación de la información (métodos de codificación)

  • Realimentación (seguimiento)

  • Comunicación con el usuario (errores, mensajes de estado, etc.)

En el nivel de presentación se debe mostrar la información de forma que sea comprensible y asimilable por el usuario. Se puede pecar de exceso de información (provocando fatiga y desbordamiento al usuario) o demasiado sobria (la falta de información puede causar incertidumbre). Hay que tener en cuenta que el espacio donde se presenta la información es escaso, por lo que deberemos hacer un uso racional de este recurso. La distribución (no oclusiva) de la información es un factor muy importante, y podemos jugar con diferentes tipos de diseño: uso de zonas fijas o que se puedan ocultar (de forma dinámica), disposición del área trabajo: menús, mensajes, información de estado, etc.

Para la representación de objetos deberemos utilizar una simbología y codificación para que sea fácilmente identificable, económica en recursos (tamaño en pantalla) y consistente (iconografía, colores, texto, etc.) (ver capítulo ‘El diseño gráfico’).



Diseño de la presentación

El significado de una imagen puede ser más fácilmente percibido por el observador si posee claridad visual. Deberemos por tanto enfatizar la organización lógica de la información. Para conseguir una buena organización se puede utilizar las reglas de Gestalt, que permiten mejorar la claridad visual de la información. Estas reglas se basan en cómo organiza el observador los estímulos visuales (de forma global) y que se pueden resumir en los siguientes principios:



  • Similitud. Objetos similares próximos se interpretan como una representación conjunta/agrupada

  • Proximidad. Elementos visuales con propiedad común se interpretan como agrupados

  • Cierre (clausura). Elementos visuales que tienden a cerrar un área se interpreta como cerrada

  • Continuidad (determinación de formas). Discriminación de elementos diferentes según la continuidad natural



Figura 26 Reglas de claridad visual (Gestalt)

Estas reglas se aplican frecuentemente al diseño visual de los sistemas gráficos, como por ejemplo en la colocación de los botones, elementos de menú, organización general del interfaz, etc.

La claridad visual afecta a la impresión general de la interfaz. Al reforzar la claridad visual, promovemos las relaciones lógicas entre elementos (por ejemplo, minimizando el movimiento ocular para obtener información).



Figura 27 Aplicación de reglas a ventana de diálogo

Podemos organizar la pantalla de la interfaz siguiendo algunas reglas efectivas de diseño.



  • Balanceado. Consiste en el ajuste de la visión con el área de visualización. El balanceado es la búsqueda de equilibrio entre los ejes horizontal y vertical en el diseño. Si se asigna un peso a cada elemento visual, se debe conseguir que la suma en cada eje sea similar. Se debe buscar un centro de gravedad en sentido horizontal y vertical, ya que de lo contrario, se crearía una inestabilidad.



Figura 28 Pantalla balanceada (izda.) e inestable (dcha.)

  • Simetría. Consiste en duplicar la imagen visual a lo largo de un eje de simetría. Esta técnica automáticamente asegura el balance.



Figura 29 Pantallas con diferentes simetrías

  • Regularidad. Técnica visual para establecer uniformidad ubicando los elementos de acuerdo con una distribución regular en filas–columnas.

  • Alineamiento. Puntos de alineación que existen en el diseño. Se debería minimizar.

  • Enrejillado. Separación y acentuación la organización entre áreas.



Figura 30 Pantalla con enrejillado y alineamiento (izda.)

Para obtener estas distribuciones de contenedores y componentes dentro de la pantalla, deberemos utilizar los controladores geométricos (layout manager) que nos facilitan las librerías de diseño de interfaces. Podemos utilizar desde los más simples (posiciones absolutas, ordenación de izda. a dcha.) a los más complejos, que asignas proporciones relativas para cada elemento, tamaño de expansión, offset, etc.



Figura 31 Controlador geométrico reticular con restricciones

Realimentación

La realimentación es de gran importancia en los sistemas interactivos, ya que el usuario debe estar informado en cada momento de las acciones que realiza. Cuando por ejemplo una tarea tarda más tiempo del razonable, se deberá informar mediante algún tipo de mensaje de ese proceso para no provocar incertidumbre. Sin embargo, un problema que deberemos tener en cuenta es que tenga una gestión rápida, ya que en tal caso puede no coincidir el estímulo con la respuesta del sistema. Algunos ejemplos de realimentación son:



  • Sobre las órdenes. Mostrar efectos, errores, confirmación, indicadores

  • Sobre la selección. Resaltar de forma no ambigua la orden activa

Esta realimentación debe ser fácil de leer y entender. Para ello se debe fomentar la consistencia, y en algunos casos puede condicionar la estructura de datos del modelo, ya que sea necesario almacenar información adicional para realizar el feedback.

Para su diseño, se debe estudiar las acciones de cada tarea y ver como es la interacción (realimentación del propio gesto), confirmación (selección, mensajes, iluminación) y posibles errores (pantalla de aviso) La realimentación informa al usuario acerca de su interacción con el sistema. Indica qué está haciendo y le ayuda a realizarlo correctamente. Se puede utilizar cualquier combinación de canales sensoriales (sonoro, visual, táctil, etc. ).

Se puede clasificar la realimentación por su dimensión temporal:


  • Futura. Realimentación de una acción antes de llevarla a cabo. Indica qué sucederá si se realiza una acción (por ejemplo, etiqueta informativa de los botones).

  • Presente. Realimentación durante la interacción. Indica qué esta sucediendo actualmente (p. e. borrado de ficheros, formateando, mover cursor..).

  • Pasada. Información de lo que ha sucedido, y cómo ha cambiado el sistema (p. e. información de finalización de tareas).

Gestión de errores

Sobre un sistema, un factor crítico desde el punto de vista del usuario, es cómo se organizan los mensajes de error y su explicación. Normalmente ocurren por un desconocimiento por parte del usuario que puede ser motivado por diferentes causas:



  • Errores por acciones del usuario. Error en la traslación entre la intención del usuario y su acción (intención correcta, pero realización incorrecta). La solución es mejorar el diseño ergonómico, mejorar los aspectos físicos del diseño (ubicación de menús, tamaño, posición, visibilidad, color, etc.)

  • Errores por las intenciones del usuario. El usuario realiza una acción equivocada. El modelo de usuario no es correcto. La solución es mejorar el modelo mental. Es importante buscar posibles causas ya que el usuario está asumiendo un modelo mental incorrecto.

El usuario, ante un error, debe reconocer qué ha sucedido, para evitar confusión. Algunas técnicas que se deben evitar en los mensajes de error son:

  • Tono imperativo. Aumenta la ansiedad del usuario. Dificulta la corrección del error ("Acción ilegal", "error fatal", “terminación anormal del programa”).

  • Mensajes genéricos o confusos. Ofrecen poca información ("error sintáctico", “run time error n. XXXX”).

Un estudio de la distribución y frecuencia de errores puede ayudar al diseñador, al mantenimiento del producto y al posible usuario mediante una conveniente documentación.

Conclusiones

En este capítulo hemos visto las características más relevantes de los sistemas interactivos y las dificultades que se plantean a la hora de realizar un diseño efectivo. Si bien para el diseño de sistemas interactivos existe abundante bibliografía, la mayoría está basada en recomendaciones, consejos y guías de estilo para el diseño que están recogidas de la experiencia de los autores. Sin embargo, raramente aportan una metodología clara para llevar a cabo de forma sistemática el proceso de diseño. En este capítulo hemos incluido diferentes propuestas metodológicas basadas en teorías cognitivas para el diseño defectivo de aplicaciones interactivas.

Para ello, deberemos aplicar notaciones que permitan analizar las tareas que el usuario realiza en su entorno de trabajo, y utilizar técnicas para su traducción a conceptos de diseño. Posteriormente, hemos visto modelos arquitectónicos que proponen la arquitectura básica (sobre la base de componentes interactivos) que debe poseer el sistema, y por último, hemos aplicado una serie de técnicas que nos permitan trasladar de forma efectiva el modelo conceptual del sistema a un modelo computacional basado en eventos y componentes gráficos.



Referencias

[ANN67]

Annett J. y Duncan K. Task analysis and training in design, en Occupational Psychology, Núm. 41, 1967

[CAR83]

Card S., Moran T. y Newell P. The psychology of human–computer interaction. Lawrence Erlbaum, Hillsdale, NJ, 1983

[COX93]

Cox K. y Walker D. User interface design. Prentice Hall, 1993

[DIX91]

Dix A. Formal methods for interactive systems. Academic Press, 1991

[DUK95]

Duke D. J. y Harrison M. D. «Interaction and task requirement» en Design, Specification and Verification of Interactive System – DSVIS’96 (Palanque P. y Batisde R. eds.), Springer Verlag EG, 1995

[EBE94]

Eberts, R. User interface design. Prentice Hall, 1994

[EIJ89]

Eijk P. H. y Vissers M. The formal description technique LOTOS. North Holland, Amsterdam, 1989

[FAC92]

Faconti G. y Paterno F. «On the use of LOTOS to describe graphical interaction» en Proceedings of the HCI’92 Conference (Monk A. et al eds.), Pág. 155-173, 1992

[FOL90]

Foley J., van DAm A., Feirner S. y Hughes J. Computer graphics: principles and practice, 2ª edición. Addison and Wesley, 1990

[HAC98]

Hackos J. y Redish J. User and task analysis for interface design. John Wiley Publishing, 1998

[HAR90]

Harrison M. y Thimbleby H. eds. Formal methods in human–computer interaction. Cambridge University Press, 1990.

[HAR95]

Hartson H. R. y Mayo K. A framework for precise, reusable task abstraction. Design, Specification and Verification of Interactive System – DSVIS’96 (Palanque P. y Batisde R. eds.), Springer Verlag EG, 1995

[OLS98]

Olsen, D. Developing user interfaces. Morgan Kaufman Publishers, 1998

[PAT00]

Paternó F. Model–based design and evaluation of interactive application. Springer–Verlag, 2000

[PER89]

Perlman, G.: User interface development. Graduate Curriculum Module SEI–CM–17–1.1 (ftp://ftp.cis.ohio-state.edu/pub/hci/SEI/). Carnegie–Mellon University, Software Engineering Institute, 1989

[SHE89]

Shepherd A.: Analysis and training in information tasks. Task Analysis for Human Computer Interaction (Diaper D,. ed). Chichester Ellis Horwood, 1989

[SHN92]

Shneiderman B. Designing the user interface. Strategies for effective human computer interaction, 3ª edición. Addison and Wesley, Reading, MA, 1992

[THI90]

Thimbleby H. User interface design. ACM Press, Addison and Wesley, Reading, MA, 1990

Bibliografía

Baecker, R., Grudin, J., Buxton, W., Greenberg, S. (ed.) Readings in Human–Computer Interaction: towards the year 2000, 2ª ed. Morgan Kaufman Published. 1995.



Cox K. y Walker D. User interface design. Prentice Hall, 1993

Dix A., Finlay J., Abowd G. y Beale R. Human–Computer Interaction, 2ª edición. Prentice Hall, 1998

Foley J., van DAm A., Feirner S. y Hughes J. Computer graphics: principles and practice, 2ª edición. Addison and Wesley, 1990

Olsen, D. Developing user interfaces. Morgan Kaufman Publishers, 1998

Paternò F. Model–based design and evaluation of interactive application. Springer–Verlag, 2000

Shneiderman B. Designing the user interface. Strategies for effective human computer interaction, 3ª edición. Addison–Wesley, Reading, MA, 1992

Enlaces interesantes

http://giove.cnuce.cnr.it/ctte.html

ConcurTaskTrees.

Herramientas y documentación.



http://hcibib.org/tcuid/

Task–centered user interface design: a practical introduction.

Lewis C. (http://www.cs.colorado.edu/~clayton/) y Rieman J. (http://home.att. net/~jrieman/)


1   2   3   4   5


La base de datos está protegida por derechos de autor ©espanito.com 2016
enviar mensaje