1. Metodología de Sistemas I
Diseño de interfaces de
usuario usables
Débora Moriset - 4°B
18-11-2014
2. La usabilidad (facilidad de uso) es una técnica necesaria para
lograr que un proyecto sea exitoso. Si un sitio web es difícil de utilizar,
el usuario se va. Si la página de inicio no comunica lo que la empresa
ofrece, el usuario se va. Si la aplicación es difícil de utilizar, el usuario
se va. Si el programa no realiza las acciones que debe realizar, el
usuario se va.
Los usuarios no leen un manual o invierten tiempo en aprender a
utilizar la interfaz. Hay muchos otros sitios web, muchas otras
aplicaciones o programas y ante cualquier dificultad, el usuario se va en
busca de una web o aplicación con mayor facilidad de uso.
A continuación se detallan algunos aspectos a tener en cuenta al
momento de diseñar una interfaz gráfica:
3. Estética y minimalismo
Los textos o cuadros de ayuda no deberían contener información
irrelevante o innecesaria. Cada vez que agrego información (útil o no)
significa tiempo perdido para el usuario que se desconcentra en la tarea
que está realizando para enfocarse en el texto mostrado.
¿Son necesarias las aclaraciones para esos botones? Creo que se
explican por sí solos.
4. Visibilidad del estado del sistema
El sistema siempre debe informar al usuario de lo que está sucediendo, a
través del feedback adecuado en el momento indicado.
Por ejemplo, Outlook Express solía mostrar una ventana notificando la
cantidad de mails recibidos, pero cuando se recibía un solo mail, la barra
de progreso mostraba sólo dos estados: llena y vacía.
¿Cómo podía saber el usuario si el archivo se estaba descargando o si
el sistema había dejado de funcionar? Uno podría suponer lo segundo y
recurrir al administrador de tareas para detener el proceso.
5. La realidad y el sistema deben coincidir
El sistema debe utilizar el lenguaje del usuario, con palabras, frases y
conceptos que le resulten familiares. Si se utiliza lenguaje propio del
sistema o consignas muy complejas podemos confundir al usuario.
Esta captura es de un programa que detecta errores de sintaxis en
HTML, cada una de estas flags o banderas comprueba distintos tags,
¿Pero cual hace que cosa? Las etiquetas deberían ser más específicas.
6. Consistencia y estándares
Los usuarios no deben preocuparse o preguntarse si diferentes acciones,
situaciones o palabras significan lo mismo. Deben seguirse ciertas
convenciones para la aplicación en desarrollo.
En la imagen se le solicita al usuario seleccionar ok si la respuesta es si
y cancel si la respuesta es no. ¿No sería más sencillo nombrar a los
botones "Si" y "No"?
7. Prevención de errores
Aun mejor que los buenos mensajes de error, es un buen diseño que, en
primer lugar, prevé que un error ocurra. Siempre es bueno evitar que los
errores más comunes y predecibles ocurran, ya sea modificando el diseño
o pidiendo confirmación del usuario antes ciertas acciones.
Esta aplicación pide al usuario tipear la palabra "YES" antes de
permitirle borrar la carpeta.
8. Ayuda y documentación
Aunque es mejor cuando el sistema no necesita ser documentado,
siempre es útil al momento de comprender lo que se puede realizar.
Dicha información debe ser fácil de acceder y no debe ser muy larga.
Cada vez que el puntero se detiene sobre cualquier lugar de la
aplicación durante unos segundos, una burbuja muestra ese largo texto
de ayuda que no permite ver con claridad las opciones.
9. Utilizar únicamente el teclado para
manejar la interfaz
Comprobar que esto es posible y que además las diferentes funciones de
acceso están bien documentadas e indicadas. También, hay que
comprobar si alguna de las operaciones resulta excesivamente
complicada de ejecutar con una sola mano o con un dedo.
La numeración muestra como se seleccionan los controles cada vez
que se presiona tab, deberían estar ordenados para que el usuario
pueda manejarse solo con el teclado.
10. Ayude al usuario a prevenir y
recuperarse de los errores
Los mensajes de error deben expresarse en lenguaje claro, sin códigos,
precisos, que indiquen cual fue el problema y que sugieran una solución
útil y viable.
Error: El botón no funciona.
Solución: Pruebe otro botón.
11. Proporcionar atajos
Los atajos son teclas o combinaciones de teclas que permiten al usuario
realizar más rápidamente las acciones más frecuentes usando
directamente el teclado en lugar de el mouse. De esta manera se gana
también en eficiencia y flexibilidad en el uso. Estos atajos se invocan con
la tecla CTRL más una o más letras o teclas de función. Por ejemplo,
CTRL+ X y CTRL + V son los atajos esperables para las operaciones de
cortar y pegar. Se recomienda respetar los atajos del sistema operativo,
por los beneficios en la facilidad de aprendizaje y la prevención de errores
que trae mantener la consistencia con el sistema operativo.
12. Características del color
Un error habitual a la hora de diseñar una pantalla es la de, intentando
aprovechar la posibilidad de usar el color, acabar abusando de él. Esto
provoca confusión a la persona que va a manejarla, ya que acaba
preocupándose más de adaptar su vista al continuo cambio de color
que al contenido de la información. Pueden producirse efectos ópticos no
armoniosos o desviaciones desproporcionadas de atención.
La aplicación de la captura utiliza los colores para informar el estado de
las celdas. Verde: se introdujo toda la información requerida. Rojo: no
se ha introducido toda la información requerida. Amarillo: la información
de la celda ha sido modificada. Bastante confuso.
13. Conservar los resultados para las mismas
interacciones
La dimensión más importante de la consistencia es la relación entre lo que el usuario
espera de la interfaz y lo que la interfaz finalmente hace. Una vez que se define un
comportamiento, este se debe mantener en toda la interfaz. Esta posibilidad de
predicción disminuye el tiempo de formación y permite al usuario hacer asociaciones
logrando una autoaprendizaje.
Este reproductor de IBM posee dos listas que funcionan completamente distinto, por
ejemplo, al hacer doble click en la lista de la izquierda (track list), la canción se copia
en la lista de la derecha (playlist); en cambio, al hacer doble click en la playlist ésta no
pasa a la track list. Además, mientras que la track list permite hacer selecciones
múltiples, la playlist solo admite una selección.
14. El contraste figura - fondo permite
legibilidad y evita el cansancio visual
En general se recomienda tener un color de figura oscuro sobre fondo
claro que al revés, porque se gana en legibilidad. Por ejemplo, los colores
claros quedan bien integrados si se unen con colores oscuros, ya que hay
un buen contraste, pero en determinados casos se pueden combinar con
tonos también claros, excepto si son demasiado parecidos, como ocurre
con el azul y el verde. Tonos oscuros como el rojo y el azul presentados
en una misma pantalla obligan al usuario a un esfuerzo de acomodación
óptica innecesario.
¿Qué dirá?
15. Bibliografía:
- Interface Hall of Shame, http://www.interfacehallofshame.eu/ [Consulta: 16-11-2014]
- Jakob Nielsen. (Página consultada el 16-11-2014) “10 Usability Heuristics for User
Interface Design” [On-line]. Dirección URL: http://www.nngroup.com/articles/ten-usability-
heuristics
- Jakob Nielsen. (Página consultada el 16-11-2014) “Usability 101: Introduction to
Usability” [On-line]. Dirección URL: http://www.nngroup.com/articles/usability-101-
introduction-to-usability
- Roberto Rodriguez. (Página consultada el 16-11-2014) “INTERFACES GRÁFICAS
DE USUARIOS: Estudio de una guía para su evaluación ergonómica” [On-line].
Dirección URL: http://bdigital.uncu.edu.
ar/objetos_digitales/1505/rodriguezinterfaces.pdf
