MODULO II Ingeniería de Software INF - 163 2.6 DISEÑO DE LA INTERFAZ DE USUARIO 22/10/2012 Resumen preparado por Miguel Cotaña 1
El diseño de la interfaz se concentra en 3 áreas: El diseño de interfaces entre componentes de software; El diseño de interfaces entre el software y otros productores y consumidores; El diseño de la interfaz entre un ser humano y el ordenador. 2
El diseño de la interfaz crea un medio de comunicación efectiva entre un ser humano y un ordenador. El diseñador identifica los objetos y las acciones de la interfaz y luego crea un formato de pantalla 3
La cuestión más básica a considerar en el diseño de interfaces de usuario es que el usuario no quiere utilizar tu aplicación... Quieren hacer su trabajo de la forma más sencilla y rápida posible, y la aplicación no es más que otra herramienta para ayudarles a lograrlo. Cuanto menos estorbe tu aplicación al usuario,..mejor!!! 4
Reglas de Oro Theo Mantel acuño 3 reglas: 1. Dar el control al usuario; 2. Reducir la carga en la memoria del usuario; 3. Lograr que la interfaz sea consistente. 5
Dar control al usuario Lo que en verdad me gustaria dijo un usuario durante la captura de requisitos, es un sistema que me lea la mente. Que sepa lo que quiero hacer antes de que deba hacerlo y que me permita hacerlo fácilmente. Eso es todo, y nada más.. 6
Reducir la carga en la memoria del usuario Cuanto más cosas tenga que recordar un usuario, más probabilidades habrá de que cometa errores al interactuar con el sistema. 7
Lograr que la interfaz sea consistente 1.Toda información visual esté organizada en base a un estándar; 2.Mecanismos de entrada se restrinjan a un conjunto limitado que se utilice de manera consistente; 3.Los mecanismos para ir de una tarea a otra se hayan definido e implementado consistentemente. 8
Modelos de Análisis y Diseño de la Interfaz Cuando se analiza y diseña una interfaz entran en juego 4 modelos: Modelo del usuario: establece un perfil de los usuarios finales del sistema (edad, sexo, educación, objetivos, cultura, motivaciones, personalidad); 9
Modelo de diseño: incorpora datos, arquitectura, interfaz y representaciones del software; Modelo mental del usuario: es la imagen del sistema que los usuarios llevan en la mente; Modelo de implementación: combina la manifestación externa 10
El proceso de análisis y diseño de la interfaz Es iterativo y se representa con un modelo en espiral: 1. Análisis y modelado de usuarios, tareas, entornos; 2. Diseño de la interfaz; 3. Construcción (implementación); 4. Validación de la interfaz. 11
Algunas consideraciones.. Cuanto más grande y más cercano al puntero del ratón es un objeto, más sencillo es el hacer click sobre él. Esto es de sentido común, pero muchas veces es ignorado completamente en el diseño de interfaces. 12
Cuando navegamos por la web, el botón que más utiliza la gente es el botón Anterior. El botón Anterior debería entonces ser el más sencillo de pulsar: de esa forma, minimizas el esfuerzo requerido por parte del usuario para utilizar tu aplicación, y les permites concentrarse en la navegación web. 13
Pero en la barra de botones, los cinco botones tienen el mismo tamaño. De verdad es el botón Parar tan importante como el botón Anterior? No, por supuesto que no. Un diseño mejor y también más sencillo de distinguir de los otros botones. 14
Cuando un usuario está trabajando, su atención está centrada en el trabajo que está realizando. Cada vez que tienen que concentrarse en la aplicación, les lleva tiempo el volver a centrarse en el trabajo. Por lo tanto, deberías minimizar la cantidad de distracción y de interferencias por parte de tu aplicación. 15
los elementos de la pantalla que hacen cosas distintas deberían ser fácilmente distinguibles unos de otros. 16
El botón Buscar y los dos botones de zoom son muy similares; los botones Siguiente, Anterior, Arriba, Inicio y Recargar tienen todos el mismo color, haciendo más difícil la identificación en un simple golpe de vista. Pero lo que es más importante, hay quince botones! Los humanos son buenos distinguiendo entre unos cinco elementos: podemos hacerlo instantáneamente, sin pensar. 17
Si hay más de 5 elementos tenemos que parar un momento y utilizar el cerebro para pensar qué es cada cosa. En un diseño mucho mejor sólo se habrían añadido a la barra los elementos más utilizados. Muchas aplicaciones tienen un número similar a este en la barra de herramientas, pero para una tarea tan simple como es la navegación web, quince elementos es una exageración. 18
Ideas para un diseño web amigable El diseño web es la imagen de la empresa en Internet. No existe un diseño único que se pueda considerar como el ideal, porque el diseño web debe adaptarse a cada objetivo y a cada empresa y alinearse a las bases fundamentales que sostienen la visión de la empresa. Lo fundamental es que el sitio sea usable. 19
Ideas. Lograr que el acceso a la información sea fácil y simple; Minimizar el número de clicks que debe realizar el visitante para llegar a las secciones; Si el sitio es extenso o grande, es conveniente incorporar un mapa del mismo; 20
La colocación del contenido, eslóganes y los argumentos principales, es fundamental que se realice en un lugar visualizable al abrir la página, normalmente el mejor es la parte superior y que sin necesidad de que el usuario haga un scroll hacia abajo aparezca claro y destacable; 21
Evitar enlaces rotos; Evitar imágenes demasiado grandes; Evitar espacios en blanco o espacio negativo exagerados; Evitar demasiados niveles de jerarquía; Evitar colores al azar que afectan negativamente al mensaje. 22
La interfaz queda identificada: En la claridad de objetivos; En su visibilidad; En su adecuación a los usuarios; En la consistencia y estándares; En su flexibilidad y eficacia de uso; En el diseño minimalista. 23
No sirve de nada una Web bonita, si los usuarios no encuentran lo que están buscando!!! Un buen diseño Web es para cualquier tipo de usuario!!! No complicar a los usuarios con descarga de herramientas!!! 24