8. Usabilidad y navegabilidad, o sea, la web

Muy buenos días, y bienvenidos una vez más a Marketing Online, el podcast en el que hablamos de Marketing de Internet, Marketing en la red, marketing digital, o marketing lo que sea. Da igual, porque hay muchos modos de llamarlo, elige la que prefieras.

Bien, hoy hablaremos de la usabilidad y la navegabilidad. Palabras con muchas sílabas, que queda muy bien decirlas en voz alta, siempre y cuando no se te trabe la lengua, que entonces quedas mal. Básicamente quieren decir tener una web bonita y fácil de usar. Si, ya sé que no es la mejor definición ni la más exacta, pero al final es lo que todo el mundo piensa. En fin, el objetivo del programa de hoy es que os hagáis una idea de lo que se debe tener en cuenta cuando se diseña una web, para que lo podáis aplicar a la vuestra. Así pues, sin más dilación, allá vamos!

Usabilidad y navegabilidad, madre mía, cuantas sílabas

Ok, que esas palabras no os confundan. Vamos a contar el secreto. La usabilidad y la navegabilidad tienen el objetivo de optimizar la web para que la experiencia del usuario sea lo más satisfactoria posible, para que acabe ejecutando una acción rentable para nosotros. O sea, hablando en plata, que la web sea bonita y fácil de usar para que el usuario no se ralle, y al final nos compre (si se trata de un eCommerce) o nos contacte, generando así un nuevo cliente.

Lo que más me gusta de estos conceptos web, es gran paralelismo con el marketing de toda la vida, pues la usabilidad y navegabilidad es lo equivalente al llamado “retail marketing” pero para la web. El concepto es el mismo. El retail marketing, o marketing del punto de venta es el que estudia como debe ser nuestra tienda para optimizar las ventas. Desde los colores de las paredes, hasta la disposición de productos en las estanterías. Que música poner de fondo, que olor debe hacer la tienda y como colocar los muebles. Decoración, flujo de visitantes, ubicación de la caja y del mostrador... en definitiva, una optimización de todo lo que hay en la tienda para mejorar su rentabilidad.

Pues bien, la web no es tan distinta. Dependiendo de como coloques los productos, de dónde muestres los menús, las columnas laterales, el pie de página, la distribución del espacio, los colores, el logo o incluso los botones, podrás aumentar o disminuir el número de ventas o contactos comerciales, en algunas ocasiones de forma extraordinaria. Dedicaremos varios programas a ello, y analizaremos casos de éxito y de fracaso, pero hoy hablaremos de algunos conceptos bastante interesantes.

Call to action, o sea, llamada a la acción

Si tuviera que elegir un único punto de todo el programa de hoy, me quedaría sin duda alguna con éste. El tema del call to action, o llamada a la acción. Lo que quieres que haga el usuario en cada página de tu web. Es un tema trascendental y me hierve la sangre cada vez que veo que la gente pasa olímpicamente de él.

Veamos, para que quede claro... como todos sabemos, una web está compuesta por una o varias páginas, ¿verdad? Tenemos la homepage o página inicial, luego quizás una página de contacto, una página de blog, quizás una página sobre la empresa... si tenemos productos cada producto tendrá su propia página, etc. ¿cierto? Bien... pues cada una de esas páginas debe tener lo que se denomina "llamada a la acción". O sea, una especie de objetivo a conseguir. Algo que queremos que el usuario haga. Y cuando digo una, me refiero a una. Sólo una. Tan malo es tener una página sin llamada a la acción como una llena de llamadas, tantas que el usuario ni siquiera sabe dónde hacer clic.

Pongamos ejemplos, que siempre funcionan para entender mejor las cosas. En este caso, mi página web, boluda.com. Cuando alguien llega a la home, puede ver una foto mía, un texto que dice lo que hago, y un gran botón azul con letras grandes, en mayúscula y negrita en el que se puede leer "CONTACTAR". Bien, en este caso esta claro que eso es precisamente la llamada a la acción. Quiero que los usuarios contacten conmigo. Y por eso coloco ese botón ahí. Una llamada a la acción. Una. Clara. Concisa.

De hecho, en la mayoría de mi web, esa es la única llamada que hago. No quiero otra cosa, simplemente que contacten conmigo. Precisamente por eso motivo en el resto de páginas de mi web, hay un formulario de contacto simple y claro, que se mantiene fijo a la derecha siempre visible. La llamada a la acción es que contacten conmigo. Punto. Nada más.

En un eCommerce, por ejemplo, la llamada a la acción es distinto. Seguramente en la homepage la llamada será algo del estilo "descubre nuestros productos", o quizás "mira nuestro catálogo". Después, en cada ficha de producto, la llamada a la acción será "añade este producto al carrito" o quizás "compra este producto". Y finalmente, en el carrito, la llamada es "paga" o "finaliza la compra". ¿Se entiende la idea?

