20 consejos de usabilidad esenciales para proyectos web

Todos sabemos qué es la usabilidad, pero es increíble la cantidad de gente que, por entregar "ya", la ignora de frente. Es culpa de los clientes en ocasiones, pero la no-usabilidad es una falta clara de profesionalismo. Y no sólo eso, agregar un par de arreglos estúpidos, pero que ignoramos por error o por afán, hace una gran diferencia en las visitas a nuestros sitios web. Si además te dedicas a Internet como un negocio, seguir por lo menos la mitad de esta lista te asegurará, más que un éxito inicial, una comunidad.

Dolorosamente obvios

Estos son los consejos que pueden parecer idiotas, pero seguro los ignoramos en uno u otro proyecto. Es importante ser consciente de ellos.

Navegación visible todo el tiempo

Crea una unidad de diseño en navegación y mantenla todo el tiempo. Si tu header tiene una botonera horizontal, asegúrate que se vea en todas partes. Cualquier persona debe ser capaz de navegar desde cualquier parte a cualquier parte de tu sitio. Si no, lo más seguro es que lleves a tu usuario a creer que ha cambiado de página.

Navegación invisible

La navegación invisible es otro problema, originalmente generado por los flashers, pero llevado al mundo de CSS y AJAX. Tienes toda la navegación de tu web escondida bajo iconos y sólo sabes qué hace un botón cuando pasas el mouse por encima. Tu botonera no es la barra de herramientas de Word. Poner una descripción contextual y clara de la función de cada botón es clave. Un usuario debe poder tomar una decisión antes de mover el mouse a un elemento de la interfaz.

Intros en Flash

De esto hemos hablado mil veces en Cristalab y afortunadamente ya están muriendo. Pero por si quedan dudas. Los usuarios en internet tienen la capacidad de concentración de una gallina. No hagan que se distraigan.

No interrumpas el flujo de trabajo del usuario

Popups de Javascript, sonido de fondo, desactivar el click derecho. Toda esa mierda espanta a los usuarios y hace que recuerden un odio especial en contra de tu creación. Es simple, no lo hagas. Intenta ser tan amable y bueno con tu usuario, así te duela a ti. A él jamás le debe doler.

Crea links semanticamente descriptivos

No te atrevas a crear un enlace con "click aquí". Eso no le dice NADA al usuario antes de dar click. Es una mala practica para posicionarte en Google y en general va en contra de toda la filosofía de la web. Simplemente no lo hagas.

Toques profesionales

Implementar ciertos arreglos de usabilidad, simples en su concepción, pueden mejorar mucho la calidad de tu trabajo final y el profesionalismo que reflejas.

Has prototipos

Puede que suene como una de las "dolorosamente obvias", pero hacer prototipos en papel o en programas como Balsamiq Mockups realmente cambia la forma en la que ves las interfaces de tus futuros proyectos. Podrás identificar rápidamente las buenas ideas, las cosas terribles y aquello que puedes mejorar.

Esconde lo que el usuario no necesita saber

El iPod no debe su éxito a sus impactantes características técnicas, sino a lo mucho que no le dice a sus usuarios. El hecho que seas un geek que quiera saber la cantidad de milisegundos en la que cargan tus paginas no implica que eso le sirva de nada al usuario. Pueden haber secciones, enlaces, botones e información completamente irrelevante para tus usuarios. Protegelos de eso. Aprende a "podar" tu arquitectura de contenido y borrar lo que no sirva.

Usa lo que creas

Es increíble la cantidad de gente que crea cosas para otros y jamás las usa. Si no usas lo que creas, jamás crearás un producto para ser usado. Obligate a usar realmente las cosas que creas y verás un cambio en lo que haces.

Escucha tus estadísticas

Google Analytics es un software genial. Te permite, usando pageTracker._setVar, colocar variables de tu creación en las estadísticas. Así puedes ver cosas como las temáticas más visitadas, usuarios registrados vs. invitados, entre muchas otras que serían imposibles con las estadísticas tradicionales. Además tiene el Bounce Rate, un valor que indica el porcentaje de visitas que se van sin dar clicks a nada. A menor porcentaje, tienes un mejor y más envolvente interfaz.

