facebook pixel

6 Mẹo tối ưu thiết kế thanh tìm kiếm trang web

9 phút đọc
6 Mẹo tối ưu thiết kế thanh tìm kiếm trang web

Thanh tìm kiếm trang web cơ bản bao gồm một ô nhập thông tin truy vấn và một nút để gửi. Bạn có thể cho rằng không cần chú ý nhiều tới chức năng này, tuy nhiên, trên một trang web lớn với nhiều nội dung, thanh tìm kiếm đóng vai trò như một trợ lý đắc lực đem lại trải nghiệm tốt hơn cho người dùng.

Khi tiếp xúc nhiều với người dùng, khách hàng và trong quá trình thực hiện các dự án, JAMstack Vietnam nhận ra các thanh tìm kiếm hoạt động không hiệu quả bởi hai lý do:

  • Kỹ năng tìm kiếm của người dùng kém hiệu quả
  • Thiết kế giao diện chưa tối ưu

Chúng ta không thể cải thiện lý do đầu tiên. Thay vào đó, các cá nhân, đơn vị thiết kế website chuyên nghiệp cần tối ưu giao diện của chức năng tìm kiếm để tạo sự thuận lợi cho người dùng, hỗ trợ họ thực hiện các thao tác liên quan dễ dàng hơn.

1. Tại sao thanh tìm kiếm trang web lại quan trọng?

Vì sao thanh tìm kiếm lại quan trọng đối với một website
Thanh tìm kiếm trang web là một phần không thể thiếu cho bất kỳ website nào.

1.1. Thuận tiện

Trong một trang web nặng về nội dung, người dùng có xu hướng sử dụng hộp tìm kiếm để lấy thông tin cụ thể nhiều hơn việc sử dụng các điều hướng trên trang. Việc này giúp họ tiết kiệm thời gian và lấy được thông tin hiệu quả hơn.

1.2. Dễ sử dụng

Chức năng tìm kiếm ngày qua ngày trở nên phổ biến hơn trước và được cải tiến không ngừng. Hiện chúng ta đang có công nghệ tìm kiếm bằng giọng nói như Siri của Apple hoặc Alexa của Amazon hay tìm kiếm hình ảnh trên các website thương mại điện tử. Ngay cả trẻ em ngày nay cũng biết cách tìm kiếm phim hoạt hình trên YouTube! Tất cả đều nhờ có thanh tìm kiếm thông minh và hiệu quả.

1.3. Giữ chân người dùng

Khi sử dụng các công cụ như Google, Yahoo, Bing,... mọi người thường có xu hướng biến đổi từ ngữ, câu chữ để tìm được nội dung họ mong muốn. Điều này diễn ra tương tự với thanh tìm kiếm trang web. Người dùng có thể tìm nhiều lần cùng một từ khóa với các biến thể khác nhau đến khi họ thỏa mãn được nhu cầu tìm kiếm của mình. Vậy việc bạn cần làm là hiểu được hành vi người dùng và mong muốn của họ khi vào website để tạo ra các nội dung tương ứng.

1.4. Tăng khả năng chuyển đổi

Theo nghiên cứu về các website thương mại điện tử, 43% người dùng sử dụng chức năng tìm kiếm ngay khi vào trang thay vì trải nghiệm web theo điều hướng. Những người dùng sử dụng thanh tìm kiếm có khả năng trở thành thành khách hàng lên tới 216% và doanh thu trung bình từ những đối tượng này cao hơn so với những khách hàng khác.

Mặc dù chức năng này mang lại nhiều lợi ích, nhưng nếu website của bạn có cấu trúc đơn giản và số lượng dữ liệu không nhiều thì thanh tìm kiếm là không cần thiết. Các website có khối lượng dữ liệu lớn ví dụ như Tân Thanh Container hay website thương mại điện tử như Viễn thông Vina bắt buộc phải có chức năng này.

2. Hành vi người dùng khi sử dụng

Khi người dùng bắt đầu tìm kiếm trang web, họ đang thực sự bắt đầu một cuộc hành trình, và cuộc hành trình này thường bắt đầu bởi việc chú ý tới thanh tìm kiếm. Do đó, bạn cần quan tâm tới vị trí đặt và cách thiết kế giao diện cho thanh tìm kiếm. Để tối ưu công cụ này, cùng xem một số mẹo thiết kế dưới đây.

