Presentacin de PowerPoint

Principios dediseo de InterfacesINSTITUTO TECNOLGICO DE LZARO CRDENAS

INGENIERA EN SISTEMAS COMPUTACIONALES

Eduardo Antonio Jurez Luna11560020Interaccin Hombre-MquinaEstilos de interfacesLos estilos de interfaces predominantes son:

La interfaz por lnea de comandosMens y formulariosManipulacin directa - GUIInterfaces con interaccin asistida

Interaccin Hombre-MquinaObjetivos de una buena interfaz:Maximizar la velocidad de aprendizajeMinimizar la tasa de erroresMaximizar la velocidad de usoEsttica adecuadaInteraccin Hombre-MquinaCmo disear para mejorar la interaccinhombre-mquina y lograr buenas interfaces?Interaccin Hombre-MquinaCmo disear para mejorar la interaccinhombre-mquina y lograr buenas interfaces?Diseo centrado en el usuarioPrincipiosReglas Estndares Directrices Guas de estiloInteraccin Hombre-MquinaPrincipiosSon conceptos de muy alto nivel que deben ser utilizados en el diseo de aplicaciones.Cmo disear para mejorar la interaccinhombre-mquina y lograr buenas interfaces?Interaccin Hombre-MquinaAliviar la carga cognitivaConfiar en el reconocimientoProporcionar pistas visualesProporcionar opciones por defectoProporcionar atajosPrincipios A modo de ejemploCmo disear para mejorar la interaccinhombre-mquina y lograr buenas interfaces?Interaccin Hombre-MquinaAliviar la carga cognitivaPromover la sintaxis objetoaccinEmplear metforas del mundo realEmplear la revelacin progresiva para evitar abrumar al usuario.Promover la claridad visualPrincipios A modo de ejemplo (cont.)Cmo disear para mejorar la interaccinhombre-mquina y lograr buenas interfaces?Interaccin Hombre-MquinaReglas de diseoGuan al diseador con el fin de incrementar la usabilidad. Se clasifican en estndares y directrices.Cmo disear para mejorar la interaccinhombre-mquina y lograr buenas interfaces?Interaccin Hombre-MquinaEstndaresSon requisitos, reglas o recomendaciones basadas en principios probados y en prctica.Cmo disear para mejorar la interaccinhombre-mquina y lograr buenas interfaces?Interaccin Hombre-MquinaDirectrices 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 interaccinhombre-mquina y lograr buenas interfaces?Interaccin Hombre-MquinaGuas de estiloLlamadas tambin guas corporativas. Estn basadas en principios y contienen directrices que se concretan a muy bajo nivel.Cmo disear para mejorar la interaccinhombre-mquina y lograr buenas interfaces?Interaccin Hombre-MquinaGuas de estiloLlamadas 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, comportamientosy tcnicas que deben ser implementadas por todos los productos en una compaa.

Cmo disear para mejorar la interaccinhombre-mquina y lograr buenas interfaces?Interaccin Hombre-MquinaAlgunos principios de diseo de interfacesInteraccin Hombre-MquinaAlgunos principios de diseo de interfaces grficasConsistenciaLa consistencia en una interfaz permite a los usuarios transferir sus conocimientos y destrezas de una aplicacin a otra.Interaccin Hombre-MquinaConsistenciaLa 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 grficasInteraccin Hombre-MquinaConsistenciaLa 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 utilizadosPosicin u orden de controles y botonesAlgunos principios de diseo de interfaces grficasInteraccin Hombre-MquinaConsistenciaMs ejemplos: tems de un men colocados siempre en la misma posicinComandos como Ayuda, siempre disponiblesConsistencia con el sistema de operacin y otros programasAlgunos principios de diseo de interfaces grficasInteraccin Hombre-MquinaMantener Informado al usuarioAspectos:Qu est haciendo el sistemaComo se interpretan los comandos del usuarioEl usuario debe saber en cada momento que est sucediendoAlgunos principios de diseo de interfaces grficasInteraccin Hombre-MquinaMantener Informado al usuarioTipos 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 barsAlgunos principios de diseo de interfaces grficasInteraccin Hombre-MquinaMantener Informado al usuarioTipos de retroalimentacin:Procesamiento por parte de la mquina: instantneos, cursores de espera, dilogos explicativos, barras de progreso.Algunos principios de diseo de interfaces grficasInteraccin Hombre-MquinaMantener Informado al usuarioAlgunos principios de diseo de interfaces grficas

