Š Diseño

de interfaces gráficas para sistemas de software.

Š Š Š Š Š

Sugerir algunos principios generales de diseño para desarrollar interfaces gráficas de usuario. Describir la manipulación directa de dichas interfaces. Disertación de los factores a considerar para el diseño de presentaciones. Descripción del soporte de usuario que esta integrado en la interfaz de usuario. Introducción a la versatilidad de los atributos y aproximación de sistemas hacia sistemas de evaluación.

Š Š Š Š

Š Š

Introducción Interfaz del Usuario. Principios de Diseño. Interacción (Sistema-Usuario). Presentación de la información correspondiente. Guía de Usuario. Evaluación de la Interfaz.

. Un diseño de interfaz pobre puede provocar que el usuario cometa errores catastróficos.Š Š Š Š Usuarios de sistema frecuentemente juzgan un sistema por su interfaz. El objetivo del presente capitulo es el diseño de interfaces gráficas de usuario. El diseño de una interfaz de usuario pobre es la razón por la cual muchos sistemas nunca son usados.

desplegado de menús y punteros. Llamadas previas interfaces WIMP ²referidas en la actualidad de manera general con la acepción (GUIs .Š Š Š Interfaces de usuario que se soportan en Windows. La forma estándar de una interfaz para estaciones de trabajo y computadoras personales de alta potencia. .graphical user interface). iconos representación de entidades.

Icons different types of information. On some systems.Characteristic Windows Icons Menus Pointing Graphics Description Multiple windows allow different information to be displayed simultaneously on the user¶s screen. . Graphical elements can be mixed with text on the same display. 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. on others. icons represent files.

Š Son fáciles de aprender y usar. ƒ Usuarios sin experiencia pueden aprender el uso del sistema rápidamente. . Š El usuario puede cambiar rápidamente desde una proceso a otro y puede interactuar con diferentes aplicaciones a la vez. Š Rápido. ƒ La información aparece visible en su propia ventana cuando la atención cambia. interacción 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 diseño en papel Evaluar el diseño con los usuarios finales Diseñar el prototipo Producir el prototipo del diseño dinámico Evaluar el diseño con los usuarios finales Prototipo ejecutable Implementar la interfaz del usuario final .

Š Consistencia: ƒ .Š Familiaridad del usuario: ƒ Utilizar términos y conceptos que se toman de la experiencia de las personas que más 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.

Esto puede ser de dos formas: Confirmación de acciones destructivas Proveer de un recurso para deshacer Š Recuperabilidad: ƒ . La interfaz debe incluir mecanismos para permitir a los usuarios recuperarse de los errores.Š Mínima sorpresa: ƒ El comportamiento del sistema no debe provocar sorpresa a los usuarios.

la interfaz debe proveer retroalimentación significativa y características de ayuda sensible al contexto. La interfaz debe proveer características de interacción apropiada para los diferentes tipos de usuarios.Š Guía al usuario: ƒ Cuando los errores ocurren . Š Diversidad de usuarios: ƒ .

. Los usuarios deberían involucrarse en el proceso de diseño y el diseño de interfaces de usuario deben refinarse hacia rápidos prototipos.Š Š Š El diseño de interfaces de Usuario toma en cuenta las necesidades. experiencia y capacidades de los usuarios del sistema. Existen factores cognoscitivos. que el diseño la interfaz de usuario deben tomarse en cuenta. como el tamaño de pequeños términos de memoria.

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. .

etc. un sistema de oficinas debe utilizar conceptos como cartas. Así como directorios. etc. . folders etc. identificadores de archivos. las puntuaciones de los comandos deben ser similares.Š La interfaz debe basarse en los términos orientados de usuario y conceptos sobre los conceptos informáticos. Š El sistema deberá mostrar un nivel apropiado de consistencia. documentos. ƒ Por ejemplo. ƒ Los comandos y los menús deban mantener el mismo formato.

