Las 4 claves de la Usabilidad Web para el 2016

Las 4 claves de la Usabilidad Web para el 2016
Claves de la usabilidad web

Usabilidad, manejabilidad o experiencia de usuario son los términos que utilizamos para referirnos a la manera en la que los usuarios “usan” un sitio web o interactúan con él, factor determinante en el diseño de una página web y decisivo en el éxito de cualquier negocio online.

¿Sabes cómo tus visitantes navegan a través de tu sitio web? ¿Encuentran lo que buscan o se pierden en un laberinto? ¿Se sienten cómodos en tu sede o salen pitando una vez conseguido lo que buscan?

Como arquitecto, entiendo el diseño web exactamente igual que la arquitectura: un arte funcional y necesario al servicio del hombre. Obviamente, como en cualquier otra disciplina de diseño, el diseñador tiene la potestad y la capacidad de anticiparse al usuario final, creando nuevos hábitos, como nuevas formas de vivir en una casa o de navegar en un sitio web.

“Usabilidad en diseño web = Funcionalidad en arquitectura”

Pero en el “autoempleo bloguero” la cosa cambia: Cuando la filosofía es el “hazlo tú mismo”, puedes diseñar tu sitio web sin ser experto, pero en cambio debes cumplir unas reglas mínimas de Usabilidad, que se ajusten a los hábitos generales de navegación del momento, y si cabe, que se anticipen un poco a lo que está por venir (…y esto ya si lo consigues es que tienes alma de diseñador).

De lo contrario, de nada servirá todo el esfuerzo que pongas en la elaboración de tu sede online: tus visitantes se sentirán incómodos, se perderán en un laberinto, nunca encontrarán lo que buscan y una vez lo consigan saldrán pitando para no volver jamás.

La nueva Navegación: Menos Breadcrumbs y más Intuición

Las breadcrumbs o migas de pan, son generalmente líneas de texto con palabras separadas por barras que te indican en todo momento la ruta o el recorrido seguido dentro de un sitio web para llegar a donde te encuentras, y que te permiten navegar dentro de la web sin perderte. Suelen ubicarse en la cabecera, por debajo del menú principal.

Antiguamente el uso de breadcrumbs era un recurso que veíamos con frecuencia, pero hoy en día están despareciendo… ¿y por qué? Pues porque al parecer no hay tiempo para leer texto ni siquiera entre los menús y los submenús mientras uno navega. Todo tiende a ser más visual porque nuestros cerebros procesan las imágenes muchísimo más rápido. Así que finalmente las breadcrumbs ocupan espacio inútilmente, ensucian y molestan.

Hay tal cantidad de información en la web que el diseño no tiene más remedio que sintetizarse y simplificarse cada vez más hasta hacerse casi imperceptible. Así nace por ejemplo el Flat Design o diseño plano, una tendencia de vanguardia a base de colores planos, iconos y símbolos abstractos que a veces representan la realidad pero nunca imitando sus volúmenes, sombras o detalles realistas… Por ende, el Flat design al tener menos información ocupa menos espacio y hace que las páginas webs se descarguen a mayor velocidad.

La navegación web por lo tanto tiende a la Intuición. Una web intuitiva destacará por un diseño minimalista, el uso de iconos, recursos visuales planos y transiciones que se adelanten al usuario.

 

¿Cuales serán las claves de la usabilidad en el 2016?

En el 2016 los usuarios accederán a tu sitio web principalmente a través de sus móbiles, aunque también lo harán a través de otras pantallas o dispositivos: paredes, lunas de vidrio, electrodomésticos… (el internet de las cosas) y además navegarán por el interior de tu web a la velocidad de la luz… Sólo conseguirás que se queden si les persuades o les seduces visualmente.

He organizado las claves de la Usabilidad web en 4 grupos: Velocidad, Responsive, Navegación y Contenido.

 

1. La Velocidad. Sé veloz… (¡el tiempo es oro!)

“Reducir 1 segundo la velocidad de carga de tu web puede aumentar un 11% tus visitas y un 7% las ventas”. 

¿Tienes paciencia? Pues los demás tampoco: Aquí tienes algunos consejos para mejorar la velocidad de tu web que encontrarás más desarrollados en mi Guía para mejorar la velocidad de tu web y el posicionamiento en 3 pasos.

  • Optimiza y simplifica tu sitio web: Instala un plugin de caché, como “WP Optimice” o “W3 Total Cache” y sube las imágenes con el tamaño y peso en el que se vayan a mostrar. En nuestra sección de recursos encontrarás más herramientas para ello.
  • Limpia tu sitio web: Borra todos los plugins y temas que no estés usando, y haz lo mismo con las entradas, páginas y medios en desuso. Por último vacía la papelera.
  • Comprueba la velocidad de carga de tu plantilla. Puede que tu tema sea el culpable de la lentitud de tu web. Busca la demo del tema online y pásale su URL por algún Test de velocidad como Google PageSpeed Insights.
  • Comprueba la velocidad de tu Hosting: Analiza varias páginas alojadas en servidores diferentes y compara los resultados del análisis en lo referente al tiempo de respuesta del Servidor (más de 1 seg empieza a ser preocupante).

 

2. El diseño Responsive. Que “el internet de las cosas” no te pille desprevenido.

