8 claves para una experiencia de usuario y usabilidad web excepcionales

A la hora de diseñar o rediseñar un sitio web, es muy fácil obsesionarse con la estética. «Ese tono de azul no se ve bien. ¿No quedaría genial poner el logotipo a la derecha de la pantalla? ¿Y si metemos un meme enorme en el medio de la página?»

Sin embargo, si quieres lograr un determinado resultado con tu sitio web, como el reconocimiento de la marca o la generación de leads, tendrás que centrarte en otros elementos además de su apariencia.

Si tenemos en cuenta que en el mundo hay más de mil millones de sitios web que visitar, tienes que asegurarte de optimizar el diseño del tuyo en usabilidad (lo fácil de usar que es)  y también la experiencia del usuario (lo agradable que es la interacción de los usuarios con el sitio).

Ahora bien, podrías pasar años ultimando estos detalles. Para que tengas un punto de partida, elaboramos la siguiente lista de pautas útiles que podrás aplicar en tu próximo proyecto de diseño web.

8 claves para una experiencia de usuario y usabilidad web excepcionales

1) Simplicidad

Si bien la apariencia de tu sitio web es importante, la mayoría de los usuarios no lo visitan para evaluar la calidad de su diseño. En cambio, quieren completar una acción determinada o buscan información específica.

Los elementos de diseño innecesarios que no tienen una finalidad funcional distraen a los visitantes y les hacen más difícil cumplir su objetivo.

Desde la perspectiva de la usabilidad y la experiencia del usuario, la simplicidad es tu mejor aliada. Puedes ponerla en práctica de distintas maneras; aquí tienes algunos ejemplos:

• Colores: no te excedas. En The Handbook of Computer-Human Interaction (Manual sobre la interacción entre equipos y seres humanos), se recomienda usar un máximo de cinco (en promedio, dos) colores distintos en el diseño de un sitio web.
• Tipos de letra: los que elijas deben ser, por lo menos, legibles. También aquí conviene reducir la paleta de colores. Se suele recomendar usar un máximo de tres tipos de letra diferentes y tres tamaños distintos.
• Gráficos: úsalos únicamente si ayudan al usuario a completar una tarea o cumplen una función específica (no agregues gráficos a discreción).

Este es un excelente ejemplo de un diseño sencillo: la página de Rockaway Relief:

2) Jerarquía visual

La jerarquía visual es un concepto que está íntimamente ligado al principio de simplicidad. Consiste en disponer y organizar los elementos de un sitio web de modo que los visitantes se centren primero en lo más importante.

Recuerda que el objetivo de optimizar el sitio en función de la usabilidad y la experiencia del usuario es convencer al visitante de que complete una acción deseada, pero de un modo natural y entretenido. Al ajustar la posición, el color o el tamaño de determinados elementos, puedes estructurar el sitio de tal manera que los visitantes primero se sientan atraídos hacia esos elementos. 

En el siguiente ejemplo de Spotify, puedes ver que la llamada a la acción «Obtén Spotify gratis» aparece en lo alto de la jerarquía visual. En primer lugar, están en un lugar destacado de la página. Además, es el único elemento de la página que tiene un color diferente, por lo que llama la atención de los usuarios.

3) Navegabilidad

Es fundamental que el sitio ofrezca una navegación intuitiva para garantizar que los visitantes encuentren fácilmente lo que están buscando. Lo ideal sería que no tuvieran que pensar demasiado para saber dónde hacer clic a continuación; es decir, moverse de un punto a otro debería ser lo menos problemático posible.

Estos son algunos consejos sobre cómo optimizar la navegación de un sitio:

• Simplifica al máximo el menú de navegación principal (y ubícalo en la parte superior de la página).
• Incluye opciones de navegación en el pie de página.
• Usa migas de pan en todas las páginas (excepto en la principal), de modo que los usuarios puedan ver su recorrido de navegación.
• Incluye una casilla en la parte superior del sitio para que los visitantes puedan hacer un búsqueda por palabras clave.
• No ofrezcas demasiadas opciones de navegación en una página.
• No profundices demasiado. En la mayoría de los casos, es mejor no incluir más de tres niveles de profundidad en la navegación. Consulta este artículo (en inglés) para entender mejor la diferencia entre navegación plana y navegación profunda.
• Incluye enlaces en el texto de la página y especifica hacia dónde dirigen.

Consejo adicional: cuando hayas decidido cuál será la navegación principal (superior) del sitio, mantén la consistencia. Las etiquetas y la ubicación de la navegación deben ser las mismas en todas las páginas del sitio. Echa un vistazo a este ejemplo del sitio web de InVision:

Esto nos lleva al siguiente principio...

4) Consistencia

Además de la navegación del sitio, también debes respetar la consistencia del estilo general de las páginas. Los fondos, los esquemas de colores, los tipos de letra e incluso el estilo narrativo son áreas en las que la consistencia puede generar un impacto positivo en la usabilidad y la experiencia del usuario.

Sin embargo, esto no quiere decir que todas las páginas del sitio tienen que tener la misma disposición. Debes crear diseños distintos para los diferentes tipos de páginas (p. ej., uno para las páginas de destino y otro para las páginas de información). Si usas estas estructuras de manera consistente, a tus visitantes les resultará más fácil entender qué tipo de información pueden encontrar en una página determinada.

A continuación, puedes ver cómo Airbnb utiliza el mismo diseño para todas las páginas de ayuda (una práctica común). Imagina lo desconcertante que sería que cada una de las páginas de ayuda tuviera una disposición diferente.

