bbulman/navigation

Navegación

La navegación decide qué partes de la estructura obtienen un lugar permanente en pantalla y a cuáles se accede de otra manera. Los espacios son escasos, y cada superficie tiene su propia regla para determinar qué merece uno.

Lo que necesitas primero

Entrada	De dónde viene	Si falta
Cada superficie tal como está	En un código base, lee primero las rutas y los componentes de navegación (encabezado, pie de página, selector de aplicaciones, barras laterales, barras de pestañas). Nunca rediseñes solo desde la página de inicio.	Solicita capturas de pantalla o una lista escrita de elementos por superficie.
El árbol subyacente	Un mapa del sitio o las rutas	Mapea el árbol actual tú mismo y menciónalo. Si la estructura en sí es incorrecta, detente y usa sitemaps.
Tareas principales, aquellas en las que la gente falla y el uso	El usuario, analíticas, registros de búsqueda, preguntas repetidas de soporte	Pregunta o indica tu suposición al principio. Nunca estimes el uso; di qué decisiones cambiarían si lo tuvieras.

Si no puedes obtener nada de esto, di qué necesitarías y produce el spec vacío desde references/spec-template.md con las reglas de entrada completadas.

Método

1. Mapa cada superficie. Superficie, elemento, destino, recuento. Marca el mismo destino con dos nombres, elementos que no llevan a ninguna parte y cualquier cosa que exista en una sola superficie por accidente.

2. Separa lo global de lo local.

   	Global	Local
   Trabajo	Lo que ofrece todo este lugar	Lo que hay alrededor de esta página
   Muestra	Lo mismo en cada página	Solo dentro de su sección
   Superficies	Primaria, utilidad, pie de página	Barra lateral, contenido dentro de la página, migas de pan, enlaces relacionados
   Sale mal cuando	Enumera los hijos de una sección	Repite los elementos globales

   Una sección que necesita más de dos niveles de navegación generalmente requiere su propia barra lateral o su propio hogar.

3. Asigna a cada superficie una regla de entrada y aplícala a cada elemento.

   Superficie	Lo que pertenece	Lo que no pertenece	Regla de entrada
   Primaria	Los 3 a 6 destinos que más importan a usuarios y negocio	Cualquier cosa que no se haya ganado el espacio	Sirve a una tarea principal o un objetivo de negocio declarado, tiene sentido para un recién llegado y supera al elemento más débil ya existente
   Utilidad	Iniciar sesión, cuenta, búsqueda, idioma, ajustes	Elementos clasificados por marketing	Se trata de la sesión de la persona o la herramienta, no del contenido
   Pie de página	El mapa del sitio más completo, legal, contacto, llamadas a la acción secundarias	Un cajón de sastre (la gente y los rastreadores aún lo leen)	Alguien lo necesita desde cualquier página, o la ley lo exige; encaja en un grupo con nombre
   Contextual	Barras laterales, contenido dentro de la página, migas de pan, enlaces relacionados	Cualquier cosa global	Solo significa algo aquí y está colocado por una regla escrita
   Barra de pestañas de la aplicación	Como máximo 5 pestañas; una sexta se convierte en "Más" o se elimina	Destinos raramente utilizados	Un trabajo repetido y de nivel superior en el producto

4. Asigna. Trata más de siete elementos primarios como una señal de que algunos no están ganando su lugar: consolídalos o muévelos al pie de página. Fusiona los casi gemelos en un solo elemento. Dale a cada tarea en la que la gente falla un hogar canónico y di que cualquier otro punto de entrada lleva allí.

5. Ofrece dos o tres disposiciones (por tarea, por objeto, por audiencia), cada una con su costo y dónde tensiona. Recomienda una y explica por qué.

6. Elige el patrón.

   Situación	Usa	Nota
   Un elemento tiene tres o más subgrupos con hijos propios	Mega-menú	Diseña su enfoque de teclado y versión móvil como trabajo separado
   Una lista plana y corta de hijos	Un menú desplegable simple, o un enlace a una página central	A menudo la página central es mejor
   Profundidad de tres niveles o más	Migas de pan	Cada miga es una página real. Un solo rastro por página, siguiendo el hogar canónico, no la ruta que tomó la persona.
   Páginas de referencia largas	Contenido dentro de la página	Solo local
   Diferentes roles necesitan diferentes puntos de partida	Atajos personalizados	Personaliza los atajos, no el mapa. Si todos ven un menú diferente, la gente no puede dar indicaciones, el soporte no puede describir dónde están las cosas y las analíticas dejan de significar algo.

