Principios de diseo de Interfaces

25 de enero de 2012

Estilos de interfaces

Los estilos de interfaces predominantes son: La interfaz por lnea de comandos Mens y formularios Manipulacin directa - GUI Interfaces con interaccin asistida

Objetivos de una buena interfaz:

Maximizar la velocidad de aprendizaje

Minimizar la tasa de errores Maximizar la velocidad de uso Esttica adecuada

Cmo disear para mejorar la interaccin hombre-mquina y lograr buenas interfaces?

Cmo disear para mejorar la interaccin hombre-mquina y lograr buenas interfaces?

Diseo centrado en el usuario

Principios
Reglas Estndares Directrices Guas de estilo

Cmo disear para mejorar la interaccin hombre-mquina y lograr buenas interfaces? Principios
Son conceptos de muy alto nivel que deben ser utilizados en el diseo de aplicaciones.

Cmo disear para mejorar la interaccin hombre-mquina y lograr buenas interfaces? Principios A modo de ejemplo
Aliviar la carga cognitiva Confiar en el reconocimiento Proporcionar pistas visuales Proporcionar opciones por defecto Proporcionar atajos

Cmo disear para mejorar la interaccin hombre-mquina y lograr buenas interfaces? Principios A modo de ejemplo (cont.)
Aliviar la carga cognitiva Promover la sintaxis objetoaccin Emplear metforas del mundo real Emplear la revelacin progresiva para evitar abrumar al usuario. Promover la claridad visual

Cmo disear para mejorar la interaccin hombre-mquina y lograr buenas interfaces? Reglas de diseo
Guan al diseador con el fin de incrementar la usabilidad. Se clasifican en estndares y directrices.

Cmo disear para mejorar la interaccin hombre-mquina y lograr buenas interfaces? Estndares
Son requisitos, reglas o recomendaciones basadas en principios probados y en prctica.

Cmo disear para mejorar la interaccin hombre-mquina y lograr buenas interfaces? Directrices
Las directrices recomiendan acciones que se basan en un conjunto de principios de diseo. Son ms especficas que los principios y requieren menos experiencia para entenderlas e interpretarlas que stos.

Cmo disear para mejorar la interaccin hombre-mquina y lograr buenas interfaces? Guas de estilo
Llamadas tambin guas corporativas. Estn basadas en principios y contienen directrices que se concretan a muy bajo nivel.

Cmo disear para mejorar la interaccin hombre-mquina y lograr buenas interfaces?

Guas de estilo
Llamadas tambin guas corporativas. Estn basadas en principios y contienen directrices que se concretan a muy bajo nivel. Las guas de estilo corporativas se centran en presentaciones comunes, comportamientos y tcnicas que deben ser implementadas por todos los productos en una compaa.

Algunos principios de diseo de interfaces

Algunos principios de diseo de interfaces grficas Consistencia La consistencia en una interfaz permite a los usuarios transferir sus conocimientos y destrezas de una aplicacin a otra.

Algunos principios de diseo de interfaces grficas Consistencia La consistencia en una interfaz permite a los usuarios transferir sus conocimientos y destrezas de una aplicacin a otra.

La consistencia en las interfaces grficas ayuda a los usuarios a aprender y reconocer fcilmente el lenguaje grfico de esa interfaz.

Algunos principios de diseo de interfaces grficas Consistencia La consistencia en el comportamiento de una interfaz significa que los usuarios aprenden cmo hacer las cosas, por ejemplo apuntar y seleccionar, una sola vez. Ejemplos: Mismas palabras o cdigos utilizados Posicin u orden de controles y botones

Algunos principios de diseo de interfaces grficas Consistencia Ms ejemplos: tems de un men colocados siempre en la misma posicin Comandos como Ayuda, siempre disponibles Consistencia con el sistema de operacin y otros programas

Algunos principios de diseo de interfaces grficas Mantener Informado al usuario Aspectos: Qu est haciendo el sistema Como se interpretan los comandos del usuario El usuario debe saber en cada momento que est sucediendo

