DISEO DE INTERFACES VISUALES

FASE ANALISIS Y DISEO

INTRODUCCION
Desde el punto de ingeniera de software, la interfaz de usuario juega

un papel preponderante en el desarrollo y puesta en marcha de todo sistema. Es la carta de presentacin del mismo y en ocasiones resulta determinante para la aceptacin o rechazo de todo un proyecto. En promedio, se estima que del 35% al 45% de los gastos destinados a un proyecto son direccionados al diseo de la interfaz.
El diseo visual de interfaces involucra diferentes disciplinas, entre las

que podemos encontrar: diseo de comunicacin visual, diseo industrial y arquitectura (incluyendo el diseo de interiores). La meta es resolver problemas de comunicacin de manera efectiva tanto funcional como estticamente.
Un termino muy utilizado en esta rea es el de lenguaje visual, el cual

se entiende como las caractersticas visuales (forma, tamao, posicin, orientacin, color, textura, etc.) de un conjunto de elementos de diseo (puntos, lneas, planos, volumen, etc.) y la manera en que se relacionan unos con otros (balance, ritmo, estructura, proporcin, etc.) en la solucin de un problema de comunicacin particular.

DEFINICIONES DE INTERFACES VISUALES

Todo aquello que hace posible la interaccin con un sistema

ejecutndose en una computadora Un punto o medio de interaccin entre dos sistemas, disciplinas o grupos Un canal de comunicacin entre dos o ms entidades Su calidad determina, entre otras cosas: Si el usuario acepta o no el sistema Si los diseadores del sistema son elogiados o reprobados Si un sistema tiene xito o fracasa en el mercado o la empresa Al disear la interfaz de una aplicacin, se debe tener en cuenta el deseo del usuario de enfrentarse a algo fcil, pero a la vez poderoso

FACTORES Y FUNDAMENTOS
Factores humanos Percepcin visual, tctil y auditiva Psicologa cognitiva de la lectura La memoria humana Razonamiento Factores adicionales Comportamiento del usuario Comprensin de las tareas que el sistema realiza Cmo ve venir el usuario la automatizacin de sus tareas

FACTORES Y FUNDAMENTOS
Fundamentos de la percepcin humana Se utiliza generalmente un medio visual Una especificacin apropiada de la comunicacin visual es el elemento clave de una interfaz amigable Aunque predomina la informacin grfica, an el texto es utilizado ampliamente. Por ello, la definicin del tamao del texto, el tipo de letra, la longitud de la lnea, las maysculas, el sitio y el color influyen en la facilidad con que se realiza la extraccin de informacin Procesamiento interno de la informacin: extraccin, almacenamiento y utilizacin

DISEO DE INTERFACES
Diseo de la interfaz Hombre-Mquina Creacin de diferentes modelos de funcionamiento del sistema Especificacin de las tareas humanas y las orientadas a la computadora Aspectos de diseo Diseo de prototipos Implementacin con la participacin activa del usuario final Modelos de diseo de interfaces Modelo de diseo: Especificacin de requisitos Modelo de usuario: Representa el perfil de los usuarios finales Edad Sexo Estado fsico Educacin Procedencia cultural o tnica Motivacin Objetivos Personalidad

ELEGANCIA Y SIMPLICIDAD

Se deriva del latn: eligere, que significa "seleccionar cuidadosamente" El diseo visual esta involucrado en la seleccin cuidadosa de elementos formales que sobresalgan en el diseo Las soluciones elegantes, generalmente las ms directas (simples), revelan un entendimiento ntimo del problema y que su esencia ha sido comprendida y representada La simplicidad juega un papel central en los diseos a tiempo, por esto las soluciones que resuelven problemas de forma clara y econmica Los beneficios de la simplicidad son:

Accesibilidad Reconocimiento Rapidez de percepcin Uso continuo

ESCALA CONTRASTE Y PROPORCION

Escala Describe al tamao o magnitud relativa de un elemento de diseo dado en relacin a otros elementos o al todo Contraste Resulta de las diferencias notables entre dimensiones visuales comunes que puedan ser observadas entre elementos de una composicin. El contraste proporciona la base para una distincin visual, pueden usarse los siguientes atributos: forma, tamao, color, textura, posicin, orientacin y movimiento. Proporcin Determina el balance y armona de la relacin entre elementos Beneficios del uso de escalas, contrastes y proporcionalidad Diferenciacin Enfasis Actividad Inters

REPRESENTACION DE IMAGENES
Imgenes y representacin

El uso de imgenes es esencial en la comunicacin de una interfaz de usuario Son importantes en tres reas Identificacin: sirven como representaciones de objetos concretos del mundo real Expresin: tienen un poder expresivo muy grande Comunicacin: no tienen lmites El uso de representacin introduce significado a los diseos y es la base para la comunicacin Tcnicas para la representacin de imgenes Seleccin del vehculo adecuado Refinamiento a travs de abstraccin progresiva Coordinacin para asegurar consistencia visual

DIRECTRICES GENERALES PARA EL DISEO DE INTERFACES

Aunque los aspectos que determinan el diseo de interfaces grficas de usuario son mltiples, los podemos agrupar en tres grandes grupos:

Interaccin general: sobre la consistencia de comandos, proteccin del sistema y facilidades de ayuda y asistencia Visualizacin de informacin: cmo el sistema presenta resultados intermedios o finales al usuario, o en su defecto alguna situacin que requiera su intervencin Entrada de datos: cmo el usuario se comunica con el sistema para proporcionar datos y establecer las condiciones de funcionamiento del sistema

RECOMENDACIONES DE DISEO
Recomendaciones para el desarrollo de GUIs La proporcionalidad debe ser consistente, especialmente para cajas de dilogos que tienen un diseo visual y una funcionalidad similar El rea libre en una caja de dilogo debe ser de al menos el 20% del rea total Los mrgenes deben ser consistentes Deben evitarse diseos muy densos Buscar la consistencia en colores (foreground y background) y tipografas La localizacin y tamao de Widgets frecuentemente usados debe ser consistente Ser consistentes en terminologa Buscar la consistencia en las etiquetas de botones: esto es, sinnimos como "Abort", "Cancel", "Close" y "Exit" no deben ser usadas para tareas similares

EJEMPLOS DE INTERFACES VISUALES

EJEMPLOS DE INTERFACES VISUALES

EJEMPLOS DE INTERFACES VISUALES

EJEMPLOS DE INTERFACES VISUALES

EJEMPLOS DE INTERFACES VISUALES

EJEMPLOS DE INTERFACES VISUALES

EJEMPLOS DE INTERFACES VISUALES

EJEMPLOS DE INTERFACES VISUALES

EJEMPLOS DE INTERFACES VISUALES

EJEMPLOS DE INTERFACES VISUALES

EJEMPLOS DE INTERFACES VISUALES

EJEMPLOS DE INTERFACES VISUALES