Diseo

de interfaces grficas para sistemas de software.

Sugerir algunos principios generales de diseo para desarrollar interfaces grficas de usuario. Describir la manipulacin directa de dichas interfaces. Disertacin de los factores a considerar para el diseo de presentaciones. Descripcin del soporte de usuario que esta integrado en la interfaz de usuario. Introduccin a la versatilidad de los atributos y aproximacin de sistemas hacia sistemas de evaluacin.

Introduccin Interfaz del Usuario. Principios de Diseo. Interaccin (Sistema-Usuario). Presentacin de la informacin correspondiente. Gua de Usuario. Evaluacin de la Interfaz.

Usuarios de sistema frecuentemente juzgan un sistema por su interfaz. Un diseo de interfaz pobre puede provocar que el usuario cometa errores catastrficos. El diseo de una interfaz de usuario pobre es la razn por la cual muchos sistemas nunca son usados. El objetivo del presente capitulo es el diseo de interfaces grficas de usuario.

Interfaces de usuario que se soportan en Windows, iconos representacin de entidades, desplegado de mens y punteros. Llamadas previas interfaces WIMP referidas en la actualidad de manera general con la acepcin (GUIs - graphical user interface). La forma estndar de una interfaz para estaciones de trabajo y computadoras personales de alta potencia.

Characteristic Windows Icons

Menus Pointing

Graphics

Description Multiple windows allow different information to be displayed simultaneously on the users screen. Icons different types of information. On some systems, icons represent files; on others, icons represent processes. Commands are selected from a menu rather than typed in a command language. A pointing device such as a mouse is used for selecting choices from a menu or indicating items of interest in a window. Graphical elements can be mixed with text on the same display.

Son fciles de aprender y usar.

Usuarios sin experiencia pueden aprender el uso del sistema rpidamente.

El usuario puede cambiar rpidamente desde una proceso a otro y puede interactuar con diferentes aplicaciones a la vez.

La informacin aparece visible en su propia ventana cuando la atencin cambia.

Rpido, interaccin de pantalla completa es posible con acceso inmediato a cualquier cosa sobre la pantalla.

Analizar y comprender las actividades del usuario

Producir un prototipo de diseo en papel

Evaluar el diseo con los usuarios finales

Disear el prototipo

Producir el prototipo del diseo dinmico

Evaluar el diseo con los usuarios finales

Prototipo ejecutable

Implementar la interfaz del usuario final

Familiaridad del usuario:

Utilizar trminos y conceptos que se toman de la experiencia de las personas que ms utilizan el sistema. Siempre que sea posible , la interfaz debe ser consistente en el sentido de que las operaciones comparables se activan de la misma forma.

Consistencia:

Mnima sorpresa:

El comportamiento del sistema no debe provocar sorpresa a los usuarios. La interfaz debe incluir mecanismos para permitir a los usuarios recuperarse de los errores. Esto puede ser de dos formas:
Confirmacin de acciones destructivas Proveer de un recurso para deshacer

Recuperabilidad:

Gua al usuario:

Cuando los errores ocurren , la interfaz debe proveer retroalimentacin significativa y caractersticas de ayuda sensible al contexto. La interfaz debe proveer caractersticas de interaccin apropiada para los diferentes tipos de usuarios.

Diversidad de usuarios:

El diseo de interfaces de Usuario toma en cuenta las necesidades, experiencia y capacidades de los usuarios del sistema. Los usuarios deberan involucrarse en el proceso de diseo y el diseo de interfaces de usuario deben refinarse hacia rpidos prototipos. Existen factores cognoscitivos, como el tamao de pequeos trminos de memoria, que el diseo la interfaz de usuario deben tomarse en cuenta.

Principle User familiarity Consistency Minimal surprise Recoverability User guidance

Description The interface should use terms and concepts which are drawn from the experience of the anticipated class of user. The interface should be consistent in that comparable operations should be activated in the same way. Users should never be surprised by the behaviour of a system. The interface should include mechanisms to allow users to recover from their errors. The interface should incorporate some form of context sensitive user guidance and assistance.

La interfaz debe basarse en los trminos orientados de usuario y conceptos sobre los conceptos informticos.

Por ejemplo, un sistema de oficinas debe utilizar conceptos como cartas, documentos, folders etc. As como directorios, identificadores de archivos, etc.

El sistema deber mostrar un nivel apropiado de consistencia.

Los comandos y los mens deban mantener el mismo formato, las puntuaciones de los comandos deben ser similares,etc.

