Compendio de Ingeniería del Softwarecotana.informatica.edu.bo/downloads/diseno-interfaz.pdf · El...
Transcript of Compendio de Ingeniería del Softwarecotana.informatica.edu.bo/downloads/diseno-interfaz.pdf · El...
2.6 DISEÑO DE LA INTERFAZ DE USUARIO
MODULO II
Ingeniería de Software INF - 163
Resumen preparado por Miguel Cotaña 1
22/10/2012
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
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.
Reglas de Oro
5
“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…..”
Dar control al usuario
6
Cuanto más cosas tenga que
recordar un usuario, más
probabilidades habrá de que
cometa errores al interactuar con
el sistema.
Reducir la carga en la memoria del usuario
7
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.
Lograr que la interfaz sea consistente
8
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);
Modelos de Análisis y Diseño de la Interfaz
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
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.
El proceso de análisis y diseño de la interfaz
11
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.
Algunas consideraciones……..
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
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”.
Ideas para un diseño web amigable………
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