Interfaces de usuario

1. UTN FRA – Tecnicatura Superior en Programación 4° B
Profesora: Gabriela Flores – Metodología de Sistemas
Alumnos: María Laura Taborda – Paula Raives
Fecha de Entrega: 18/11/2014
Recomendaciones de diseño y usabilidad

2.  Diseño ………………………………… 3
 Usabilidad …………………………. 13

3. 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

4.  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.

5. Figura 1.2 – Microsoft Word
• 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.

6. 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.

7. Figura 1.3
 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.4

8.  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

9. 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.

10. ¿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.

11.  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

12. 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.

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

14.  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

15.  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.1
Error encontrado en Visual Basic 5.0
No tiene descripción el error

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

17. 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.

18. 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.

19. 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