manuales de línea. ƒ Si un comando opera en una forma conocida.etc. ƒ . acciones de confirmación o destrucción. Š 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. tal como destrucción de archivos. ƒ Esté debe incluir comandos para de para deshacer acciones. el usuario debe ser capaz de predecir la operación de un comando parecido.Š El sistema no debe tomar por sorpresa al usuario. Sistemas de ayuda. etc. Š Las guías de usuario deben fungir como suplementos.

Š Dos problemas deben ser direccionados en el diseño de sistemas interactivos. ¿Como es que la información es proporcionada por el usuario al sistema? ƒ ¿Cómo debe proporcionar la información el sistema estando presente el usuario? ƒ Š La interacción y presentación de información debe integrarse a través de un cuadro de trabajo coherente de tal forma que la interfaz de usuario se adapte a los fines requeridos. .

Š Š Š Una manipulación directa de la interface presenta al usuario un espacio donde puede visualizar su información. Una forma característica de una interface es un ejemplo simple de una manipulación directa de la interface. Por ejemplo nombres en un campo determinado cambian al escribir un nuevo nombre sobre ellos. la cual es modificada a través de una acción directa. Las (GUI ´Interfaz gráfica de usuarioµ) proveen una manipulación 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 .

Los usuarios obtienen casi inmediatamente una retroalimentación de sus múltiples interacciones con el equipo sean buenas o no. El usuario aprende en un tiempo relativamente corto.Š Š Š El usuario siente el control de su equipo de computo se siente menos intimidado por él. . y es capaz de reconocerlas y corregirlas casi instantáneamente.

Š Š Š La derivación de la información apropiada para manipular el modelo puede ser demasiado difícil. Permitir que los usuarios tengan demasiada información del entorno. . plantea la cuestión de ¿Qué tan fácil debe ser la navegación a través del sistema en cuestión? Las interfaces de manipulación directa pueden ser tan complejas como para ser programadas y por tanto exigir mayores requerimientos del sistema en cuestión.

Š Áreas de trabajo metamorfas. El modelo de la interfaz es un panel de control físico con una interfaz de entidades incluida: Botones Interruptores Menús Luces Desplegados Desplazamientos laterales Š Control de panel Metamorfo. etc. gabinetes. ƒ El modelo de una interfaz es una especie de área de trabajo con iconos que representan archivos . ƒ .

Title Method Type Selection JSD. example JSD Network Process Units Reduce Grid Busy cm Full OUIT PRINT NODE LINKS FONT LABEL EDIT .

Tal vez sea necesario el uso de una terminal más amigable tal como un monitor de pantalla capacitiva ´Touchscreenµ. . usando las llaves del cursor o simplemente tecleando el nombre de su elección.Š Š Š Los usuarios hacen una selección de una lista de posibilidades mostradas por ellos a través del sistema. La selección puede ser hecha apuntando y seleccionando con un ´Mouseµ.

El contexto de usuario está indicado por la selección del menú actual. La dependencia del contexto de ayuda puede proveerse. El esfuerzo de escribir secuencias es mínimo. Los errores de usuario son atrapados por la interface.Š Š Š Š Los usuarios no necesitan recordar nombres de comandos como siempre son presentados como una lista de comandos validos. .

Los usuarios experimentados encuentran menús más abajo que el lenguaje emplado para los comandos. . Los menús del sistema son la mejor manera de presentar un número pequeño de opciones.Š Š Š Acciones que involucran conjunciones lógicas (AND) o disyunciones (OR) son difíciles de representar. Si existen muchas opciones. algunos menús estructuralmente fáciles deben usarse.

Cuando un menú es seleccionado. ƒ . ƒ Cuando una opción no se despliega. el menú puede desplasarze con el fin de mostrar más opciones. Š Menús Jerárquicos. Lo anterior no es práctico si existe un número muy grande de opciones. ƒ Š Panel de control Asociados. La selección de un menú provoca que se muestre otro menú. ƒ Š Menús móviles. Seleccionando un visor que puede desplegar varios submenús.Š Menús desplazables. un panel de control se abre enfrente del anterior revelando diversas opciones. Los menús se organizan de forma jerárquica.

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 .

