Fecha: 15/04/2021

Como estructurar una navegación web para aumentar tus ventas

Tener una navegación web optimizada es muy importante para conseguir una buena usabilidad y mejorar todas tus métricas. Una navegación web optimizada afecta al SEO, al uso de la página y a las ventas.

Una navegación web no es solamente tener un menú en tu página, sino que es la estructura de todos los contenidos de tu página y como navegamos a través de ella

De esto es lo que te voy a hablar en el artículo.

Te voy a hablar de como una navegación web optimizada afecta a todos estas áreas de tu página y empresa. También te daré consejos sobre como mejorar tu navegación web, enseñándote a crear una buena arquitectura de la información, estrategia de contenidos y como optimizarla de manera visual en tu página.

Así que para tener un mejor resultado tendrás que hacer varias sesiones de estrategia para conseguir una forma de encontrar contenidos más rápida y que las personas puedan conseguir lo que buscaban en tu página.

 

¿Por qué es importante tener una buena navegación web?

Es fundamental en una página web porque si queremos que una persona compre un producto o servicio tendrá que encontrarlo en la web. Si esa persona no lo puede encontrar porque la navegación web es bastante confusa podríamos estar perdiendo ventas.

También es bastante importante porque afecta al tráfico, si una persona busca una información en tu web y no lo puede encontrar porque no sabe a donde dirigirse para hacerlo pensará que no se encuentra esa información y al sentirse frustrado por ello decida no volver más a tu página.

Así que si queremos evitar esto tendremos que crear una estructura web que facilite a las personas encontrar lo que buscan y los dirija a lugares estratégicos dándoles la información justa y necesaria para que vayan navegando poco a poco y lleguen a donde queremos que se dirijan o hasta encontrar lo que necesiten.

Además que una buena estructura hace que las personas consigan la información adecuada y puedas convencerlos a que contraten tus productos o servicios.

 

¿Qué es una navegación web?

Una navegación web es una forma de organizar, estructurar y categorizar todo el contenido de tu página web. Un ejemplo de esto son los blogs. Si has consumido alguno o frecuentas algunos para leer lo que publican seguramente te hayas encontrado con que están clasificados en categorías y etiquetas. Además que tienes una búsqueda en la página que si está bien hecha podrás encontrar artículos dentro del blog.

Incluso puedes tener búsquedas avanzadas como filtrar por etiquetas, palabras en el título y contenido o poder ordenarlas por fecha de creación o modificación.

Todos estos mecanismos conforman una navegación web. Como dije antes, una navegación no es tener un menú en la página, sino que va más allá de eso. El propósito de un buen sistema de navegación web es que las personas que entren en la página encuentren lo que necesitan lo más rápido posible y a un ritmo adecuado.

Otro ejemplo completamente distinto de esto sería las páginas webs de un gobierno. En esas páginas webs hay bastante información que no entra dentro de la categoría de un blog. Entonces para que una ciudadano encuentre la información más importante en ese momento es tener una buena organización y etiquetado para que podamos conseguir lo que necesitábamos.

Sin embargo es muy fácil hacer una navegación confusa al usar etiquetados que solo los funcionarios entienden pero que para las personas de a pie no tiene sentido. Además que tener una estructura de como funciona internamente esa parte del gobierno no se asemeja al mapa mental que un ciudadano pueda tener.

Sí, como dije una navegación web también incluye el etiquetado de la información. Por etiquetado me refiero a como llamamos ese contenido. Un etiquetado fácil y para todo el mundo es mucho mejor que un etiquetado confuso que solo la gente que trabaja en la página entiende.

Este mundo de la organización de la información se conoce como estrategia contenido y arquitectura de la información. Si quieres profundizar más en este mundo al final del artículo te dejo una lista de recursos para ello

 

Como afecta tu navegación web al SEO

La navegación de tu página web afecta enormemente al SEO porque si tienes enlaces rotos o tienes contenido repetido Google te puede penalizar. Ten en cuenta que una navegación web tiene que beneficiar a las personas y si esto no lo hace Google no te posicionará de manera favorable con el resto de competidores.