El sistema no debe tomar por sorpresa al usuario.

Si un comando opera en una forma conocida, el usuario debe ser capaz de predecir la operacin de un comando parecido.

El sistema debe proveer alguna ayuda cada vez que el usuario cometa un error y dar la posibilidad a est corregir el error antes de ejecutarlo.

Est debe incluir comandos para de para deshacer acciones, acciones de confirmacin o destruccin, tal como destruccin de archivos, etc. Sistemas de ayuda, manuales de lnea,etc.

Las guas de usuario deben fungir como suplementos.

Dos problemas deben ser direccionados en el diseo de sistemas interactivos.

Como es que la informacin es proporcionada por el usuario al sistema? Cmo debe proporcionar la informacin el sistema estando presente el usuario?

La interaccin y presentacin de informacin debe integrarse a travs de un cuadro de trabajo coherente de tal forma que la interfaz de usuario se adapte a los fines requeridos.

Una manipulacin directa de la interface presenta al usuario un espacio donde puede visualizar su informacin, la cual es modificada a travs de una accin directa. Por ejemplo nombres en un campo determinado cambian al escribir un nuevo nombre sobre ellos. Una forma caracterstica de una interface es un ejemplo simple de una manipulacin directa de la interface. Las (GUI Interfaz grfica de usuario) proveen una manipulacin directa. Por ejemplo los archivos pueden borrarse moviendo los iconos hacia el icono de un bote de basura disponible en el entorno del sistema.

NE W BOOK Title Author Publisher Edition Classification Date of purchase ISBN Price Publication date Number of copies Loan status Order status

El usuario siente el control de su equipo de computo se siente menos intimidado por l. El usuario aprende en un tiempo relativamente corto. Los usuarios obtienen casi inmediatamente una retroalimentacin de sus mltiples interacciones con el equipo sean buenas o no, y es capaz de reconocerlas y corregirlas casi instantneamente.

La derivacin de la informacin apropiada para manipular el modelo puede ser demasiado difcil. Permitir que los usuarios tengan demasiada informacin del entorno, plantea la cuestin de Qu tan fcil debe ser la navegacin a travs del sistema en cuestin? Las interfaces de manipulacin directa pueden ser tan complejas como para ser programadas y por tanto exigir mayores requerimientos del sistema en cuestin.

reas de trabajo metamorfas.

El modelo de una interfaz es una especie de rea de trabajo con iconos que representan archivos , gabinetes, etc. El modelo de la interfaz es un panel de control fsico con una interfaz de entidades incluida:
Botones Interruptores Mens Luces Desplegados Desplazamientos laterales

Control de panel Metamorfo.

Title Method Type Selection

JSD. example JSD Network Process Units Reduce

Grid

Busy

cm Full

OUIT

PRINT NODE LINKS FONT LABEL EDIT

Los usuarios hacen una seleccin de una lista de posibilidades mostradas por ellos a travs del sistema. La seleccin puede ser hecha apuntando y seleccionando con un Mouse, usando las llaves del cursor o simplemente tecleando el nombre de su eleccin. Tal vez sea necesario el uso de una terminal ms amigable tal como un monitor de pantalla capacitiva Touchscreen.

Los usuarios no necesitan recordar nombres de comandos como siempre son presentados como una lista de comandos validos. El esfuerzo de escribir secuencias es mnimo. Los errores de usuario son atrapados por la interface. La dependencia del contexto de ayuda puede proveerse. El contexto de usuario est indicado por la seleccin del men actual.

Acciones que involucran conjunciones lgicas (AND) o disyunciones (OR) son difciles de representar. Los mens del sistema son la mejor manera de presentar un nmero pequeo de opciones. Si existen muchas opciones, algunos mens estructuralmente fciles deben usarse. Los usuarios experimentados encuentran mens ms abajo que el lenguaje emplado para los comandos.

Mens desplazables.

Cuando una opcin no se despliega, el men puede desplasarze con el fin de mostrar ms opciones. Lo anterior no es prctico si existe un nmero muy grande de opciones. Los mens se organizan de forma jerrquica. Seleccionando un visor que puede desplegar varios submens. La seleccin de un men provoca que se muestre otro men. Cuando un men es seleccionado, un panel de control se abre enfrente del anterior revelando diversas opciones.

Mens Jerrquicos.

Mens mviles.

Panel de control Asociados.

Times Helvetica Pala tino Bookface Frutiger Gothic Symbol

