Interfaces de usuario

Recomendaciones de diseño y usabilidad

UTN FRA – Tecnicatura Superior en Programación 4° BProfesora: Gabriela Flores – Metodología de SistemasAlumnos: María Laura Taborda – Paula RaivesFecha de Entrega: 18/11/2014

Diseño ………………………………… 3

Usabilidad …………………………. 13

En la siguientes diapositivas veremos diferentes recomendaciones para el diseño de una GUI, veremos aspectos a tener en cuenta

para la información, el color, el texto y el puntero

Podemos relacionar los elementos por cercanía o bien por su similitud. Es muy importante que se le dé provecho a las herramientas que IDE aporta para esto y no tratar de realizarlo por ejemplo, por diferentes grupos de colores abusando de los mismos

Los controles o elementos que se colocan en cada formulario deben estar ordenados, debe haber coherencia entre un formulario y otro.

Se deben respetar criterios ergonómicos.

Debe haber herencia Visual: teniendo en cuenta los patrones de como la gente mira, la información mas importante debe estar en la parte superior izquierda del formulario.

• No debemos abusar del uso de barras de herramientas o de botones porque causan el mismo efecto que el abuso de información. Además los botones no se deben utilizar para funciones que puedan realizar modificaciones peligrosas o importantes en el archivo que se trabaja, porque un botón se puede accionar por error.

Figura 1.2 – Microsoft Word

Principalmente no debemos abusar del uso de colores, no solo puede desviar la atención de la información relevante sino que también puede cansar la vista del usuario.  Puede usarse para resaltar información importante, si se maneja correctamente también puede agrupar elementos del formulario en conjuntos, y aunque no estén uno cerca de otro quedarían asociados. Hay que tener en cuenta también que los colores pueden estar relacionados con connotaciones culturales. Deben evitarse el uso de combinaciones que puedan provocar connotaciones culturales negativas.

El color también tiene propiedades psicológicas en el subconsciente que deben ser tomadas en cuenta (Figura 1.3)

En la figura 1.4 se observa el uso inapropiado del verde y rojo, teniendo en cuenta el cuadro de la Figura 1.3

Figura 1.3

Figura 1.4

No todos los seres humanos pueden visualizar los colores, por lo cual no se deben usar para comunicar.

  Demos utilizar un fondo claro y sobre el mismo

figuras oscuras, de esta manera es más legible.

Figura 1.5

Figura 1.6 Combinación inadecuada de colores

Además de examinar el uso del color en cada formulario de manera individual, se debe examinar en conjunto para que exista una coherencia en todo el sistema.

¿Qué debemos tener en cuenta a la hora de aplicar Texto? Se recomienda el uso de las fuentes Tahoma o Sans Serif, en el caso de aplicaciones para Windows, porque si el usuario utiliza este sistema operativo se encuentra familiarizado con las mismas. Para jerarquizar texto se recomienda el cambio de tamaño, o color de la fuente, a la utilización de negrita o cursiva, las fuentes recomendadas en el punto anterior no están diseñadas para ser aplicadas con estas propiedades, y en textos largos y con tamaño de fuente pequeño se pierde legibilidad.

No siempre es necesario un sistema de iconos, no es bueno abusar de las imágenes si no se requieren. Se recomienda emplearlos cuando un texto es demasiado largo o complejo de entender. Las imágenes de los iconos deben ser acorde a lo que representan.

Utilizar iconos ya difundidos anteriormente, con los que el usuario ya esté familiarizado

No es conveniente mesclar iconos con un mensaje escrito que los represente, en la traducción a otros idiomas puede haber errores de traducción y malas interpretaciones. Además en ciertos casos, como veremos en la figura 2.1, se puede caer en la redundancia.

Figura 1.7

El puntero debe ser visible y contrastar con el color de fondo de la aplicación

El tamaño debe ser visible para el usuario pero no debe impedir que se vean otros elementos

La forma que tenga debe indicar que función va a realizar y

su parte activa debe ser intuitiva.

Se presenta un conjunto de recomendaciones para optimizar la usabilidad de una aplicación

Que por cada acción que se realice haya una reacción del sistema, el usuario debe saber que lo que ejecutó en la interfaz se está realizando, sobre todo si el tiempo de respuesta es largo

Debemos evitar que la aplicación dependa de la memoria del usuario, evitemos usar códigos que deba introducir manualmente, dejar campos con valores por defecto, proveerle atajos y teclas de acceso y evitar que tenga que navegar manualmente por los controles.

Permitirle que pueda ingresar la información de distintas manera

Permitir que pueda personalizar la interfaz

Usar términos a los que está acostumbrado

En el momento del desarrollo tener en cuenta los conocimientos previos del usuario en otras aplicaciones, y que la aplicación sea consistente con el SO que usa

Implementar una opción para deshacer cambios Prevenir errores antes cometerlos, con una advertencia

previa a realizar la acción Se puede comunicar un error varios canales, con una

advertencia visual y sonora Debemos tratar que el mensaje de error sea claro y en un

lenguaje que maneje el usuario

Figura 2.1Error encontrado en Visual Basic 5.0No tiene descripción el error

“No importa lo genial que sea tu interfaz, menos es más siempre”

El usuario demora en realizar una determinada acción. Solución: Los controles sobre los que queremos que sea mas sencillo hacer CLIC deberían colocarse en los bordes o esquinas de las pantallas. Ayudaría al usuario, por ejemplo, colocar la barra de desplazamiento sobre el borde exacto de la pantalla, o los botones de cerrar/maximizar sobre la esquina superior, de modo que éste pueda presionarlo sin siquiera tener que mirar.

El usuario pierde concentración e interrumpe su trabajo por ventanas innecesarias.Solución: No bloquear el acceso al resto de la información con ventanas emergentes innecesarias, o en todo caso colocar en ella solo información útil. Optar por utilizar indicadores de estado que no sean de forma modal.

El usuario no encuentra determinada información en la interfaz de forma rápida. Solución: Ayude al usuario a distinguir fácilmente elementos similares ya sea a través de sus iconos o bien con un texto breve. Las selecciones de texto deben ayudar a su lectura, usar contraste entre el texto y el fondo. El usuario pierde tiempo en “acomodar” la aplicación para su fácil uso cada vez que abre la misma. Solución: Guardar de forma permanente la customización del usuario a fin de facilitar su trabajo.

Rodríguez, Roberto (Página consultada el 15 de Noviembre de 2014) .“Interfaces Gráficas de Usuario”, [On - Line]. Dirección URL: http://bdigital.uncu.edu.ar/objetos_digitales/1505/rodriguezinterfaces.pdf

Interface Hall of Shame, http://www.interfacehallofshame.eu/www.iarchitect.com/shame.htm [Consulta: 17-11-2014]

Roe, Benjamin (Página consultada el 17 de Noviembre de 2014).“Diseño de Interfaces de Usuario Usables: Una Guía Rápida para Desarrolladores de Software Libre y de Código Abierto”, [On – Lline].Dirección URL: http ://mundogeek.net/traducciones/interfaces-usuario-usables/gui.html