Interacción humanocomputadora5

667 views
607 views

Published on

GUIS

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
667
On SlideShare
0
From Embeds
0
Number of Embeds
200
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Interacción humanocomputadora5

  1. 1. Diseño de interfaces gráficasde usuario (GUIs) Dr. Andrés Adolfo Navarro Newball
  2. 2. Contenido GUI Estilos de Interfaz Porque? Forma de diálogo Consideraciones de diseño Modos Diseño visual Tarea
  3. 3. 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. Todays 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 havent 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 systems 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.
  4. 4. Estilos de InterfazInterfaz de ComandosContraste con J. Raskin basadoEn lenguaje natural Interfaz basada en ménús
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. Estilos de Interfaz
  9. 9. Porque? Se busca: Rapidez de aprendizaje Rapidez de uso Disminución de tasa de errores Fácil recuerdo Atractiva
  10. 10. Forma de diálogo Uso de GUIs similar a aprender un idioma extranjero Significado: contenido o mensaje Forma: como se da el significado Diseñ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
  11. 11. Forma de diálogo Diseño de la forma Secuenciamiento: Diseño sintáctico Tiene que ver con técnicas de interacción Binding: Diseño léxico Relación con las primitivas del hardware
  12. 12. 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
  13. 13. 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
  14. 14. 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.
  15. 15. 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
  16. 16. 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. Backspace Buscar y reemplazar
  17. 17. 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
  18. 18. Consideraciones de diseño Minimizar memorización No obscurecer el área de trabajo con la ayuda Nombrar adecuadamente los objetos Agrupar por funcionalidad
  19. 19. 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
  20. 20. 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
  21. 21. Diseño visual Agrupamiento y cerramiento 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 Proximidad y similaridad
  22. 22. 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
  23. 23. 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
  24. 24. Diseño visual Consistencia del diseño Aplicación consistente de lo anterior Tiene que ver con la consistencia
  25. 25. 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 Balanceo Gridding
  26. 26. Bibliografía www.whatis.com Computer graphics: principles and practice. Foley, van Dam, Feiner, Hughes

×