Blog

HomeTodas10 claves de usabilidad para diseñar una web de éxito

10 claves de usabilidad para diseñar una web de éxito

Hoy vamos a hablar de éxito. La verdad es que suena importante, pero no te preocupes porque está ahí esperándote. Y créeme que hoy te daremos algunas claves que hemos aprendido que, por lo menos, te situarán en el buen camino para crear una mejor web de empresa para tus clientes (porque no olvides que ellos son los que mandan en cuestión de éxito). Por cierto, decía Guillermo del Toro en una entrevista que «el éxito es cagarla a tu manera».

Para realizar este viaje necesitaremos unos cuantos elementos. El primero, y más importante, tiene que ver con la calidad de tu producto o servicio y su diferenciación. En ella está tu valor añadido y sin ella esto nos costará un poco más, seamos sinceros. El posicionamiento web, el buen diseño de la web, entender los códigos de comunicación y conducta de tus clientes, estén en Gijón, Asturias o San Francisco son también muy importantes. Pero hoy no vamos a hablar de eso. Vamos a centrarnos en la web y su diseño como un canal más de venta y en la experiencia de usuario que se produce en ella.

Si te pregunto para qué sirve la web de tu empresa estoy casi seguro de que me dirás que «para estar en Internet», «para que me conozcan», «para contar/enseñar lo que hacemos». Pero si sólo pudieras elegir un fin sería —yo te ayudo— para vender, y mucho. Te diré que es posible y que la clave es también sencilla: ponérselo fácil a tus clientes.

A esa misión de convertir en fácil lo difícil se la conoce como usabilidad y en diseño va mucho más allá de la propia estética de la página. Wikipedia define la usabilidad así:

Cualidad de la página web o del programa informático que son sencillos de usar porque facilitan la lectura de los textos, descargan rápidamente la información y presentan funciones y menús sencillos, por lo que el usuario encuentra satisfechas sus consultas y cómodo su uso.
Suena muy bien, y verás que trabajar en la usabilidad de tu web te ayudará a conseguir resultados increíbles. Estas son las 10 pistas que nos han ayudado en nuestros proyectos:

1.  Diseña un buen árbol de contenidos

Lo primero que suele pensar una empresa al crear su web es en el diseño de su página, y en los contenidos que albergará cada sección. A la forma esquemática en que esos contenidos se distribuyen por el sitio web se la conoce como «árbol de contenidos» y su planificación es muy importante para construir una web eficiente.

La estructural árbol de contenidos es algo así como los cimientos de tu sitio web y por ello debe ser lo más clara posible. El fin es hacer más fácil al usuario la tarea de ubicar la información que busca. Así, si nuestra visita busca información sobre un servicio de nuestro catálogo acudirá instintivamente a un apartado «Servicios». Al igual que la fruta tiene un lugar similar en todas las neveras, en nuestra web los contenidos deberán estar también donde se espera que estén. Sin vueltas.

Árbol de contenidos

Escucha a tus usuarios ¿Los usuarios suelen decirte que no encuentran una información que buscan dentro de la página?¿Se trata de una información que no está disponible o que no es fácil de encontrar para ellos? Tanto si se trata de la primera como de la segunda puede estar afectando a la experiencia de usuario de tus clientes y ¡es el momento de revisar!

 

Sí, sabemos que todo es muy bonito sobre el papel, pero que las cosas a veces son más complicadas. Sobretodo cuando tenemos muchos contenidos que ofrecer. De hecho lo más habitual es que tengamos tanta información que necesitemos distribuirla en varios niveles. Y aquí suele empezar el lío…

¿Cómo agrupo mis productos o servicios?

Si piensas en páginas de venta, como Amazon, tienen el don de que todo está donde se espera. No es casualidad, hay mucho trabajo detrás. En ocasiones es ensayo-error y analítica lo que nos dará la pista, pero hay una forma de empezar a acertar desde el principio: piensa en las necesidades del usuario.

El ejemplo más claro son las tiendas de ropa, donde las camisetas se agrupan, pero separando por un lado las de hombre y por otro las de mujer. Se trata de una decisión basada en hábitos de compra, porque aunque puedas comprar una para ti y otra para tu chica/o lo normal es que si eres una chica compres o estés interesada en comprar más prendas de chica y viceversa. ¿Lógico no?

La agrupación de contenidos existe para hacer las cosas más fáciles a tus visitas. Evita caer en la sobreramificación de contenidos.