5) Accesibilidad

Según comScore, el consumo de internet en tabletas creció un 30% entre 2013 y 2015. En cambio, el consumo en teléfonos inteligentes creció un 78% durante el mismo período. La conclusión es que, para poder ofrecer una experiencia del usuario excepcional, tu sitio debe ser compatible con los distintos dispositivos (además de sistemas operativos y navegadores) que usan los visitantes.

A grandes rasgos, esto significa invertir en una estructura de sitio web que sea muy flexible, como por ejemplo, el diseño adaptable. En un sitio adaptable, el contenido se redimensiona y reorganiza automáticamente para ajustarse a las características del dispositivo de cada visitante. Clientes de Marketing Hub: gracias al diseño adaptable integrado, el contenido de HubSpot creado en el COS se optimiza automáticamente para cualquier dispositivo.

Específicamente, mejorar la accesibilidad puede ser tan simple como agregar texto alternativo a todas las imágenes. De este modo, los usuarios que no las pueden ver en el navegador igualmente entienden el contenido de la página.

Después de todo, lo más importante es que el sitio web ofrezca una experiencia de calidad en las distintas plataformas y no que se vea idéntico en todas. Por eso, es mejor seguir las pautas de diseño tradicionales de cada plataforma y evitar agregar elementos especiales que los usuarios quizá no conozcan.

Y así llegamos al siguiente principio...

6) Pautas tradicionales

Existen determinadas normas de diseño web que los usuarios de internet han ido aceptando a lo largo de los años, como, por ejemplo:

• Situar la navegación principal en la parte superior (o en el lado izquierdo) de una página.
• Colocar el logotipo en la esquina superior izquierda (o en el centro) de una página.
• Incluir un logotipo en el que se pueda hacer clic de modo que el visitante siempre pueda volver a la página principal.
• Usar enlaces que cambien de color o apariencia cuando se desplaza el cursor sobre ellos.

Si bien puede resultar tentador pasar por alto estas pautas e intentar ser original o único, probablemente no sea la mejor opción. También sería muy original poner el volante de un vehículo en la parte trasera, pero no haría más que confundir a la gente.

Ya sabes cuáles son las experiencias web con las que los usuarios están familiarizados, así que aprovecha esta información para ofrecerles la mejor experiencia posible. Esto te ayudará a diseñar el sitio de modo que sea más fácil de navegar.

Uno de los ejemplos más comunes de las pautas tradicionales en el diseño web es usar el ícono de una cesta de compra en un sitio de comercio electrónico:

En la imagen anterior, puedes ver (de izquierda a derecha) íconos de cestas de compra de los sitios de Amazon, Wayfair y Best Buy.

7) Credibilidad

Las pautas tradicionales de diseño web (es decir, elementos y estrategias de diseño que los visitantes ya conocen) pueden ayudarte a darle más credibilidad al sitio. Si tu objetivo es brindar la mejor experiencia del usuario posible, la credibilidad (la confianza que transmite tu sitio) es un factor fundamental.

Una de las mejores maneras de mejorar este aspecto de tu sitio es hablando de manera clara y honesta sobre el producto o servicio que vendes. No permitas que el visitante tenga que explorar un gran número de páginas hasta encontrar lo que realmente ofreces. Cuenta abiertamente qué es y utiliza los recursos que tengas a disposición para explicar su valor.

Otro consejo para mejorar tu credibilidad: incluye una página de precios. Hacer que los usuarios deban ponerse en contacto contigo para consultar sobre los precios podría parecer una buena estrategia, pero no lo es: da información de tus precios en el sitio de un modo claro y tu empresa parecerá más fiable y legítima. Este es un ejemplo de una excelente página de precios del sitio web de Box:

8) Enfoque en el usuario

La usabilidad y la experiencia del usuario dependen de las preferencias de los usuarios finales; en definitiva, el diseño es para ellos.

Si bien los principios detallados en esta lista son un excelente punto de partida, la verdadera clave para mejorar el diseño de tu sitio es realizar pruebas de usuarios, recopilar comentarios y hacer cambios según los resultados obtenidos. 

Para comenzar, puedes usar algunas de estas herramientas de pruebas de usuarios:

• Crazy Egg. Usa esta herramienta para hacer un seguimiento de varios dominios en una misma cuenta y obtener información sobre el rendimiento de tu sitio a través de cuatro funciones de inteligencia: mapa de calor, mapa de desplazamiento, superposición y confeti.
• Loop11. Con esta herramienta, puedes crear fácilmente pruebas de usabilidad, incluso si no tienes experiencia con HTML. 
• The User Is Drunk. Págale a Richard Littauer para que se emborrache y revise tu sitio. ¿No me crees? Nosotros lo hicimos. Échale un vistazo.

Para más herramientas útiles, lee este artículo.

Según Vitamin T, el 68% de los visitantes no se convierte en cliente porque cree que a las empresas no les importa su experiencia. Por eso, el último consejo para que mejores la usabilidad y la experiencia del usuario en tu sitio es que empieces a interesarte más. Ponte en el lugar de los usuarios que visitan tu sitio y piensa en ellos a cada cosa que hagas.

¿Qué otros principios crees que contribuyen a un diseño y una usabilidad excepcionales de sitios web?

Nota del editor: Este artículo se publicó originalmente en enero de 2012 y se actualizó para más precisión y exhaustividad.