Interfaces graficas de usuario

14
METODOLOGÍA DE SISTEMAS I FACULTAD REGIONAL DE AVELLANEDA UNIVERSIDAD TECNOLÓGICA NACIONAL Integrantes: Gastón Guerci Sebastián Suarez Profesora: Lic. Gabriela Flores INTERFACES GRÁFICAS DE USUARIO

description

Diseño de Interfaces Gráficas

Transcript of Interfaces graficas de usuario

Page 1: Interfaces graficas de usuario

METODOLOGÍA DE SISTEMAS IFACULTAD REGIONAL DE AVELLANEDA

UNIVERSIDAD TECNOLÓGICA NACIONAL

Integrantes:

Gastón GuerciSebastián Suarez

Profesora: Lic. Gabriela Flores

INTERFACES GRÁFICAS DE USUARIO

Page 2: Interfaces graficas de usuario

Se define Interfaz al medio necesario para la comunicación entre dos sistemas con distintas formas de expresión. En el caso de las interfaces de usuario, se trata del medio que utiliza el usuario para interactuar con un Sistema Informático.

Page 3: Interfaces graficas de usuario

Conformidad de la interfazSe precisa definir principios para reconocer

el desarrollo de una interfaz de usuario adecuada.

Se debe planear una interfaz donde se busca claridad y flexibilidad. No solamente que sea “bonita”.

Nielsen y Molich proponen la Evaluación Heurística.

Son 10 principios reconocidos de usabilidad de la interfaz.

Page 4: Interfaces graficas de usuario

Evaluación Heurística Principios:1.Visibilidad del estado del sistema: El sistema

debe mantener informados a los usuarios de lo que está ocurriendo.

2.Utilizar el lenguaje de los usuarios: El sistema debería hablar el lenguaje de los usuarios, utilizando sus palabras, frases y conceptos.

3.Control y libertad del usuario: El usuario al ingresar en una opción no deseada del sistema, deberá tener una funcionalidad “de emergencia” que le permita salir del estado no deseado.

Page 5: Interfaces graficas de usuario

Evaluación Heurística4. Consistencia y estándares: El sistema debe seguir las

condiciones establecidas. Dos palabras o conceptos distintos no deben explicar una misma funcionalidad. Debe haber coherencia en los datos.

5. Prevención de errores: Realizar un diseño que prevenga ocurrencia de errores.

6. Reconocimiento: Las opciones para que el usuario opere deben estar siempre disponibles y a simple vista. El usuario no tiene la necesidad de memorizar los pasos, sino que debe reconocerlos a la brevedad para operar mejor.

7. Flexibilidad y eficiencia: Es conveniente tener “aceleradores” que permitan rapidez y flexibilidad para usuarios novatos del sistema. Que el usuario aprenda a usarlo.

Page 6: Interfaces graficas de usuario

Evaluación Heurística8. Estética y diseño minimalista: No debe haber

información redundante o irrelevante. Debe expresarse con una estética que no desaliente al usuario.

9. Recuperación y diagnóstico de errores: Los mensajes de error deben ser expresados de manera clara. Detallan claramente el problema y cómo debe proceder el usuario en caso de suceder.

10. Ayuda y documentación: La documentación y la ayuda del usuario debe estar accesible y en forma rápida. Enfocada en las tareas que realiza y concreta en los pasos a seguir. No debe ser extensa.

Page 7: Interfaces graficas de usuario

Diseño de ventanasLas ventanas como componentes de interfaz de usuario

deben tener en cuenta los siguientes elementos:Estructura de la información: Se designa la jerarquía y

posición de los elementos visuales. Debe priorizar su comprensión.

Punto focal: Es el punto del cual se destacan los demás. Es el punto que abarca las ideas centrales a los que el usuario debe apuntar o trabajar. Se suele aislar para lograr más importancia con espaciados y selección de la información pertinente. Varía de acuerdo a la cultura donde ubicarlo.

Consistencia entre ventanas: Debe ser consistente la distribución de la información y su importancia entre las distintas ventanas por las que transita el usuario.

Page 8: Interfaces graficas de usuario

Diseño de ventanasRelación entre elementos: Deben estar distribuidos

adecuadamente los distintos componentes que conforman la ventana. Saber integrar componentes o controles componen la misma funcionalidad.

Longitud y flujo entre los elementos: La alineación y espaciado de los elementos debe ayudar al fluir de la información y ser adecuada para una fácil comunicación.

Integración: Se logra cuando hay relación visual entre la aplicación y las demás que integran un sistema global. Es decir, coherencia en la visibilidad y estética de la familia de aplicaciones.

Page 9: Interfaces graficas de usuario

Diseño de ventanas Se debe prestar especial atención al uso de

elementos multimediales, dado que al ser herramientas que abarcan y permiten mostrar mucha información en pocas ilustraciones o acciones (y al ser más atractivas para el usuario), se puede caer en la tentación de excederse en su uso. Generando así sobreabundancia y saturación de la información a mostrar.

Page 10: Interfaces graficas de usuario

Reglas para el diseño de interfaces

Control al usuario.Reducir la carga de memoria.Consistencia.

Page 11: Interfaces graficas de usuario

Control del usuarioEl usuario controlará sus tareas, su detención y

reanudación de manera cómoda y se dará permisos y visibilidad de acuerdo al rol o posición jerárquica que está asignado.

Podrá personalizar la interfaz.Al mismo tiempo debe mantener la interfaz

acorde al diseño y estética que aplica a las demás pantallas y familia de aplicaciones que conforman el sistema.

No debe tener control ni visualizar menajes técnicos.

Page 12: Interfaces graficas de usuario

Reducir la carga de memoria del usuarioSe debe aliviar la tarea al usuario de recordar por

cuales circuitos del sistema estuvo. Mediante:

Indicadores visuales.Atajos de teclado, mouse, accesos directos,

hipervínculos, tooltips.Conceptos del mundo real (ej: agenda,

calendario, contactos).Estableciendo valores por defecto,

preferentemente los más solicitados.Yendo de lo más abstracto a lo más particular.

Page 13: Interfaces graficas de usuario

ConsistenciaMantener un estándar o jerarquía de mensajes

destinado al usuario para las acciones que efectúa, con el objetivo de seguir un patrón en los mismos.

Misma respuesta ante una misma acción. Evitar respuestas ambiguas o no especificadas.

Consistencia en la apariencia. Mantener estilos, íconos, logos, imágenes que representen el sistema o la compañía de la que forma parte.

Consistencia en la familia de aplicaciones. Ejemplo: estándar corporativo del “look and feel”.

Page 14: Interfaces graficas de usuario

Bibliografía y fuentes.Jakob Nielsen, Rolf Molich. "Heuristic

evaluation of user interfaces", Proc. ACM CHI'90 Conf., 1990

Bruce Tognazzini. (Página consultada el 8 de noviembre de 2013) "First Principles of Interaction Design", [On line]. Dirección: http://galinus.com/es/articulos/principios-diseno-de-interaccion.html

Ben Shneiderman. "Designing the user interface: strategies for effective human--computer interaction", Addison-Wesley Publ. Co., 1987