¿Ha terminado la era de los menús desplegables? Bien podría ser. Este patrón de diseño no funciona para los usuarios de hoy. El concepto es torpe y no siempre se traduce bien en pantallas más pequeñas.
Los usuarios desean menús y opciones de navegación que sean más fáciles de usar, fáciles de entender y no vienen con más opciones de las que pueden pensar en unos pocos segundos. Los menús de navegación deben ser independientes del dispositivo y funcionar de la misma manera, creando una experiencia única en todos los tipos de dispositivos. Entonces, ¿qué puede hacer para despedirse de esos menús desplegables? Tenemos cinco alternativas.
1. Paneles de desplazamiento
No importa cómo le guste su desplazamiento, el uso de efectos de desplazamiento como el paralaje o los paneles para llevar a los usuarios a una parte diferente del sitio es un estilo de navegación efectivo. Si bien muchos de nosotros (yo incluido) entregamos el rollo por muerto hace unos años, una pantalla más pequeña nos ayudó a reaparecer los patrones de desplazamiento como una característica altamente utilizable en todos los tipos de dispositivos.
Los usuarios no tienen miedo de moverse hacia abajo en la página, por lo que no tiene que llenar cada enlace o bit de información en esa primera pantalla. Utilice HTML5 a su favor y cree un sitio que haga de la navegación parte de una experiencia de usuario inmersiva. (Tan inmersivo, de hecho, que los usuarios ni siquiera pueden reconocer la navegación por lo que es).
Para que funcione, tiene que hacer más que simplemente crear una página larga con un montón de enlaces. El diseño tiene que venir con impacto. Indica a los usuarios lo que estás haciendo. ¿Crear separación visual con color entre pantallas? e incluye grandes áreas en las que se puede hacer clic y que indican a los usuarios exactamente dónde irán a continuación.
Si le preocupa que algunos usuarios puedan necesitar ese menú de estilo de mapa de sitio más tradicional, considere ocultarlo en el pie de página. Terminará con un diseño más ágil y aún mantendrá esos elementos enlazables en una sola ubicación para usuarios de la vieja escuela.
2. Hamburguesas Ocultas
Antes de saltar en el? Odio iconos de hamburguesas? Rant, piénsalo por un momento. Nos guste o no, este icono tiene un pequeño icono que se ha transformado en un símbolo de un menú emergente, abatible hacia abajo o oculto. Los usuarios parecen entenderlo. Y mientras muchos diseñadores parecen detestarlo, probablemente terminará usándolo de todos modos.
Así que deja de luchar contra eso.
En su lugar, trabaje para desarrollar mejores formas de incorporar el icono en su patrón de navegación general. Estoy cavando totalmente los iconos de hamburguesas que se abren en menús minimalistas de pantalla completa en este momento, como Trivium Art History, arriba.
El truco aquí es la simplicidad. El menú es audaz, proporciona a los usuarios solo algunas opciones y es fácil de usar en cualquier dispositivo. ¿Quién necesita docenas de opciones de menú más, de todos modos? Una parte importante de los usuarios aterrizará en su sitio web desde un motor de búsqueda en una página interior; el número de usuarios que escriben su URL directamente y luego se desplaza a través de la navegación en el sitio se está reduciendo todo el tiempo.
3. Navegación estilo tarjeta
Tarjetas, tarjetas y más tarjetas. Parece que los diseñadores (y usuarios) pueden obtener suficiente de ellos. Entonces, ¿por qué no hacer de las tarjetas su opción de menú / navegación preferida?
Comience con un patrón de tarjeta en la página de inicio que es una experiencia de pantalla completa. Cada tarjeta lleva a los usuarios a una parte diferente del sitio. La idea es tan simple e intuitiva que cualquier usuario debería poder navegar el flujo y encontrar lo que está buscando con facilidad.
Como un bono adicional, las tarjetas de respuesta entonces "caen" en su lugar? en pantallas de dispositivos móviles para que la experiencia sea similar en todas las plataformas. (Los usuarios te amarán por esto).
Para mezclar el diseño, piense fuera de la caja con su interfaz estilo tarjeta. Mezcle diferentes estilos de tarjeta (texto, imágenes, video) para que los usuarios puedan mirar a través de la pantalla e interactuar con múltiples elementos. Katvig, arriba, hace un buen trabajo al incorporar múltiples estilos de tarjeta, color y animación simple para llamar la atención sobre elementos específicos.
4. menús pegajosos
Simple y utilizable. Los menús pegajosos son una forma fácil de ayudar a los usuarios a moverse a través de su sitio. Cree una estructura de menú simple con solo unos pocos elementos importantes y asegúrese de que el elemento pegajoso encuentre y se bloquee en una posición específica en la pantalla.
La mayoría de las veces estas barras de menú son grandes y luego se colapsan en una versión más pequeña que la parte superior de la pantalla en cada página. (Es difícil ser más fácil de usar que esto).
El sitio de Bloomberg Mayors Challenge hace un gran trabajo con su menú pegajoso. La posición del menú se mueve desde la mitad de la pantalla hasta la parte superior de la página de inicio (y en todas las páginas de menú de nivel superior), proporcionando interés visual y se mantiene con todas las demás páginas del sitio. Además, el menú le ofrece algunas otras cosas que los usuarios pueden desear, como los iconos de redes sociales para un acceso rápido y un selector de cambio rápido para el idioma.
Esta solución simple es una de las cosas más fáciles de usar que puede hacer. Esta es la razón por la cual los menús pegajosos son una característica de venta popular para muchos? temas del sitio web. (Es algo sorprendente que más sitios no los usen.)
5. Menú lateral vertical
Es una característica popular para dos de los sitios más populares del mundo, Twitter y Facebook, pero no muchos otros sitios web aprovechan la navegación lateral vertical del menú. Tal vez sea hora de empezar.
Ambos sitios de medios sociales meten elementos importantes en elementos de navegación de barra lateral. La delgada columna vertical es ideal para almacenar mucha información de texto simple y hacer que las cosas sean fáciles de ver de un vistazo.
Si opta por un menú en el lado izquierdo o derecho de la pantalla, depende de usted. (Hay ventajas y desventajas con cualquiera de las opciones). Pensaría en esto en términos de cómo funciona la navegación con otras imágenes. ¿El resto del sitio tiene un tirón direccional hacia uno u otro lado? ¿Podrían las imágenes dominantes llevar al usuario a mirar la navegación? Piense en los elementos juntos en una gran imagen para crear piezas que trabajen juntas para lograr una sensación singular y unificada.
5 recursos impresionantes
- Web UI Design Best Practices ebook
- Fragmentos de CSS: navegación horizontal simple
- ? Desplegable debe ser la interfaz de usuario de último recurso? y como crear mejores formas
- Ejemplos de navegación receptiva de NavNav
- ? 10 Impresionantes plantillas de menú HTML para descargar?
Conclusión
Los patrones de navegación y los estilos de menú son una parte evolutiva del diseño del sitio web, pero muchas de las tendencias son más lentas de desarrollar que en otros lugares. Esto podría deberse a la complejidad en el diseño de diferentes estilos para este elemento esencial o la precaución de los diseñadores que se están quedando atrás para ver qué resulta en patrones de usuario más aceptados.
La lección aquí es esta: la navegación simple es mejor. Si está utilizando desplegables torpes y abrumadores, es hora de un cambio. Ve a por ello.