Hace un par de años hablábamos de Diseño Responsive, es decir, diseño para ser visualizado en cualquier tipo de dispositivo (móvil, tablet…). Hace un año, se hablaba de Mobile First, es decir, el móbil como el primer dispositivo de navegación web, por lo tanto tenemos que pensar antes de nada en lo pequeño, en las pantallas móbiles, para luego pasar a lo grande. Ahora hablamos ya del “Internet de las cosas“, donde podremos acceder a internet a través de cualquier cosa, desde un electrodoméstico a un muro pantalla.

 

3. La Navegación Intuitiva. ¿Encuentran lo que buscan?

Menús, imágenes con enlaces y enlaces de texto, serán los pasillos de comunicación entre todas las habitaciones de tu sede online. Cuídalos y simplificalos para que no se pierdan y encuentren lo que buscan o lo que tú les quieras ofrecer.

  • Piensa bien la estructura de tus páginas y organiza tus contenidos de la manera más simple posible. Elimina todo aquello que no sea imprescindible!
  • Las Breadcrumbs pasan a la historia; evítalas a menos que tengas una tienda con mil productos.
  • Mantén siempre visible tu menú o en su caso un icono de menú desplegable. Sí al Sticky header!
  • Usa el botón “Back to top” para volver a la parte superior de la página en cualquier momento.
  • Menú principal conciso sólo con las pestañas más importantes. Nada de menús interminables: Organízate!
  • Mantén un buscador interno siempre visible. Lo mismo para el carrito de la compra!
  • Evita los submenús o pon una marca que incite a desplegarlo: no se ven a menos que pasen el cursor por encima.
  • Usa transiciones que se adelanten a la intenciones del usuario o animaciones que incitan a hacer clic: funcionan genial!
  • Mantén la sidebar lo más limpia posible, con iconos sociales, formulario de suscripciones al email, categorías del blog y poco más.
  • Cierra con un copyright sencillo, y evita llenar el footer de residuos. Una vez encuentren lo que buscan, si quieres ofréceles más, pero no les molestes con contenidos comerciales de manera abusiva.

 

4. El contenido visual: Una imagen vale más que mil palabras.

Un diseño persuasivo y seductor atrapará al usuario y un contenido escaneable le hará comprenderlo todo de un sólo vistazo y le captará como lector.

  • Nuestro cerebro procesa las imágenes miles de veces más rápido que el texto (ver demostración en la infografía). Y no hace falta que te repita una vez más que la gente no tiene tiempo. Por lo tanto vamos a usar la imagen y todo su potencial informativo para seducir al usuario rápidamente, guiarlo a través de la navegación y llevárnolos al huerto!
  • Los iconos tienen la capacidad de decir mucho con muy poco y son el colmo del “menos es más”. También son grandes amigos de la navegabilidad.
  • El Flat Design es una tendencia de vanguardia que consiste en el diseño de imágenes o iconografías planas que representan la realidad sin imitarla, sin volúmenes ni sombras.
  • Cuida tus fuentes para que se lean bien, a buen tamaño, pero sin exagerar! Una plantilla premium te permitirá elegir la fuente para cualquier parte de la web.
  • Explica con imágenes en la home todo lo que haya en el menú.
  • Procura que las entradas del blog y los contenidos en general sean escaneables; es decir, puedan ser comprendidos de un solo vistazo.

 experiencia de usuario visual

Los beneficios de una buena experiencia de usuario.

Algunos de los múltiples beneficios que te proporcionaran una buena usabilidad son:

  1. Comodidad para el cliente, que verá tu web como un sitio “fácil” de entender.
  2. Generación de confianza y reputación online.
  3. Posicionamiento web, ya que aumentará la velocidad de descarga y el tiempo de permanencia. Además una buena estructura de enlaces internos también es es un factor importante para el SEO.
  4. Conversiones o ventas, y en definitiva, la consecución del objetivo principal de un sitio web.

 ¿Alguna herramienta online para analizar la usabilidad?

Existen muchas aplicaciones para analizar el comportamiento del usuario en un sitio web como los estudios a través de mapas de calor, etc… Esta información es muy útil e interesante para optimizar el diseño de tu sitio web, mejorar la usabilidad o experiencia de usuario y finalmente aumentar las conversiones y ventas!

Pero este es un tema que abordaré en el próximo post. Si no quieres perdértelo suscríbete a mi Blog y lo recibirás en tu correo! Deja tu email en el formulario de la derecha! (es gratis!)

Hola, yo soy Juan Manuel Santaella, artista plástico, arquitecto, emprendedor, formador profesional y... creador de Autoempleo Bloguero! Más información...

2 Comentarios

  1. Marta Jimenez 10 meses hace

    Con respecto a la velocidad de carga he hecho todo lo que propones en este post, pero sigo teniendo problemas en la carga de la web en el móvil, me indica que debo eliminar el JavaScript y el CSS, que especifique el cache del navegador, que habilite la compresión y minificar el HTML. Me encantaría un post tocando este tema por que estoy muy perdida.
    Muchas gracias.

    • Autor

      Ok, son problemas ocasionados normalmente por el tema. Todo eso se puede hacer a través de plugins, pero también pueden dañar tu web si encuentran alguna incompatibilidad con tu plantilla. Los plugins más recomendados son WP Minify y WP Total Caché. Puedes instalarlos, siempre teniendo a mano una copia de seguridad por si acaso!

Dejar una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*