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:

actualizar-cuenta

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:

personalizar

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:

mensaje_alarma

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:

fondo-negro

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:

registro

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.


0 comentarios to "Usabilidad: 12 técnicas para un buen diseño de interfaces"

Publicar un comentario en la entrada

Blog Archivo

Subscribete via E-Mail

Subscribete via RSS!

Ingresa tu email para:
Recibe actualizaciones del Blog.

Etiquetas

16-bit 2.0 2012 256 colores 2d 3 404 5 8 acelerar Acer Aspire ActionScript ADD-ONS addon adobe adobe air Adsense aerogarden agilidad airbender AJAX alarma alien all your base alta definición Android angulacion answers API APIs aplicacion aplicaciones Apple apps archive Argentina ask atajo atajos de teclado ataque audio avance avatar aventura grafica back background backtweets balsamiq mockups banda bang banners barcelona barra lateral bases de datos Batacazo bateria bbcode bear bebé Biblioteca Virtual big bing BitDefender BitTorrent blekko Blog blogger bloggers blogósfera Blogs bocetos bollywood bordes botánica brickify brush buenos aires buscador búsqueda avanzada cache caja calendario calidad cámara web canciones Canvas carrusel catástrofe ceguera de banners celular CEO charla chpimunk chrome chrome web store chromium chuck norris cine Cisco cita cliente ftp cloud cluster Cms cocina codec código coleccion color colorotate columna comercio commodore 64 compatibilidad Competencia compositio Comscore comunicacion Comunidad comunidad online Conferencia configuración consejos contenido content copia correo correo electrónico cotidiano cpanel Creatividad criminal cross-browser cse CSS CSS3 cubo cuenta cuentos cultivo Curiosidades curso photoshop Cursos daisies date Debian degradé dell desaparecer desarrollo web descarga Descargas descomprimir desfragmentar despertador despertar deviantart DHTML Digg diseñador Diseño Diseño Grafico Diseño Gráfico diseño web Disney dispositivo dispositivos moviles dispositivos táctiles div dominio dramatic dropbox duck go e-book e-commerce e-commerce day e-mail EBE ecología editor educación a distancia educativo Educativos Niños efecto efectos ejemplo emblema emprendimiento emulador emuladores encabezados encuesta enlace episodios error escritura España estadística Estados Unidos estilo estudio etica evento Eventos Excel exportar extensión extensiones extraterrestre Facebook facebook connect garage fc64 feeds Fiberparty film Filosofía Firebug firefinder Firefox firmware fixes Flash flex 4 Flickr fondo fondos font font dragr form formularios foto Fotografía Framework freelance fuente fuentes future FXG g1 gadget gadgets games gaming gazelle geek gestion gestor de contenido gestos gestuales gesture ghajini gm730 Gmail Google google analytics google app Google Calendar Google Chrome Google Docs gradient gradiente gradientes gráfico gran torino gratis groupon guerra guia h.264 habla hack Hackers handle handler hardware herramientas gráficas hitchcock hollywood homepage horizontal hover HP html HTML válido HTML5 HTTP hub huerta IBM icono IE illustrator imagen Imagenes imágenes importar impress inclinacion indio infecciones info-box infografías iniciador Inkscape inspiracion interactivo interfaz Internet Internet Explorer interno invasión investigación iPhone iphone os iPod island istick IT iTunes U jackson JavaScript jerarquía jetpack jQuery jQuery TOOLS jsc64 juego Juegos lanzamiento laptop lego lenguaje Lenovo Lg libre librería libro limpieza Links Linux literatura lógica logo logos logotipo lolcat Lotería love luca lucasarts luces luminoso luz Mac mac book pro mac os x MacBook macro mago Malware manejo mantenimiento manual mapa mapeo maquetación marciano Marketing mascara mascota McBook medicion medio ambiente meme memoria mente menú metafilter metropolis michael microsoft Mobile Learning mockup monkey moonwalker mootools moousture motivacional motor de busqueda motores de búsqueda mouse mouseprobe mov movil mozilla Mozilla Firefox Mozilla Labs mp3 MS Office mujer maravilla multimedia MultiTouch música MXML MySpace MySql N97 napkee navegación Navegador navegadores networking New York nightly nihilogic no ser encontrado nodos Nokia notebook noticias Novedades ochentoso oferta offers oficial online Open Source Open SUSE OpenOffice opera operativo oportunidad optimización orden organizacion orgullo os oscurecer oscuridad oso Outlook oz page speed PageRank pagespeed pageviews panaderia Panda paneles pantalla pantallas táctiles parasitos PDF peekfeed película pencil peoplebrowsr perfil pestaña photoshop photoshop clase 2 PHP php 5 Picasa picker pinceles pingie piratas pirates plagio plantación plantar plantilla plastic logic Plugin plugins pocket yoga podcasts port portal portátil posicionamiento powerpoint ppc prejuicio preparacion presentación Productividad Programación programas promocion protofish prototype proyecto prueba PSD Psicología public Publicidad puerto QEMU quickoffice quicktime quote rafael jimenez rank Recursos Red red social reddit Redes sociales reloj remake reproductor reseña resolución respaldo resultado retro robo rojo RSS rubik Ruby rust Safari Salud sans-serif sclipo script sculpting sdk seleccionador SEO serie serif SERP server servidor servidor web set shadow share sherlock shortcodes shuffle sidebar sidepost simple simpson Sin clasificar sistema sistema operativo sistemas operativos sitios web slideshow smart smooth SMS snow leopard social sociedad Software Software educativo software libre sombra sonido soundmanager2 spam spreadsheet SQL Squeeze startup steps left store streaming subdominio success suckerfish sun microsystems tablas table tabs tactil Taller de Fotografía Digital Taller de Photoshop taller photoshop Talleres Tarjetas de Crédito teaser tecnica Tecnologia teddy telefono television telltale template templates textbox the theme Themes theora thumbnails tienda time tipografía tipografias tips titulares to touchscreen tower defense trailer transform transition tres Troyano Troyanos truco Trucos tutorial photoshop tutoriales TV tweet tweetstats Twitter unplugged Usabilidad USB usuarios Utilidades para PC Utilidades para tu web variables vector vegetales velocidad venta Ventas verde verdura version video videojuego videojuegos videos Videos de Música Peruana viernes Viernes Unplugged VirtualBox Virus Visas VMware voucher w3c wallpaper wallpapers web Web 2.0 web participativa webcam WebKit webm webmaker Wi-Fi widescreen Wikipedia Windows Windows 7 Windows Mobile wiz wizard wolfram wonder woman Word Wordpress WorldBuilder wwdc 09 XHTML yahoo Youtube yui zip