7. Diseña para móvil y teclado ahora. En móvil, di cómo se colapsa la navegación primaria, qué permanece visible y qué sucede con cada mega-menú. En teclado, cada elemento es accesible en orden visual, el foco es visible, Escape cierra lo que Enter abrió y nada funciona solo al pasar el ratón. Los detalles están en references/mobile-and-keyboard.md; léelo para cualquier menú que se abra.

8. Coloca señales donde ocurre la decisión. Una buena señal responde una pregunta que la persona ya tiene, en el momento en que elige, donde ya está mirando, de forma discreta y económica. La flecha junto al indicador de combustible de un coche que muestra de qué lado está la tapa es el modelo. Muestra la ubicación actual con un estado activo.

9. Planifica cómo salen los elementos. Eliminar un enlace no es eliminar una página.

   Paso	Qué hacer
   Decide su destino	Fusionado, movido al pie de página o utilidad, accesible solo mediante búsqueda, o eliminado
   Si la página desaparece	Agrégala al mapa de redirecciones
   Si permanece	Confirma que otra ruta aún llega a ella
   Informa a la gente	En un producto con inicio de sesión, deja un indicador en el lugar antiguo durante uno o dos lanzamientos, y corrige artículos de ayuda, tutoriales y correos que nombren la ruta antigua
   Conserva la palabra	La etiqueta antigua se mantiene como sinónimo de búsqueda, luego observa la búsqueda y el soporte para ella

10. Entrega la validación a tree-tests. Escribe el plan y las tareas. Dale cada problema que motivó el trabajo, cada colocación de la que no estabas seguro y las respuestas propuestas. Objetivos: al menos 70% de éxito, 80% para tareas principales, relación de ruta como máximo 1.5.

Entregable

navigation-spec.md, en este orden:

1. Recomendación: dos o tres frases y la razón principal.
2. Estado actual: cada superficie, su recuento, sus problemas.
3. Opciones: una fila por disposición, con su costo.
4. El spec: por superficie, etiqueta y destino, y por qué cada elemento primario gana su espacio. Luego patrón de migas de pan, móvil, teclado y estado activo.
5. Hogares canónicos: cada tarea problemática, su único hogar y los puntos de entrada que llevan allí.
6. Antes y después: cada elemento actual y a dónde fue, incluyendo lo que se retira y cómo.
7. Regla de entrada: la prueba que un nuevo elemento de nivel superior debe superar.
8. Suposiciones y preguntas abiertas.
9. Traspaso a tree-tests: las tareas problemáticas, las colocaciones dudosas y las respuestas propuestas.

Redúcelo. Un replanteamiento de menú necesita el diagnóstico, el nuevo árbol, un hogar para cada tarea problemática y el traspaso a tree-tests; no necesita un modelo de contenido ni una política de URL. Un documento más largo no es más exhaustivo. Una solicitud de colocar cada elemento significa que cada elemento tiene un hogar.

Verifícalo

No hay script. Estas comprobaciones son breves y requieren leer el spec, así que hazlas manualmente y corrige lo que falle:

• Cuenta los elementos primarios (7 como máximo, de 3 a 6 preferido) y las pestañas (5 como máximo).
• Cada elemento actual aparece en la tabla de antes y después con un nuevo lugar o un retiro declarado.
• Cada destino existe en el árbol o las rutas, cada padre de miga de pan es una página real, y la barra lateral, las migas de pan y la URL cuentan la misma historia.
• Cada tarea problemática tiene exactamente un hogar y está en el traspaso de tree-tests con su respuesta propuesta.
• Ninguna afirmación de uso que no te hayan dado. Las palabras de frecuencia se marcan como suposiciones.

Lo que Claude no puede hacer aquí

• Conocer la estrategia o política de la organización a menos que se le diga. Qué elemento gana un espacio es en parte una decisión empresarial, así que presenta un borrador y di de quién es la decisión.
• Inventar tráfico, uso o investigación, ni ejecutar una prueba de árbol con personas reales.
• Decir lo que hace el componente de menú de un framework. Di lo que esperarías y dile al usuario que lo confirme, porque lo que soporta una plataforma varía.

Dónde se entrega esto

• information-architecture: la puerta de entrada, cuando el trabajo abarca varias de estas habilidades.
• sitemaps: cuando el árbol subyacente necesita cambios.
• labeling: para redactar los elementos. taxonomies: cuando los filtros o facetas son la necesidad real.
• url-structure y redirect-maps: cuando los destinos cambian de dirección. content-models: cuando una regla contextual necesita campos detrás.
• tree-tests: para realizar el estudio. findability: cuando el problema es la búsqueda o el rastro. content-inventory y card-sort: cuando nadie sabe qué hay o cómo la gente lo agrupa.