Diseo grfico de interfaces de usuario

MTI Juan Esquivel Mndez Sesin 2

Puntos
A continuacin veremos una serie de puntos a considerar al momento de disear una correcta interfaz de usuario.

Punto 0
El usuario no est utilizando tu aplicacin
La cuestin ms bsica a considerar en el diseo de interfaces de usuario es que el usuario no quiere utilizar tu aplicacin. Quieren hacer su trabajo de la forma ms sencilla y rpida posible, y la aplicacin no es ms que otra herramienta para ayudarles a lograrlo. Cuanto menos estorbe tu aplicacin al usuario, mejor. El esfuerzo utilizado en usar tu aplicacin es esfuerzo que no pueden utilizar en la tarea que estn intentando realizar. Hay un par de citas del segundo libro de Alan Cooper,About Face 2.0 (Acerca de Face 2.0), que lo resumen bastante bien: Imagina usuarios muy inteligentes pero muy ocupados No importa lo genial que sea tu interfaz, menos es ms siempre

Punto 1
La Ley de Fitt
Esta es la ley ms bsica y ms conocida de entre las leyes del diseo de interfaces de usuario. Esta ley dice que cuanto ms grande y ms cercano al puntero del ratn es un objeto, ms sencillo es el hacer click sobre l. Esto es de sentido comn, pero muchas veces es ignorado completamente en el diseo de interfaces.

Punto 1

Consideremos, por ejemplo, la barra de botones por defecto de Firefox. Cuando navegamos por la web, el botn que ms utiliza la gente es el botn Anterior. Debera entonces ser el ms sencillo de pulsar: de esa forma, minimizas el esfuerzo requerido por parte del usuario para utilizar tu aplicacin, y les permites concentrarse en la navegacin web. Pero en la barra de botones, los cinco botones tienen el mismo tamao. De verdad es el botn Parar tan importante como el botn Anterior? No, por supuesto que no. Un diseo mejor habra tenido un aspecto similar al de la Figura 2. Esto hace que el botn Anterior sea ms sencillo de pulsar segn la ley de Fitt, y tambin ms sencillo de distinguir de los otros botones.

Punto 1

El tamao de un elemento de la interfaz puede parecer mayor si lo colocamos en el borde de la pantalla. Cuando el cursor del ratn llega al borde de la pantalla, va a pararse exactamente en el borde, independientemente de lo rpido que se estuviera moviendo el ratn. Esto significa que para el usuario del ratn los objetos que estn en el borde de la pantalla a todos los efectos tienen tamao infinito. Sera muy sencillo el hacer click sobre un control de un pixel que se encuentre en la esquina superior derecha de la pantalla; simplemente tienes que lanzar el ratn hacia la derecha y arriba tanto como quieras. Si movemos ese pixel al centro de la pantalla, necesitaramos mucho ms tiempo para hacer click sobre l. Partiendo de esto podemos concluir que los controles sobre los que queremos que sea ms sencillo el hacer click deberan colocarse en los bordes o esquinas de la pantalla.

Punto 1

Otro ejemplo son las barras de desplazamiento. En la mayor parte de las aplicaciones de mi escritorio el borde derecho de la barra de desplazamiento se encuentra a un pixel del borde de la pantalla cuando la ventana est maximizada, haciendo que el tamao del control decrezca de una zona sencilla de pulsar de tamao virtualmente infinito a una pequea zona de 10 pixels de ancho con la que se necesitan unos pocos segundos extras para hacer click cada vez que quiero desplazar el contenido de la ventana. Para resumir este punto: Los controles ms utilizados deben ser ms grandes y ser distinguibles fcilmente, Utiliza los bordes y esquinas de la pantalla para hacer que tus controles sean virtualmente infinitos, Nunca coloques los controles a un pixel de distancia del borde de la pantalla o de la esquina

Interferencias Innecesarias

Punto 2

Cuando un usuario est trabajando, su atencin est centrada en el trabajo que est realizando. Cada vez que tienen que concentrarse en la aplicacin, les lleva tiempo el volver a centrarse en el trabajo. Por lo tanto, deberas minimizar la cantidad de distraccin y de interferencias por parte de tu aplicacin. Cada aplicacin tiene un elemento clave en la que centrarse en un editor de texto, es el texto; en un navegador web, es la pgina web as que deberas hacer de este elemento clave el centro de la interfaz. Un ejemplo son los dilogos de confirmacin y de progreso. Evolution, por ejemplo, lanza una ventana de dilogo cada vez que se pulsa sobre Enviar/Recibir para informarme del progreso en el proceso de comprobacin del correo. Este dilogo se encuentra justo encima del rea de la pantalla donde se muestra el correo que se est recibiendo y bloquea el acceso al resto de la aplicacin. Cul es el propsito de este dilogo? Todo lo que hace es molestar al usuario. Sera mucho mejor eliminarlo y reemplazarlo con una barra de progreso.

Punto 2

Punto 2
Para resumir este punto: No coloques barreras en el camino del usuario Lanza una ventana de dilogo solo si esta contiene informacin til Si es posible, utiliza indicadores de estado no modales

Punto 3
Haz que sea fcil distinguir los elementos y buscarlos Este punto es bastante simple: los elementos de la pantalla que hacen cosas distintas deberan ser fcilmente distinguibles unos de otros. Veamos un ejemplo extremo de como intentar hacer las cosas accesibles y fallar en el intento, echemos un vistazo a la barra de tareas de Konqueror:

Punto 3

El elemento que se encuentra ms a la izquierda es el que posiblemente sea el comando menos utilizado en el navegador web. Este elemento es el ms sencillo de encontrar y de pulsar, as que la accin ms utilizada debera ocupar esa posicin. Todos los dems navegadores que conozco colocan en esta posicin el botn Anterior . El botn Buscar y los dos botones de zoom son muy similares; los botones Siguiente, Anterior, Arriba, Inicio y Recargar tienen todos el mismo color, haciendo ms difcil la identificacin en un simple golpe de vista. Pero lo que es ms importante, hay quince botones! Los humanos son buenos distinguiendo entre unos cinco elementos: podemos hacerlo instantneamente, sin pensar. Esa es la razn principal por la que las partituras de msica tienen cinco lneas.

Punto 3
Para resumir este punto: Elementos que hacen cosas distintas deben ser fcilmente distinguibles entre s No abrumes a tu usuario con demasiadas opciones Haz que el elemento seleccionado sea sencillo de distinguir y leer