Algunos principios de diseo de interfaces grficas Mantener Informado al usuario Tipos de retroalimentacin: Respuesta a un comando del usuario: movimiento del cursos, seleccin de un men, etc. Estado actual: brocha seleccionada, color, posicin, direccin de la carpeta (directorio), scroll bars

Algunos principios de diseo de interfaces grficas Mantener Informado al usuario Tipos de retroalimentacin: Procesamiento por parte de la mquina: instantneos, cursores de espera, dilogos explicativos, barras de progreso.

Algunos principios de diseo de interfaces grficas Mantener Informado al usuario

Algunos principios de diseo de interfaces grficas Control del usuario El usuario y no el computador (o aplicacin) inicia y controla las actividades.

Algunos principios de diseo de interfaces grficas Interaccin simple y natural Minimizar elementos de interfaz Menos para aprender, para equivocarse, distraerse

Algunos principios de diseo de interfaces grficas Interaccin simple y natural Orden natural de la informacin Agrupar grficamente la informacin relacionada El orden de acceso a la informacin debe ser como el usuario la espera Esconder o eliminar informacin irrelevante o usada ocasionalmente

Algunos principios de diseo de interfaces grficas Interaccin simple y natural Utilizar el lenguaje del usuario Usar terminologa e iconografa familiar al usuario

Traducir los mensaje de error al lenguaje del usuario

Algunos principios de diseo de interfaces grficas Algunos ejemplos de mecanismos

Algunos principios de diseo de interfaces grficas Algunos ejemplos de mecanismos

Algunos principios de diseo de interfaces grficas Algunos ejemplos de mecanismos

Algunos principios de diseo de interfaces grficas Tolerancia Proveer recuperacin de errores. Modalidades Deshacer : Cundo?

Abortar: Cundo?
Cancelar: Cundo?

Algunos principios de diseo de interfaces grficas Satisfacer mltiples niveles de habilidad Usuarios casuales Incorporar tutoriales, wizards, prompts, ayudas Modo simple: esconder los comandos complejos Manipulacin directa Uso de valores por defecto

Algunos principios de diseo de interfaces grficas Satisfacer mltiples niveles de habilidad Usuarios expertos Atajos de teclado Lneas de comando Modo experto Eliminacin de prompts y dilogos de advertencia Interfaz extensible y personalizable

Algunos principios de diseo de interfaces grficas Minimizar la memorizacin Promover el reconocimiento Basarse en la visibilidad de los objetos Uso de menes, conos, dilogos, mensajes, palabras.

Algunos principios de diseo de interfaces grficas Integridad esttica La informacin se encuentra organizada en forma adecuada y consistente con los principios de diseo visual.

El nmero de elementos y su respectivo comportamiento debe ser limitado para aumentar la usabilidad de la interfaz.

Algunos principios de diseo de interfaces grficas Integridad esttica Se debe asegurar de mantener la semntica del lenguaje grfico o del lenguaje asociado a la interfaz.

No cambiar el significado de los objetos que son estndares.

Algunos principios de diseo de interfaces grficas

Veamos como aplicar algunos de estos principios e los objetos y mecanismos

Objetos de las interfaces

Objetos de las interfaces grficas

Ventanas Menes conos Botones Campos etc.

Objetos de las interfaces grficas

Ventanas

Objetos de las interfaces grficas

Ventanas tipo dilogo

Tipos de ventanas y dilogos

Tipos de ventanas y dilogos

Mensajes

Mensajes

Palabras claves

Palabras claves

Objetos
List box

Seleccionar uno o ms tems de la lista

Objetos

Drop down list box

Seleccionar solo un tems de la lista

Objetos Combo box Ejemplo? Mezcla entre drop list o list box incorporando un campo de texto

Objetos Combo box Ejemplo: Mezcla entre drop list o list box incorporando un campo de texto

Barra para ingresar URL en los browsers (Mozilla e Internet Explorer)

Ms mecanismos y objetos de interfaz

Ms mecanismos y objetos de interfaz

Menes

Ms mecanismos y objetos de interfaz

conos

Ms mecanismos y objetos de interfaz

Botones

Ms mecanismos y objetos de interfaz

Campos

Ms mecanismos y objetos de interfaz

Resumen

Algunos principios de diseo de interfaces grficas