10 pesadillas de la usabilidad que deberias evitar

Posted on marzo 6, 2008. Filed under: General, Información | Etiquetas: , , , |

Muchas veces quieres tener la información, guardarla y seguir adelante. Y no puedes. Las pesadillas de la usabilidad, que forman parte de la rutina diaria más que de una excepcion aparecen una y otra vez. En este artículo “Porque los sitios que ganan premios son tan horrorosos” Ferry McGovern apunta que “las superficies brillantes ganan premios, mejoras reales ganan clientes” y eso es absolutamente cierto. No importa el diseño que tengas, y tampoco importa que funcionalidad quieres ofrecer, si tus visitantes no entienden que tienen que hacer para llegar del punto A al punto B, no usarán tu página.

En la mayoria de los diseños profesionales (excepto en diseños especiales para mostrar cosas como por ejemplo portfolios) necesitas ofrecer a tus visitantes:

  • Navegación clara y sencilla, que hable por si misma de como usarla.
  • Texto de presentación preciso y directo.
  • Búsquedas.
  • Estructura visible de la página.

Esto significa que solo tienes que seguir los principios básicos de la usabilidad y sentido común. Quieres comunicarte con tus visitantes, ¡no los eches fuera!

En este artículo daremos una vuelta por algunas de las pesadillas de la usabilidad que deberias evitar para tener una página funcional y usable. Al final del artículo también podras encontrar 8 puntos más que probablemente debas aplicar.

1.- Formularios de login ocultos

Backpack, una de las herramientas mas utiles de organización y gestion de proyectos de 37signals, explica exactamente lo que la herramienta puede ofrecer, como usarla y que características tiene. Sin embargo, una vez que te has registrado, necesitas unos cuantos minutos para encontrar el lugar para poder empezar a usar la herramienta.

 
El enlace de login (ayuda: en el rectangulo amarilllo) podría tener un tamaño de fuente mayor o estar acompañado de algún icono. Cada usuario registrado tiene su propia página personalizada, sin embargo los nuevos usuarios registrados tienen que pasar un tiempo buscando donde pueden logearse. Como comenta As Lee “alguien que haya perdido el tiempo registrándose en tu pagina puede permitirse mas de 2 segundos encontrando como logearse”. Vale, ¿pero porque debería hacerlo? ¿Porque el enlace no está en un sitio visible? Suena bastante razonable.

 

2.- Pop-ups para presentación de contenido

Casi todos los navegadores actuales tienen un bloqueador de pupus y de publicidad. Firefox, Safari, Opera e Internet Explorer lo usan – por lo tanto la idea de utilizar ventanas emergentes para presentar el contenido principal de la página no es quizás la mejor manera de hacerlo.

 

Sin embargo, el equipo de desarrolladores de Adidas parecen considerar que el uso de popups es una manera creativa de aproximarse a su objetivo. No esta claro de que va impossibleStory.com– muchos usuarios nunca lo sabrán, incluso nosotros fuimos demasiado perezosos para ir a desactivar el desbloqueador de popups.

3.- Arrastrar en lugar de navegación vertical.

En realidad, esta técnica – no es una verdadera pesadilla, pero bastante común – podría convertise en una nueva tendencia en un futuro. La acción de arrastrar, tal como se usa en documentos PDF por ejemplo puede ser adaptada a paginas web. Fichey ofrece una solución basada en flash, interesante enfoque, sin embargo no se pueden marcar partes específicas de la página, un problema típico de las páginas en flash.

Un cuadro de información nada mas entrar en la web nos advierte de la nueva forma de navegación. La herramienta muestra las páginas que son actualmente más populares. De todas maneras los enlaces no funcionan – parece ser que la herramienta muestra capturas de pantalla que son guardadas como imágenes incrustadas.

4.- Enlaces invisibles

Los visitantes tienen que saber donde están, donde han estado y a donde pueden ir. Si los diseñadores no presentan esta información de manera adecuada, pueden tener graves problemas en la navegación de la página. Real Player han estado usando enlaces invisibles durante mucho tiempo. Exale un vistazo a la imagen de aquí abajo (originalmente creada por Trenton Moss), ¿puedes ver los enlaces?

1,3,4,6,7 y el 11 son enlaces, y 2, 5, 8, 9 y 10 no lo son.

5.- Ruido o sobrecarga visual

A menudo, menos es más. El ruido visual es uno de los típicos problemas al que los diseñadores tienen que hacer frente. Y es extremadamente fácil hacerlo mal. Como Overstock hace.

Bonus: Tampoco queda muy claro que es un enlace y que no lo es. Overstock usa diferentes maneras de presentar un enlace. ¿Enlace o no enlace? Puedes entretenerte buscándolos.

6.- Zonas sin salida

Puedes usar diferentes maneras para presentar el producto a los visitantes. Scriblink da la bienvenida a sus visitantes con un applet en Java en forma de ventana emergente. Los visitantes tienen que introducir algo para continuar navegando a través de la página.

