Elementos de una interfaz gráfica

1. INTERFAZ GRÁFICA DE
USUARIO

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. 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. 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. 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. 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. 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. PARADIGMAS PARA LA INTERFAZ
DE USUARIO (ALAN COOPER)
• Son ampliamente conocidas metáforas como
“escritorio”, “papelera”, “carpeta”, “documento”,
“ventana”

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. 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. PRINCIPIOS DEL DISEÑO IGUS
• Simplicidad
• Consistencia
• Familiaridad
• Disponibilidad
• Flexibilidad
• Eficacia
• Predicción
• Retroalimentación (Feedback)
• Seguridad (Estabilidad)
• Affordance

12. PRINCIPIOS DEL DISEÑO IGUS
• Simplicidad

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. PRINCIPIOS DEL DISEÑO IGUS
• Familiaridad
• Cuando el usuario puede apoyarse en sus experiencias
previas para prever el comportamiento de un sistema.

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. REDESCUBRIR DISPOSITIVOS
REALES DE INTERACCIÓN
• Familiaridad

17. PRINCIPIOS DEL DISEÑO IGUS
• Disponibilidad
• Recordarle al usuario las opciones disponibles, evitando que
tenga que memorizar funciones.

18. PRINCIPIOS DEL DISEÑO IGUS
• Eficacia / Eficiencia / Satisfacción

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. PRINCIPIOS DEL DISEÑO IGUS
• Retroalimentación (Feedback)

21. PRINCIPIOS DEL DISEÑO IGUS
• Retroalimentación (Feedback)

22. PRINCIPIOS DEL DISEÑO IGUS
• Retroalimentación (Feedback)
http://www.mediavida.com/foro/90/cool-and-creative-404-error-pages-367866

23. PRINCIPIOS DEL DISEÑO IGUS
• Affordance