Working Design skill
Design mobile navigation
Design mobile navigation around priority, context, touch, and constrained space.
Procedure
- Identify mobile contexts, top tasks, content depth, account state, and access rules.
- Audit current destinations, labels, task frequency, and failure paths.
- Choose primary, secondary, contextual, utility, and account navigation roles.
- Select patterns based on destination count, hierarchy, persistence, and user orientation.
- Define labels, icons, selected state, badges, disclosure, back behavior, and deep-link entry.
- Preserve critical actions without crowding or accidental activation.
- Specify touch target, safe area, scroll, keyboard, screen reader, and landscape behavior.
- Test localization, large text, zoom, changed permissions, offline state, and interrupted flows.
- Run task-based prototype tests on representative devices.
- Document analytics carefully and review task success rather than menu opens alone.
Guardrails
- Do not use unlabeled icons for unfamiliar destinations.
- Never hide account, privacy, or emergency controls behind unclear gestures.
- Avoid persistent navigation that obscures content at zoom.
--- name: design-mobile-navigation category: design description: Design mobile navigation around priority, context, touch, and constrained space. Use when a product or site must preserve findability and task progress without copying desktop navigation into a hidden drawer. --- # design-mobile-navigation ## Procedure 1. Identify mobile contexts, top tasks, content depth, account state, and access rules. 2. Audit current destinations, labels, task frequency, and failure paths. 3. Choose primary, secondary, contextual, utility, and account navigation roles. 4. Select patterns based on destination count, hierarchy, persistence, and user orientation. 5. Define labels, icons, selected state, badges, disclosure, back behavior, and deep-link entry. 6. Preserve critical actions without crowding or accidental activation. 7. Specify touch target, safe area, scroll, keyboard, screen reader, and landscape behavior. 8. Test localization, large text, zoom, changed permissions, offline state, and interrupted flows. 9. Run task-based prototype tests on representative devices. 10. Document analytics carefully and review task success rather than menu opens alone. ## Guardrails - Do not use unlabeled icons for unfamiliar destinations. - Never hide account, privacy, or emergency controls behind unclear gestures. - Avoid persistent navigation that obscures content at zoom. ## Done - A mobile navigation specification records roles, labels, states, context, and access - Touch, keyboard, screen-reader, large-text, and task tests pass - Deep-link and interrupted-flow recovery are verified