A practical information-architecture framework for mobile sites that must connect products, services, editorial content, account tools and support.
Information scent is the promise behind a navigation label
A large mobile site has a compression problem. Products, services, editorial content, account tools and support cannot all remain visible at once, so the interface must hide detail without hiding meaning. Information scent is the set of cues people use to predict what they will find after following a link. NN/g emphasizes clear labels and contextual cues because users choose paths based on expected value, not on the site’s internal organizational chart.
On mobile, scent must survive a smaller viewport and more frequent disclosure. A label such as “Solutions” may be acceptable if the brand has a well-understood product architecture, but it can be too vague when it mixes consulting, software and articles. “Web services,” “Shop skincare,” or “Journal” carries stronger category information. The test is whether a first-time visitor can predict the destination before opening the branch.
Start with user tasks, not departments. List the principal reasons people arrive, the content types they need and the vocabulary they use. Then design top-level categories that divide those tasks with minimal ambiguity. A large site does not need every destination in the first layer; it needs the first layer to make the next choice easier. The resulting categories should be understandable even when the visitor arrives deep in the site and has never seen the homepage.
Keep the first level short, but not mysterious
Mobile navigation often fails by overcompressing. A menu of three abstract words looks elegant but forces users to open branches to discover basic categories. The opposite failure is a wall of twenty links with no hierarchy. Use a small number of meaningful top-level choices, then expose well-labeled groups beneath them. The correct count is driven by the information architecture, not a universal menu formula.
Labels should be concrete enough to discriminate between siblings. If “Services,” “Solutions” and “Expertise” all lead to overlapping offerings, the user has to guess which internal distinction the organization intended. Merge or rename the categories until each carries a distinct promise. When a label must use brand-specific language, add a short descriptor or representative child links so unfamiliar users can infer the category.
Keep global utilities separate from primary navigation. Search, account, cart, language, support and location controls often serve different purposes from content categories. Visually grouping them prevents the menu from feeling like one undifferentiated list. It also creates predictable locations for recurring actions, which becomes important as users move between product, service and editorial areas.
Use disclosure patterns that preserve context
Nested mobile navigation is usually a disclosure problem: reveal the next level without losing the parent. W3C’s ARIA Authoring Practices describes the disclosure pattern as a control that expands and collapses hidden content, with Enter or Space operation and an aria-expanded state. The visual design should match that semantic behavior. A chevron that appears expandable should not unexpectedly navigate away before the user can inspect children.
Choose deliberately whether a parent label is also a destination. If “Services” has a useful overview page, one approach is to make the text navigate while a separate, adequately sized disclosure control expands children. Another is to let the whole row expand and include “All services” as the first child. Mixing these patterns from one branch to another creates hesitation because the same visual cue produces different results.
Preserve the open branch while the user explores. When a submenu replaces the whole screen, show a clear parent title and back control rather than forcing people to remember where they came from. Breadcrumb-like context can be lightweight on mobile, but the current branch should remain explicit. Every deeper step spends orientation; the interface needs to repay that cost with clearer choices. Keep the branch title visible during deeper navigation so a back action returns to a named context rather than an anonymous previous screen.
Control depth with representative choices and hubs
Deep hierarchies are not inherently bad if each step carries strong scent. A four-level route through “Shop → Men → Shoes → Running” can be easier than a flat list of hundreds of products. Problems appear when intermediate levels contain vague labels, duplicated categories or only one meaningful child. Audit every level for whether it narrows the task and whether users can predict the next layer.
Use hub pages when a category deserves explanation, comparison or cross-navigation. A services hub can introduce major service families, show proof and surface popular tasks; a journal hub can expose topics and recent coverage; a shop hub can combine categories with search and filters. Hubs reduce the pressure on the menu to contain every leaf destination and give users a recoverable place to reorient.
Representative links can improve scent inside a broad category. Under “Services,” showing “Web design,” “Brand identity” and “Marketing” may explain the category faster than a subtitle. Under “Journal,” showing “Business,” “Design” and “Technology” does the same. Keep the examples current and avoid implying that the visible children are the complete set if the branch contains more.
Make search a parallel navigation system
On a large site, search is not an emergency exit. It is a first-class route for users who know a product name, article, order identifier or service term. Keep it visible or immediately accessible from every major mobile state. The search entry should not require opening several menu layers, especially when the site contains large catalogs or editorial archives.
Search results need content-type cues. A query may return a product, a service, an article and a help document with similar titles. Label the type, show enough context to distinguish the result, and provide useful filters when result volume justifies them. A unified search without type information can increase ambiguity even though technically it searches more of the site.
Use query logs to improve navigation. Frequent searches for a category that is buried in the menu can reveal weak scent or missing prominence. Zero-result queries can reveal vocabulary the information architecture does not recognize. Search data does not automatically tell you where to move a link, but it provides evidence about language and unmet retrieval needs that should feed back into labels and category design.
Expose recency where time changes the value
Editorial and operational content has a dimension product taxonomies often lack: time. A journal article may be evergreen or breaking; a service policy may have an effective date; an event may be upcoming or past. Navigation and search should expose recency when it changes whether the destination is useful. “Latest,” publication dates and status labels can carry stronger scent than a generic topic link.
Do not let “Latest” replace stable taxonomy. Users often need a known topic regardless of publication date, so time should complement categories rather than flatten them. A large site can provide topic navigation plus recent content within the selected topic. This gives repeat visitors a quick path to updates while preserving predictable routes for people arriving with a specific subject in mind.
Archive behavior needs an escape route. When someone lands on an old article from search, provide current related content, the topic hub and any updated policy or product reference. The navigation system extends beyond the menu icon: in-content relationships and current-status cues help users recover from outdated entry points without manually restarting from the homepage. If an old page has a replacement, surface that relationship explicitly instead of depending on the visitor to infer freshness from publication dates alone.
Design escape routes at every depth
Every navigation state should answer three questions: where am I, what can I choose here, and how do I get out? A clear close action returns to content; a back action returns one hierarchy level; the current branch label provides orientation; and Home or a major hub offers a reset when the user has taken the wrong path. Do not rely on the browser Back button as the only recovery mechanism inside a complex overlay.
Preserve the underlying page state where possible. If a user opens the menu halfway through a long article, explores a branch and closes it, returning them to the top of the article creates unnecessary cost. The same applies to product filters, search terms and scroll positions. Navigation should feel like movement through the site, not repeated destruction of the user’s current context.
Cross-domain or app transitions need stronger cues. If account management, checkout or help opens a separate system, tell the user through consistent branding and clear destination labeling. Unexpected environment changes damage information scent because the promised path no longer resembles the result. Preserve a route back to the main experience and avoid dead-end microsites that strand mobile users.
Test the hierarchy before polishing the animation
Card sorting and tree testing can evaluate information architecture without the distraction of visual styling. NN/g describes card sorting as a method for understanding how users group concepts and tree testing as a way to evaluate whether labels and hierarchy lead people to expected destinations. For a large site, these methods can expose weak category boundaries before engineering invests in complex menu behavior.
Then test the implemented navigation on representative mobile devices with tasks that cross content types: find a product, compare a service, locate a recent article, reach support, return to the previous context and search for a known item. Include keyboard and assistive-technology checks for disclosure controls, focus order and state announcements. A visually elegant menu is not complete if its hierarchy is understandable only to pointer users. Test with first-time participants where possible, because internal teams can navigate successfully by remembering the organization rather than reading the labels.
Governance keeps scent from decaying. New teams will request top-level links, campaigns will invent terminology, and outdated sections will accumulate. Require an owner for the navigation model, evidence for major additions, and periodic review of search logs, task success and stale branches. The best mobile navigation for a large website is not the shallowest tree; it is the one whose labels, disclosures, search and escape routes keep every next step predictable.
Practical checklist
- List the main user tasks and content types before naming categories.
- Test sibling labels for overlap and internal jargon.
- Choose one consistent parent-link versus disclosure behavior.
- Add content-type cues and filters to cross-site search where needed.
- Test old articles and deep links for current escape routes.
- Run tree tests and representative mobile tasks before final visual polish.
Questions and answers
How deep should mobile navigation be on a large site?
There is no universal maximum depth. A deeper hierarchy can work well when every level clearly narrows the user’s task and the labels have strong information scent. A shallow menu can be worse if it presents an overwhelming flat list or vague categories. Audit each intermediate level: it should contain meaningful choices, preserve the parent context and provide a clear way back. Remove levels that add no decision value rather than chasing a fixed number.
Should tapping a parent navigation item open a page or expand the submenu?
Either model can work, but the behavior must be consistent and visually clear. If the parent has a valuable overview page, the label can navigate while a separate disclosure control expands the submenu, provided both targets are accessible and large enough. Alternatively, the row can expand and an “All” link can appear among the children. Avoid identical rows that sometimes navigate and sometimes expand, because users cannot predict the result of the same gesture.
Where should search appear on a large mobile website?
Search should be treated as a parallel navigation system and remain visible or immediately accessible from major page and menu states. Users who know a product name, article title or support term should not have to inspect a hierarchy first. Results should identify content types and provide enough context to distinguish similar items. Search logs can also reveal weak menu labels, buried destinations and vocabulary gaps that deserve changes to the information architecture.