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