Segmentación de contenidos en la web de Quiksilver. Hombres por un lado; mujeres por otro

Segmentación de contenidos en la web de Quiksilver por intención de compra. Hombres por un lado; mujeres por otro.

2. Agrupa contenidos para ganar visibilidad

Al crear la primera versión de una web de empresa lo normal es que nos sintamos desbordados por lo infinito de Internet y nos liemos a crear páginas y páginas para que nuestra web sea un digno competidor en contenidos de la web de IBM. Por suerte o por desgracia no somos tan grandes y esta decisión hará que nuestras páginas tengan contenidos muy cortitos que den un aspecto un poco pobre, justo lo contrario de lo que buscamos, a nuestras visitas. Como cuando vas al supermercado y hay estanterías vacías.

Secciones como «Nuestra historia», «Nuestra misión» o «Nuestro equipo» pueden convivir en muchas ocasiones estupendamente en una misma sección «Nuestra empresa» reduciendo opciones de menú y favoreciendo que el usuario perciba más información. Es muchísimo más fácil que el usuario haga scroll en la página que clic para acceder a una nueva sección.

Y si tomas decisión de crearlas igualmente por una cuestión de SEO: cuidado. No por ello vas a posicionar mucho más y a Google esas páginas con poquito contenido le parecen un poco sospechosas. Una página vacía es como un jarrón sin flores.

En páginas como Ikea no hay más opción que agrupar y bien. Por eso se puede navegar por habitaciones o funcionalidad

En páginas como Ikea no hay más opción que agrupar y bien. Por eso se puede navegar por habitaciones o funcionalidad

3. Elige bien los nombres de cada sección

Piensa en cuántas veces te enfrentas al menú de una página que te obliga a pararte a tomar la decisión de hacer clic en una sección o en otra para llegar al contenido que estás buscando. Y todo porque los títulos son ambiguos, mal definidos. Puede que esa reflexión suponga sólo unas décimas de segundo, pero son una parte muy importante en la experiencia de ese usuario y cada falta contará en esa decisión final que estamos buscando.

Utiliza nombres descriptivos y concisos (antes que bonitos) para las secciones de tu página para que el usuario tenga una noción más o menos clara de lo que se va a encontrar. Si el nombre de dos secciones puede prestarse a cierta confusión, modifícalos para extremar su significado. Recuerda que hay nombres que convencionalmente están en todas las webs. Así «Contacto» es mejor que «Cómo llegar a nosotros».

4. Ayuda a los usuarios a ubicarse

Un debate básico del mundo de la usabilidad web es el que tiene que ver con la distancia máxima en clics que debería haber entre los usuarios y los contenidos que buscan del sitio que visitan. De ahí que al reducir la estructura reduzcamos posibles clics y reducimos las posibilidades de que el usuario se nos pierda. Este debate generó en su día lo que se conoce como «la regla de los 3 clics», según la cual ese debe ser el número de clics máximos que un usuario debería tener que hacer para llegar al contenido que está buscando. Si bien esta distancia tiene un peso especial en páginas de compras, donde un clic puede ser la separación entre una compra efectiva o un carrito abandonado, no parece tan relevante en páginas de empresa, donde lo importante es que el usuario sepa siempre dónde se encuentra de la web, para evitar su frustración.

Algunos de los recursos que puedes utilizar como refuerzo de ubicación son:

  • Miga de pan (breadcrum). Elemento básico de toda web que nos indica el camino que debemos seguir para llegar a la página en que nos encontramos desde la Home del sitio. Lo hemos visto miles de veces y, independientemente de lo mucho o poco que recurramos a ella, ahí está para nuestra tranquilidad inconsciente.
Breadcrum en la web de Vodafone

Usted está aquí: breadcrum clicable en la web de Vodafone

  • Menú secundario. En páginas con más de un nivel de información suele presentarse en un lateral y nos ayuda a ubicarnos por debajo del primer nivel, reduciendo la tasa de rebote (es decir los abandonos de la visita desde esa página) al favorecer la circulación interna del sitio.
  • Procesos de registro y compra. Nos indican dónde nos encontramos dentro de un proceso y cuántos pasos nos quedan para llegar a la meta. Son un estímulo para evitar el abandono y la incertidumbre del proceso.
Proceso de compra en la web de Apple

Proceso de compra en la web de Apple (fase 1)

5. Cuida los enlaces internos para favorecer focos de interés