Puede ser implementado usando terminales menos costosas. Fácil de procesar empleando técnicas de compilación.Š Š Š Š Š El usuario puede acceder comandos con el fin de proveer instrucciones al sistema. . Comandos de complejidad arbitraria pueden ser creados a través del comando de combinación. Por ejemplo UNIX. Interfaces concisas requieren mínima escritura para ser creadas.

Š Š Š Los usuarios tiene que aprender y recordar un lenguaje de comandos. Una detección y recuperación del sistema es necesaria. Las interfaces de comando son además inaccesibles para usuarios ocasionales. Los usuarios cometen errores de comandos. La interacción del sistema es por medio de un teclado habilitado .

una interfaz de lenguaje de comandos y una interfaz de menú basado están soportadas al mismo tiempo.Š Š Š Siempre es preferible para usuarios experimentados debido a que ellos tienen una interacción más rápida con el sistema. . Tal vez establecido como una alternativa para un menú de comandos (Secuencias cortas de teclado). En la mayoría de los casos. Lo anterior no se aplica para usuarios casuales o inexpertos.

Gr aphical user interface Command language interface GUI manager Command language interprerter Application software system .

Cambios durante la sesión se actualizan automáticamente al momento de establecer comunicación con el sistema de usuario. ƒ Puede ser numérica o texto. ƒ Puede ser numérica o texto. ƒ Š Información Dinámica.Š Información Estática. ƒ . Está realmente no cambia durante la sesión. Inicializando al principio de la sesión.

Š Š Š Š Š Š Š ¿Si el usuario está interesado en una información precisa o relación entre datos·? ¿Qué tan pronto los valores que representan la información deben cambiar? ¿Debe el cambio indicarse inmediatamente? ¿Debe el usuario tomar algunas acciones en respuesta al cambio? ¿Existe alguna Interface de Manipulación Directa? ¿La información es textual o numérica? ¿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 .

Š Presentación Digital. ƒ . ƒ Š Presentación Analógica. ƒ Posibilidad de mostrar valores relativos. Compacto-Toma un poco más de espacio en el monitor. Fácil de acceder con una calidad de impresión de mayor calidad. ƒ Valores precisos pueden ser comunicados. ƒ Fácil 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 técnicas para visualizar grandes montos de información. La visualización puede revelar la relación entre las entidades y entre los datos. Los tipos de visualizaciones posibles son:
Información del clima obtenida de fuentes numéricas ƒ El estado de una red telefónica. ƒ Un modelo de una molécula en 3 dimensiones
ƒ

Š

Š Š

Es la adición extra de colores hacia una interfaz que puede llevar al usuario a entender las estructuras complejas de información. Pueden ser usados en eventos excepcionales. Los errores comunes en el uso de los colores de los diseños incluyen:
El uso de colores para el significado de comunicación. ƒ El sobreuso de colores para el desplegado.
ƒ

Para el control todos los usuarios deben codificar color. . La oportunidad de usar color. Diseño de los monocromáticos. hay que añadirles color. Para el despliegue de color debe permitir que sea de muy baja resolución. Evitar el parpadeo de los colores. Codificación de colores debe ser consistente.Š Š Š Š Š Š Š Š No se pueden usar muchos colores El codificado de los colores debe soportar el uso de tareas.

ƒ Proveer información al usuario. ƒ Ayuda en línea. .Š Š El sistema de guía del usuario es integrado con la Interfaz de usuario. incluyen mensajes de error. ƒ Š Los mensajes de ayuda en el sistema pueden estar integrados. cuando se necesita que la información del sistema realice algún tipo de error. Guía cubierta del usuario: Los mensajes del sistema.

Application Help interface Error message system Message presentation system Help frames Error message texts .

