Las 10 Pesadillas de la Usabilidad que Deberías Conocer

Artículo original: 10 Usability Nightmares You Should Be Aware Of
Autores: Vitaly Friedman and Sven Lennartz
Traducido por: Gabriel Porras

Algunas veces tan solo quieres obtener la información que estás buscando, grabarla y seguir. Pero simplemente no puedes. Las pesadillas de la usabilidad – las que más bien son una rutina diaria en lugar de una excepción – aparecen de vez en cuando; usualmente cada vez que digitas tus búsquedas en Google.

En su artículo “¿Por qué los sitios galardonados son tan horribles?” Gerry McGovern apunta que “lo externo por brillante gana premios, pero lo realmente esencial gana clientes” y esto es absolutamente cierto. No importa el diseño que tengas ni la funcionalidad que estés ofreciendo – si tus visitantes no entienden cómo pueden ir del punto A al B no usarán tu sitio.

En casi cada diseño profesional (exceptuando los diseños especiales como los portafolios) necesitas ofrecerles a tus visitantes:
- una clara navegación autoexplicativa,
- textos claros,
- un buscador y
- una estructura bien pensada y visible.

Y eso significa que simplemente debes seguir las reglas básicas de la usabilidad y del sentido común. Lo que quieres es comunicarte con tus visitantes, no espantarlos, ¿verdad?

En este artículo damos un vistazo a algunas de las pesadillas de la usabilidad que debes evitar si deseas diseñar sitios funcionales y usables. Al final del artículo también encontrarás ocho puntos que deberías tener muy en cuenta.

1. Esconder el vínculo de Login

Backpack, una de las herramientas más usables de administración organizacional y de proyectos que 37signal tiene, explica exactamente para qué debe ser usada la herramienta, cómo puede usarse y que características ofrecer. Sin embargo, una vez que te has registrado, necesitarás unos cuantos minutos para averiguar qué deberías hacer para comenzar a usar la herramienta.



El vínculo del Login (pista: en la caja amarilla) debería tener un tamaño de fuente más grande – aunque también unos iconos podrían hacer el trabajo.

2. Usar pop-ups (ventanas emergentes) para presentar contenido

Casi todos los navegadores modernos tienen un bloqueador de pop-ups, para evitar este tipo de ventanas, los bloques de publicidad y algunos contenidos de sitios reconocidos como publicidad. Firefox, Safari, Opera e Internet Explorer hacen uso de estos bloqueadores – por lo tanto la idea de usar pop-ups para presentar el contenido principal no es probablemente la idea más brillante que un diseñador web debería tener.



Sin embargo, el equipo de desarrolladores de Adidas parece que consideró que los pop-ups eran una forma creativa de acercarse a su audiencia. No es claro de qué se trata ImpossibleStory.com – la mayoría de los usuarios nunca lo averiguarán, aunque desactiven su bloqueador de pop-ups.

3. Arrastrar en lugar de tener una navegación vertical

Actualmente, esta técnica – no totalmente una pesadilla por lo que no es tan usual – podrá convertirse en una tendencia en el futuro. La acción de arrastrar, como la usamos en los documentos PDFs, también puede ser adaptada a los sitios web. Fichey ofrece una solución basada en Flash. Un acercamiento interesante, sin embargo no puedes guardar en tus favoritos ninguna parte específica del sitio – un problema típico de los diseños basados en Flash.



Una caja con información introductoria en el home informa a sus visitantes de la nueva forma de navegar. La herramienta muestra algunos sitios que están de moda. A propósito, los vínculos que muestran no funcionan – aparentemente, la herramienta muestra las capturas de pantallas, las cuales son grabadas e incrustadas como imágenes.

4. Vínculos invisibles

Tus visitantes deben saber dónde están, dónde han estado y dónde pueden ir. Si los diseñadores no presentan esta información de una manera adecuada, seguro que tendrán graves problemas con la navegación del sitio. Real Placer ha estado usando un puñado de vínculos invisibles desde hace tiempo. Mira esta imagen y los labels abajo (originalmente creados por Trenton Moss) – ¿puedes ubicar los vínculos?



Los números 1, 3, 4, 6, 7 y 11 son vínculos, mientras que los 2, 5, 8, 9 y 10 no lo son.

5. Ruido visual

Con frecuencia menos es más. El ruido visual es probablemente uno de los problemas más típicos que deben afrontar los diseñadores de los grandes sitios. Y es extremadamente fácil hacerlo mal. Como lo hace Overstock.



Adicionalmente: Tampoco es completamente claro cuáles son los vínculos y cuáles no. Además Overstock usa un variado número de presentaciones para sus vínculos y efectos “hover”. ¿Vínculo o no vínculo? Te divertirás mucho adivinando.

6. Camino sin salida

Si tienes un nuevo servicio, puedes usar diferentes métodos para mostrárselo a tus visitantes. Scriblink le da la bienvenida a sus visitantes con un pop-up y un applet de java. Así que los visitantes tienen que digitar algunos datos para comenzar a navegar.



Nada ayuda:
- hacer clic en el Cancel no ayuda,
- el OK no ayuda,
- el modo full-screen no ayuda,
- hacer clic en cualquier otra parte no ayuda,
- cerrar el navegador no ayuda,
- hacer clic en el símbolo de pregunta para pedir ayuda no funciona.

