Interfaz Gráfica de Usuario

11,892 views

Published on

Interfaz Gráfica de Usuario

Published in: Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,892
On SlideShare
0
From Embeds
0
Number of Embeds
382
Actions
Shares
0
Downloads
386
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Interfaz Gráfica de Usuario

  1. 2. Definición interfaz gráfica de usuario <ul><li>IGU – Interfaz Gráfica de Usuario </li></ul><ul><li>GUI - Graphical User Interface </li></ul><ul><li>Es la parte de la aplicación con la que el usuario interactúa </li></ul><ul><li>Habitualmente se identifica con los elementos en pantalla: </li></ul><ul><ul><li>Menús </li></ul></ul><ul><ul><li>Barras de navegación </li></ul></ul><ul><ul><li>Iconos </li></ul></ul><ul><ul><li>Botones </li></ul></ul><ul><ul><li>Textos </li></ul></ul><ul><ul><li>Imágenes </li></ul></ul><ul><ul><li>… etc. </li></ul></ul>
  2. 3. Redescubrir dispositivos reales de interacción <ul><li>Parte del trabajo de diseñador de interfaces consiste en re-descubrir los principios que rigen los dispositivos de interacción presentes en la vida cotidiana y llevarlos a la pantalla interactiva </li></ul>
  3. 4. Redescubrir dispositivos reales de interacción
  4. 5. Paradigmas para la interfaz de usuario (Alan Cooper) <ul><li>Paradigmas en el diseño de interfaces: </li></ul><ul><li>Paradigma Tecnológico, se basa en entender como trabajan las cosas </li></ul><ul><li>Paradigma Metafórico, se basa en intuir como trabajan las cosas </li></ul><ul><li>Paradigma Idiomático, se basa en aprender como se llevan a cabo las cosas </li></ul>
  5. 6. Paradigmas para la interfaz de usuario (Alan Cooper) <ul><li>Paradigma Tecnológico </li></ul><ul><ul><li>La interfaz expresa los elementos de la tecnología en que se ha construido, muestra el esquema interior del software </li></ul></ul><ul><ul><li>El usuario ha de entender cómo funciona para poder interactuar con él </li></ul></ul><ul><ul><li>No es el software el que se adapta al usuario sino al revés </li></ul></ul>
  6. 7. Paradigmas para la interfaz de usuario (Alan Cooper) <ul><li>Paradigma Metafórico </li></ul><ul><ul><li>La interfaz se expresa a través de una metáfora que oculta el funcionamiento interno del programa y que se refiere a términos más o menos familiares para el usuario </li></ul></ul><ul><li>Son ampliamente conocidas metáforas como “escritorio”, “papelera”, “carpeta”, “documento”, “ventana” </li></ul>
  7. 8. Paradigmas para la interfaz de usuario (Alan Cooper) <ul><li>Paradigma Idiomático </li></ul><ul><ul><li>Está basado en la forma en que aprendemos nuevos lenguajes </li></ul></ul><ul><ul><li>Sólo depende de la habilidad de los humanos para aprender </li></ul></ul><ul><ul><ul><li>Por ejemplo, el ratón no es la metáfora de nada pero se aprende a usar de forma efectiva </li></ul></ul></ul><ul><ul><ul><li>Las barras de scroll son otro ejemplo de lo mismo, no representan nada pero se aprenden muy fácilmente </li></ul></ul></ul><ul><ul><ul><li>En la realidad no es tan fácil “deshacer” ( undo ) </li></ul></ul></ul>
  8. 9. Paradigma idiomático <ul><li>El diseño de interfaz también construye su propia gramática </li></ul><ul><li>Soluciona los problemas de los dos paradigmas anteriores </li></ul><ul><li>Los elementos de un GUI son elementos que entendemos idiomáticamente más que intuirlos metafóricamente </li></ul><ul><li>Sólo se depende de la habilidad para aprender </li></ul><ul><li>No se fuerza a entender el Cómo y el Por qué. </li></ul><ul><li>Las metáforas útiles se pueden acabar, pero siempre se puede crear un nuevo idioma </li></ul>
  9. 10. Principios del diseño IGUs <ul><li>Simplicidad </li></ul><ul><li>Consistencia </li></ul><ul><li>Contraste </li></ul><ul><li>Eficacia </li></ul><ul><li>Predicción </li></ul><ul><li>Retroalimentación ( Feedback ) </li></ul>
  10. 11. Principios del diseño IGUs <ul><li>Simplicidad </li></ul>
  11. 12. Principios del diseño IGUs <ul><li>Consistencia </li></ul><ul><li>Dentro de toda la aplicación se conserva una unidad entre los elementos: secuencia de acciones, términos, composición, colores, tipografía, etc. </li></ul>
  12. 13. Principios del diseño IGUs <ul><li>Contraste </li></ul>
  13. 14. Principios del diseño IGUs <ul><li>Eficacia </li></ul>
  14. 15. Principios del diseño IGUs <ul><li>Predicción: </li></ul><ul><li>Relacionado con el concepto de Consistencia, una vez que se aprende la mecánica del IGU, el usuario puede predecir como funciona un elemento nuevo </li></ul>
  15. 16. Principios del diseño IGUs <ul><li>Retroalimentación ( Feedback ) </li></ul>
  16. 17. Principios del diseño IGUs <ul><li>Retroalimentación ( Feedback ) </li></ul>
  17. 18. Principios del diseño IGUs <ul><li>Retroalimentación ( Feedback ) </li></ul>http://www.mediavida.com/foro/90/cool-and-creative-404-error-pages-367866

×