Usabilidad: 12 técnicas para un buen diseño de interfaces

Muchas veces al desarrollar una aplicación web le prestamos mucha atención a su estética para satisfacer la experiencia del usuario, pero esto no es una garantía para que el producto resulte “utilizable”.

Para lograr una buena interfaz de usuario en nuestras aplicaciones web, también es necesario incorporar conceptos y reglas básicas de usabilidad. Aquí les presentamos 12 útiles técnicas –y su debida implementación– para que nuestras aplicaciones sean amigables, entendibles y fáciles de usar.

1. Resaltar los cambios importantes

Uno de los elementos más significativos de una buena interfaz de usuario es la visibilidad del estado del sistema; el usuario debe notar inmediatamente qué es lo que está sucediendo detrás de escenas y si sus acciones han llevado a los resultados esperados.

Para lograr esto hoy en día se utiliza mucho AJAX, que permite a los usuarios actualizar parte de una página en cualquier momento sin tener que actualizar la página completa. El ojo humano puede percibir muy bien el movimiento cuando el resto del sitio se encuentra estático, por lo que una animación que acompañe los cambios es una buena opción a tener en cuenta.

2. Habilita los atajos del teclado en tu aplicación web

Esta pequeña funcionalidad puede mejorar significativamente el flujo de trabajo de los usuarios y hacerles más fácil sus tareas.

Para implementar esto, básicamente se debe utilizar el evento onKeyPress-DOM y manipular la apariencia del documento utilizando la función JavaScript window.scrollTo.

3. Agrega opciones de actualización en la cuenta de usuarios

Si tu aplicación posee varios planes de suscripción sabrás que la mayoría de los usuarios primero desean probar la versión básica para obtener un panorama general de lo que el servicio ofrece y cómo funciona. Si sus expectativas se cumplen, considerarán actualizar a un plan más avanzado. Para lograrlo asegúrate de remover cualquier fricción de la interfaz para que los usuarios decidan actualizar.

Flickr ofrece la actualización de tu cuenta en sólo 2 pasos:

Es tarea del diseñador asegurarse que esta transición resulte tan simple e intuitiva como sea posible. Una forma de lograrlo es incluir las opciones de actualización directamente en la cuenta de los usuarios.

4. Promociona las características de la aplicación

Describe las nuevas propiedades que incluyas en la aplicación en algún lugar muy visible para los usuarios, como por ejemplo la barra lateral o sidebar.

5. Utiliza listas de colores codificados

Muchos servicios utilizan la codificación por medio de distintos colores para ayudar a la distinción visual de distintos tipos de entradas. Una forma de lograr esta codificación es colocando etiquetas de texto dentro de una caja de un color determinado.

6. Ofrece opciones de personalización

La personalización es uno de los métodos más simples y efectivos de atraer a los usuarios a tu servicio y hacer que se sientan más cómodos con el mismo.

Esto se puede lograr dándole al usuario la posibilidad de personalizar la apariencia de la interfaz de la aplicación, dejándole seleccionar el color del tema, los colores del link y del fondo de la página, etc.

Gmail ha logrado una excelente opción de personalización en su aplicación de correo electrónico, donde puedes escoger entre varios motivos o incluso diseñar el tuyo:

7. Muestra mensajes de ayuda que llamen la atención

Para ayudar a la gente que no está muy segura sobre lo que está haciendo, es necesario que muestren mensajes de ayuda que capten su atención. ¿Cómo? Utilizando colores llamativos o pegando notas estilo “post-it” en la barra lateral de la web.

8. Diseña con cuidado los mensajes con respuestas a acciones

Estos mensajes de respuesta aparecen en respuesta a alguna acción (buena o mala) del usuario dentro de la aplicación web. Un ejemplo de esto es al ingresar una contraseña errónea en el inicio de sesión. En este caso necesitamos advertirle al usuario que se ha equivocado.

Pero también pueden haber mensajes no tan alarmantes como recordarle que debe guardar cambios. Otros mensajes pueden ser simplemente notificaciones o avisos.

En cuestiones de usabilidad, es bueno tener en claro que cada uno de estos mensajes tiene un significado diferente y justamente hacer que este significado sea entendido a simple vista. ¿Cómo? Distinguiendo cada tipo de mensaje con un color especial:

• Rojo: se utiliza para los errores o acciones que no se pueden realizar.
• Amarillo: suele estar implementado en mensajes de advertencia.
• Verde: se usa casi únicamente para las notificaciones.

Un ejemplo tomado del portal de viajes, Viajeros.com:

9. Utiliza navegación por pestañas

Este recurso no sólo es bonito a la vista, sino que mejora notablemente la usabilidad de la web porque la metáfora visual es fuerte y clara.

10. Oscurece el fondo debajo de las ventanas modal

En algunas aplicaciones es común que se quiera mostrar un pequeño formulario o sección que no merece realmente una página nueva. Por ejemplo, la carga de un avatar o la subida de imágenes. Para este tipo de cosas los desarrolladores han creado las modal windows, o ventanas modal. Estas ventanas tienen la particularidad de ser pequeñas ventanas que se abren en la misma página “sobre” el contenido. Para avanzar es necesario que el usuario haga lo que tiene que hacer antes de proseguir.

Sin embargo, es importante dejar en claro dos conceptos:

1. Que la ventana modal es independiente del contenido que estábamos viendo
2. Que la ventana modal está “sobre el contenido” y hasta no hacer algo con ella no volveremos al estado anterior. Claro, no es necesario que hacer algo sea completar el formulario, siempre existe la posibilidad de cancelar.

En cuestiones de usabilidad, la mejor forma de lidiar con una de estas ventanas es oscureciendo el contenido “debajo” de la modal windows. De esta manera, no quedan dudas acerca de cuál es la jerarquía de las ventanas y los pasos a seguir. Un ejemplo simple es la carga de fotos en WordPress:

11. Lightboxes y Slideshows

Si tu aplicación incluye imágenes que los usuarios podrán ver, sabrás que mostrar cada una en una página diferente no es una genialidad, mucho menos considerando el cansacio de los usuarios y de tu servidor. Para lograr la visualización de imágenes en cantidad, es muy útil la implementación de Lightboxes y Slideshows.

Estos sistemas suelen funcionar sin necesidad de abrir una ventana nueva. Por ejemplo, al hacer clic sobre un thumbnail (o imagen en miniatura) una Lightbox abrirá la versión ampliada de la imagen en una ventana modal, por encima del contenido. Eso significa menos consumo para el servidor y una acción mucho más rápida y sencilla para los usuarios

10. Utiliza formularios de registro cortos

Esto es algo fundamental ya que mientras más largo y complejo sea el proceso de registración menos serán las ganas que tendrán los usuarios de obtener nuestro servicio. Es por eso que es recomendable que en el formulario de registro aparezcan sólo los datos que es absolutamente necesario rellenar, lo demás se puede completar después.

El formulario de registro de Vimeo (Sí, los tres casilleros de arriba!) es uno de los mejores ejemplos de usabilidad en este tipo de opciones:

Como dijo una vez Steve Jobs “el diseño no es solo cómo luce y cómo se siente, el diseño es también cómo funciona”. De hecho la usabilidad de un sitio está representada por cuán bien lleva a cabo sus funcionalidades y cuán fácil es acceder a cada sección y tarea que se propone.