Piensa un momento en lo que haces cuando entras a una página y no encuentras la información que necesitas. Seguramente saldrías de la página y no volverías más porque pensabas que no tienen lo que buscas.

Imagina esto con miles de personas que al no encontrar lo que buscan se van de la página rápidamente comparado con el tiempo que pasan en páginas competidoras. Lo que ocurre al final es que Google piensa que tu página no es relevante para la gente y te pondrá en posiciones menores.

Esto también es importante con el etiquetado de la información. Imagina que vendes un producto y le pones el nombre técnico del producto. Sin embargo la gente para encontrar ese producto lo busca por un nombre incorrecto o ambiguo. ¿Qué pasa? Que no te posicionarás en una palabra clave con una mayor búsqueda y estás dejando pasar una gran oportunidad.

Por eso el etiquetado también influye en el SEO, si no usas las palabras claves más usadas por tus potenciales clientes no serás tan visitado como los competidores que tengas y que si lo hagan.

 

Como afecta tu navegación web al diseño

El diseño UX y UI lo que buscan es crear una buena experiencia para la gente que use la página. Para eso lo que se hace es simplificar las funcionalidades al máximo y que todo lo que se vaya usando y buscando sea progresivo para no hacer pensar a la persona.

Crear una buena experiencia de usuario es fundamental para que la gente use tu página sobre competidores y que vuelvan una y otra vez cuando necesiten algo o vuelvan a necesitar lo mismo.

Entonces una navegación web confusa lo que crea es frustración en el potencial cliente. Y si estamos frustrados o con emociones negativas no compraremos y seremos más lógicos en la compra. Recuerda que la gente compra de forma emocional y lo justifica de manera lógica.

También hace que las personas realicen una funcionalidad o no. Si tienes una aplicación web y has añadido una funcionalidad, pero la gente no la encuentra no se va a usar. Por eso podría parecer que a nadie le gusta, sin embargo es posible que si estuviese más al alcance se usaría mucho más a menudo.

Piensa que si no sabes que existe algo en una aplicación no lo vas a usar y quizás uses maneras más difíciles y tediosas para hacer algo que puedes hacer con un click.

Otras maneras en la que esto afecta es que no leerán todos los textos de tu página y no lleguen a partes de tu página que le beneficiaría en gran medida.

Tampoco se sentirá organizada la página y no se sentirá que tenga un orden lógico. Si no tiene un orden lógico según el mapa mental de tu audiencia objetiva. Esto hará que reciban información que no tenga sentido si tenían otro objetivo.

 

Como afecta tu navegación web a las ventas

Aquí voy a ser mucho más breve porque sería repetirme otra vez. Con los dos factores anteriores hay mucha repetición y perfectamente se aplican a las ventas.

Si tienes una tienda online y no podemos encontrar un tipo de producto no podremos comprar ese producto y nos iremos a otra tienda que si la tenga. Al no poder encontrar ese producto en tu tienda pensaremos que no vendes ese producto.

No podrás convencer a las personas de la mejor manera posible. Si en tu página de inicio no tienes un contenido centrado a un tema y cambias de temas completamente no podrás convencernos. Piensa que unos textos dedicados a la venta tienen que seguir una ruta que de sentido a la compra en nuestra mente.

 

Una navegación web ≠ modelo de arquitectura de la información

Aquí quiero aclarar los términos modelo de arquitectura de la información y navegación web. Antes estuve diciendo que la navegación web implicaba la estructura general de una página web en su totalidad. Esto es verdad hasta cierto punto. Un modelo de arquitectura de la información es el término preciso para una estructura de contenidos. Una navegación web parte del modelo de información y es mucho más visual.

Existen diferentes tipos de modelos y cada tipo se puede representar visualmente de distintas formas. Si te fijas en algunas páginas a pesar de tener un menú similar a muchas otras tiene una estructura completamente distinta a otras páginas.

Por eso aunque dos páginas tengan un menú parecido de la misma forma, los dos pueden tener una estructura completamente distinta. Por ejemplo, una página podría tener una estructura parecida a su estructura organizacional de empresa, y esta estructura estar en un menú principal. En cambio otra página puede tener un mismo menú principal pero ordenar la información según los intereses de su audiencia

 

Tipos de modelos de arquitectura de la información

Existen distintos modelos de arquitectura de la información. Aquí te voy a presentar algunos ejemplos, seguramente existan otros que aquí no menciono.

 

Modelo plano

En el modelo plano toda la información está al mismo nivel jerárquico. Este modelo es perfecto para páginas con poca información o páginas simples. Además que este modelo permite tener un solo menú principal que represente todas las páginas.

El beneficio principal de este modelo es su facilidad de uso y su simplicidad

Navegación Web Modelo Plano

 

Modelo jerárquico

Este modelo es un modelo más complejo que el modelo plano. La diferencia está en que las páginas se estructuran en jerarquías. Esto hace que multitud de páginas se engloben en una sola página principal lo que permite que el sitio web tenga múltiples páginas y sea fácil de navegar a través de ellas.

Su desventaja principal es que puede volverse muy complicado fácilmente a medida que se vaya añadiendo más contenido. La forma de combatir eso es mantener la estructura lo más plana posible y no añadir jerarquías cuando no sea absolutamente necesario

Navegación Web Modelo Jerárquico

 

Modelo Hub & Spoke

Este modelo está caracterizado por tener una pantalla central (hub) donde podemos ver todas las distintas opciones de la página o aplicación y dirigirnos hacia allí. Para revisar otro contenido tendríamos que volver al main hub y dirigirnos a otra pantalla. Este ejemplo lo podemos ver perfectamente en algunas aplicaciones móviles y en algunos elementos web como las pestañas.

También podríamos decir que el modelo plano es un ejemplo de este tipo de modelo donde a partir de un hub central (menú principal) nos podemos dirigir a distintas secciones. Pero si nos centramos estrictamente en su definición podemos observar que no son iguales.

Un ejemplo de modelo hub & spoke podría ser Gmail. Si queremos ver un correo pulsaríamos un correo, pero si queremos ver otro tendríamos que ir a la ventana anterior para verlos todos.

Obviamente es difícil poner un ejemplo en una página o aplicación que siga al 100% este modelo porque siempre hay distintos modelos mezclados. Donde si que podríamos ver mayores ejemplos de este modelo sería en la vida real.

Navegación Web Modelo Hub & Spoke

 

Modelo Bento Box

Este modelo consiste en tener una pantalla principal donde podremos ver toda la información de golpe y desde ahí podemos viajar a distintas pantallas para ver esa información en mayor profundidad. Un ejemplo muy claro de esto es Google Analytics donde en la pantalla principal podemos ver distintos datos de golpe.

Navegación Web Modelo Bento Box

 

Modelo vista filtrada

Aquí lo que tenemos es una información con miles de datos mostrados en una estructura plana, pero que están ordenados por distintos metadatos. Entonces para navegar sobre este montón de datos lo que se hace es filtrar la vista según filtros o búsquedas para poder acceder a distinta información.

Es decir la información se ve de una manera distinta a otra según unos filtros definidos por el usuario. Soundcloud y aplicaciones similares como Spotify son los ejemplos perfectos de esto.

Navegación Web Modelo Vista Filtrada

 

Modelo mixto

Seguramente al ver los ejemplos que te he puesto pensarás que no siempre una aplicación o una página web sigue al 100% un mismo modelo. Y esto es porque se pueden usar varios modelos de arquitectura de la información a la vez. Por ejemplo, en Google Analytics podemos ver (escritorio) que tenemos un dashboard al inicio pero a la izquierda tenemos una vista jerárquica de la información.

También tenemos una vista filtrada al buscar distintos datos a través de una búsqueda.

 

Consejos para etiquetar tu navegación web

Ahora te voy a dar consejos para etiquetar mejor tu navegación web.

Usa etiquetas que tu audiencia objetiva vaya a entender. Si en tu sector usáis palabras claves que vuestros clientes no entienden no las uséis bajo ningún concepto. Estos términos tienen que ser fácilmente entendidos por tu audiencia.

Aparte, los términos que uséis tienen que ser lo más sencillo y simple de entender. Cuanto más compliques los términos menor capacidad mental tiene para tomar una decisión. Piensa que cuanto más capacidad cerebral necesitemos para descifrar un contenido menor capacidad tendremos para actuar basándonos en lo escrito.

Aunque puede sonar humorístico, tiene sentido teniendo en cuenta la poca capacidad de memoria a corto plazo que tiene el ser humano en general. Seguramente alguna vez te ha pasado que tenías que hacer tantas cosas y estabas pendiente de otra muchas que habías sobrecargado y te costaba concentrarte. Pues a esto es a lo que me refiero

Por último los términos tienen que ser específicos. Por específico me refiero a usar palabras para diferenciar distintos tipos de productos que pueda estar buscando la gente. Por ejemplo, si tenemos una tienda de deporte podemos poner botellas e incluir todos los tipos o podemos separar botellas normales de los termos. A esto me refiero con ser específico.

Antes de pasar a la siguiente sección aclarar que estos términos al ser específicos y reflejar la intención de búsqueda de una persona nos ayudará enormemente con el SEO que si solo usásemos palabras claves de nuestro sector.

Lo que ocurriría de esa forma es que tendríamos menos visitas y solo tendríamos visitas de gente experta en nuestro campo

 

Priorizar el contenido de tu navegación web

Ahora en este punto del artículo puede ser que tengas ya una idea del modelo de arquitectura de la información que vayas a usar y quizás te estás planteando los nombres que usas para el contenido.

Ahora tenemos que pensar en otro proceso muy importante que es priorizar el contenido de nuestra estrategia de contenidos. Lo que vamos a hacer es priorizar que información es la más importante y cuál es la que menos.

Esto es importante porque algunos contenidos nos ayudará a cumplir con nuestro propósito más fácil que otro. Por ejemplo un botón de inicio de sesión y de registro podría ser más importante que la página "sobre nosotros" porque nuestro objetivo en la página es tener más usuarios registrados.

Entonces priorizar el contenido nos ayuda a dirigir al usuario de un punto de la página a donde haya llegado desde los buscadores y desde ahí los dirigimos a otras partes de la página. Si ha caído en la página de inicio quizás lo que buscamos es que entren a una prueba gratuita de nuestro producto. Entonces ponemos la información necesaria para convencerlo de que tome esa acción.

Al entender esto nos puede venir muy bien para que si una persona aterriza en una página menos importante desde ahí generarle curiosidad para dirigirlos a otras páginas más importantes. Para eso podemos resaltar las páginas más importantes en el menú principal o desde la página donde se encuentre llevarlo a donde queremos.

Hay una estrategia de SEO llamada la estrategia de la wiki. Esta estrategia es muy parecida a la marcada anteriormente.

El resumen de esta estrategia es crear contenido con enlaces a otros contenidos. Al principio lo que harás es enlazar a páginas externas para que tu audiencia pueda seguir aprendiendo más sobre lo que has escrito.

Pero con el tiempo se irán sustituyendo estos enlaces por enlaces internos donde hables del mismo tema y crees un mejor contenido que el que habías enlazado previamente. Como ves esta es otra forma de mover usuarios de un lado a otro. Es una forma distintas de navegación web que no sea en un menú

 

Como saber si tienes una buena navegación web

Hay muchas formas de comprobar si tu navegación web es excelente. Entre esas dos formas las podemos dividir en dos tipos. Las maneras de probarlo antes de actualizarlo y las maneras de probarlo después de actualizar tu navegación web.

La primera manera trata de hacer pruebas de organización de información mientras estás rediseñando la página o actualizándola.

Entre estas maneras podemos usar una técnica llamada card sorting que consiste en que un grupo de personas ordenan la información de la página en categorías predefinidas por nosotros o creadas por ellos. Esta técnica es perfecta para saber como categorizan los usuarios la información y como la buscan ellos.

Otra forma de probar la navegación web es usar tarjetas con información y categorías, y dar a las personas en el centro la tarea que busquen la información para conocer por donde mirarán y qué categoría tiene más sentido. Esto es perfecto para validar tu navegación web.

También podemos usar este mismo método pero usando un método más visual como un prototipo de la página. Aunque corres el riesgo que el prototipo no tenga una buena usabilidad y haga parecer que la estructura web no es la correcta cuando solo fue un problema de diseño.

También puedes hacer preguntas sobre como llamarían a distintos tipos de información para conocer su mapa mental.

Estas técnicas son técnicas centradas para hablar con el usuario, pero también puedes hacer esto mismo de manera gratuita usando herramientas de investigación. Esto es útil si no quieres hablar con las personas y eres antisocial 😝.

Estas herramientas son Google, Keyword Surfer, y Google Trends. Con estas herramientas lo que hacemos es buscar palabras claves, así que de paso hacemos una investigación SEO de palabras claves.

La manera de investigar esto, es primero haciendo una lista de distintas palabras claves para llamar a cada información (tranquilo que no lo harás con cada artículo si tienes miles). Una vez tienes una gran lista de palabras claves lo que vas a hacer es irte a Google Trends y buscar ahí cual de esas variaciones tiene mayor popularidad comparado con otros términos.

Y si queremos conocer otras variaciones lo que hacemos es irnos a Google y buscar la palabra clave. Con Keyword Surfer instalado podremos conocer el volumen de búsqueda y palabras claves alternativas. Así podremos comparar volumen de búsqueda para cada uno y así escoger la más buscada y de mayor relevancia.

Aunque si queremos datos más precisos podemos usar Google Keyword Planner. No hace falta tener que pagar por un anuncio para usarlo. Simplemente crea una cuenta y no activas la campaña que estés creando en el proceso de registro.

Otras formas de comprobar nuestra navegación web es inspirarnos en nuestra competencia viendo como etiquetan la información y como la organizan. Y crear un decision tree para comprobar que información necesitan desde que llegan hasta realizar una acción en la página

Ahora las formas de probar tu navegación web es probarlo en el entorno real y para eso lo que haces es escuchar las quejas de tus usuarios y preguntarles sobre la información que encuentran y no encuentran.

También puedes usar trackers que revisan las acciones del usuario de forma anónima y sin comprometer sus datos personales.

 

Consejos de diseño para tu navegación web

Ahora que ya tenemos una buena base ya podemos representar visualmente tu navegación en la página. Para eso te voy a dar varios consejos de diseños que te ayudará a crear una buena navegación visual de tu página web.

 

1. Separar desplegable de enlace

Muchas veces en las páginas te habrás encontrado que un elemento de menú tiene un desplegable con más elementos. El error más común que se suele hacer es poner un enlace dentro del elemento sin separarlo de su desplegable.

El problema que tiene esto es que en móviles molesta al usuario porque no puede pasar por encima del elemento para que aparezca el desplegable. Otra razón es porque es confuso, no podemos saber si nos lleva a un menú o no hace nada.

La solución a esto es poner el desplegable como botón o hacer que cuando pasemos por encima del botón al lado del elemento del menú aparezca el desplegable. También podemos hacer esto mismo en dispositivos móviles y que solo aparezca así.

La otra solución es hacer consistente el uso de los desplegables de menú en cada elemento. No tengas un elemento con desplegable si no se puede pulsar y en otro sí.

Navegación Web Desplegable Separado De Enlace

 

2. Indicar que un menú es desplegable

Otro error que puedes cometer es crear un menú desplegable pero no indicar que lo sea. Esto solo nos dejará más confuso y si tenemos otros elementos iguales que no tengan desplegables lo único que conseguimos es una mayor confusión. Así que pon un icono que indique que hay más elementos dentro del ítem.

Navegación Web Desplegable

 

3. Asegurarte que se pueda usar en dispositivos móviles

Un menú en dispositivos móviles tiene que ser compacto para que no ocupe toda la pantalla. Aquí tenemos que ser muy selectivo porque si tenemos muchos enlaces tenemos que ordenarlos y hacerlos compactos en categorías grandes.

Por ejemplo podemos poner los enlaces en botones que nos muestren los enlaces cuando los pulsamos como un menú hamburguesa.

Navegación Web Menú Móvil

 

4. Aplicar un mayor contraste al menú principal

Si tenemos varios menús en la página tenemos que aplicar mayor contraste al menú principal y aplicar menor contraste a menús secundarios y menús terciarios. Esto es muy importante porque no queremos que todos los menús compitan por tu atención teniendo en cuenta que hay información más importante que queremos mostrar.

 

5. Hacer que los elementos del menú se puedan pulsar con dedos pulgares

Un error que es común de cometer si no sabes nada de responsive design y principios de diseño en dispositivos móviles es hacer que los elementos de un menú sean enlaces.

Esto es bastante grave de hacer porque si solo tenemos enlaces el área para pulsarlos tiene que ser más preciso y si no funciona cuando lo pulsamos, lo primero que pensaremos es que el enlace no sirve. Si creemos que algo clicable no sirve no volveremos a pulsarlo por lo que podríamos perder grandes oportunidades si una página importante no es accedida por este error.

Recuerda que las personas normalmente usan sus pulgares para navegar por el móvil y que puede haber personas con dedos más gruesos. Así que diseña botones de un tamaño mínimo de 48x48 pixeles.

Incluso si solo usas un icono como botón y no quieres que se vea como botón simplemente deja el botón transparente pero el tamaño que sea más grande que el icono.

Navegación Web Botón Para Dedos Gordos

 

Otros consejos para una buena navegación web

Planifica antes de crear tu página la estructura de tu página web y ordena los elementos usando herramientas como un procesador de texto que sería perfecto para una navegación plana y jerarquizada. PowerPoint para representar esa estructura de forma más gráfica. O usar herramientas de mapas mentales para crear estructuras mucho más complejas.

Recuerda que antes de crear la estructura tienes que conocer a grandes rasgos que contenido habrá en la página.

Sigue los estándares de tu industria para evitar reinventar la rueda y que te salga mal la navegación por intentar ser inteligente.

Por último crea una estructura fácil de entender para usuarios como autores y creadores de contenido de tu página.

 

Recursos extras para aprender más sobre este tema

Ahora te voy a poner algunos recursos que me han recomendado para aprender más sobre arquitectura de la información y la creación de una buena navegación web. Ahora mismo que estoy escribiendo el artículo quizás hayan pocos recursos pero a medida que vaya aprendiendo y consumiendo más contenido sobre esto pondré más recursos.

Libros:

Vídeos:

 

Conclusión

La navegación web es algo que requiere planificación de estructura, de etiquetación y estrategia de contenidos. Toda esta información tiene que ir dirigida a que tu potencial cliente lo pueda entender y navegar por ella con facilidad.

Mientras creas tu navegación web puedes ir probando si tendrá éxito con distintos medios como investigación SEO de palabras claves o el card sorting.

Cuando crees la navegación de manera visual tendrás que seguir buenos principios de diseño y no confundir al usuario. Al igual que tendrás que diseñar para dispositivos móviles y pantallas pequeñas

Ahora con esta información ya puedes crear mejores navegaciones webs o mejorar la estructura actual de tu página web.

Si te ha servido de utilidad este artículo compártelo en redes sociales para que más personas mejoren sus navegaciones webs.

Jefferson Valle

Soy el co-fundador de Indicsa, me especializo en diseño, programación y marketing. También llevo el canal de Youtube de Indicsa donde subo vídeos para cada artículo

Mi pasión es el marketing aunque disfruto de aprender sobre programación y diseño. Me encanta escribir sobre todo lo que voy descubriendo y aprendiendo. Me considero un estudiante de por vida y espero que lo que comparta te sirva de ayuda.

Si quieres estar en contacto conmigo puedes hacer en mi cuenta de Twitter: @rjeffvalle