interacción humanocomputadora5
DESCRIPTION
GUISTRANSCRIPT
Diseño de interfaces gráficas de usuario (GUIs)
Dr. Andrés Adolfo Navarro Newball
Contenido
GUIEstilos de InterfazPorque?Forma de diálogoConsideraciones de diseñoModos Diseño visualTarea
GUI
A GUI (usually pronounced GOO-ee) is a graphical (rather than purely textual) user interface to a computer. As you read this, you are looking at the GUI or graphical user interface of your particular Web browser. The term came into existence because the first interactive user interfaces to computers were not graphical; they were text-and-keyboard oriented and usually consisted of commands you had to remember and computer responses that were infamously brief. The command interface of the DOS operating system (which you can still get to from your Windows operating system) is an example of the typical user-computer interface before GUIs arrived. An intermediate step in user interfaces between the command line interface and the GUI was the non-graphical menu-based interface, which let you interact by using a mouse rather than by having to type in keyboard commands.
Today's major operating systems provide a graphical user interface. Applications typically use the elements of the GUI that come with the operating system and add their own graphical user interface elements and ideas. A GUI sometimes uses one or more metaphors for objects familiar in real life, such as the desktop, the view through a window, or the physical layout in a building. Elements of a GUI include such things as: windows, pull-down menus, buttons, scroll bars, iconic images, wizards, the mouse, and no doubt many things that haven't been invented yet. With the increasing use of multimedia as part of the GUI, sound, voice, motion video, and virtual reality interfaces seem likely to become part of the GUI for many applications. A system's graphical user interface along with its input devices is sometimes referred to as its "look-and-feel."
The GUI familiar to most of us today in either the Mac or the Windows operating systems and their applications originated at the Xerox Palo Alto Research Laboratory in the late 1970s. Apple used it in their first Macintosh computers. Later, Microsoft used many of the same ideas in their first version of the Windows operating system for IBM-compatible PCs.
When creating an application, many object-oriented tools exist that facilitate writing a graphical user interface. Each GUI element is defined as a class widget from which you can create object instances for your application. You can code or modify prepackaged methods that an object will use to respond to user stimuli.
Estilos de Interfaz
Interfaz de ComandosContraste con J. Raskin basado En lenguaje natural
Interfaz basada en ménús
Estilos de Interfaz
WhatYouSeeIsWhatYouGet Evita traducir imagen
mental de los resultados deseados y el codigo de control
No son WYSIWYG 100% Diferencias leves en
impresión
Estilos de Interfaz
Manipulación directa: aquí los objetos, atributos, o relaciones sobre los que se puede operar son representados visualmente
Sirve a texto e imágenes
Estilos de Interfaz
Icónica Icono: representación
pictórica de un objeto, una acción, una propiedad, o algún otro concepto
Un buen diseño de iconos debe considerar Reconocimiento: que tan
rápido y exacto el significado del icono puede ser reconocido
Recordación: Que tan bien el significado del icono puede ser recordado una vez aprendido
Discriminación: que tan bien un icono puede ser distinguido de otro
Estilos de Interfaz
Porque?
Se busca: Rapidez de aprendizaje Rapidez de uso Disminución de tasa de errores Fácil recuerdo Atractiva
Forma de diálogo
Uso de GUIs similar a aprender un idioma extranjero
Significado: contenido o mensajeForma: como se da el significadoDiseño del significado
Conceptual: conceptos de aplicación que debe realizar el usuario. Objetos, propiedades, relaciones, operaciones.
Funcional: Funcionalidad detallada de la interfaz. Información requerida para cada operación. Diseño semántico
Forma de diálogo
Diseño de la forma Secuenciamiento:
Diseño sintácticoTiene que ver con técnicas de interacción
Binding:Diseño léxicoRelación con las primitivas del hardware
Consideraciones de diseño
Consistencia: un sistema consistente es aquel en el que los modelos conceptual, funcional, de secuenciamiento y de hardware son uniformes y siguen reglas simples.
No considera excepciones ni condiciones especiales
Permite generalizar el conocimiento EJ:
Menús en la misma posición relativa Igual esquema de codificación Comandos globales Comandos genéricos
Consideraciones de diseño
Re-alimentación: elemento esencial en el diálogo
Ocurre en tres niveles: Funcional
Indicación de que el computador está trabajando en un problema
Mostrar el resultado de una operación
Secuencial Resaltar menús. Permite
saber la aceptación de la acción
Hardware Movimiento del cursor,
posterior al ratón Eco de las teclas Nivel más bajo
Consideraciones de diseño
Re-alimentación En el dominio del
problema: se refiere a los objetos siendo manipulados
En el dominio de control: se refiere a los mecanismos para controlar el sistema interativo. Ej: estdo, cuadors de diálogo, menús.
Consideraciones de diseño
Minimizar posibilidades de error No ofrecer opciones
ilegales Ej: volverlas grises
(deshabilitadas) Se maneja
sensibilidad al contexto. Comandos válidos sólo en ese contexto
Consideraciones de diseño
Brindar recuperación de errores Deshacer. Reversar el resultado de un comando.
Restaura el sistema a su estado anterior. Abortar. Termina prematuramente un comando
en ejecución. Restaura el sistema a su estado anterior.
Cancelar. Cuando no quiero ejecutar algo Corregir.
BackspaceBuscar y reemplazar
Consideraciones de diseño
Maneje múltiples niveles de habilidad. Novatos: menus Expertos: teclas acelradoras. Línea de
comandos, múltiples clicks Mecanismos de ayuda Extensibilidad de la interfaz. Ej: macros Ocultar opciones específicas y complejas
Consideraciones de diseño
Minimizar memorización No obscurecer el área de trabajo con la
ayuda Nombrar adecuadamente los objetos Agrupar por funcionalidad
Modos
Modo: colección de estados en que sólo un conjunto de tareas de interacción puede realizarse
Un modo dañino no es visible al usuario y no cumple un papel significativo
Un modo útil estrecha las escogencias de que hacer ahora. Es más específico. Reduce el uso de memoria. Ayuda a organizar el conocimiento en categorias. Brindan re- alimentación
Diseño visual
The visual design of a user-computer interface affects both the user’s initial impression of the interface and the system’s longer-term usefulness. Visual design compromises all the graphic elements of an interface, including overall screen layout, menu and form design, use of colour, information codings, and placement of individual units of information with respect to one another. Good visual design strives for clarity, consistency, and attractive appearance
Diseño visual
Claridad visual Usar la organización
visual de la información para enfatizar la organización lógica
Aplicación de las leyes de Gestalt: similaridad, proximidad, cerramiento, buena continuación
Agrupamiento y cerramiento
Proximidad y similaridad
Diseño visual
Códigos visuales: se trata de crear distinciones visuales en torno diferentes tipos de objetos
Técnicas: color, forma, tamaño, longitud
Para 95% libre de error 10 colores 6 tamaños de area 6 longitudes 4 intensidades 24 angulos 15 formas geométricas
Es posible el uso de códigos redundantes
Diseño visual
Códigos visuales Cuantos niveles de
codificación se requieren?
Información nominativa: nombra o designa distintos tipos de cosas. Ej: tipos de aviones. Se sugiere color
Ordinal: posee relación menor mayor. Estilos de líneas con distintas densidades
Ratio: expresa cantidad. Se sugiere codigo que varíe continuamente. Ej: posición en una escala
Diseño visual
Consistencia del diseño Aplicación consistente de lo anterior Tiene que ver con la consistencia
Diseño visual
Principios de layout Diseño de los
elementos de la interfaz para trabajar en conjunto
Considerar:Proporción
• 1:1 1:1.414 1:2 1:1.618
BalanceoGridding
Bibliografía
www.whatis.comComputer graphics: principles and
practice. Foley, van Dam, Feiner, Hughes