3. Một số mẹo khi thiết kế thanh tìm kiếm

3.1. Làm nổi bật tính trực quan

Thông thường, thanh tìm kiếm được đặt ở giữa thanh menu và đây là vị trí đắc địa, hợp lý nhất vì người dùng có thể nhận ra chức năng này ngay khi truy cập vào website.

Dưới đây là nghiên cứu về các vị trí của biểu tượng mà người dùng sẽ chú ý tới. Bạn có thể dựa vào đây để tìm vị trí đặt mới cho thanh công cụ này nhưng chúng tôi vẫn khuyên bạn nên đặt tại thanh menu để hiển thị chức năng này ở tất cả các trang.

Một số mẹo khi thiết kế thanh tìm kiếm-1
Nghiên cứu về các vị trí của biểu tượng 

Ngoài ra, tính trực quan của thanh tìm kiếm trang web vô cùng quan trọng. Cùng nhìn vào hình ảnh dưới đây để thấy sự khác biệt.

Một số mẹo khi thiết kế thanh tìm kiếm-2

Hình ảnh thứ nhất, thiết kế hoàn toàn biến mất và chỉ nhìn thấy biểu tượng kính lúp. Nếu người dùng không để tâm, họ sẽ không phát hiện ra chức năng tìm kiếm. Ngược lại, cách thiết kế thứ hai tách biệt so với nền, thu hút sự chú ý của người dùng và hỗ trợ họ thao tác dễ dàng hơn.

Đọc thêm: 72 YẾU TỐ KHÔNG THỂ THIẾU KHI THIẾT KẾ WEBSITE THƯƠNG MẠI ĐIỆN TỬ

3.2. Làm rõ chức năng

Nghe có vẻ hài hước, nhưng việc hướng dẫn người dùng sử dụng thanh tìm kiếm sẽ tăng hiệu quả của chức năng này. Ví dụ dưới đây sẽ giúp bạn hình dung dễ hơn về điều mà JAMstack Vietnam đang nói tới.

Làm rõ chức năng khi thiết kế thanh tìm kiếm
Làm rõ chức năng khi thiết kế thanh tìm kiếm

Hình bên trái thể hiện 2 cách thiết kế tìm kiếm trang web sai lầm cho thanh công cụ này. Nếu bạn chỉ đóng khung biểu tượng tìm kiếm, người dùng không tìm được nơi nhập văn bản. Trường hợp thứ 2, ô điền thông tin đã rõ ràng nhưng không có sự tách biệt. Ngược lại, hình bên phải có cấu trúc rất rõ ràng giữa phần nhập nội dung - nút CTA và có hướng dẫn nội dung cần nhập.

Khi so sánh giữa hai phiên bản, rõ ràng phía bên phải gây ấn tượng về mặt trực quan hơn và sử dụng dễ dàng hơn.

3.3. Đủ không gian để nhập truy vấn

Thanh tìm kiếm cần hiển thị toàn bộ truy vấn của người dùng để tạo ra trải nghiệm tốt hơn. Theo nghiên cứu trên một trang thương mại điện tử, người dùng của họ gõ trung bình 14,5 ký tự trong phần truy vấn. Vì vậy, website này thiết kế đủ không gian để hiển thị 27 ký tự cho thanh công cụ này.

Đủ không gian để nhập truy vấn
Thanh tìm kiếm cần hiển thị toàn bộ truy vấn của người dùng để tạo ra trải nghiệm tốt hơn

Tuy nhiên, độ dài tìm kiếm tiêu chuẩn của mỗi trang web là khác nhau. Tùy chọn tốt nhất có thể được nghiên cứu trên nhật ký tìm kiếm của trang web để kiểm tra thời gian truy vấn của người dùng.

3.4. Gợi ý tìm kiếm hoặc lưu trữ tìm kiếm

Ngoại trừ định hướng các nội dung người dùng nên điền, bạn nên đặt chế độ gợi ý tìm kiếm hoặc hiển thị các nội dung tìm kiếm trước đó.

Gợi ý tìm kiếm hoặc lưu trữ tìm kiếm
Gợi ý tìm kiếm hoặc lưu trữ tìm kiếm hỗ trợ khách hàng tìm kiếm nội dung

