Search on focus: navigate away or stay in place?
You tap the search field — and right then, the app decides to do one of two things:
Navigate away: Instagram, YouTube, the App Store, Google Maps. The entire screen changes. You’re somewhere else now.
Stay in place: Safari, many e-commerce sites, dictionary apps, this playbook page. Results appear right where you are, and the original context is still there.
This isn’t about right or wrong; the real question is when to use each one.
Why do some apps navigate to a new page?
1. Search is the primary action
For YouTube or Instagram, search isn’t a secondary feature — it’s one of the main reasons users open the app. When search matters that much, it deserves its own screen with the full space.
2. You need to show more than just results
A dedicated search screen lets you show:
- Recent searches — users often return to things they’ve searched for
- Trending / suggestions — hints before they type
- Search filters — filter by type, time, region
- Voice / image search — expanding the input modality
None of this fits into a small overlay.
3. The mobile keyboard is a real problem
On mobile, the keyboard takes up ~40% of the screen. If search is an inline overlay, the remaining content is squeezed into a tiny area. Navigating to a dedicated screen solves this naturally — all the space above the keyboard is designed for the search experience.
4. The back gesture = exit search
A subtle advantage: when search is its own screen, the user can swipe back to exit. This is a clearer mental model than tapping an X or blurring to close an overlay.
Tap the search field to open the search screen
Why do some apps/sites stay in place?
1. Search is a supporting action
In many cases, search isn’t why the user came to the page — it’s just a tool to quickly find something within a small dataset. A dictionary app, a glossary page, a settings panel — here search is a shortcut, not a destination.
Sending the user to a new page in these cases adds an unnecessary step.
2. Context needs to be preserved
Sometimes the user needs to see the original context while searching. For example: reading an article and wanting to look up a specific term without losing their reading position. Inline search preserves that context.
3. Small dataset, few results
If search only filters across a few dozen items, there’s no need for a separate page. Results can appear right below without causing cognitive overload.
4. Desktop has enough space
On desktop, the keyboard doesn’t take over the screen. Sidebars, dropdowns, inline results — all are feasible without navigating away. This pattern is far more common on the web than in mobile apps.
Type into search — results appear right in place, context unchanged
Usage recommendations
| Situation | Recommended pattern |
|---|---|
| Search is a core feature of the app | Navigate to search screen |
| You need recent searches, suggestions, filters | Navigate to search screen |
| Mobile, large dataset (>100 items) | Navigate to search screen |
| Search is a secondary action | Inline / stay in place |
| Small dataset (<100 items) | Inline / stay in place |
| Desktop web, enough space available | Inline / stay in place |
| The user needs to keep context while searching | Inline / stay in place |
| Voice or image search | Navigate to search screen |
A middle-ground pattern
There’s a third approach that many apps use skillfully: expand in place.
The search field expands, an overlay appears over the current content (rather than replacing it), results show up, and when dismissed it collapses again. The user isn’t taken anywhere — but search still has enough space.
Classic examples: Spotlight on macOS, the command palette in VS Code (Cmd+K), Linear, Raycast.
This pattern works well when:
- The app runs on desktop or tablet
- Search needs to be fast and lightweight (a power-user feature)
- You don’t need to show much supporting context (recent, trending)
There’s no absolute right answer. What matters is understanding what role search plays in the user’s flow — and from there, deciding whether it deserves its own screen or just a small space right where the user already is.