Crea formularios decentes

Aunque tu cliente lo crea, tu no necesitas el cumpleaños de tus usuarios. Hay una gran cantidad de datos que realmente no necesitas al registrar un usuario. Lo mismo pasa con los forms de enviar comentarios en los blogs. A eso sumale los CAPTCHA inentendibles que es mejor desechar. Usa otras técnicas para frenar el spam, como las preguntas matemáticas, las técnicas bayesianas, akismet, javascript o acusalos con su mamá.

Consejos innovadores

No tienes que crear un nuevo elemento de interfaz para mejorar un producto. No tienes que ser Apple para innovar (aunque ayuda).

Autocompletado en los campos de texto

Google y Amazon ya lo implementaron. Un sistema sencillo de autocompletado de acuerdo a las consultas más frecuentes en el campo que uses puede mejorar radicalmente la experiencia de tus usuarios. Lo mejor es que es MUY fácil de implementar. Con jQuery UI sólo tienes que hacer esto. En jQuery:

Código :

$("#autocomplete").autocomplete({ 
    data: ["aero", "airplane", "book", "movie", "music", "sports", "skating", "swim"] 
});

Y en HTML:

Código :

<input id="autocomplete" type="text" />

Y ya está. En serio.

Motores de recomendación

Para Wordpress hay millones de plugins, o si el heroísmo corre por tus venas, puedes programarlo. Los motores de recomendación de productos, de artículos relacionados o lo que sea que enlace el contenido de lo que estás viendo con otros similares capturan a tus usuarios con gran efectividad. ¿O no sientes la necesidad de comprar eso que Amazon te recomendó?

Asesina todos los clicks que puedas

La web de las descargas de Apple tiene un componente Accordion con las descargas por categorías, al cual no necesitas dar click para cambiar de panel. Amazon tiene implementada la peligrosa función "Compra con un click" para eliminar todos los pasos innecesarios y dolorosos del e-commerce. A más clicks hagas desaparecer, mejor será la experiencia y fidelidad de tus usuarios.

Usa AJAX inteligentemente

AJAX es una tecnología que ha sido abusivamente violada por incontables "iniciados" del diseño web. Sin embargo, usarla en los casos correctos puede crear una diferencia. Youtube la usa para cargar las páginas de comentarios y enviarlos sin necesidad de cambiar de URL, así puedes mantenerte escuchando el video mientras lees los comentarios.

Has experimentos de usabilidad

Lo mejor de la web, comparado con otros mercados, es que hacer experimentos es gratis. Prueba, con estadisticas claras, distintas interfaces y arreglos posibles. Mira cual te genera más visitas, cual baja más el bounce rate, cual hace que más usuarios se registren. Los experimentos son la razón por la que Halo 3 es uno de los juegos más vendidos de la historia. No es porque sea el juego más innovador o con mejor historia, es porque es increíblemente usable.

Imagina interfaces nuevas alrededor del contenido existente

Gmail no sólo nos cambió la vida trayendo los correos de gigabytes y el AJAX que hace que no tarde en cargar tu correo. También introdujo un concepto muy obvio, pero que nadie había intentado antes: Conversaciones anidadas.

El hecho de crear una nueva interfaz para el correo electrónico cambió sin duda la forma en la que usamos nuestro email. No crearon una nueva interfaz, no insertaron multitouch o una ruedita al correo. Simplemente lo organizaron en un hilo como un foro.

¿Quieres compartir algún consejo tuyo?

La usabilidad en nuestros proyectos también la crea la experiencia en el medio. Si tienes más consejos o preguntar acerca de estos, déjanos tu comentario. Los que digan que no son 20, serán recibidos con una amable carta de agradecimiento a tu casa y dos puntos láser de snipers.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.