Interaccin Hombre-MquinaControl del usuarioEl usuario y no el computador (o aplicacin) inicia y controla las actividades.Algunos principios de diseo de interfaces grficasInteraccin Hombre-MquinaInteraccin simple y naturalMinimizar elementos de interfazMenos para aprender, para equivocarse, distraerseAlgunos principios de diseo de interfaces grficasInteraccin Hombre-MquinaInteraccin simple y naturalOrden natural de la informacinAgrupar grficamente la informacin relacionadaEl orden de acceso a la informacin debe ser como el usuario la esperaEsconder o eliminar informacin irrelevante o usada ocasionalmenteAlgunos principios de diseo de interfaces grficasInteraccin Hombre-MquinaInteraccin simple y naturalUtilizar el lenguaje del usuarioUsar terminologa e iconografa familiar al usuarioTraducir los mensaje de error al lenguaje del usuarioAlgunos principios de diseo de interfaces grficasInteraccin Hombre-MquinaTolerancia

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 grficasInteraccin Hombre-MquinaAlgunos ejemplos de mecanismosAlgunos principios de diseo de interfaces grficas

Interaccin Hombre-MquinaAlgunos ejemplos de mecanismosAlgunos principios de diseo de interfaces grficas

Interaccin Hombre-MquinaAlgunosejemplosdemecanismosAlgunos principios de diseo de interfaces grficas

Interaccin Hombre-MquinaTolerancia

Proveer recuperacin de errores. ModalidadesDeshacer : Cundo?Abortar: Cundo?Cancelar: Cundo?Algunos principios de diseo de interfaces grficasInteraccin Hombre-MquinaSatisfacer mltiples niveles de habilidad

Usuarios casualesIncorporar tutoriales, wizards, prompts, ayudas (tipos?)Modo simple: esconder los comandos complejosManipulacin directaUso de valores por defectoAlgunos principios de diseo de interfaces grficasInteraccin Hombre-MquinaSatisfacer mltiples niveles de habilidad

Usuarios expertosAtajos de tecladoLneas de comandoModo expertoEliminacin de prompts y dilogos de advertenciaInterfaz extensible y personalizableAlgunos principios de diseo de interfaces grficasInteraccin Hombre-MquinaMinimizar la memorizacin

Promover el reconocimientoBasarse en la visibilidad de los objetosUso de menes, conos, dilogos, mensajes, palabras.Algunos principios de diseo de interfaces grficasInteraccin Hombre-MquinaIntegridad estticaLa 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 grficasInteraccin Hombre-MquinaIntegridad estticaSe 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 grficasInteraccin Hombre-MquinaVeamos como aplicar algunos de estos principios e los objetos y mecanismosAlgunos principios de diseo de interfaces grficasInteraccin Hombre-MquinaObjetos de las interfacesInteraccin Hombre-MquinaObjetos de las interfaces grficasVentanasMenesconosBotonesCamposetc.

Interaccin Hombre-MquinaObjetos de las interfaces grficasVentanas

Interaccin Hombre-MquinaObjetos de las interfaces grficasVentanas tipo dilogo

Interaccin Hombre-Mquina

Tipos de ventanas y dilogosInteraccin Hombre-Mquina

Tipos de ventanas y dilogosInteraccin Hombre-Mquina

MensajesInteraccin Hombre-Mquina

MensajesInteraccin Hombre-Mquina

Palabras clavesInteraccin Hombre-MquinaPalabras claves

Interaccin Hombre-MquinaObjetos

List boxSeleccionar uno o ms tems de la listaInteraccin Hombre-MquinaSeleccionar solo un tems de la listaDrop down list box

ObjetosInteraccin Hombre-MquinaCombo box Mezcla entre drop list o list box incorporando un campo de texto Ejemplo? ObjetosInteraccin Hombre-MquinaCombo box

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

Barra para ingresar URL en los browsers(Mozilla e Internet Explorer)ObjetosInteraccin Hombre-Mquina

Ms mecanismos y objetos de interfazInteraccin Hombre-MquinaMenes

Ms mecanismos y objetos de interfazInteraccin Hombre-Mquinaconos

Ms mecanismos y objetos de interfazInteraccin Hombre-MquinaBotones

Ms mecanismos y objetos de interfazInteraccin Hombre-MquinaCampos

Ms mecanismos y objetos de interfazInteraccin Hombre-MquinaResumenMs mecanismos y objetos de interfaz

Interaccin Hombre-Mquina