La virtud más grande que ofrece una web es que es el usuario tiene la capacidad de elegir los contenidos que quiere ver en cada momento. Como en aquellos libros que leíamos de pequeños, construye su propia historia. Aunque es un principio encantador, estos no tienen porqué coincidir siempre con los contenidos más relevantes para nosotros, como ese producto novedoso o que nos deja un margen excepcional. Así por ejemplo, hoy es común que toda web tenga un blog (por cierto, si no lo vas a cuidar, ¡ciérralo!), pero de nada serviría si ese blog no sirviera también como puerta de acceso a los productos o servicios que ofrece la empresa ;-).

Como empresa tienes unos productos que te interesa especialmente promocionar y debes dirigir la mirada del usuario hacia ellos. Si en un artículo como este hablamos de web, lo ideal sería mostrar un banner promocional en la columna derecha sobre una promoción del servicio de diseño web o invitar a ese usuario a contactar contigo para que puedas asesorarle personalmente al final del artículo. Del mismo modo, en páginas de servicios puedes ofrecer el acceso a otros servicios complementarios que pueden resultar relevantes para la visita, aportar un valor añadido o generar una venta cruzada. Cada situación pide una forma de actuación concreta.

Analizar otras páginas similares y un punto de sentido común pueden brindarte algunas pistas interesantes.

El smartwatch de Sony nos sugiere acompañarlo de un teléfono de la compañía. En el blog Muy Molón, de Mr. Wonderful nos invitan a entrar en su tienda.

En e la página del smartwatch de Sony nos sugieren acompañarlo de un teléfono de la compañía. En el blog Muy Molón, de Mr. Wonderful nos invitan a acceder a la tienda.

6. Crea itinerarios de visitas eficientes

El itinerario es algo así como una visita guiada por tu página. A diferencia de una tienda física, en una web no podemos adivinar por dónde entrarán los usuarios. Desde siempre le hemos dado una importancia suprema a la página de inicio de nuestro sitio, pero sólo un porcentaje de todas las visitas accede a nuestra web a través de ella. Muchos llegarán a nuestra página, navegarán y se irán y ni siquiera la habrán visto.

No podemos controlar la página de llegada, pero sí podemos intentar guiar al usuario al lugar que nos interesa, al proceso de compra, al camino de la conversión (suena espectacular esto último).

Esté donde esté el usuario lo que sabemos es que queremos presentarle nuestro producto, despertar su interés, convencerle de que este producto es para él, que realmente es el que mejor cumple sus expectativas, generar el deseo y, finalmente, comprar. En el camino perderemos usuarios y sólo llegarán a la meta unos pocos elegidos. De ahí que a ese proceso se le conozca como embudo de conversión. Un pequeño esquema que podréis encontrar por la red es este:

En este proceso entran en juego factores como el diseño y la estructura de la página, todo lo que hemos mencionado anteriormente y algo muy importante: nuestro discurso comercial. Si todo va bien, habrá final feliz.

7. Analiza las estadísticas de visitas periódicamente y actúa

Quizá no hayas recibido ningún feedback sobre la experiencia de usuario de tu página. No te preocupes, la analítica web es un buen detective y puede darte unas pistas muy importantes sobre el comportamiento de los usuarios que llegan a tu web. Gracias a ella podrás ir deduciendo los puntos débiles de tu sitio para reforzarlos y mejorar el itinerario de visitas y la tasa de rebote.

Un buen ejemplo para comprobar si la estructura de tu web está funcionando es echar un ojo al flujo de visitas. Para ello despliega en tu cuenta de Google Analytics al bloque Comportamiento y accede a la opción Flujo del comportamiento. Verás un diagrama que te permitirá conocer el comportamiento medio de desplazamientos de los usuarios en tu web.

Imagina que han aterrizado en una página de servicio y de ahí pasan a contacto (puede que estén interesados por conocer la proximidad de tu empresa). A partir de ahí se cae una parte de las visitas (puede que sea por lejanía) y otra vuelve a la página de servicio (parece que están interesados porque han vuelto para conocer más detalles). Como ves, los datos son objetivos, pero la interpretación no lo es tanto. A partir de una pequeña reflexión crearás un indicio de lo que puede estar ocurriendo y este será el punto de partida para crear un refuerzo. También puede ocurrir que el comportamiento no sea tan lógico y los usuarios naveguen de una sección a otra sin mucha lógica. En ese caso puede que lo usuarios estén trasmitiendo es que se pierdan en la página o no estén encontrando lo que buscan. De nuevo un indicio.

