Interfaz grafica

659 visualizaciones

Publicado el

Elementos de una interfaz gráfica

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
659
En SlideShare
0
De insertados
0
Número de insertados
98
Acciones
Compartido
0
Descargas
10
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Interfaz grafica

  1. 1. INTERFAZ GRÁFICA DE USUARIO
  2. 2. DEFINICIÓN INTERFAZ GRÁFICA DE USUARIO • IGU – Interfaz Gráfica de Usuario • GUI - Graphical User Interface • Es la parte de la aplicación con la que el usuario interactúa • Habitualmente se identifica con los elementos en pantalla: • Menús • Barras de navegación • Iconos • Botones • Textos • Imágenes • …etc.
  3. 3. MODELO MENTAL • Concepto que proviene de la psicología, es un mecanismo del pensamiento mediante el cual un ser humano intenta explicar como funciona el mundo real.
  4. 4. MODELO MENTAL • En IGU, es la representación mental que construye una persona para comprender el funcionamiento de un sistema. • Ayudar a los usuarios a formar un acertado y útil modelo mental del sistema.
  5. 5. PARADIGMAS PARA LA INTERFAZ DE USUARIO (ALAN COOPER) • Paradigmas en el diseño de interfaces: • Paradigma Tecnológico, se basa en entender como trabajan las cosas • Paradigma Metafórico, se basa en intuir como trabajan las cosas • Paradigma Idiomático, se basa en aprender como se llevan a cabo las cosas
  6. 6. PARADIGMAS PARA LA INTERFAZ DE USUARIO (ALAN COOPER) • Paradigma Tecnológico • La interfaz expresa los elementos de la tecnología en que se ha construido, muestra el esquema interior del software • El usuario ha de entender cómo funciona para poder interactuar con él • No es el software el que se adapta al usuario sino al revés
  7. 7. PARADIGMAS PARA LA INTERFAZ DE USUARIO (ALAN COOPER) • Paradigma Metafórico • 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
  8. 8. PARADIGMAS PARA LA INTERFAZ DE USUARIO (ALAN COOPER) • Son ampliamente conocidas metáforas como “escritorio”, “papelera”, “carpeta”, “documento”, “ventana”
  9. 9. PARADIGMAS PARA LA INTERFAZ DE USUARIO (ALAN COOPER) • Paradigma Idiomático • Está basado en la forma en que aprendemos nuevos lenguajes • Sólo depende de la habilidad de los humanos para aprender • Por ejemplo, el ratón no es la metáfora de nada pero se aprende a usar de forma efectiva • Las barras de scroll son otro ejemplo de lo mismo, no representan nada pero se aprenden muy fácilmente • En la realidad no es tan fácil “deshacer” (undo)
  10. 10. PARADIGMA IDIOMÁTICO • El diseño de interfaz también construye su propia gramática • Soluciona los problemas de los dos paradigmas anteriores • Los elementos de un GUI son elementos que entendemos idiomáticamente más que intuirlos metafóricamente • Sólo se depende de la habilidad para aprender • No se fuerza a entender el Cómo y el Por qué. • Las metáforas útiles se pueden acabar, pero siempre se puede crear un nuevo idioma
  11. 11. PRINCIPIOS DEL DISEÑO IGUS • Simplicidad • Consistencia • Familiaridad • Disponibilidad • Flexibilidad • Eficacia • Predicción • Retroalimentación (Feedback) • Seguridad (Estabilidad) • Affordance
  12. 12. PRINCIPIOS DEL DISEÑO IGUS • Simplicidad
  13. 13. PRINCIPIOS DEL DISEÑO IGUS • Consistencia • Dentro de toda la aplicación se conserva una unidad entre los elementos: secuencia de acciones, términos, composición, colores, tipografía, etc.
  14. 14. PRINCIPIOS DEL DISEÑO IGUS • Familiaridad • Cuando el usuario puede apoyarse en sus experiencias previas para prever el comportamiento de un sistema.
  15. 15. PRINCIPIOS DEL DISEÑO IGUS • Familiaridad • 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
  16. 16. REDESCUBRIR DISPOSITIVOS REALES DE INTERACCIÓN • Familiaridad
  17. 17. PRINCIPIOS DEL DISEÑO IGUS • Disponibilidad • Recordarle al usuario las opciones disponibles, evitando que tenga que memorizar funciones.
  18. 18. PRINCIPIOS DEL DISEÑO IGUS • Eficacia / Eficiencia / Satisfacción
  19. 19. PRINCIPIOS DEL DISEÑO IGUS • Predicción: • 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
  20. 20. PRINCIPIOS DEL DISEÑO IGUS • Retroalimentación (Feedback)
  21. 21. PRINCIPIOS DEL DISEÑO IGUS • Retroalimentación (Feedback)
  22. 22. PRINCIPIOS DEL DISEÑO IGUS • Retroalimentación (Feedback) http://www.mediavida.com/foro/90/cool-and-creative-404-error-pages-367866
  23. 23. PRINCIPIOS DEL DISEÑO IGUS • Affordance

×