Realmente es injusto. Nosotros sólo queremos ver qué es lo que hace la herramienta…

7. Bloques de contenido cubriéndose entre ellos

Este es un problema típico que siempre aparece si tienes películas grandes de Flash. La navegación del sitio queda escondida; no importa que tan dispuestos estén los usuarios a navegar – no pueden hacerlo.



El mismo problema en Yahoo.com.

8. Navegación dinámica

Lo que parece una navegación usable, pronto se muestra de lo peor. No importa a donde apuntes con el mouse – las imágenes van de abajo a arriba y se cambia el lugar del vínculo que has “clickeado”. En la imagen de abajo se le hizo clic al vínculo “history”– y se movió; y no, las imágenes que se deslizan no vinculan a la página que quieres visitar.



El efecto aparece en ambos lados de los menús de navegación. Los visitantes necesitan algo de tiempo para entender qué es lo que está pasando. Sin embargo, una vez se entiende, la navegación ya no es tan difícil de manejar.



Lo mismo pasa en Kabe243. Adicionalmente: otra muestra de lo que es el ruido visual.

9. Los menús drop-down

Estos menús son útiles para los desarrolladores web pero casi siempre ponen los nervios de punta a los usuarios. Si tu –como diseñador – escondes los ítems de tu menú detrás de un drop-down te ahorrarás mucho espacio vertical; sin embargo los usuarios tendrán que apuntar muy cuidadosamente el mouse para ir a la sección que quieren visitar. Esto no es usable.

Y puede ser peor. Si la distancia entre los niveles de navegación es muy grande (por ejemplo si algunos ítems del menú tienen más texto) los usuarios tendrán además que mover el mouse horizontalmente. Y si el foco del mouse cambia su posición vertical, los usuarios tendrán que comenzar de nuevo.

2Advanced y Brita.net son ejemplos excelentes a estas pesadillas de la usabilidad.





Nota: Nos tomó docenas de intentos poder sacar estos screenshots.

10. Imágenes parpadeantes

Algunas veces tan solo quieres leer el contenido del sitio web que estás visitando. Y no puedes. Toca pelear contra los banners de los anunciantes quienes usan publicidad animada – usualmente gifs animados o películas en flash. En ambos casos se vuelve demasiado difícil concentrarte en la lectura si estas imágenes están parpadeando alrededor de todo el contenido.

Digital Web Magazine, un excelente magazine online, el cual leemos regularmente, tiene un aviso publicitario animado a la izquierda de cada artículo y molesta mucho.

¿Futura pesadilla? Apuntar el mouse en lugar de hacer clic

Dontclick.it, un experimento interesante en diseño de interacción, explora un ambiente sin clics. Quieren investigar cómo y qué cambia para el usuario y la interface cuando no dependes del hábito de hacer clic.



Dentro de esta interface no encontrarás ningún botón. Más bien navegas el sitio de una manera diferente – apuntando el mouse a las áreas del sitio en las cuales estás interesado. Lo que suena como algo interesante, pronto se convierte en una pesadilla de la usabilidad – tan solo imagina los usuarios tratando de abrir vínculos en una ventana nueva; además es interesante ver cómo exactamente los usuarios serán capaces de, digamos, abrir una lista de vínculos en tabs del navegador.

8 puntos que debes tener muy en cuenta

1. No uses pop-ups
Los pop-ups interrumpen la navegación de los visitantes y requieren retroalimentación inmediata. Respeta a tus visitantes.

2. No cambies el tamaño de la ventana del navegador
El mismo argumento anterior. Algunos navegadores, por ejemplo Internet Explorer, guarda su tamaño y lo usa para las navegaciones futuras. Como comenta Ben Bodien, “simple y llanamente es desconsiderado asumir que conoces mejor que el usuario como debería estar configurado su propio ambiente”.

3. No uses fuentes muy pequeñas
Los párrafos largos son más difíciles de leer y para leer frases cortas los lectores necesitan más tiempo. También aplica para vínculos, botones, formularios, cajas de texto y otros elementos. Buenas noticias – en la Web 2.0 se presenta lo contrario.

4. Usa vínculos que sean claros
Los vínculos tienen que ser precisos y clarificar el destino al cual apuntan. Las descripciones de vínculos ambiguas deben ser evitadas.

5. No debes tener enlaces rotos
Hay muchos de ellos de todas maneras; ¿por qué querrías llevar a tus visitantes a un camino sin salida?

6. Debes tener como máximo una animación por página
Si las imágenes parpadeantes están regadas por todo el sitio, es extremadamente difícil enfocarse en un único elemento. Dale a tus visitantes la oportunidad de apreciar tu contenido. Si usas publicidad animada, no la coloques a lo largo de toda la página.

7. Haz que te puedan contactar fácilmente
Tal vez porque no sólo quieras ser contactado, si tus visitantes quieren ponerse en contacto contigo, pero no encuentran ninguna información de contacto, pierdes su interés y confianza. Lo que es desastroso para las tiendas on-line y es una oportunidad perdida para el resto.

8. Abre tus vínculos en la misma ventana del navegador
Los visitantes quieren tener el control sobre todo lo que pasa en su navegador. Si ellos quieren abrir un vínculo en una nueva ventana lo harán. Si no quieren, no. Si tus vínculos abren en una nueva ventana estás tomando una decisión que no es tuya.