Interfaz Gráfica de Usuario

23

description

Interfaz Gráfica de Usuario

Transcript of Interfaz Gráfica de Usuario

Page 1: Interfaz Gráfica de Usuario
Page 2: Interfaz Gráfica de Usuario

Definición interfaz gráfica de usuario

IGU – Interfaz Gráfica de UsuarioGUI - Graphical User InterfaceEs la parte de la aplicación con la que el usuario interactúaHabitualmente se identifica con los elementos en pantalla:

MenúsBarras de navegaciónIconosBotonesTextosImágenes…etc.

Page 3: Interfaz Gráfica de Usuario

Modelo MentalConcepto que proviene de la psicología, es un mecanismo

del pensamiento mediante el cual un ser humano intenta explicar como funciona el mundo real.

Page 4: Interfaz Gráfica de Usuario

Modelo MentalEn 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.

Page 5: Interfaz Gráfica de Usuario

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 cosasParadigma Metafórico, se basa en intuir como

trabajan las cosasParadigma Idiomático, se basa en aprender como

se llevan a cabo las cosas

Page 6: Interfaz Gráfica de Usuario

Paradigmas para la interfaz de usuario (Alan Cooper)

Paradigma TecnológicoLa 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

Page 7: Interfaz Gráfica de Usuario

Paradigmas para la interfaz de usuario (Alan Cooper)

Paradigma MetafóricoLa 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

Page 8: Interfaz Gráfica de Usuario

Paradigmas para la interfaz de usuario (Alan Cooper)

Son ampliamente conocidas metáforas como “escritorio”, “papelera”, “carpeta”, “documento”, “ventana”

Page 9: Interfaz Gráfica de Usuario

Paradigmas para la interfaz de usuario (Alan Cooper)

Paradigma IdiomáticoEstá basado en la forma en que aprendemos nuevos

lenguajesSó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)

Page 10: Interfaz Gráfica de Usuario

Paradigma idiomático

El diseño de interfaz también construye su propia gramática

Soluciona los problemas de los dos paradigmas anterioresLos elementos de un GUI son elementos que entendemos

idiomáticamente más que intuirlos metafóricamenteSólo se depende de la habilidad para aprenderNo 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

Page 11: Interfaz Gráfica de Usuario

Principios del diseño IGUs

SimplicidadConsistenciaFamiliaridadDisponibilidadFlexibilidadEficaciaPredicciónRetroalimentación (Feedback)Seguridad (Estabilidad)Affordance

Page 12: Interfaz Gráfica de Usuario

Principios del diseño IGUs

Simplicidad

Page 13: Interfaz Gráfica de Usuario

Principios del diseño IGUs

ConsistenciaDentro de toda la aplicación se conserva una unidad entre

los elementos: secuencia de acciones, términos, composición, colores, tipografía, etc.

Page 14: Interfaz Gráfica de Usuario

Principios del diseño IGUs

FamiliaridadCuando el usuario puede apoyarse en sus experiencias

previas para prever el comportamiento de un sistema.

Page 15: Interfaz Gráfica de Usuario

Principios del diseño IGUs

FamiliaridadParte 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

Page 16: Interfaz Gráfica de Usuario

Redescubrir dispositivos reales de interacción

Familiaridad

Page 17: Interfaz Gráfica de Usuario

Principios del diseño IGUs

DisponibilidadRecordarle al usuario las opciones disponibles, evitando que

tenga que memorizar funciones.

Page 18: Interfaz Gráfica de Usuario

Principios del diseño IGUs

Eficacia / Eficiencia / Satisfacción

Page 19: Interfaz Gráfica de Usuario

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

Page 20: Interfaz Gráfica de Usuario

Principios del diseño IGUs

Retroalimentación (Feedback)

Page 21: Interfaz Gráfica de Usuario

Principios del diseño IGUs

Retroalimentación (Feedback)

Page 22: Interfaz Gráfica de Usuario

Principios del diseño IGUs

Retroalimentación (Feedback)

http://www.mediavida.com/foro/90/cool-and-creative-404-error-pages-367866

Page 23: Interfaz Gráfica de Usuario

Principios del diseño IGUs

Affordance