El primer problema que podemos tener en una web, es que no tenga llamada a la acción. Eso es desastroso. Una típica web corporativa que te informa sobre sus productos o servicios de forma neutral, pero no invita al usuario a contactar. Es fatal. Lo único que hay es un enlace de contacto escondido en algún menú. ¡Por el amor de Diós! Pongámoslo fácil. Si tu web es una web corporativa y tu objetivo es captar clientes, debes tener una llamada a la acción clarisima en la página inicial. Coloca un botón de contacto, invita a los usuarios a que te hagan preguntas, dudas o sugerencias. Y sobretodo, hazlo a través de un formulario, ya que facilita muchisimo ese paso. Nada de poner el email y esperar que la persona abra su aplicación de email, copie y pegue el correo, rellene el asunto y el texto y lo envíe. Debes ponérselo fácil, hombre...

El otro extremo es tener mil llamadas a la acción. Eso es igual de malo. Cuando el usuario que llega a una web se ve bombardeado por banners, botones, llamadas a la acción para apuntarse a un newsletter, para darse de alta, para ver contenidos, para comprar, y para aprovechar no se que oferta, al final ¿Sabéis lo que hace? Nada. No marees al usuario. Guíale. Dile dónde quieres que haga clic.

Sliders, el gran horror

Bueno, vamos a hacer hincapié en este tema, porque es una de las discusiones más frecuentes con mis clientes. El tema del slider. Para aquellos afortunados que no sepáis lo que es, podemos decir que es ese conjunto de imágenes que la gente suele poner en la portada de su web, que se van alternando unas a otras, grandes fotos, textos, ofertas y otros. Bien... antes de nada, dejad que os resuma la idea: Los sliders son una gran mierda. No los uséis.

Bueno, ahora que me he desahogado os cuento los porqués. Hay tantos que no se ni por dónde empezar. Por un lado, están los datos. Sabéis cuanta gente de promedio hace clic en una foto de un slider? Pues un 1%. Si, exacto, de cada 100 visitas, sólo uno hace clic. Pero analicemos un poco más... de ese 1%, el 89% hace clic en la primera imagen del slider. O sea, que la primera imagen recibe un 0,98% de clics, y el resto un 0,12%. Como podéis ver, son datos de perdedor. ¿Cómo vas a querer poner tus ofertas y productos en un slider, con esa tasa de clics tan mala?

El slider no muestra contenido, sino que lo oculta. Nadie verá esa quinta oferta del slider. Nadie verá ni siquiera la tercera. Además, los sliders suelen ser grandes, y quitan una barbaridad de espacio de la homepage, espacio que debería estar aprovechado para tener una llamada a la acción. Hay sliders que se llevan más de la mitad de la pantalla, y para ver el contenido importante, debes hacer scroll hacia abajo. Surrealista.

¿Más razones? Por supuesto. Los móviles y los tablets. Es horroroso intentar usar un slider en un móvil o una tablet. La mayoría no responden bien al usuario, y en el caso de los móviles toman por completo el espacio de toda la pantalla. Su usabilidad es malísima, y algunos de ellos ni siquiera son responsive, o sea que no se adaptan a los móviles.

Otro punto más en contra de los sliders es el tiempo de carga de la web. Como los sliders se basan en fotografías, y normalmente de dimensiones bastante grandes, resulta que la página tarda cinco o seis veces más en cargar (como mínimo) comparado con aquella misma página sin slider, pues el usuario debe descargar-se todas esas fotos. Y a su vez, eso penaliza tus rankings en Google, porque tu web es más lenta.

Así pues, no se si se entiende la idea, pero la repito de nuevo por si acaso. No uséis sliders.

Que el usuario no se pierda

Otro concepto que debemos tener muy en cuenta en el momento del diseño del web, es que no nos podemos permitir que el usuario se pierda navegando dentro de ella. Con eso quiero decir que el visitante en cuestión debe saber en todo momento dónde se encuentra, dentro de la página. Debería saber si está en la home, una sección en concreto, una sección dentro de otra sección, en el blog, en una página de producto, etc. Y que sepa dónde hacer clic para regresar dónde se encontraba antes, o para cambiar de sección sin dudar ni un momento.

Esto es relativamente fácil de lograr en pequeñas webs corporativas que tienen sólo 4 o 5 páginas, pero es mucho más difícil de mantener en grandes webs con mucha información. Así pues, deberemos optimizarlas para que eso no ocurra.

Una de las formas más utilizadas es la llamada de las "migas de pan". Eso consiste en un conjunto de enlaces en la parte superior de la web que te indican en que sección estás. Por ejemplo, si te encuentras dentro de un producto de la tienda online de tu web, las migas de pan serán primero un enlace que dirá "Inicio", una flechita, un enlace que dirá "Tienda", flechita, y un enlace que dirá "Producto tal". De este modo, el usuario sabe que está en el producto, dentro de la tienda, dentro de la web. Y que haciendo clic en cualquiera de esos enlaces, se dirigirá dónde éste indica.