9 Point 10 Point 12 Point 14 Point 18 Point 24 Point 36 Point 48 Point

Plain Bold Italic Underline S hadow

El usuario puede acceder comandos con el fin de proveer instrucciones al sistema. Por ejemplo UNIX. Puede ser implementado usando terminales menos costosas. Fcil de procesar empleando tcnicas de compilacin. Comandos de complejidad arbitraria pueden ser creados a travs del comando de combinacin. Interfaces concisas requieren mnima escritura para ser creadas.

Los usuarios tiene que aprender y recordar un lenguaje de comandos. Las interfaces de comando son adems inaccesibles para usuarios ocasionales. Los usuarios cometen errores de comandos. Una deteccin y recuperacin del sistema es necesaria. La interaccin del sistema es por medio de un teclado habilitado

Siempre es preferible para usuarios experimentados debido a que ellos tienen una interaccin ms rpida con el sistema. Lo anterior no se aplica para usuarios casuales o inexpertos. Tal vez establecido como una alternativa para un men de comandos (Secuencias cortas de teclado). En la mayora de los casos, una interfaz de lenguaje de comandos y una interfaz de men basado estn soportadas al mismo tiempo.

Gr aphical user interface

Command language interface

GUI manager

Command language interprerter

Application software system

Informacin Esttica.
Inicializando al principio de la sesin. Est realmente no cambia durante la sesin. Puede ser numrica o texto.

Informacin Dinmica.
Cambios durante la sesin se actualizan automticamente al momento de establecer comunicacin con el sistema de usuario. Puede ser numrica o texto.

Si el usuario est interesado en una informacin precisa o relacin entre datos? Qu tan pronto los valores que representan la informacin deben cambiar? Debe el cambio indicarse inmediatamente? Debe el usuario tomar algunas acciones en respuesta al cambio? Existe alguna Interface de Manipulacin Directa? La informacin es textual o numrica? Son los valores relativamente importantes?

Information to be displayed

Presentation software

Display

Jan 2842 4000

Feb Mar 2851 3164

April 2789

May 1273

June 2835

3000

2000

1000

0 Jan Feb Mar April May June

Presentacin Digital.
Compacto-Toma un poco ms de espacio en el monitor. Valores precisos pueden ser comunicados.

Presentacin Analgica.
Fcil de acceder con una calidad de impresin de mayor calidad. Posibilidad de mostrar valores relativos. Fcil de visualizar de manera genial datos numericos.

1 4 3 2 0 10 20

Dial with needle

Pie chart

Thermometer

Horizontal bar

Pressure 0 100 200 300 400 0 25

T emper atu re 50 75 100

The filename you have chosen h as been used. Please choose an other name Ch. 17. User interface design OK Cancel

Concierne a las tcnicas para visualizar grandes montos de informacin. La visualizacin puede revelar la relacin entre las entidades y entre los datos. Los tipos de visualizaciones posibles son:
Informacin del clima obtenida de fuentes numricas El estado de una red telefnica. Un modelo de una molcula en 3 dimensiones

Es la adicin extra de colores hacia una interfaz que puede llevar al usuario a entender las estructuras complejas de informacin. Pueden ser usados en eventos excepcionales. Los errores comunes en el uso de los colores de los diseos incluyen:
El uso de colores para el significado de comunicacin. El sobreuso de colores para el desplegado.

No se pueden usar muchos colores El codificado de los colores debe soportar el uso de tareas. Para el control todos los usuarios deben codificar color. Diseo de los monocromticos, hay que aadirles color. Codificacin de colores debe ser consistente. Evitar el parpadeo de los colores. La oportunidad de usar color. Para el despliegue de color debe permitir que sea de muy baja resolucin.

El sistema de gua del usuario es integrado con la Interfaz de usuario, cuando se necesita que la informacin del sistema realice algn tipo de error. Gua cubierta del usuario:
Los mensajes del sistema, incluyen mensajes de error. Proveer informacin al usuario. Ayuda en lnea.

Los mensajes de ayuda en el sistema pueden estar integrados.

Application

Help interface

Error message system

Message presentation system

Help frames

Error message texts

El diseo de mensajes de error es importantemente critica. Los mensajes de error pobre puede significar que un usuario prefiera rechazar que aceptar el sistema. Los mensajes deberan ser amables. Concisos., consistentes y constructivos. El fondo que el usuario debe experimentar debera ser un factor determinante en el diseo de mensajes.

Context Experience

Skill level

Style Culture