Los mensajes de error pobre puede significar que un usuario prefiera rechazar que aceptar el sistema. consistentes y constructivos.Š Š Š El diseño de mensajes de error es importantemente critica.. . Los mensajes deberían ser amables. El fondo que el usuario debe experimentar debería ser un factor determinante en el diseño de mensajes. Concisos.

µmeaningful¶ messages. The user guidance system should provide both types of message and allow the user to control message conciseness. They should use the active rather than the passive mode of address.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. A suitable message for one culture might be unacceptable in another. Asia and America. Wherever possible. Messages should be tailored to the user¶s skills as well as their experience. the designer of messages should be familiar with the culture of the country where the system is sold. Messages should be positive rather than negative. However. Messages for the different classes of user may be expressed in different ways depending on terminology which the is familiar to the reader. . There are distinct cultural differences between Europe. They should never be insulting or try to be funny. beginners find it difficult to understand short terse statements of the problem.

x then c lick on OK OK Cancel . J.Please type the patient name in the bo Bates .

? 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 .

Diferentes facilidades dentro del sistema de ayuda puede ser requerido. yo quiero informaciónµ Ayuda! significa ´ayuda. .yo estoy en problemasµ Ambos de estos requerimientos tienen que ser tomados en consideración en el diseño de la ayuda del sistema.Š Š Š Š Ayuda? significa ¶ayuda.

La gente no es buena leyendo ventanas como texto. Las pantallas o ventanas no caben en el papel. . Las características dinámicas de el despliegue pueden improvisar la presentación de la información.Š Š Š Š Simplemente no se debería estar con un manual en línea.

. Algunas indicaciones donde el usuario se posesiona en el sistema de ayuda es valuado.Š Š Š Múltiples puntos de entrada deberían ser provistos dentro del sistema de ayuda de diferentes lugares. Las facilidades estarán proveídas 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. Mail Send mail Read mail Redirection . 2. 3. 4. 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.

Š Š Š Tan bueno como la información en línea. La documentación puede estar diseñada para un rango de usuarios tanto inexpertos como expertos. Otras documentaciones de uso fácil deberían ser provistas. Tan bueno como un manual. . la documentación en papel debería ser sustituida con un sistema.

System evaluators System administrators Novice users Experienced users System administrators Functional description Installation document Introductory manual Reference manual Administrator¶s guide Description of services How to install the system Getting started Facility description Operation and maintenance .

Š Descripción funcional ƒ Breve descripción 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 instalación ƒ Š Manual del sistema administrador ƒ .

Una evaluación con escala completa es muy cara e impractica para muchos sistemas Idealmente una interface puede evaluar una vez mas una especificación utilizada. . sin embargo es raro para cada especificación ser producida.Š Š Š Algunas evaluaciones para el diseño de la interface de usuario pueden ser acarreados fuera del alcance de estos.

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 user¶s 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? .

La provisión de un botón de celdas para el usuario en línea es retroalimentado. . La instrumentación del código para la información coleccionada facilita que el usuario controle los errores.Š Š Š Š Preguntas para la retroalimentacion del usuario. La grabación del vídeo del sistema usa una evaluación subsecuente.

. El despliegue digital es cuando es requerida la precisión. Una interface debería ser lógica y consistente y la ayuda de usuarios recupera errores. El despliegue gráfico puede utilizarse para representar tendencias y valores aproximados.Š Š Š Š El diseño de interfaces puede ser centrada al usuario. Puede el color utilizarse regado y consistente. El sistema de menú debe de ser tan bueno como para usuarios de sistemas ocasionales.

Š Š Š Š Pueden los sistemas proveer ayuda en línea. son provistos para el documento de usuarios. . Diferentes tipos de rangos. Esto incluye ayuda cuando se encuentran en problemas y ayuda cuando se requiere información. Los mensajes de error pueden ser positivos como negativos. una interface de usuario puede evaluar . una vez hecha la especificación de usabilidad. Idealmente.