Otro pequeño truco para que el usuario sepa dónde está, es el de indicarlo en el menú de navegación de la web. Si por ejemplo, nos encontramos en la página de "quienes somos", sería ideal que en el menú de navegación de la web esta sección aparezca destacada, indicando que es la sección en la que estamos. Eso suele hacerse cambiando de color, poniéndola en negrita, o modificando el color del fondo. La idea es que el usuario vea que a medida que navega por las diferentes secciones, el menú le va indicando en cual se encuentra.

Ya que hablamos del menú de navegación, es importante destacar algunos puntos. Deberíamos evitar menús con demasiadas opciones, pues cuantas más opciones tenga, más estaremos diluyendo la atención del usuario. Recomiendo que como máximo haya 6 opciones, siendo dos de ellas la de "inicio" la primera, o sea, un enlace que lleve a la home, y la de contactar la última, o sea un enlace a la página de contacto. El usuario típico espera encontrar eso ahí, y en muchas ocasiones si no lo encuentra puede causar un cierto frustre o mala experiencia.

Las otras opciones del menú ya dependerán de cada caso. Las más habituales suelen ser una página de "productos o servicios", en función de la naturaleza de nuestro negocio, un apartado de "quienes somos o acerca de nosotros", y finalmente el "blog" o sección de noticias, en la que iremos publicando novedades con cierta frecuencia. En algunos casos puede existir alguna más, pero no recomiendo añadir otra a no ser que sea imprescindible.

Contenido ordenado

Finalmente, comentaremos algo que aparte de ser verdad, es de sentido común. El contenido de la web debe estar limpio y ordenado. No hay nada peor que estar en una web desordenada en la que no sabes ni dónde hacer clic, ni como navegar por ello.

Las distintas zonas (encabezado, contenido principal, barra lateral si la hay, y pié de página) deben estar claramente definidos. La tipografía debe ser clara y fácil de leer sin quedarse ciego, y las fotografías no deben ser ni extremadamente grandes, ni miniaturas. Todo debe tener un equilibrio y harmonía que invite al usuario a seguir navegando.

Así pues, es importante tener una guía de estilo en cuanto a colores, tamaños de letra, espacios, imágenes, etc. Es altamente recomendable usar una única hoja de estilos y ceñirse a ella. En las notas del podcast podéis encontrar un enlace a bootswatch, unas hojas de estilo gratuitas para utilizar en vuestra web. Lo podéis encontrar en boluda.com/podcast, en el episodio 8.

Una vez más: Analizar

Finalmente, una vez tengamos el diseño perfecto, tocará empezar a analizar. ¿Y qué analizaremos? Los datos de las visitas. El comportamiento del usuario des de que entra en nuestra web hasta que sale. Qué hace, dónde clica, cuánto tiempo está en cada página, cuándo se marcha, cuantas páginas visita, en cuáles se está más rato, que botones clica, etc.

Todo esto lo haremos a través de la analítica web, que por cierto es el tema del próximo programa. Pero para que tengáis una idea, se trata de analizar esas visitas, ver lo que más les interesa para potenciarlo, ver lo que menos les interesa (como por ejemplo un slider), para quitarlo de en medio, y mejorar la experiencia del usuario, que a la larga se convertirá en una mejora de la rentabilidad de la web.

Hay incluso técnicas más avanzadas, llamadas Test A/B o multivariante, que nos permiten comparar como reacciona la gente ante varios contenidos distintos, para valorar ambos durante un cierto periodo de tiempo, y decidir cuál va mejor. Pero bueno, ya hablaremos de ello más adelante.

Resumiendo

En fin, vamos a resumir todo lo que os he contado para acabar de asimilar conceptos. La usabilidad y la navegabilidad consiste en tener una web bonita y fácil de usar para cualquier usuario, para que esté más a gusto y nos compre o contacte. Debemos tener siempre una llamada a la acción en cada página, y evitar que el usuario se pierda. El contenido debe estar ordenado y ser claro, y debemos de analizar constantemente el comportamiento del usuario, del mismo modo que se hace en una tienda, para tomar decisiones de mejora de forma constante.

Pues ya está. Hasta aquí el programa de hoy. Espero que os haya sido de utilidad, que hayáis aprendido algo nuevo, y si es así, recordad de valorarlo en iTunes con cinco estrellas, que siempre ayuda. Y para cualquier otra cosa, ya sabéis que me podéis encontrar en boluda.com o me podéis enviar un correo a joan@boluda.com

¡Muchas gracias por todo, y hasta el próximo programa!