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