Usabilidad Web aplicada a SEO: los tips que necesitas conocer

¿Cómo repercute la usabilidad web al posicionamiento SEO? ¡Descúbrelo!

Para conocer qué es la usabilidad web, primero tenemos que saber que el término usabilidad viene del inglés usability, y es una acepción no recogida en la actualidad por la RAE aunque se emplea habitualmente en el entorno web y tecnológico.

Decimos que una aplicación, herramienta o tecnología es usable si para el usuario es sencillo alcanzar el objetivo que se pretende con ella.

Si pensamos en La Web y el SEO, cada página de un sitio puede tener un objetivo distinto. Como por ejemplo:

• La página de contacto normalmente pretende que el usuario emplee algunas de las vías que allí aparecen para ponerse en contacto, como el teléfono, una cuenta de correo o un formulario.
• En una ficha de producto el objetivo será que el usuario haga clic en el botón de comprar o agregar al carrito.
• En el del proceso de compra, que finalice la compra totalmente mediante el botón de pago, tras incluir el resto de información solicitada.

El principio fundamental de la usabilidad web. No hacer pensar

Según Steve Krug en su best seller  Don’t make me think, el principio fundamental a tener en cuenta en usabilidad web es, como el título del propio libro indica, ponerlo fácil al usuario y no hacerle pensar. Esta es, según el autor, la primera y más importante ley sobre usabilidad.

Se deben por tanto evitar las cosas que nos hacen pensar, como, por ejemplo, nombres de botones, enlaces o elementos de menú muy complejos o funcionalidades que no tengan el aspecto de lo que son.

Un enlace suele ser de color azul, con subrayado y al pasar el ratón por encima, el puntero cambia de una flecha a una mano.

Estas son señales que nos indican a los usuarios que el objeto con el que interactuamos es un enlace, y como ya lo conocemos y lo hemos usado muchas veces, no tenemos que pensar, ya sabemos que si hacemos clic ahí iremos a otra página en la que se supone que veremos algo relacionado con el texto visible (anchor text o texto ancla).

El comportamiento de los usuarios en La Web

Todo esto es muy importante porque en Internet, la competencia está a tan sólo un clic. Los usuarios somos fugaces y llevamos siempre prisa. En cuanto percibimos que en la página que estamos vamos a perder más tiempo de lo deseado en encontrar lo que buscamos, rápidamente volveremos a buscar o emplearemos el botón atrás.

También está la cuestión que comentábamos antes de que los diseñadores, clientes o empresas pensamos y diseñamos de una forma y los usuarios navegan de otra muy distinta.

Para empezar, los usuarios no leemos, escaneamos. Buscamos la información deseada, normalmente realizando un barrido en forma de F, al menos en los idiomas en los que la escritura es de izquierda a derecha.  Es el sentido en que leemos, desde la esquina superior izquierda hacia la derecha y luego vamos bajando repitiendo el mismo proceso, pero cada vez llegando menos a la derecha.

Imagen obtenida del artículo Everything You Need to Know Before Using a Landing Page Heat Map by Ted Vrountas en instapage.com

Por otro lado, a los usuarios no nos interesa todo el contenido, es otro de los motivos por lo que escaneamos en lugar de leer, y es que además somos buenos escaneando, ya que nos pasamos la vida haciéndolo. En mapas, periódicos, revistas, trabajo, carteles, etc.

En consecuencia, debemos…

Diseñar interfaces web concebidas para ser escaneadas

1. Es necesario emplear una jerarquía

El uso jerárquico del contenido va a ayudar tanto el usuario, como a buscadores a comprender mejor el contenido y a moverse por él más fácilmente, mejorando la usabilidad web.

En lenguaje HTML, los encabezados H1, H2, H3… H6, están predefinidos de forma que sin indicar nada excepcional van decrementando su tamaño conforme subimos en el nivel de la jerarquía. Es decir, que los encabezados de segundo nivel tienen un tamaño de letra inferior a los de primer nivel y así sucesivamente.

Si ponemos toda la estructura de un documento con los titulares y encabezados del mismo nivel, da la sensación de que nada es más o menos importante que otra cosa y al usuario la costará más identificar a dónde dirigirse. Pensemos un periódico, ahí tenemos los mejores ejemplos.

Puedes saber más sobre HTML en mi artículo Estructura básica de una página HTML.

2. Copiemos lo que sabemos que funciona

Siguiendo el ejemplo de los periódicos, en ellos sabemos que el subtítulo de una noticia en una frase más larga que resume lo importante de la noticia o que el texto bajo las imágenes nos indica su procedencia o describe lo que en ella vemos.

Estas técnicas han sido probadas ampliamente durante años y todos los medios las emplean. Están diseñadas y probadas para que los usuarios puedan escanear con facilidad y localizar lo que nos interese.