The user guidance system should be aware of what the user is doing and should adjust the output message to the current context. As users become familiar with a system they become irritated by long, meaningful messages. However, beginners find it difficult to understand short terse statements of the problem. The user guidance system should provide both types of message and allow the user to control message conciseness. Messages should be tailored to the users skills as well as their experience. Messages for the different classes of user may be expressed in different ways depending on terminology which the is familiar to the reader. Messages should be positive rather than negative. They should use the active rather than the passive mode of address. They should never be insulting or try to be funny. Wherever possible, the designer of messages should be familiar with the culture of the country where the system is sold. There are distinct cultural differences between Europe, Asia and America. A suitable message for one culture might be unacceptable in another.

Please type the patient name in the bo Bates , J.

x then c lick on OK

OK

Cancel

?
Patient J . Bates is not kno

Err or #27 In valid patient id

wn to the system

Patients Help Retr y

Clic k on P atients f or a list of kno wn patients Clic k on Retr y to re-input a patient name Clic k on Help f or more inf or mation

Ayuda? significa ayuda, yo quiero informacin Ayuda! significa ayuda,yo estoy en problemas Ambos de estos requerimientos tienen que ser tomados en consideracin en el diseo de la ayuda del sistema. Diferentes facilidades dentro del sistema de ayuda puede ser requerido.

Simplemente no se debera estar con un manual en lnea. Las pantallas o ventanas no caben en el papel. Las caractersticas dinmicas de el despliegue pueden improvisar la presentacin de la informacin. La gente no es buena leyendo ventanas como texto.

Mltiples puntos de entrada deberan ser provistos dentro del sistema de ayuda de diferentes lugares. Algunas indicaciones donde el usuario se posesiona en el sistema de ayuda es valuado. Las facilidades estarn provedas a todos los usuarios para navegar y atravesar el sistema de ayuda.

Top-level entry

Entry from application

Entry from error message system

Help frame network

Help frame map

Mail redirection Mail may be redirected to another network user by pressing the redirect button in the control panel. The system asks for the name of the user or users to whom the mail has been sent

You are here

more

next

top ics

Help history 1. 2. 3. 4. Mail Send mail Read mail Redirection

Tan bueno como la informacin en lnea, la documentacin en papel debera ser sustituida con un sistema. La documentacin puede estar diseada para un rango de usuarios tanto inexpertos como expertos. Tan bueno como un manual. Otras documentaciones de uso fcil deberan ser provistas.

System evaluators

System administrators

Novice users

Experienced users

System administrators

Functional description

Installation document

Introductory manual

Reference manual

Administrators guide

Description of services

How to install the system

Getting started

Facility description

Operation and maintenance

Descripcin funcional

Breve descripcin de lo que puede hacer el sistema Describe todo el sistema con detalle Describe como se instala el sistema Describe como se desarrolla el sistema cuando esta en uso

Manual referente del sistema

Manual del sistema para la instalacin

Manual del sistema administrador

Algunas evaluaciones para el diseo de la interface de usuario pueden ser acarreados fuera del alcance de estos. Una evaluacin con escala completa es muy cara e impractica para muchos sistemas Idealmente una interface puede evaluar una vez mas una especificacin utilizada, sin embargo es raro para cada especificacin ser producida.

Attribute Learnability Speed of operation Robustness Recoverability Adaptability

Description How long does it take a new user to become productive with the system? How well does the system response match the users work practice? How tolerant is the system of user error? How good is the system at recovering from user errors? How closely is the system tied to a single model of work?

Preguntas para la retroalimentacion del usuario. La grabacin del vdeo del sistema usa una evaluacin subsecuente. La instrumentacin del cdigo para la informacin coleccionada facilita que el usuario controle los errores. La provisin de un botn de celdas para el usuario en lnea es retroalimentado.

El diseo de interfaces puede ser centrada al usuario. Una interface debera ser lgica y consistente y la ayuda de usuarios recupera errores. El sistema de men debe de ser tan bueno como para usuarios de sistemas ocasionales. El despliegue grfico puede utilizarse para representar tendencias y valores aproximados. El despliegue digital es cuando es requerida la precisin. Puede el color utilizarse regado y consistente.

Pueden los sistemas proveer ayuda en lnea. Esto incluye ayuda cuando se encuentran en problemas y ayuda cuando se requiere informacin. Los mensajes de error pueden ser positivos como negativos. Diferentes tipos de rangos, son provistos para el documento de usuarios. Idealmente, una interface de usuario puede evaluar , una vez hecha la especificacin de usabilidad.