Pestaña "Flujo del comportamiento" en Google Analytics

Pestaña “Flujo del comportamiento” en la vista de Google Analytics

Una buena práctica para es analizar la navegabilidad de tu sitio pidiendo a tu círculo cercano que amablemente se conviertan en tus conejillos de indias pidiéndoles que lleguen a algunos contenidos de tu web por ellos mismos y nos trasmitan sus impresiones.

 

Revisar las analíticas de tu sitio periódicamente, proponer cambios y mejoras, experimentar y volver a analizar es la mejor forma de hacer tu página más eficaz día a día. Y créeme, no hay otra forma mejor.

8. Crea contenido de calidad

En artículos anteriores hablábamos de la importancia de lo que decimos y a quién dirigimos nuestro discurso y cómo lo decimos. En esencia, busca la empatía con tus clientes. Al público no le interesa tanto lo bueno que seas, la formación que tengas como lo bueno que puedas hacer por ellos. Piensa que es aquello que puede diferenciar tu negocio del de la competencia y transmítelo.

9. Acelera tu página

¿Cuántas veces has entrado en una página que parece que nunca termina de cargar? Algunas incluso nos obligan a esperar con una animación a que todo el contenido esté listo para empezar a navegar por ella. Es cierto que cada día disfrutamos de mejores conexiones a Internet y que esto hace que hayamos ido progresivamente aportando imágenes mayores y de más calidad a nuestras webs y vídeos. A fin de cuentas, tenemos que dar la talla.

No sólo de contenidos multimedia depende la velocidad de nuestro sitio. El servidor que tengamos contratado, su configuración y su ubicación son tan importantes que pueden convertir una web optimizada en un caracol digital. Optimizar la caché, es decir, la información que se almacena en el navegador del usuario y configurar un CDN como Cloudflare pueden ayudarte a reducir notablemente los tiempos de espera.

Google Pagespeed, un buen aliado de tu webGoogle Pagespeed, un buen aliado de tu web

10. Optimiza la versión móvil de tu web

El móvil es desde 2014 el primer dispositivo de acceso a Internet en España por número de usuarios. Cada vez son más los usuarios que utilizan la red en su proceso de compra. Muchos de ellos lo hacen desde las propias tiendas físicas cuando se trata de compra de productos para comparar precios o conocer las opiniones de otros usuarios. De ahí la importancia de la usabilidad móvil.

El smartphone manda en Internet pero todavía diseñamos páginas centrados en las versiones de escritorio. Según el Informe sobre Webs de Asturias, de la consultora AndCoo, 3 de cada 4 página web en Asturias no cuentan con una versión adaptada a dispositivos móviles. Y la importancia es tal que el propio Google ha decidido comenzar a penalizar aquellas webs que todavía no han sido adaptadas retrasando su ubicación en los resultados de búsqueda, como comentábamos hace tiempo.

Es importante empezar a pensar en la web móvil como un soporte diferente del ordenador, no basta con ser responsive. ¿De verdad necesitas que el usuario móvil se descargue ese pesado vídeo o esas imágenes tan grandes? ¿Tienen los botones o el texto un tamaño demasiado pequeño? Una web incómoda es como un sofá incómodo. El usuario no aguantará mucho tiempo sentado.

Usabilidad

La usabilidad es un factor clave para la experiencia de usuario digital y forma una parte inseparable del buen diseño de una web. Es un concepto más fácil de sentir que de explicar. No sentimos la usabilidad cuando está pero la echamos de menos cuando no está. Es el secreto detrás de marcas como Apple. El índice de usuarios que no cambiaría su iPhone por ninguna otra marca se debe a una experiencia de usuario generada que poco a poco convierte las prestaciones en pasión. El propio Jonathan Ive habla así:

I think there is a profound and enduring beauty in simplicity; in clarity, in efficiency. True simplicity is derived from so much more than just the absence of clutter and ornamentation. It’s about bringing order to complexity.

Y lo maravilloso de la usabilidad es si apuesta por ella está a tu alcance. Empaliza con el usuario, ponte en su lugar, experimenta, analiza y vuelve a experimentar. A medida que vayas realizando estos pasos y analizando estadísticas verás como los resultados mejoran día a día. Ánimo y a por ello.

Escrito por

Desde 2012 trabajando en Amodo y todavía no sé explicar a mis padres a qué me dedico. Mientras tanto escribo, diseño y ayudo a empresas a mejorar la comunicación con sus clientes.