Navegación Escritorio
Navegación Escritorio
8 reglasMega Menús: estructura, delay y triángulo de intención
Los mega menús exponen toda la arquitectura de información en un gesto, eliminando exploración progresiva por capas. Son apropiados con 3+ categorías de 4+ ítems. El problema cardinal no es mostrarlos sino el timing y el cierre: un delay mal calibrado destruye la percepción de control. El triángulo de intención (Amazon 2012) evita cierres accidentales al moverse en diagonal.
Nielsen Norman Group, Mega Menús Work Well (2023) · Ben Kamens, Amazon mega dropdown (2013) · Baymard Desktop Navigation §3.4Breadcrumbs: cuándo omitir y truncamiento correcto
Los breadcrumbs son ayuda de orientación, no navegación primaria. Solo aportan valor con 3+ niveles de profundidad. El structured data BreadcrumbList (Schema.org) tiene impacto directo en CTR orgánico con 15-20% más rich snippets en SERP. En mobile (<768px) colapsar a "← Anterior", nunca mostrar el trail completo.
NN/g Breadcrumb Navigation Increasingly Useful (2020) · Baymard Breadcrumb Usability (2019) · Google Search Central BreadcrumbListTabs: eje correcto, jerarquía y overflow en mobile
Las tabs son contenedores de vistas paralelas y mutuamente excluyentes del mismo nivel jerárquico. La elección entre eje horizontal y vertical es funcional: el eje vertical escala mejor cuando los labels son largos o la cantidad supera 7 ítems. Nunca anidar tabs dentro de tabs. El indicador activo requiere mínimo 3px de border más cambio de font-weight, solo color viola WCAG 1.4.1.
NN/g, Tabs, Used Right (Nielsen 2016) · Material Design 3 Tab spec · ARIA APG Tabs pattern · WCAG 1.4.1Paginación vs. Scroll infinito: criterio de selección
El scroll infinito maximiza consumo exploratorio pero destruye la capacidad de retorno a posición y la navegabilidad SEO. La paginación preserva el contexto espacial y el deep linking. El patrón híbrido "Load More" explícito reduce los problemas de usabilidad documentados de 84% a 27% en e-commerce. Siempre mostrar contador de posición y URL dinámica.
Baymard Institute, Load More vs. Pagination vs. Infinite Scroll (2021) · NN/g Schade (2022) · Google Search CentralSidebar Nav: estados, colapso y tooltip obligatorio
La sidebar de navegación es el patrón dominante en aplicaciones de escritorio con 5+ secciones. Su complejidad reside en la gestión precisa de estados y en el colapso, que debe preservar accesibilidad. NN/g documenta que íconos sin label reducen el reconocimiento en 41%. Al colapsar, el tooltip en cada ítem no es opcional.
NN/g, Icon Usability (2014) · Material Design 3 Navigation Drawer/Rail · Microsoft Fluent 2 Nav · Apple HIG SidebarHamburger en desktop: el anti-patrón y sus excepciones legítimas
El menú hamburger en desktop oculta la arquitectura de información y aumenta el tiempo de descubrimiento en 21% y la insatisfacción en 22% (NN/g 2016). La heurística H6 de Nielsen (Recognition over Recall) lo condena directamente. Las únicas excepciones válidas son canvas-first apps (IDEs, editores de diseño) y sidebars secundarias accesorias.
NN/g, Hamburger Menús and Hidden Navigation Hurt UX Metrics (Patton 2016) · Luke Wroblewski, Obvious Always Wins (2015) · Nielsen H6Keyboard navigation y focus management en navegación
La navegación por teclado no es solo requisito WCAG 2.1 AA: es el mecanismo de los power users para operar a velocidad máxima. El foco mal gestionado es la causa número uno de abandono en usuarios de teclado. El contrato es triple: predecible (Tab sigue el orden visual), visible (indicador nunca nulo), y completo (ningún componente inalcanzable).
WCAG 2.1 SC 2.1.1 / 2.4.3 / 2.4.7 · ARIA APG Navigation pattern · NN/g Keyboard-Only Navigation (2014) · Lea Verou, :focus-visible/* Focus ring obligatorio */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Nunca: */ * { outline: none; }
/* Anti-patrón */
* { outline: none; }
a:focus { outline: none; }
Deep linking: URL como estado permanente de navegación
La URL es la interfaz más duradera de la web: persiste en bookmarks, historial, emails y logs. Cada estado de navegación que no se refleja en la URL es un estado que el usuario no puede compartir ni recuperar. Baymard (2022) documenta que sitios con filtros en URL tienen 35% más sesiones multi-dispositivo. Restaurar estado desde la URL antes del primer paint es obligatorio.
Baymard Institute, Product Filtering UX (2022) · MDN History API · Google Search Central URL structure · NN/g, URLs as UI (Nielsen 1999)- R-1046 Mega Menús: estructura, delay y triángulo de intención
- R-1047 Breadcrumbs: cuándo omitir y truncamiento correcto
- R-1048 Tabs: eje correcto, jerarquía y overflow en mobile
- R-1049 Paginación vs. Scroll infinito: criterio de selección
- R-1050 Sidebar Nav: estados, colapso y tooltip obligatorio
- R-1051 Hamburger en desktop: el anti-patrón y sus excepciones legítimas
- R-1052 Keyboard navigation y focus management en navegación
- R-1053 Deep linking: URL como estado permanente de navegación