Menu thả xuống có chức năng tìm kiếm: Giúp danh sách dài trở nên dễ sử dụng hơn
Một menu thả xuống với 200 quốc gia. Một danh sách 50 tiểu bang. Hàng trăm tùy chọn sản phẩm. Việc cuộn qua các danh sách thả xuống dài rất khó chịu—và dẫn đến việc người dùng bỏ ngang biểu mẫu.
Menu thả xuống có thể tìm kiếm Giải quyết vấn đề này bằng cách cho phép người dùng nhập liệu để lọc các tùy chọn ngay lập tức. Thay vì cuộn trang, họ chỉ cần nhập "can" và thấy Canada ở đầu trang.
Trong hướng dẫn này, bạn sẽ tìm hiểu khi nào nên sử dụng menu thả xuống có chức năng tìm kiếm và cách thiết lập chúng trong các biểu mẫu WordPress của mình.
Vấn đề với các menu thả xuống quá dài
Các menu thả xuống tiêu chuẩn trở nên không thể sử dụng được khi số lượng tùy chọn tăng lên:
Vấn đề về trải nghiệm người dùng
- Cuộn vô tận – Để tìm “Hoa Kỳ” trong danh sách quốc gia được sắp xếp theo thứ tự bảng chữ cái, bạn phải cuộn qua hơn 180 quốc gia.
- cơn ác mộng trên điện thoại di động – Vùng cuộn nhỏ trên màn hình cảm ứng
- Mất thời gian – Người dùng mất hơn 10 giây để tìm một lựa chọn
- Dễ xảy ra lỗi – Dễ vô tình chọn nhầm mặt hàng
- Bực bội – Lặp lại cho nhiều trường thả xuống
Khi nào menu thả xuống trở nên gây rắc rối
| Số tùy chọn | Kinh nghiệm người dùng |
|---|---|
| 5-10 lựa chọn | ✅ Dễ dàng quét |
| 10-20 lựa chọn | ⚠️ Dễ quản lý |
| 20-50 lựa chọn | ⚠️ Trở nên nhàm chán |
| hơn 50 tùy chọn | ❌ Cần tìm kiếm |
| hơn 100 tùy chọn | ❌ Tìm kiếm cần thiết |
Cách thức hoạt động của menu thả xuống có chức năng tìm kiếm
Menu thả xuống có chức năng tìm kiếm kết hợp ô nhập văn bản với danh sách thả xuống:
- Người dùng nhấp vào trường thả xuống
- Một hộp tìm kiếm sẽ xuất hiện (hoặc chính trường đó trở nên có thể tìm kiếm được).
- Người dùng nhập một vài ký tự
- Tùy chọn lọc dữ liệu theo thời gian thực để phù hợp với dữ liệu đầu vào.
- Người dùng chọn từ danh sách rút gọn đã được lọc.
Ví dụ: Lựa chọn quốc gia
Không cần tìm kiếm: Cuộn qua hơn 200 quốc gia để tìm "Đức".
Với chức năng tìm kiếm: Gõ “ger” → xem Đức, Algeria, Nigeria → nhấp vào Đức
Thời gian tiết kiệm: hơn 10 giây → 2 giây
Các trường hợp sử dụng phổ biến của menu thả xuống có chức năng tìm kiếm
Lựa chọn quốc gia
Ví dụ điển hình. Với hơn 195 quốc gia, tìm kiếm là điều thiết yếu:
- Nhập “uni” → Hoa Kỳ, Vương quốc Anh, Các Tiểu vương quốc Ả Rập Thống nhất
- Gõ “aus” → Úc, Áo
- Nhập “mới” → New Zealand, New Caledonia
Lựa chọn tiểu bang/tỉnh
50 tiểu bang của Hoa Kỳ, 13 tỉnh của Canada, hoặc các vùng lãnh thổ trên toàn thế giới:
- Nhập “cal” → California
- Nhập “mới” → New York, New Jersey, New Hampshire, New Mexico
Danh mục Sản phẩm
Các trang thương mại điện tử với hàng trăm loại sản phẩm:
- Nhập “laptop” → Laptops, Laptop Accessories, Laptop Bags
- Nhập “điện thoại” → Điện thoại, Ốp điện thoại, Bộ sạc điện thoại
Chức danh công việc/Ngành nghề
Biểu mẫu nghề nghiệp với danh sách việc làm chi tiết:
- Nhập “kỹ sư” → Kỹ sư phần mềm, Kỹ sư xây dựng, Kỹ sư cơ khí
- Nhập “thị trường” → Giám đốc Marketing, Nhà phân tích thị trường, Chuyên gia thị trường
Ngôn ngữ
Tùy chọn ngôn ngữ với hơn 100 lựa chọn:
- Nhập “span” → Tiếng Tây Ban Nha
- Nhập “chin” → Tiếng Trung (Giản thể), Tiếng Trung (Phồn thể)
Các trường đại học/cao đẳng
Danh sách các cơ sở giáo dục:
- Nhập “harvard” → Đại học Harvard
- Nhập “MIT” → Viện Công nghệ Massachusetts
Múi giờ
Hơn 400 tùy chọn múi giờ:
- Nhập “pacific” → Pacific/Auckland, Pacific/Honolulu, US/Pacific
- Nhập “new york” → America/New_York
Thiết lập menu thả xuống có thể tìm kiếm
Dưới đây là cách tạo menu thả xuống có thể tìm kiếm với Trình tạo biểu mẫu tự động:
Bước 1: Cài đặt Auto Form Builder
- Đến phần Plugin → Thêm mới
- Tìm kiếm "A.F.B.” (tên viết tắt của Auto Form Builder)
- Tìm thấy "AFB – Auto Form Builder – Công cụ tạo biểu mẫu kéo và thả"
- Nhấp chuột Bây giờ cài đặtthì Kích hoạt
Bước 2: Thêm trường thả xuống
- Tạo hoặc chỉnh sửa biểu mẫu của bạn
- Kéo Thả xuống trường vào biểu mẫu của bạn
- Nhấp chuột để mở cài đặt
Bước 3: Thêm các tùy chọn của bạn
Nhập danh sách các lựa chọn của bạn. Đối với danh sách dài, bạn có thể:
- Nhập thủ công – Nhập từng tùy chọn một
- Thêm hàng loạt – Dán danh sách các tùy chọn (mỗi tùy chọn một dòng)
Bước 4: Kích hoạt tìm kiếm
Trong phần cài đặt thả xuống, hãy tìm mục Có thể tìm kiếm or Bật tìm kiếm Tùy chọn. Bật nó lên.
Menu thả xuống giờ đây sẽ bao gồm một hộp tìm kiếm/lọc cho phép lọc các tùy chọn khi người dùng nhập liệu.
Bước 5: Cấu hình hành vi tìm kiếm
Tùy thuộc vào công cụ tạo biểu mẫu bạn sử dụng, bạn có thể có các tùy chọn như sau:
- Số ký tự tối thiểu – Bắt đầu lọc sau khi nhập X ký tự
- Tìm kiếm vị trí – Khớp từ đầu tùy chọn hoặc bất kỳ đâu
- Văn bản giữ chỗ – “Nhập để tìm kiếm…” hoặc “Tìm kiếm quốc gia…”
Các phương pháp tốt nhất để sử dụng trường thả xuống
1. Luôn bật chức năng tìm kiếm cho hơn 20 tùy chọn
Nếu menu thả xuống của bạn có hơn 20 tùy chọn, hãy bật chức năng tìm kiếm. Thật đơn giản. Người dùng sẽ cảm ơn bạn.
2. Sử dụng văn bản giữ chỗ rõ ràng
Hãy thông báo cho người dùng rằng họ có thể tìm kiếm:
- “Chọn quốc gia (nhập để tìm kiếm)”
- “Hãy chọn tiểu bang của bạn…”
- “Tìm kiếm hoặc chọn…”
3. Sắp xếp các tùy chọn một cách hợp lý
Ngay cả khi tìm kiếm, thứ tự các tùy chọn vẫn rất quan trọng:
- Thứ tự ABC – Thích hợp nhất cho tên gọi (quốc gia, tiểu bang)
- Phổ biến nhất trước – Đặt các lựa chọn phổ biến lên đầu (Mỹ, Anh, Canada)
- Được nhóm – Các danh mục có dấu phân cách
4. Bao gồm các biến thể phổ biến
Người dùng có thể tìm kiếm:
- “Hoa Kỳ” hoặc “Liên hiệp Hoa Kỳ” hoặc “Mỹ” hoặc “Châu Mỹ”
- “UK” hoặc “United Kingdom” hoặc “Britain” hoặc “England”
Nếu có thể, hãy bao gồm các từ viết tắt hoặc biến thể thông dụng tương ứng với cùng một tùy chọn.
5. Kiểm tra trên thiết bị di động
Các menu thả xuống có chức năng tìm kiếm cần hoạt động mượt mà trên các thiết bị cảm ứng:
- Ô tìm kiếm dễ dàng thao tác bằng cách chạm vào.
- Bàn phím hiện ra để nhập liệu
- Các tùy chọn đủ lớn để có thể chạm chính xác.
Khi nào KHÔNG nên sử dụng menu thả xuống có chức năng tìm kiếm
Menu thả xuống có chức năng tìm kiếm không phải lúc nào cũng là giải pháp:
Danh sách rút gọn (Dưới 10 lựa chọn)
Với 5-10 tùy chọn, menu thả xuống thông thường sẽ nhanh hơn. Không cần phải gõ khi bạn có thể xem tất cả cùng một lúc.
Khi người dùng không biết thuật ngữ chính xác
Chức năng tìm kiếm yêu cầu người dùng biết phải nhập gì. Nếu họ đang duyệt/khám phá các tùy chọn, danh sách được phân loại hoặc các nút chọn có thể hoạt động tốt hơn.
Có/Không hoặc Lựa chọn nhị phân
Hãy sử dụng các nút radio thay thế. Hai tùy chọn không cần đến menu thả xuống.
Phạm vi số
Đối với lựa chọn theo độ tuổi hoặc số lượng, hãy cân nhắc:
- Trường nhập số
- Slider
- Menu thả xuống ngắn (1-10)
Các giải pháp thay thế cho menu thả xuống có chức năng tìm kiếm
Tùy thuộc vào dữ liệu của bạn, hãy cân nhắc các phương án sau:
Trường văn bản tự động hoàn thành
Người dùng nhập liệu tự do, các gợi ý sẽ xuất hiện bên dưới. Tính năng này rất hữu ích khi người dùng có thể nhập các giá trị không có trong danh sách của bạn.
Menu thả xuống phân cấp
Chia một danh sách dài thành hai danh sách ngắn hơn:
- Menu thả xuống đầu tiên: Chọn lục địa
- Menu thả xuống thứ hai: Chọn quốc gia (lọc theo châu lục)
Nút chọn radio có tùy chọn “Khác”
Hiển thị 5-7 tùy chọn hàng đầu dưới dạng nút chọn, kèm theo tùy chọn "Khác" để mở ra một trường văn bản.
Các tùy chọn được nhóm/phân loại
Sử dụng nhóm tùy chọn để sắp xếp các tùy chọn theo danh mục:
- Bắc Mỹ
- Canada
- Mexico
- Hoa Kỳ
- Châu Âu
- Pháp
- Nước Đức
- Vương quốc Anh
Danh sách tùy chọn được xây dựng sẵn
Đừng phí công sức vào việc đã có sẵn. Dưới đây là những danh sách thông dụng bạn sẽ cần:
Các quốc gia
195 quốc gia thành viên Liên Hợp Quốc cộng với các vùng lãnh thổ. Nên đặt các quốc gia phổ biến (Mỹ, Anh, Canada, Úc) lên đầu, sau đó theo thứ tự bảng chữ cái.
Hoa Kỳ
50 tiểu bang cộng thêm Đặc khu Columbia và các vùng lãnh thổ. Sắp xếp theo thứ tự bảng chữ cái rất hiệu quả.
Các tỉnh của Canada
13 tỉnh và vùng lãnh thổ. Đủ ngắn để việc tìm kiếm là tùy chọn.
Múi giờ
Sử dụng mã định danh múi giờ tiêu chuẩn (America/New_York, Europe/London). Phân nhóm theo khu vực.
Ngôn ngữ
Mã ngôn ngữ ISO kèm tên hiển thị. Ưu tiên các ngôn ngữ phổ biến.
Lĩnh vực hoạt động
Danh sách phân loại ngành nghề tiêu chuẩn (NAICS, SIC) hoặc danh sách tùy chỉnh dành cho đối tượng mục tiêu của bạn.
Cân nhắc về Hiệu suất
Danh sách rất lớn (hơn 1000 lựa chọn)
Đối với danh sách cực kỳ dài:
- Tải các tùy chọn theo yêu cầu – Lấy dữ liệu từ máy chủ khi người dùng nhập
- Đặt số ký tự tối thiểu – Cần nhập từ 2-3 ký tự trước khi tìm kiếm
- Hiển thị kết quả giới hạn – Hiển thị 20 kết quả hàng đầu, không phải tất cả 500 kết quả
Tác động của việc tải trang
Danh sách tùy chọn dài sẽ làm tăng kích thước trang. Đối với danh sách có hơn 500 tùy chọn, hãy cân nhắc:
- Tải các tùy chọn thông qua AJAX
- Chia thành các menu thả xuống liên tiếp
- Sử dụng tìm kiếm phía máy chủ
Khả Năng Tiếp Cận
Đảm bảo các menu thả xuống có thể tìm kiếm được truy cập dễ dàng:
Điều hướng bàn phím
- Nhấn phím Tab để chọn vùng cần tập trung
- Nhập để tìm kiếm
- Sử dụng phím mũi tên để điều hướng các tùy chọn
- Nhập để chọn
- Thoát để đóng
Trình đọc màn hình
- Nhãn ARIA thích hợp
- Công bố số lượng kết quả
- Thông báo tùy chọn đã chọn
Chỉ báo trực quan
- Trạng thái tập trung rõ ràng
- Tùy chọn hiện tại được đánh dấu
- Biểu tượng tải trong khi tìm kiếm
Câu Hỏi Thường Gặp
Có bao nhiêu tùy chọn trước khi tôi cần tìm kiếm?
Hãy bật chức năng tìm kiếm cho bất kỳ menu thả xuống nào có hơn 20 tùy chọn. Đối với menu có hơn 50 tùy chọn, tìm kiếm là điều cần thiết. Một số người dùng vẫn đánh giá cao chức năng tìm kiếm ngay cả với menu chỉ có 10-15 tùy chọn.
Nên tìm kiếm khớp từ đầu hay từ bất kỳ đâu?
Tìm kiếm "ở bất kỳ đâu" sẽ dễ dàng hơn. Tìm kiếm "york" sẽ cho ra kết quả "New York". Việc chỉ tìm kiếm phần đầu của từ khóa sẽ nhanh hơn đối với các từ khóa đã biết.
Người dùng vẫn có thể cuộn qua tất cả các tùy chọn chứ?
Đúng vậy, các menu thả xuống có chức năng tìm kiếm thường hiển thị toàn bộ danh sách ban đầu. Chức năng tìm kiếm sẽ lọc bớt danh sách, nhưng người dùng vẫn có thể cuộn xuống nếu muốn.
Điều gì sẽ xảy ra nếu người dùng nhập sai từ khóa tìm kiếm?
Chức năng tìm kiếm cơ bản không xử lý lỗi chính tả. Đối với các trường quan trọng (như quốc gia), hãy đảm bảo bao gồm các lỗi chính tả phổ biến hoặc sử dụng tính năng tìm kiếm gần đúng nếu có.
Menu thả xuống có chức năng tìm kiếm có hoạt động trên thiết bị di động không?
Đúng vậy, và chúng thường hoạt động tốt hơn trên thiết bị di động so với các menu thả xuống thông thường vì việc gõ phím nhanh hơn so với việc cuộn qua một danh sách dài với vùng cuộn nhỏ.
Tổng kết
Giúp các danh sách thả xuống dài trở nên thân thiện hơn với người dùng:
- Xác định danh sách dài – Bất kỳ menu thả xuống nào có hơn 20 tùy chọn
- Cho phép tìm kiếm – Cho phép người dùng nhập liệu để lọc
- Sử dụng các chỗ giữ chỗ rõ ràng – “Nhập để tìm kiếm…”
- Sắp xếp theo logic – Các mặt hàng phổ biến nhất được hiển thị trước, sau đó sắp xếp theo thứ tự bảng chữ cái.
- Kiểm tra trên thiết bị di động – Đảm bảo trải nghiệm chạm mượt mà
- Cân nhắc các lựa chọn thay thế – Menu thả xuống phân cấp, các tùy chọn được nhóm lại
Kết luận
Các danh sách thả xuống quá dài sẽ làm giảm tỷ lệ hoàn thành biểu mẫu. Menu thả xuống có thể tìm kiếm Thay đổi trải nghiệm người dùng—người dùng tìm thấy lựa chọn của họ chỉ trong vài giây thay vì phải cuộn chuột vô tận.
Cho dù đó là danh sách quốc gia, tiểu bang, sản phẩm hay bất kỳ danh sách nào có hơn 20 tùy chọn, việc thêm chức năng tìm kiếm sẽ giúp biểu mẫu của bạn nhanh hơn và thân thiện hơn với người dùng.
Trình tạo biểu mẫu tự động Cho phép bạn tạo các trường thả xuống với chức năng tìm kiếm, giúp người dùng nhanh chóng tìm thấy những gì họ cần ngay cả trong những danh sách dài nhất.
Bạn đã sẵn sàng cải thiện các biểu mẫu của mình chưa? Tải xuống Auto Form Builder Và hãy làm cho danh sách thả xuống của bạn thân thiện hơn với người dùng ngay hôm nay.
