Diseño de interfaces de usuario usables

Débora Moriset - 4°B18-11-2014

Metodología de Sistemas I

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:

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.

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.

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.

La realidad y el sistema deben coincidir

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"?

Consistencia y estándares

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.

Prevención de errores

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.

Ayuda y documentación

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.

Utilizar únicamente el teclado para manejar la interfaz

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.

Ayude al usuario a prevenir y recuperarse de los errores

Error: El botón no funciona. Solución: Pruebe otro botón.

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.

Proporcionar atajos

Características del colorUn 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.

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.

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á?

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