Reduce el desorden y mejora la usabilidad con menús desplegables.
Los menús desplegables son elementos de la interfaz de usuario (UI) que permiten a los usuarios seleccionar opciones de una lista. Estas listas son ideales para simplificar diseños y la navegación.
Para crear menús desplegables atractivos, necesitarás entender sus casos de uso, beneficios y cómo diseñarlos y crearlos. Con estos fundamentos, estarás listo para implementar estas interacciones en el diseño de tu sitio web.
Entender el diseño de menús desplegables
Los menús desplegables organizan la información en una jerarquía, lo que hace que las interacciones en el sitio web sean más intuitivas. Estos son los casos de uso más comunes para los cuadros desplegables.
Formularios en sitios web
Al crear una cuenta, suscribirse a un servicio o realizar una compra, es probable que los usuarios tengan varios campos de formulario que completar. Algunos campos, como "¿Cómo te enteraste de nosotros?", funcionan bien como menús desplegables porque contienen todas las posibles respuestas dentro de una lista expandible.
Hacer que los usuarios elijan entre opciones coherentes agiliza la recopilación y el análisis de datos. En este ejemplo concreto, podrías revisar la respuesta principal del formulario para saber si Facebook, los anuncios de Google o los folletos físicos fueron los mejores métodos publicitarios para ti.
Menús de navegación
Los menús desplegables son una forma excelente de simplificar la navegación del sitio web, especialmente en sitios complejos.
Por ejemplo, si estás creando un sitio web educativo que ofrece una amplia gama de cursos, puedes usar listas expandibles para organizar las opciones de navegación bajo categorías principales. Esta estructura permite a tus visitantes abrir la categoría relevante y encontrar lo que necesitan sin tener que leer todas las opciones que no les interesan.
Clasificación y filtrado
Al realizar una búsqueda avanzada, a menudo puedes elegir entre numerosas opciones de clasificación y filtrado para refinar tus resultados. Las categorías suelen incluir frases como "hace menos de 30 días" y "de la A a la Z".
Limitar las búsquedas es especialmente útil en plataformas que contienen mucha información, como sitios de comercio electrónico o bases de datos legales. Añadir filtros ayuda a los usuarios a encontrar información más precisa rápidamente, lo que mejora la experiencia de usuario (UX) general.
3 beneficios de tener un menú desplegable
Aquí tienes tres de las principales razones para incluir menús desplegables en tu sitio web.
1. Libera espacio en la interfaz
El espacio es un bien escaso en tu interfaz: cada cadena de texto, botón y gráfico debe ocupar el espacio justo para ser útil sin dominar la página.
Usar un menú desplegable para las opciones seleccionables las saca de la página y las coloca en un espacio dedicado. Esta estrategia reduce el desorden, haciendo que la página sea más fácil de leer porque no hay múltiples cadenas de texto compitiendo por la atención.
2. Agiliza la navegación
Los menús desplegables hacen que la navegación sea intuitiva al organizar las páginas en categorías principales y presentar las opciones con claridad. Ya sea que los usuarios hagan clic, pasen el cursor o usen la tecla Tab para moverse entre las opciones, estas listas ofrecen una forma fluida de navegar por las opciones y seleccionar los valores adecuados.
3. Diseña de forma adaptable
Ahorrar espacio en la página web es aún más importante en pantallas pequeñas, por lo que los menús desplegables son un gran complemento para sitios adaptables. Para mejorar la navegación táctil, los diseñadores también pueden realizar ajustes optimizados para móviles, como aumentar el tamaño de los botones. El diseño adaptable permite que más personas visiten y utilicen tu sitio, lo que mejora la accesibilidad, la interacción y la experiencia de usuario.
Cómo trabajan juntos HTML y CSS al crear menús desplegables
Para crear el código de los menús desplegables, puedes usar HTML por sí solo o combinarlo con CSS. Usar solo HTML te permite crear un menú desplegable básico, mientras que añadir CSS te permite darle un aspecto único al personalizar los estados de interacción, los colores y las fuentes.
Existen dos formas principales de incluir CSS en la página donde necesitas el menú. Puedes escribirlo dentro de una etiqueta <style> en tu elemento <head> o crear un archivo CSS independiente al que hacer referencia en el archivo HTML.
Cómo crear menús desplegables visualmente en Webflow
Para diseñar menús desplegables sin tener que escribir el HTML o CSS tú mismo, necesitarás una plataforma de diseño web integral como Webflow. Después de añadir un menú desplegable a tu sitio en el Diseñador de Webflow, puedes personalizar sus opciones, apariencia y comportamiento; Webflow se encargará del marcado subyacente.
Para obtener una guía detallada, consulta el tutorial sobre menús desplegables de Webflow University. Aquí tienes una breve descripción de cómo funciona:
- Añade un elemento desplegable. Selecciona “dropdown” en la lista de elementos.
- Personaliza el menú desplegable. Selecciona el componente “Dropdown” o sus elementos secundarios y utiliza el menú de Estilo para personalizar su apariencia.
- Añade y da estilo a los enlaces del menú desplegable. De forma predeterminada, cada menú desplegable tiene tres enlaces. Para verlos, abre el menú de Configuración del Dropdown y selecciona “Show”. Luego, usa la pestaña de Estilo para personalizarlos.
- Configura las interacciones del menú desplegable. Selecciona el elemento que quieras usar como activador y utiliza el menú de Interacciones para añadir una animación que abra el menú desplegable.
- Previsualiza y prueba. Publica tus cambios en el sitio de prueba y comprueba que el menú desplegable funcione como esperas.
- Publica tu sitio. Publica en producción y vuelve a probar tu menú desplegable para asegurarte de que funcione correctamente en vivo.
Diseño web de otro nivel
Desde lo más básico hasta lo avanzado: aprende a crear sitios en Webflow con más de 100 lecciones, incluyendo los fundamentos de HTML y CSS.
7 mejores prácticas para menús desplegables
Los menús desplegables no son nada del otro mundo, pero existen algunos principios básicos para hacerlos bien. Aquí tienes siete mejores prácticas a tener en cuenta al añadir menús desplegables a tus diseños.
1. Mantén la sencillez
Mantén el texto de tu menú desplegable en unas pocas palabras. Esto se aplica tanto a su etiqueta como a cada elemento del menú. Cuantas menos palabras uses, más rápido podrá leer el menú el visitante, lo que se traduce en una experiencia de usuario más eficiente.
2. Organiza de forma lógica
Organiza los elementos de tu menú por prioridad o relevancia para que las respuestas más comunes aparezcan al principio. Por ejemplo, en un menú desplegable de “Selecciona tu país”, podrías colocar “Estados Unidos” al inicio si la mayoría de tus clientes provienen de allí.
3. Hazlo accesible
Asegúrate de que el contraste entre el color del texto y el fondo sea suficiente para cumplir con las <aux translate="no">WCAG recommendations</aux>. Usa una fuente de tamaño mediano o grande y realiza pruebas con un lector de pantalla para garantizar que pueda detectar y leer todas tus cadenas de texto.
4. Optimiza para dispositivos móviles
Utiliza CSS Flexbox, grid o puntos de interrupción para crear menús desplegables flexibles que se adapten a diferentes tamaños de pantalla. En pantallas pequeñas, haz que ocupen una mayor proporción que en escritorio para que el menú sea más fácil de usar en dispositivos táctiles.
Añade siempre un activador de toque o clic a tus menús desplegables para asegurar que sean interactivos en dispositivos móviles, donde los estados de “pasar el cursor” no funcionan.
5. Proporciona pistas visuales
Usa iconos claros, como flechas, que indiquen que un menú es interactivo. Al configurar la animación, haz que el menú se deslice hacia abajo desde el botón. Al hacer un segundo clic, usa una animación que deslice el menú de vuelta hacia arriba, bajo el botón.
Estas pequeñas pistas visuales dan a los visitantes del sitio web claves sobre cómo interactuar con otros elementos que podrían parecer similares, como los menús de navegación y las secciones expandibles.
6. Asegura una carga rápida y capacidad de respuesta
Mantén tus animaciones breves y permite que se interrumpan entre sí para que los menús desplegables puedan cerrarse antes de abrirse por completo. Este diseño permite a los visitantes cerrar un menú de inmediato si hacen clic en él por accidente.
No coloques demasiados menús desplegables en una página ya saturada. Cada animación aumenta el tiempo de carga, así que si necesitas usar más de unos pocos, colócalos en su propia página dedicada, como en los formularios de contacto o menús de configuración.
7. Usa el paso del cursor y el clic de forma adecuada
Los activadores por paso del cursor ofrecen una experiencia más fluida porque requieren menos clics, pero no siempre son la mejor opción. Para una página con muchos menús desplegables, usa clics para que los usuarios puedan ser más precisos con lo que intentan interactuar.
Eleva el diseño de tu sitio web con una experiencia de menú desplegable
Los menús desplegables incorporan interactividad, eliminan el desorden visual y mejoran la navegación, lo que los convierte en una forma excelente de potenciar la experiencia de usuario.
Prueba <aux translate="no">Webflow Designer</aux> para añadir menús desplegables a tu página y personalizarlos según tu estilo. <aux translate="no">Made in Webflow</aux> también ofrece varios menús desplegables preconfigurados que puedes clonar y ajustar a tu gusto.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
