INSTITUTO TECNOLGICO DE LZARO CRDENAS

INGENIERA EN SISTEMAS COMPUTACIONALES

Principios de
diseo de Interfaces
Eduardo Antonio Jurez
Luna
11560020

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
Tolerancia
Posibilidad de ofrecerle al usuario la
capacidad de recuperarse de los errores
Ejemplo?
Nunca ofrecer un comando que lleve a un
mensaje como Comando Ilegal
Ejemplo?
Utilizar controles que impidan introducir
datos errneos Ejemplo?

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 (tipos?)
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