Interfaz Gráfica de Usuario

Post on 22-May-2015

8.976 views 0 download

description

Interfaz Gráfica de Usuario

Transcript of 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.

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.

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.

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

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

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

Paradigmas para la interfaz de usuario (Alan Cooper)

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

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)

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

Principios del diseño IGUs

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

Principios del diseño IGUs

Simplicidad

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.

Principios del diseño IGUs

FamiliaridadCuando el usuario puede apoyarse en sus experiencias

previas para prever el comportamiento de un sistema.

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

Redescubrir dispositivos reales de interacción

Familiaridad

Principios del diseño IGUs

DisponibilidadRecordarle al usuario las opciones disponibles, evitando que

tenga que memorizar funciones.

Principios del diseño IGUs

Eficacia / Eficiencia / Satisfacción

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

Principios del diseño IGUs

Retroalimentación (Feedback)

Principios del diseño IGUs

Retroalimentación (Feedback)

Principios del diseño IGUs

Retroalimentación (Feedback)

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

Principios del diseño IGUs

Affordance