Mở đầu — vì sao bài này quan trọng
Hãy thử nhớ lại lần cuối bạn vào Tiki để tìm một món đồ. Bạn không lướt qua từng danh mục, không bấm vào menu để đào sâu — bạn gõ thẳng vào ô search. Theo nhiều nghiên cứu UX, có khoảng 30–40% người dùng trên các website thương mại điện tử dùng ô tìm kiếm ngay khi vào trang, và quan trọng hơn: nhóm người này có tỷ lệ chuyển đổi (conversion) cao gấp 2–3 lần so với người chỉ lướt menu. Lý do rất đơn giản — họ biết mình muốn gì, họ đang chủ động, và họ đang chờ bạn giúp họ tìm ra nó nhanh nhất có thể.
Vấn đề là: search là một trong những thành phần UI bị thiết kế cẩu thả nhất. Nhiều bạn designer mới chỉ kéo một cái ô input vào header, gắn icon kính lúp, rồi coi như xong. Nhưng search không chỉ là một ô input — nó là một hệ thống hành vi gồm: vị trí đặt ô, cách gợi ý lúc gõ, cách hiển thị kết quả, cách xử lý khi không tìm thấy gì, và cách lọc/sắp xếp kết quả. Một search được thiết kế tốt khiến người dùng cảm thấy "trang web này hiểu mình". Một search tệ khiến họ bỏ đi sau 10 giây.
Trong bài này, chúng ta sẽ đi sâu vào toàn bộ vòng đời của một trải nghiệm tìm kiếm trên web: từ chỗ đặt ô search, đến autocomplete, đến trang kết quả, đến trạng thái rỗng. Đây là kiến thức bạn sẽ dùng gần như trong mọi dự án — dù là e-commerce, blog, dashboard nội bộ, hay app SaaS.
Khái niệm cốt lõi
Vị trí đặt ô search
Vị trí của ô search nói lên mức độ quan trọng của tìm kiếm đối với sản phẩm đó. Có ba kiểu phổ biến:
- Top center / right (trên cùng, giữa hoặc phải): Dành cho các site mà search là hành động chủ đạo — thương mại điện tử (Tiki, Shopee, Lazada) và site nhiều nội dung (VnExpress, báo điện tử). Ô search thường to, rộng, luôn hiện rõ, đôi khi chiếm gần hết chiều ngang header. Triết lý: "Tìm kiếm là việc bạn sẽ làm nhiều nhất, nên chúng tôi đặt nó ngay trước mắt bạn."
- Top-left, ngay sau logo: Dành cho các site tối giản hoặc công cụ (như một số dashboard, công cụ dev). Search ở đây là tiện ích phụ trợ, không phải hành động chính.
- Icon thu gọn (collapsed): Trên mobile, hoặc trên các site mà không gian quý giá, search thường ẩn sau một icon kính lúp. Bấm vào icon thì ô input mới bung ra. Đánh đổi: tiết kiệm chỗ nhưng tốn thêm một cú chạm (extra tap), nên chỉ dùng khi search không phải hành động cốt lõi.
Affordance — làm cho ô search trông giống ô search
"Affordance" là khả năng một thành phần tự gợi ý cách dùng nó. Một ô search tốt cần:
- Có icon kính lúp (universal symbol cho tìm kiếm).
- Có placeholder text mô tả rõ tìm gì, ví dụ "Tìm sản phẩm, thương hiệu..." thay vì chỉ "Tìm kiếm". Placeholder cụ thể giúp người dùng hiểu phạm vi tìm kiếm.
- Có viền hoặc nền đủ tương phản để trông như một ô có thể click, không bị chìm vào header.
- Đủ rộng — tối thiểu khoảng 27 ký tự hiển thị được để người dùng thấy lại truy vấn họ vừa gõ. Ô quá ngắn khiến người dùng không kiểm tra được mình gõ đúng chưa.
Autocomplete & Suggestions (gợi ý khi gõ)
Đây là phần "ma thuật" của search hiện đại. Khi người dùng vừa gõ vài ký tự, một dropdown gợi ý hiện ra. Có vài loại gợi ý:
- Query suggestions: gợi ý cụm từ tìm kiếm hoàn chỉnh (như Google gợi ý "iphone 15 pro max" khi bạn mới gõ "iphone").
- Product/result suggestions: hiện thẳng kết quả kèm hình ảnh, giá — phổ biến trên e-commerce. Người dùng có thể bấm thẳng vào sản phẩm mà không cần qua trang kết quả.
- Recent searches & popular searches: gợi ý lịch sử tìm kiếm của chính người dùng và xu hướng phổ biến, hiện ngay khi họ click vào ô (trước cả khi gõ).
Trang kết quả tìm kiếm (Search Results Page)
Khi người dùng nhấn Enter, họ tới trang kết quả. Một trang kết quả tốt cần:
- Lặp lại truy vấn: hiện rõ "Kết quả cho 'áo khoác nữ'" để người dùng biết mình đang xem gì.
- Đếm số kết quả: "Tìm thấy 248 sản phẩm" tạo cảm giác tin cậy và giúp người dùng đánh giá có cần lọc thêm không.
- Filter & Sort: lọc theo giá, danh mục, đánh giá; sắp xếp theo liên quan, giá tăng/giảm, mới nhất. Đây là phần giúp người dùng thu hẹp từ 248 xuống còn vài kết quả phù hợp.
- Highlight từ khóa: in đậm phần khớp với truy vấn trong tiêu đề kết quả, giúp mắt quét nhanh.
Empty state — khi không tìm thấy gì
Đây là khoảnh khắc dễ làm người dùng bỏ đi nhất. Một thông báo cụt lủn "Không tìm thấy kết quả" là thất bại về UX. Một empty state tốt phải: thừa nhận tình huống, gợi ý nguyên nhân (sai chính tả?), và đề xuất hành động tiếp theo (gợi ý từ khóa gần đúng, sản phẩm phổ biến, hoặc nút xóa bộ lọc). Chúng ta sẽ phân tích sâu phần này ở ví dụ thực tế phía dưới.
Tình huống thực tế
Ví dụ 1: Tiki và sức mạnh của autocomplete có hình ảnh
Tiki đặt ô search ở vị trí top-center, chiếm phần lớn chiều ngang header — một quyết định nói lên rằng tìm kiếm là xương sống của trải nghiệm. Khi bạn click vào ô search trên Tiki mà chưa gõ gì, nó đã hiện ngay các từ khóa phổ biến và lịch sử tìm kiếm của bạn. Khi bạn gõ "tai nghe", dropdown bung ra với hai khối: phía trên là các query suggestion ("tai nghe bluetooth", "tai nghe không dây"), phía dưới là vài sản phẩm gợi ý kèm thumbnail và giá.
Bài học rút ra: Tiki giảm "thời gian đến kết quả" (time-to-result) bằng cách cho phép người dùng nhảy thẳng vào sản phẩm từ dropdown, bỏ qua hẳn trang kết quả. Với một người đã biết rõ họ muốn cái tai nghe đó, đây là chênh lệch giữa 2 cú click và 5 cú click. Giả sử mỗi ngày có 100.000 lượt tìm kiếm, rút ngắn 3 bước cho dù chỉ 20% trong số đó cũng là hàng chục nghìn trải nghiệm mượt mà hơn mỗi ngày — và conversion tăng theo.
Ví dụ 2: Một sàn nội thất giả định và bài học về empty state
Hãy hình dung một startup nội thất tên "NhàXinh.vn" với khoảng 3.000 sản phẩm. Đội phân tích phát hiện một con số đáng lo: 18% lượt tìm kiếm trả về 0 kết quả, và trong số những người gặp màn hình "Không tìm thấy", có tới 65% rời trang ngay lập tức (bounce). Khi đào sâu log tìm kiếm, họ thấy người dùng gõ "sofa giường" (trong khi hệ thống chỉ gắn tag "sofa bed"), gõ sai chính tả "ghế sô pha", hoặc tìm "bàn ăn 6 ghế" mà không sản phẩm nào có đúng cụm này.
Đội thiết kế đã làm lại empty state: thay vì màn hình trắng với dòng chữ lạnh lùng, họ thêm (1) gợi ý "Có phải bạn muốn tìm: sofa bed?" dựa trên thuật toán khớp gần đúng (fuzzy matching), (2) một hàng "Sản phẩm bán chạy" để người dùng có cái xem thay vì bỏ đi, và (3) nút "Xóa bộ lọc" nếu trống do filter quá hẹp. Sau ba tuần, tỷ lệ bounce trên màn hình kết quả rỗng giảm từ 65% xuống còn khoảng 41%.
Bài học rút ra: Empty state không phải ngõ cụt — nó là cơ hội cứu vãn một phiên tìm kiếm thất bại. Mỗi lượt search ra 0 kết quả là một người dùng đang có nhu cầu mua thật. Bỏ mặc họ là bỏ tiền.
Ví dụ 3: VnExpress và search cho site nội dung
VnExpress đặt search như một tiện ích gọn (icon kính lúp ở góc), vì với một tờ báo, hành vi chính của người đọc là lướt theo chuyên mục và đọc tin mới, không phải tìm kiếm chủ động. Khi cần tìm, người dùng thường tìm theo chủ đề, tên người, sự kiện — và họ kỳ vọng kết quả sắp xếp theo thời gian (mới nhất) chứ không chỉ theo độ liên quan.
Bài học rút ra: phạm vi và cách sắp xếp kết quả phải khớp với loại nội dung. E-commerce ưu tiên độ liên quan và giá; site tin tức ưu tiên thời gian; dashboard nội bộ có thể ưu tiên kết quả gần đây bạn từng mở. Đừng bê nguyên một mô hình search từ Tiki sang một trang blog — bối cảnh quyết định thiết kế.
Hướng dẫn từng bước
Khi bạn được giao thiết kế search cho một sản phẩm, hãy đi theo trình tự sau:
- Xác định vai trò của search. Hỏi: search là hành động cốt lõi hay tiện ích phụ? Tần suất sử dụng dự kiến? Câu trả lời quyết định vị trí và độ nổi bật của ô.
- Chọn vị trí và kích thước ô. E-commerce/nội dung nhiều → top-center, to, luôn hiện. Công cụ/landing tối giản → top-left hoặc icon thu gọn. Trên mobile, cân nhắc icon bung ra để tiết kiệm không gian.
- Viết placeholder cụ thể. "Tìm sản phẩm, thương hiệu, danh mục..." tốt hơn "Tìm kiếm". Placeholder định nghĩa phạm vi và giảm bối rối.
- Thiết kế dropdown gợi ý. Quyết định hiện gì khi chưa gõ (lịch sử + phổ biến) và khi đang gõ (query suggestion + result suggestion). Thêm debounce 200–300ms. Đảm bảo dropdown điều hướng được bằng bàn phím (mũi tên lên/xuống, Enter).
- Thiết kế trang kết quả. Lặp lại truy vấn, đếm số kết quả, highlight từ khóa. Bố trí filter (lọc) và sort (sắp xếp) ở vị trí dễ thấy — sidebar trái trên desktop, drawer/bottom-sheet trên mobile.
- Thiết kế ba trạng thái bắt buộc. (a) Loading: skeleton hoặc spinner khi đang tải kết quả. (b) Có kết quả: layout sạch, dễ quét. (c) Rỗng: gợi ý sửa lỗi, đề xuất từ khóa gần đúng, hiển thị nội dung dự phòng.
- Kiểm thử với truy vấn thật. Lấy log tìm kiếm thật (hoặc tự nghĩ các truy vấn người Việt hay gõ, kể cả gõ sai dấu, viết tắt) và chạy thử. Search chỉ tốt khi nó chịu được sự lộn xộn của ngôn ngữ thật.
Lỗi thường gặp & mẹo
- Lỗi: Ô search quá hẹp. Người dùng gõ một câu dài rồi không đọc lại được mình gõ gì. Mẹo: cho ô đủ rộng để hiện ít nhất ~27 ký tự; trên mobile, để ô chiếm gần hết chiều ngang khi active.
- Lỗi: Bắt người dùng gõ chính xác tuyệt đối. Người Việt gõ "ao khoac" (không dấu), "iphone" (viết thường), "tivi" thay vì "TV". Nếu search không khoan dung với dấu, viết hoa, và lỗi chính tả nhỏ, nó sẽ thất bại liên tục. Mẹo: hỗ trợ tìm không dấu và fuzzy matching — đây là yêu cầu sống còn cho thị trường Việt Nam.
- Lỗi: Quên trạng thái loading. Người dùng nhấn Enter rồi nhìn màn hình đứng im, tưởng hỏng. Mẹo: luôn có skeleton hoặc spinner ngay lập tức.
- Lỗi: Empty state cụt lủn. "Không có kết quả" và hết. Mẹo: luôn cho người dùng một lối ra — gợi ý từ khóa, sản phẩm phổ biến, hoặc nút reset filter.
- Lỗi: Placeholder biến mất khi cần nhất. Người dùng gõ xong, đi pha cà phê, quay lại quên đang tìm gì. Mẹo: trên trang kết quả, luôn giữ truy vấn hiển thị trong ô search, đừng xóa trắng.
- Mẹo về bàn phím: đảm bảo người dùng dùng được Enter để tìm, mũi tên để chọn gợi ý, và Escape để đóng dropdown. Nhóm người dùng quyền lực (power user) và người dùng bàn phím sẽ biết ơn bạn.
- Mẹo về autofocus: trên trang chuyên về tìm kiếm (như trang search dành riêng), tự động focus vào ô search khi tải trang. Nhưng đừng làm điều này trên trang chủ thông thường vì nó có thể gây khó chịu khi người dùng muốn cuộn trang.
Bài tập thực hành
- Phân tích 3 ô search. Mở Tiki, VnExpress, và một app/site bạn hay dùng. Với mỗi cái, ghi lại: vị trí ô, nội dung placeholder, dropdown hiện gì khi chưa gõ và khi đang gõ. So sánh ba cách tiếp cận và lý giải vì sao chúng khác nhau dựa trên loại sản phẩm.
- Thiết kế trạng thái rỗng. Vẽ (trên giấy hoặc Figma) màn hình "không tìm thấy kết quả" cho một shop thời trang giả định. Bắt buộc có: thông báo thân thiện, gợi ý sửa từ khóa, và ít nhất một khối nội dung dự phòng. Viết luôn câu chữ tiếng Việt cụ thể, đừng để placeholder.
- Thử thách không dấu. Liệt kê 10 truy vấn mà người Việt thực tế hay gõ cho một sàn điện máy (gồm cả gõ không dấu, viết tắt, sai chính tả). Với mỗi truy vấn, ghi search lý tưởng nên trả về gì. Đây là bài tập rèn tư duy "thiết kế cho ngôn ngữ thật".
- Wireframe trang kết quả. Phác một trang kết quả tìm kiếm cho 248 sản phẩm: header lặp lại truy vấn, bộ đếm, filter ở sidebar trái, sort ở góc phải, và grid kết quả. Chỉ rõ trên mobile filter sẽ chuyển thành dạng gì.
Tóm tắt
Search không phải là một ô input — nó là một hệ thống trải nghiệm trải dài từ lúc người dùng click vào ô đến lúc họ tìm thấy (hoặc không tìm thấy) thứ cần. Những điểm cốt lõi cần nhớ:
- Vị trí phản ánh tầm quan trọng: search càng được dùng nhiều thì càng phải nổi bật. E-commerce và site nội dung → to, ở giữa, luôn hiện; công cụ tối giản → gọn hoặc thu vào icon.
- Autocomplete giảm công sức: gợi ý query và gợi ý kết quả có hình ảnh giúp rút ngắn đường đến đích; nhớ debounce 200–300ms.
- Trang kết quả phải minh bạch: lặp lại truy vấn, đếm số kết quả, highlight từ khóa, và cho filter/sort dễ thấy.
- Empty state là cơ hội, không phải ngõ cụt: luôn gợi ý sửa lỗi và cho nội dung dự phòng.
- Thiết kế cho ngôn ngữ thật của người Việt: hỗ trợ tìm không dấu, khoan dung với viết hoa và lỗi chính tả nhỏ — đây là yếu tố quyết định ở thị trường Việt Nam.