Los estándares o convenciones se crean por que un gran número de personas los han empleado y probado y garantizan resultados óptimos, por tanto, utilicémoslos.

Aunque es un sector mucho más joven, los procesos de compra en tiendas virtuales han sido ya optimizados en detalle por los pioneros en el sector como Amazon o en sistema creados específicamente para ello, como Woocommerce para WordPress, Prestashop o Magento. Utilizar una estructura y formato similares nos asegura el éxito en este proceso, no sólo porque son diseños ya probados, sino porque los usuarios ya los conocen.

3. Separar el contenido en zonas claramente definidas

Definir claramente las temáticas de contenido una página, aplicación o sitio web es muy importante, ya que permite al usuario rápidamente seleccionar aquello a lo que desea acceder, evitando así que se vaya antes de tiempo.

Con herramientas de generación de mapas de calor, podemos saber dónde miran o hacen clic los usuarios cuando nos visitan y podemos así identificar zonas, banners o textos más atrayentes e ir así mejorando la web.

4. Hacer que lo clicable sea obvio

Como indicábamos anteriormente, normalmente los enlaces suelen ser de color azul, subrayados y con una mano como puntero, también los botones suelen llevar algo de relieve, los bordes, aunque sea, levemente redondeados (aunque aquí también hay modas) y con iconos de flechas y palabras que invitan a la acción, como reserva ahora, más información, compra ahora, etc.

En los cuadros de búsqueda también conviene poner una lupa e incluso un botón que indique la palabra «buscar». Con esto, el usuario ya sabe lo que tiene que hacer ahí.

Si se trata de galerías de imágenes o imágenes ampliables, conviene poner también una lupa o un botón con el signo +, para que el usuario lo reconozca como interactivo y sepa el resultado que obtendrá tras hacer uso del botón.

¿Qué crees que pasaría si pusiéramos en una esquina de una imagen el icono de like de Facebook?

Pues obviamente, que los usuarios harán clic ahí, aunque luego no haya interacción.

Un truco que yo mismo he tenido que emplear en algunas ocasiones en este sentido es, cuando no he podido embeber directamente un vídeo en una sección y en su lugar pongo una imagen que posteriormente enlazará al vídeo, a esta imagen le coloco encima el icono de play de YouTube. De esta forma, el usuario hará clic si desea ver el vídeo y le va a dar igual lo que ocurra a nivel interno, él quiere ver el vídeo y le dará igual haber hecho clic en una imagen o en el botón de play del vídeo.

5. Reducir el contenido irrelevante

El ruido puede ser muy perjudicial y saturar. No es necesario poner una y otra vez el botón de añadir al carrito o el botón de la llamada a la acción. Si demasiadas cosas destacan por igual, al final nada destaca sobre el resto de cosas y no conseguimos los efectos beneficiosos que se supone que generan las buenas prácticas, por ejemplo en el diseño, ubicación o uso de colores de esos botones de llamadas a la acción.

Las páginas muy llenas de contenidos, el uso de muchos elementos llamativos o muchas llamadas a la acción saturan y el uso de espacios de forma inteligente sirven para paliar esa sensación. Una buena premisa a la hora de diseñar puede ser el considerar que todo va a ser ruido hasta que se demuestre lo contrario, considerando al ruido como elementos que no llaman la atención del usuario.

También es muy común el texto irrelevante. Introducciones de presentación o que pretenden ser simpáticas, pero que al usuario no importan, son innecesarias salvo que estén en el apartado adecuado, como la página “Quienes somos”.

La eliminación de textos irrelevantes y no fácilmente entendibles, principalmente de la parte superior, ayuda a reducir el nivel de ruido de la página, hace que el contenido útil sea más importante y hace la página más corta, permitiendo que los usuarios puedan interpretar más cantidad de esta sin necesidad de tener que bajar hacia abajo.

Conclusiones y repercusiones en el SEO

La usabilidad web está íntimamente relacionada con el posicionamiento en buscadores porque, como hemos visto en la sección del estructurado jerárquico de los contenidos, el uso de un etiquetado HTML adecuado está directamente relacionado con cómo los buscadores interpretan nuestras páginas.

También, los tiempos de estancia en la página y el grado de interacción del usuario en la misma, son señales que los buscadores interpretarán de forma positiva.

Además, mediante el análisis de los clics que hacen los usuarios en los títulos, podemos obtener información muy valiosa para mejorar el CTR de los resultados en las SERP.

¡Haz una web usable y conseguirás mejorar también el posicionamiento!

Fuentes. Don’t make me think by Steve Krug.

Diego C. Martín

Soy profesor y consultor en desarrollo web en WordPress, tiendas virtuales, marketing online, posicionamiento en buscadores y otras materias de la informática como ofimática o productividad en la nube e Internet.

www.diegocmartin.com/