Vậy sự khác biệt giữa combobox, multiselect, listbox và dropdown là gì? Mặc dù tất cả các thành phần giao diện người dùng này có thể trông giống nhau nhưng chúng phục vụ các mục đích khác nhau. Sự lựa chọn thường phụ thuộc vào số lượng tùy chọn có sẵn và khả năng hiển thị của chúng. Chúng ta hãy xem chúng khác nhau như thế nào, chúng phục vụ mục đích gì và làm thế nào để chọn đúng - tránh những hiểu lầm và kỳ vọng sai lầm trong quá trình thực hiện.
Không phải tất cả các mẫu danh sách đều giống nhau Tất cả các thành phần giao diện người dùng được đánh dấu ở trên đều có một điểm chung: chúng hỗ trợ người dùng tương tác với danh sách. Tuy nhiên, họ làm như vậy hơi khác một chút. Chúng ta hãy xem xét từng cái một:
Danh sách thả xuống → bị ẩn cho đến khi nó được kích hoạt. Combobox → gõ để lọc + chọn 1 phương án. Multiselect → gõ để lọc + chọn nhiều tùy chọn. Hộp danh sách → tất cả các tùy chọn danh sách hiển thị theo mặc định (+ cuộn). Hộp danh sách kép → di chuyển các mục giữa 2 hộp danh sách.
Nói cách khác, Combobox kết hợp trường nhập văn bản với danh sách thả xuống để người dùng có thể nhập để lọc và chọn một tùy chọn duy nhất. Với Multiselect, người dùng có thể chọn nhiều tùy chọn (thường được hiển thị dưới dạng thuốc hoặc khoai tây chiên). Hộp danh sách hiển thị tất cả các tùy chọn danh sách hiển thị theo mặc định, thường khi cuộn. Điều này rất hữu ích khi người dùng cần xem ngay tất cả các lựa chọn có sẵn. Hộp danh sách kép (còn gọi là danh sách chuyển) là một biến thể của hộp danh sách cho phép người dùng di chuyển các mục giữa hai hộp danh sách (trái ↔ phải), thường là để chọn hàng loạt. Không bao giờ ẩn các tùy chọn được sử dụng thường xuyên Như đã đề cập ở trên, việc lựa chọn thành phần UI phù hợp phụ thuộc vào 2 yếu tố: có bao nhiêu tùy chọn danh sách và liệu tất cả các tùy chọn này có cần hiển thị theo mặc định hay không. Tất cả các danh sách cũng có thể có cấu trúc cây, lồng và chọn nhóm.
Có một nguyên tắc mà tôi đã tuân theo trong nhiều năm đối với bất kỳ thành phần giao diện người dùng nào: không bao giờ ẩn các tùy chọn được sử dụng thường xuyên. Nếu người dùng thường xuyên dựa vào một lựa chọn cụ thể thì việc giấu nó khỏi họ sẽ có rất ít giá trị. Chúng tôi có thể chọn trước hoặc (nếu chỉ có 2–3 tùy chọn được sử dụng thường xuyên) hiển thị chúng dưới dạng chip hoặc nút, sau đó hiển thị phần còn lại của danh sách khi tương tác. Nói chung, bạn nên luôn hiển thị các tùy chọn phổ biến — ngay cả khi nó có thể làm lộn xộn giao diện người dùng. Làm thế nào để chọn cái nào? Không phải mọi danh sách đều cần một phương pháp lựa chọn phức tạp. Đối với danh sách có ít hơn 5 mục, các nút radio hoặc hộp kiểm đơn giản thường hoạt động tốt nhất. Nhưng nếu người dùng cần chọn từ danh sách tùy chọn lớn (ví dụ: hơn 200 mục), combobox + multiselect sẽ hữu ích vì lọc nhanh hơn (ví dụ: chọn quốc gia).
Hộp danh sách rất hữu ích khi mọi người cần truy cập nhiều tùy chọn cùng một lúc, đặc biệt nếu họ cũng cần chọn nhiều tùy chọn từ danh sách đó. Chúng có thể hữu ích cho các bộ lọc được sử dụng thường xuyên.
Hộp danh sách kép thường bị bỏ qua và bỏ qua. Nhưng nó có thể rất hữu ích cho các nhiệm vụ phức tạp, ví dụ như lựa chọn hàng loạt hoặc phân công vai trò, nhiệm vụ, trách nhiệm. Đây là thành phần giao diện người dùng duy nhất cho phép người dùng xem lại danh sách lựa chọn đầy đủ của họ song song với danh sách nguồn trước khi cam kết (còn được gọi là “Danh sách chuyển”). Trên thực tế, hộp danh sách kép thường nhanh hơn, chính xác hơn và dễ truy cập hơn so với kéo và thả. Cân nhắc về khả năng sử dụng Một lưu ý quan trọng cần ghi nhớ là tất cả các loại danh sách cần hỗ trợ điều hướng bằng bàn phím (ví dụ: phím mũi tên ↑/↓) để có khả năng truy cập. Một số người hầu như sẽ luôn dựa vào bàn phím để chọn các tùy chọn khi họ bắt đầu nhập.
Ngoài ra:
Đối với các danh sách có hơn 7 tùy chọn, hãy cân nhắc thêm chức năng “Chọn tất cả” và “Xóa tất cả” để hợp lý hóa hoạt động tương tác của người dùng. Đối với các danh sách dài có hộp tổ hợp, hãy hiển thị tất cả các tùy chọn cho người dùng khi nhấp/nhấn, nếu không họ có thể không bao giờ được nhìn thấy, Quan trọng nhất, không hiển thị các phần tử không tương tác dưới dạng nút để tránh nhầm lẫn — và không hiển thị các phần tử tương tác dưới dạng nhãn tĩnh.
Kết thúc: Không phải mọi thứ đều là thả xuống Tên quan trọng. Danh sách tùy chọn theo chiều dọc thường được mô tả là "thả xuống" - nhưng thường nó quá chung chung nên không có ý nghĩa. “Thả xuống” gợi ý rằng danh sách này bị ẩn theo mặc định. “Multiselect” ngụ ý có nhiều lựa chọn (hộp kiểm) trong một danh sách. “Combobox” ngụ ý nhập văn bản. Và “Listbox” chỉ đơn giản là một danh sách các mục có thể chọn, luôn hiển thị. Mục tiêu không nhất quán với các định nghĩa ở trên chỉ vì mục đích của nó. Nhưng đúng hơn là để điều chỉnh các ý định - hãy nói cùng một ngôn ngữ khi quyết định, thiết kế, xây dựng và sau đó sử dụng các thành phần giao diện người dùng này. Nó sẽ hoạt động chotất cả mọi người — nhà thiết kế, kỹ sư và người dùng cuối — miễn là nhãn tĩnh không giống nút tương tác và nút radio không hoạt động giống hộp kiểm. Gặp gỡ “Mẫu thiết kế cho giao diện AI” Gặp gỡ các mẫu thiết kế cho giao diện AI, khóa học video mới của Vitaly với các ví dụ thực tế từ các sản phẩm thực tế — sắp diễn ra khóa đào tạo UX trực tiếp. Chuyển đến bản xem trước miễn phí. Gặp gỡ các mẫu thiết kế cho giao diện AI, khóa học video của Vitaly về thiết kế giao diện & UX.
Đào tạo Video + UX Chỉ Video + Đào tạo UX$ 450,00 $ 799,00
Nhận Video + Đào tạo UX 30 bài học video (10 giờ) + Đào tạo UX trực tiếp. Đảm bảo hoàn tiền trong 100 ngày. Chỉ video$ 275,00$ 395,00
Nhận khóa học video30 bài học video (10h). Được cập nhật hàng năm. Cũng có sẵn dưới dạng Gói UX với 3 khóa học video.
Tài nguyên hữu ích
Tự động hoàn thành: Nguyên tắc UX, của Vitaly Friedman Combobox, bởi eBay 👍 Combobox, bởi đàn hồi Combobox, bởi Elisa Combobox, bởi MongoDB 👍 Combobox, bằng Visa 👍 Combobox, bởi Watson (Docplanner) Combobox, bởi Wikimedia Combobox, bởi Zendesk Multiselect (Tài liệu thiết kế hộp tổ hợp MongoDB), bởi MongoDB 👍 Tra cứu nhiều lựa chọn, bởi Wikimedia Hộp tổ hợp nhiều lựa chọn, bởi Vaadin Chọn nhiều lần, bằng Visa Chuyển (ví dụ về Listbox), bởi Ant Design Hộp danh sách, bởi Hopper Hộp danh sách, bởi Vaadin Hộp danh sách, bởi Visa Bộ chọn danh sách kép của Red Hat (PatternFly) Hộp danh sách kép, của Salesforce (Hệ thống thiết kế Lightning) Danh sách chuyển nhượng, bởi Mantine Hộp danh sách kép, bởi Dashlite Huy hiệu so với thuốc so với chip so với thẻ, bởi Vitaly Friedman Hộp danh sách so với Danh sách thả xuống, của Anna Kaley (NN/g)
