Chạm vào ô search — và ngay lúc đó, app quyết định làm một trong hai thứ:

Navigate away: Instagram, YouTube, App Store, Google Maps. Toàn bộ màn hình thay đổi. Bạn đang ở một nơi khác rồi.

Stay in place: Safari, nhiều e-commerce web, dictionary app, trang playbook này. Kết quả xuất hiện ngay tại chỗ, context ban đầu vẫn còn đó.

Mình không đề cập đúng sai mà câu hỏi đúng ở đây là khi nào nên dùng cái nào.


Tại sao một số app navigate sang trang mới?

1. Search là hành động chính

Với YouTube hay Instagram, search không phải là tính năng phụ — đó là một trong những lý do chính người dùng mở app. Khi search quan trọng đến vậy, nó xứng đáng có một màn hình riêng với toàn bộ không gian.

2. Cần hiển thị nhiều hơn chỉ là kết quả

Màn hình search riêng cho phép bạn hiển thị:

  • Recent searches — người dùng hay quay lại thứ họ đã tìm
  • Trending / suggestions — gợi ý trước khi gõ
  • Search filters — lọc theo loại, thời gian, khu vực
  • Voice / image search — mở rộng input modality

Tất cả những thứ này không thể nhét vào một overlay nhỏ.

3. Mobile keyboard là vấn đề thật

Trên mobile, bàn phím chiếm ~40% màn hình. Nếu search là overlay inline, phần content còn lại bị ép vào một vùng rất nhỏ. Navigate sang màn hình riêng giải quyết vấn đề này một cách tự nhiên — toàn bộ không gian phía trên bàn phím được thiết kế cho search experience.

Một lợi thế tinh tế: khi search là một screen riêng, người dùng có thể vuốt back để thoát. Đây là mental model rõ ràng hơn là nhấn X hay blur để đóng overlay.

#prototype
9:41
Discover
Search...
Interaction Design
Article · 4 min read
Micro-animation
Article · 4 min read
Mobile UX
Article · 4 min read
Search Patterns
Article · 4 min read
Fintech UI
Article · 4 min read
Onboarding Flow
Article · 4 min read

Chạm vào search để mở màn hình tìm kiếm


Tại sao một số app/web giữ nguyên tại chỗ?

1. Search là hành động phụ trợ

Trong nhiều trường hợp, search không phải lý do người dùng vào trang — nó chỉ là công cụ để tìm nhanh trong một tập dữ liệu nhỏ. Một dictionary app, một trang glossary, một bảng settings — search ở đây là shortcut, không phải destination.

Đưa người dùng sang trang mới trong những trường hợp này tạo ra một bước đi không cần thiết.

2. Context cần được giữ lại

Đôi khi người dùng cần thấy context ban đầu trong khi search. Ví dụ: đang đọc một bài viết, muốn tìm một thuật ngữ cụ thể mà không mất đi vị trí đang đọc. Inline search giữ nguyên context đó.

3. Tập dữ liệu nhỏ, kết quả ít

Nếu search chỉ lọc trong vài chục items, không cần một trang riêng. Kết quả có thể xuất hiện ngay bên dưới mà không gây cognitive overload.

4. Desktop có đủ không gian

Trên desktop, bàn phím không chiếm màn hình. Sidebar, dropdown, inline results — tất cả đều khả thi mà không cần navigate away. Pattern này phổ biến hơn nhiều trên web so với mobile app.

#prototype
discover.example.com/articles
Discover
Results
Interaction Design
Micro-animation
Mobile UX
Search Patterns
Fintech UI
Onboarding Flow
Error States
Empty States
No results found
Article · 3 min read
Interaction Design
Article · 4 min read
Micro-animation
Article · 5 min read
Mobile UX
Article · 6 min read
Search Patterns
Article · 7 min read
Fintech UI
Article · 3 min read
Onboarding Flow
Article · 4 min read
Error States
Article · 5 min read
Empty States

Gõ vào search — kết quả xuất hiện ngay tại chỗ, context không đổi


Gợi ý sử dụng

Tình huốngPattern khuyến nghị
Search là core feature của appNavigate to search screen
Cần recent searches, suggestions, filtersNavigate to search screen
Mobile, tập dữ liệu lớn (>100 items)Navigate to search screen
Search là secondary actionInline / stay in place
Tập dữ liệu nhỏ (<100 items)Inline / stay in place
Desktop web, có đủ không gianInline / stay in place
Người dùng cần giữ context khi searchInline / stay in place
Voice hoặc image searchNavigate to search screen

Một pattern trung gian

Có một approach thứ ba mà nhiều app dùng khéo léo: expand in place.

Ô search mở rộng, overlay xuất hiện trên content hiện tại (không phải thay thế nó), results hiện ra, và khi dismiss thì collapse lại. Người dùng không bị đưa đi đâu cả — nhưng search vẫn có đủ không gian.

Ví dụ điển hình: Spotlight trên macOS, command palette trong VS Code (Cmd+K), Linear, Raycast.

Pattern này hoạt động tốt khi:

  • App chạy trên desktop hoặc tablet
  • Search cần nhanh và nhẹ (power user feature)
  • Không cần hiển thị nhiều context phụ (recent, trending)

Không có câu trả lời đúng tuyệt đối. Điều quan trọng là hiểu rõ search đóng vai trò gì trong flow của người dùng — từ đó mới quyết định được nó xứng đáng có một màn hình riêng, hay chỉ cần một khoảng không gian nhỏ ngay tại chỗ.