Nada ayuda:

  • Clicando a cancelar no ayuda.
  • Clicando a ok no ayuda.
  • El modo a pantalla completa no ayuda
  • Clicando en algun otro sitio tampoco ayuda
  • Cerrando la ventana tampoco ayuda
  • Clicando en la imagen de ayuda para obtenerla, tampoco ayuda.

Lamentable. Solo queríamos ver lo que hace la herramienta…

7.- bloques de contenido unos encima de otros.

Es un problema típico que aparece con películas en flash de gran tamaño. La navegación de la pagina está solapada, aunque los visitantes estén dispuestos a navegar, no tienen otra opción que desistir.

8.- Navegación dinámica

Lo que parece una página con una navegación usable, muestra su cara oculta en los primeros instantes. No importa hacia donde dirijas el puntero, las imagenes suben y bajan y cambian el foco del enlace donde querias clicar. En la imagen de abajo, hemos intentado clicar en el enlace “history” y la imagen lo desplazó. Y no, las imágenes que se deslizan no estan enlazadas con las secciones que ibamos a clicar.

El efecto aparece en ambos lados del menú de navegación. Los visitantes necesitan algun tiempo en saber que es lo que está pasando. Sin embargo, una vez que la idea esta clara, la navegación no es tan difícil de usar.

La misma idea en Kabe243. Bonus: El ruido visual en su mejor forma.

9.- Menus desplegables

Los menus desplegables son útiles para los desarrolladores y para los nervios de los visitantes. Como diseñador ocultar ítems en un menú desplegable te ahorra gran cantidad de espacio, sin embargo los usuarios han de centrarse en el ratón de forma muy precisa para ir a la sección donde quieren ir. Esto no es usable.

Sin embargo, podria ser aun peor. Si la distancia entre los distintos niveles de la navegación es demasiado grande (por ejemplo porque los items del menú tienen mas texto) los usuarios tienen que mover el ratón horizontalmente. Si el foco del puntero cambia su posición vertical, los usuarios tienen que empezar desde el principio.

2advanced y Brita.net son excelentes ejemplos de esta pesadilla.

Apunte: nos llevó una docena de intentos hacer estas capturas de pantalla…

10.- Imágenes animadas

Muchas veces lo unico que se quiere es leer el contenido de la página que se está visitando. Y no puedes. Para luchar contra la ceguera del baner, los anunciantes hacen uso de GIFs animados o banners en flash llenos de movimiento. En ambos casos se hace difícil concentrarse en la lectura si este tipo de imágenes están parpadeando todo el tiempo.

Digital Web Magazine, es una excelente revista online que tiene un anuncio animado en la parte izquierda en cada uno de los articulos.

Nota del traductor: Hay casos bastante peores que este…

8 puntos sobre usabilidad que deberias tener en cuenta.

No uses popups.
Las ventanas emergentes interrumpen la visita a tus usuarios y requieren una respuesta rápida. Respeta a tus visitantes.

No cambies el tamaño de la ventana de los usuarios
El mismo argumento anterior se mantiene en este caso. Algunos navegadores, por ejemplo Internet Explorer, guardan las dimensiones del navegador y las usa para posteriores sesiones. Como Ben Bodien comentó: “Es inconsiderado el presuponer que usted sabe mejor que el usuario la mejor forma de configurar el entorno de un software”

No uses fuentes demasiado pequeñas.
Mucho contenido se hace difícil de leer. Se mantiene tambien para enlaces, botones, formularios, cajas de busqueda y otros elementos. Buenas noticias – en web 2.0 pasa justo lo contrario.

Enlaces poco claros
Los enlaces deben ser precisos y describir el contenido de lo que vinculan. Descripciones ambiguas deben evitarse.

Enlaces muertos
Hay muchos de estos casos, ¿quieres mandar a tus visitantes a un punto sin retorno?

Como mucho una animación por página
Si el uso de imágenes animadas esta repartido a lo largo del artículo es muy difícil para los visitantes centrarse en el contenido de la web.

Facilita el contacto contigo
Quizas no quieras que nadie se ponga en contacto contigo, pero si los visitantes quieren contactar contigo y no encuentran la información de contacto, perderás su interés y confianza. Desastroso para una página de venta online y una oportunidad perdida para el resto.

Los enlaces se abren en la misma ventana
Los visitantes quieren tener el control de todo lo que ocurre en su navegador. Si quieren abrir en enlace en una nueva ventana, lo harán. Sino quieren, no lo harán. Si eres tu quien abre el enlace en una nueva ventana estas tomando una decisión que no te coresponde.

 

Fuete: Nerv.es

Anuncios

Make a Comment

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Una respuesta to “10 pesadillas de la usabilidad que deberias evitar”

RSS Feed for Un Web jam Comments RSS Feed

Muy buen articulo, tiene muchos puntos importantes a tomar en cuenta.


Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...

A %d blogueros les gusta esto: