Cree un menú Mega que sea amigable con SEO y UX en WebFlow.

Problemas reales en la vida: hermoso sitio web ... ¡pero los clientes no pueden encontrar nada!

Imagínese ... se dedica tanto al dinero como al crear un hermoso sitio web de flujo web. El diseño moderno, la animación moderna es suave e impresionante. Pero luego una triste historia ... ¡los clientes entran y "confunden"! No pueden encontrar la página que desee, no saben cuál es su servicio o encuentre una página "Contáctenos", no encontrado. Finalmente, haga clic para cerrarlo desafortunadamente. Este problema es como si construyera un centro comercial que sea elegante. Pero no hay una señal clara de que el cliente entró y haya perdido el camino hasta que lo desanimara. Y luego salga a las manos desnudas ... esta es la pesadilla de todas las personas web, ¿verdad?

La fuente de este problema a menudo está oculta en el "menú de navegación" que se llama así o en el menú de navegación del sitio web. Especialmente el sitio web que tiene mucha información, hay muchos servicios, muchas categorías que usan un menú desplegable normal que se apila en capas que ya no responde. Porque está ocultando información importante y creando experiencias frustrantes para los usuarios

Solicitud de ilustraciones: la imagen del usuario está fruncida. Confundido frente a la computadora con un complicado menú web. Con una línea que se vincula de un lado a otro como un laberinto transmite la sensación de "perdido" en el sitio web

¿Por qué ocurrió ese problema: la trampa del "menú ordinario" el día en que crezca la web?

El problema de la navegación compleja no ocurre naturalmente. Pero es causado por el "crecimiento" del sitio web que falta "planificación" muchas veces al principio. Es posible que tengamos solo unas pocas páginas. Pero cuando el negocio amplía el aumento del producto/servicio, el artículo se escribió todas las semanas ... Nuestro menú comenzó a "hincharse" y "meterse" más como un armario que llenó todo sin organizar. Las principales causas causadas por:

• Falta de arquitectura de información (IA): tendemos a agregar nuevas caras al menú como desee. Sin pensar en la imagen general sobre cómo el usuario encontrará información para comprender qué es la arquitectura de la información, por lo que es el punto de partida más importante.
• Cantén el menú desplegable original: menú tradicional que requiere que los usuarios pasen gradualmente el mouse para perseguir uno por uno. Eso no es adecuado para sitios web que tienen mucha información. Porque oculta opciones importantes que hacen que el usuario no vea toda la descripción general
• Pasando la perspectiva del usuario: diseñamos el menú desde el punto de vista del "propietario de la web", que sabe qué es donde, pero olvidamos pensar que el "nuevo usuario" que llegó por primera vez no entendería que quieren "mapas" que son claros y fáciles de entender.

Cuando su sitio web es más grande y más complicado, la estructura del menú no se trata solo de belleza. Pero es una cuestión de "supervivencia" en la competencia de negocios digitales

Solicitud de ilustraciones: Imágenes de mapa del sitio (Sitemap), que al principio hay algunos cuadros conectados de manera ordenada. Y otra imagen que se convirtió en un mapa grande que unido juntos transmite una planificación que carece de planificación

Si se deja, ¿cómo afectará: el desastre invisible de UX y SEO?

Tener un mal menú de navegación no es solo "molesto", sino que es "desaparecer. En silencio" que tiene un impacto directo en sus objetivos comerciales y rangos de SEO. Eche un vistazo a estos aterradores efectos:

• La tasa de bonos es alta: cuando los usuarios no pueden encontrar la información deseada en unos segundos. Presionarán el botón Atrás inmediatamente. Esta señal enviará a Google que su sitio web "no es útil"
• Tasa de conversión Dang: ya sea comprar productos, completar el formulario o contactar ... Si el usuario no alcanza esas páginas objetivo, la conversión nunca ocurrirá.
• Romper la experiencia del usuario (Experiencia de usuario (UX): las malas experiencias crearán malos recuerdos con su marca. La oportunidad para que vuelvan de nuevo es casi cero.
• Afecta seriamente negativamente. GoogleBot utiliza un menú y una estructura de enlaces para comprender y crear un sitio web (rastreo e indexación). Si su menú es complicado y un enlace a páginas importantes es difícil, Google no verá esas páginas, lo que resulta en las clasificaciones en Google.
• Pérdida de presupuestos de marketing: puede arrojar mucho dinero para que las personas ingresen a la web. Pero si entran y se pierden igual a ti "quemando dinero"

¿Ves que las cosas pequeñas como "menú" tienen un impacto en una cadena que es más aterradora de lo que piensas? La mejora de la estructura UX es muy importante. Especialmente con sitios web que necesitan alta credibilidad como las relaciones con los inversores

Solicitud de ilustraciones: 3 imágenes de gráficos muestran efecto: la primera carrera de "tasa de rebote", la segunda "tasa de conversión" cae, y la tercera barra "clasificación de SEO" se desplomó con un icono de cara triste.

¿Hay alguna solución? Y dónde comenzar: "Mega Menú", un caballero blanco que monta caballero para mucha información

¡La solución para este problema que ha sido aceptada internacionalmente y es muy poderosa es ** "Mega Menú" **! El menú Mega es un gran menú de navegación que se expande cuando el usuario de desplazamiento o haga clic para mostrar todas las opciones de navegación en varios niveles. Al mismo tiempo, no es solo un menú desplegable que tiene una lista larga, sino que es un "panel de control" que está bien organizado. Ayuda al usuario a ver todas las imágenes generales e inmediatamente a cruzar a la parte deseada.

Según el grupo Nielsen Norman, el Líder de UX de clase mundial, el menú Mega funciona muy bien porque ayuda a resolver el problema del menú tradicional directamente.

¿Y dónde debería comenzar?

La clave no es saltar al flujo web de inmediato, pero es ** "ia) ** ** Primero:

1. Recopile toda la información: Lista, todas las páginas web que tiene.
2. Agrupación (agrupación): Organice un grupo que sea relevante para la categoría principal que sea razonable para "usuarios" (no para nosotros), como "servicio", "soluciones de la industria", "sobre nosotros", "almacén de conocimiento"
3. Crear jerarquía: en cada grupo, priorice los enlaces. ¿Cuál es el enlace que la gente quiere ver primero?
4. Use una palabra clara (etiquetado): nombre el menú y los enlaces. Con palabras que la gente generalmente entiende, fácil y directa

Cuando tienes un claro "plano", la creación del mega menú en el flujo web se volverá fácil e instantáneamente tendrá una buena dirección. El buen plan IA es la base que afecta directamente tanto al SEO como al UX del sitio web .

Solicitud de ilustraciones: la comparación entre el antiguo menú desplegable que se superpone a varias capas con mega menú que se extiende con un tema con icono. Se ve limpio y fácil de entender

Ejemplos de lo real que solía ser exitoso: cuando el sitio web de B2B Tech ha cambiado el menú, el plomo aumentó en un 200%.

Para ser más claro, me gustaría levantar el caso de una compañía de tecnología B2B que ha encontrado este problema. Su sitio web tiene muchos productos de software, hay muchas soluciones industriales (financieras, minoristas, producción) y tienen un gran almacén de conocimiento (artículo, estudios de casos, blanco). Su menú original es un menú desplegable de 3 historias que "encuentra cualquier cosa" hasta que el equipo de ventas comience a quejarse, pero los clientes pueden llamar para preguntar, pero las preguntas básicas se pueden encontrar desde la web.

Qué hacer: el equipo ha decidido "revisar" todos los nuevos menús de navegación utilizando Mega Menu en Webflow.

• Menú "Productos": Muestre todos los nombres de software con explicaciones breves y el significado del significado
• El menú "Soluciones": el grupo de soluciones según la "industria" y el "tamaño del negocio" claramente.
• El menú "Recursos": dividido en columnas "Blog", "Estudios de casos" y "Descargas" con los últimos artículos o casos interesantes como destacados.

Resultados: Después de lanzar un nuevo menú durante solo 3 meses, lo que sucedió es una tasa de límite, reducida en un 40%, cuando el usuario en la web (tiempo en el sitio) aumentó se duplicó. Y lo más importante, el "plomo de calidad" de varias soluciones aumentó en más del 200%, porque al final, el cliente "descubrió" que la compañía tiene una solución que realmente satisface sus necesidades. Este es el poder de una gran navegación que cambia. Los "visitantes" realmente se convierten en "clientes objetivo".

Solicitud de ilustraciones: la imagen de la pantalla de antes y después del sitio web. El sitio web es un viejo y difícil de usar. Después es un menú de mega limpio y una categoría clara. Con un gráfico de barra que muestra el cable más alto

Si quieres seguir, ¿qué hacer? (Se puede usar de inmediato): Crear mega menú en un flujo web de handshake webflow.

Listo para crear un mega menú que cambie su sitio web, ¿verdad? Aunque el flujo web no tiene un componente llamado "Menú Mega" directamente, podemos usar las herramientas básicas del flujo web para crearlo flexible y potente. Veamos los pasos:

Paso 1: Estructura en Navigator

Comience utilizando el componente Navbar de WebFlow. En el interior, el `Menú de NAV` agrega 'desplegable' a la 'lista desplegable' que se abre es el área en la que crearemos nuestro mega menú.

Paso 2: Use la cuadrícula o FlexBox para organizar columnas.

Elimine el 'enlace desplegable' que se ha conectado al 'Div Blocku a la' Lista desplegable 'en lugar de' Div Block ', este será el contenedor principal de su mega menú. Te ayudará a organizar el contenido fácilmente y en proporción

Paso 3: Ingrese contenido y enlaces.

En cada canal de cuadrícula, puede comenzar a poner el contenido de inmediato. La forma recomendada es:

• Título del grupo: Use 'Heading` (como H4 o H5) para el nombre de la categoría (como "nuestro servicio", "soluciones industriales"), lo haga parecer sobresaliente pero no un enlace.
• Lista de enlaces: En el tema del grupo, coloque `Bloqueo de enlace o enlace de texto 'para cada página pequeña.
• Agregue interés (imágenes): puede agregar `` Imagey o `` `` `` Small 'en el lado para ayudar a transmitir significado. O tal vez la columna final para la imagen de promoción sobresaliente, de acuerdo con los principios de diseño que la revista Smashing recomienda

Paso 4: Personalice hermosos y amigables con UX.

Use el poder del diseñador de flujo web para personalizar el estilo para que coincida con su marca. No olvide poner un relleno para tener un espacio cómodo (espacio en blanco) y determinar claramente el color del enlace .

Paso 5: Haga que responda en Mobile (¡muy importante!)

El menú Mega solo mostrará los resultados completos en el escritorio. Al cambiar a la tableta o la vista móvil, el menú debe colapsarse nuevamente en un menú normal (menú de hamburguesas). Puede ocultar el mega menú div (`visualización) en el móvil y usar el menú NAV estándar 'que está preparado. Para la mejor experiencia de los usuarios móviles

Si necesita un experto para ocuparse de esta parte, equipo de desarrollo de sitios web de flujo web está listo para ayudar.

Solicitud de ilustraciones: la pantalla del diseñador de flujo web que muestra el panel Navigator ve la estructura del desplegable, la red y el encabezado claramente y tiene una flecha en cada paso.

Preguntas que las personas tienden a preguntarse y las respuestas que se limpian

PREGUNTA: MEGA MENÚ, ¿se descargará más lento la web?
Respuesta: En absoluto, si se crea correctamente en el flujo web, porque usamos elementos básicos como div, cuadrícula y enlace que ya es ligero y efectivo. Siempre que no coloque una imagen o un video grande en el menú no tendrá un impacto significativo en la velocidad

Pregunta: ¿El mega menú es realmente bueno para SEO? Google está confundido?
Respuesta: ¡Muy bien! Por otro lado, ayuda a Google a comprender mejor la estructura de su sitio web. Porque crea un enlace interno claro a varias páginas importantes. El nivel superior ayuda a distribuir el "Equidad de enlace" o el "jugo de SEO" a esas páginas mejor. Y también ayuda a aumentar las señales de participación del usuario (como reducir la tasa de rebote, agregar tiempo de permanencia), lo cual es un gran factor positivo para la clasificación.

Pregunta: ¿Cómo debería el teléfono móvil mostrar mega menú?
Respuesta: ¡No muestres el menú de mega completo en el móvil! Inmediatamente destruirá la experiencia del usuario. La mejor manera de hacer que se vuelva a colapsar como un menú móvil estándar (menú de hamburguesas), que, al hacer clic, mostrará el enlace vertical (lista vertical) se puede convertir en un acordeón (el sub -menú que se presiona y se expande) para varios enlaces. Por orden

Pregunta: ¿Deberíamos poner cada página en la web en el menú Mega?
Respuesta: No es necesario. Solo debe elegir deberes importantes y beneficiar el viaje del usuario (viaje del usuario) solamente. Usar demasiados enlaces causará el menú y la falta de puntos focales. Debe elegir el deber como una "puerta principal" a varias partes del sitio web es suficiente

Solicitud de ilustraciones: ícono de la imagen, un gran signo de interrogación (?) Con un pequeño icono que representa "velocidad", "SEO" y "móvil" que rodea para responder a cada pregunta.

Resumen para ser fácil de entender + quiero intentar hacer

En este punto, creo que ves que el mega menú no es solo una hermosa "tendencia de diseño", sino que es una "herramienta de negocios estratégica" que es muy poderosa en el flujo web. Ayuda a resolver los problemas clásicos clásicos del sitio web que "hermoso pero perdido" completamente con un claro "mapa" para los usuarios. Les hace encontrar lo que quieren de manera rápida y fácil

La inversión es fuerte con la planificación y creación de un mega menú. Es una inversión que proporciona un retorno de dos por -uno: ** Una es una excelente experiencia de usuario (UX) ** que impresiona y lealtad a la marca y ** es una fuerte estructura de SEO ** que ayuda a Google a amar su sitio web y dar mejores rangos como premios.

No permita que el menú de navegación desordenada sea un "cuello de botella" que más obstruya el crecimiento de su negocio. Es hora de cambiar el menú normal. Convertirse en una puerta grande que abre a los clientes y los guíe al éxito con usted.

Intente regresar y explorar el menú de su sitio web de flujo web ahora. ¿Es una respuesta a los usuarios y los SEO? Lo suficientemente bueno? Si aún así ... ¡entonces es hora de construir el "Menú Mega"! Y si necesita un profesional que comprenda UX y SEO, venga a ayudar a crear el menú perfecto. ¡El equipo de Vision X Brain siempre está listo para el consejo!

Solicitud de ilustraciones: la imagen del usuario está sonriendo feliz y satisfecha mientras usa un sitio web con un menú Mega hermoso y claro en la pantalla de la computadora. Con símbolos y gráficos en forma de corazón que se elevan al lado

‍