Việc thông tin về các xu hướng tìm kiếm hay lịch sử tìm kiếm của họ kích thích người dùng truy vấn nhiều hơn và ở lại trang lâu hơn.

3.5. Cung cấp tìm kiếm nâng cao

Tìm kiếm nâng cao hỗ trợ người dùng chi tiết nhu cầu của họ, tăng khả năng chuyển đổi.

thanh tìm kiếm trang web nâng cao
Thanh tìm kiếm trang web nâng cao giúp người dùng tìm kiếm chính xác và nhanh hơn

Tùy thuộc vào sản phẩm, dịch vụ, nội dung trên website, thiết kế tìm kiếm nâng cao sẽ có các trường khác nhau. Bạn cần đoán trước những mục đích tìm kiếm của người dùng để thiết lập sao cho phù hợp. Vị trí lý tưởng của chức năng này nên được đặt ngay cạnh Thanh tìm kiếm ở phía bên phải.

3.6. Giữ truy vấn của người dùng trên trang kết quả

Sau khi hiển thị kết quả tìm kiếm, từ khóa tìm kiếm của người dùng nên được lưu trữ và hiển thị. Điều này giúp họ điều chỉnh truy vấn nếu kết quả không hiển thị chính xác như họ mong đợi hoặc hiển thị ít hơn hoặc quá nhiều dữ liệu hoặc không có kết quả.

thanh tìm kiếm giữ truy vấn của người dùng trên trang kết quả
Thanh tìm kiếm giữ truy vấn của người dùng trên trang kết quả

Trường hợp không từ khóa tìm kiếm không có trên website, bạn cần thông báo về điều này, nếu không, người dùng nghĩ rằng hệ thống đang gặp vấn đề.

Phần kết luận

Nếu bạn đọc đến cuối blog này, JAMstack Vietnam hy vọng bạn có thể áp dụng một số mẹo trên để tăng trải nghiệm trên website dự án của bạn. Ngoài ra, bạn nên theo dõi nhật ký tìm kiếm để hiểu hành vi của người dùng và biết cách họ đang sử dụng thanh tìm kiếm trang web của bạn.

Trường hợp bạn đang cần dịch vụ thiết kế website chuyên nghiệp với các chức năng được tối ưu từ giao diện tới cách hoạt động, chúng tôi sẵn sàng hỗ trợ.

BẤM VÀO ĐÂY để nhận tư vấn 1-1 từ đội ngũ chuyên nghiệp của chúng tôi.

share on facebook share on twitter share on pinterest
BÀI VIẾT LIÊN QUAN
Hệ thống thương mại điện tử B2B và B2C: Sự khác biệt chính trong thiết kế UX
Việc hiểu rõ sự khác biệt giữa mô hình B2B (business-to-business) và B2C (business-to-consumer) là điều vô cùng cần thiết. Đặc biệt, trong thiết kế UX (trải nghiệm người dùng), mỗi hệ thống thương mại điện tử lại có những yêu cầu khác nhau để tối ưu hóa hành trình khách hàng. Trong bài viết trước, JAMstack Vietnam đã khái quát về những điểm khác biệt này.
7 phút đọc
ĐỂ LẠI THÔNG TIN CẦN TƯ VẤN, CHÚNG TÔI SẼ PHẢN HỒI TRONG VÒNG 24H
Số điện thoại
Văn phòng đại diện chính thức
B3.04, Block B, Toà nhà Jamona Heights, 210 Bùi văn Ba, Tân Thuận Đông, Q.7, TPHCM
© 2020 Công ty Cổ Phần Flame Media.
Nhãn hiệu JAMstack Vietnam đã chính thức được cấp bằng bản quyền hợp pháp bởi Cục Sở hữu trí tuệ, Bộ Khoa học - Công nghệ vào ngày 25/08/2023. GPDKKD số 0316311107 do sở KH & ĐT TP.HCM cấp ngày 04/06/2020.
Email: hello@jamstackvietnam.com
scroll to top
message phone

Chúng tôi sử dụng cookie để nâng cao trải nghiệm duyệt web của bạn, cung cấp các nội dung được cá nhân hoá và phân tích lưu lượng truy cập trên trang web của chúng tôi. Bằng cách nhấp vào “Chấp nhận”, bạn đồng ý với việc chúng tôi sử dụng cookie. Tìm hiểu Chính sách Cookie.