Checkbox hay Toggle switch - gợi ý cho thiết kế

Thực hiện thay đổi của user ngay lập tức

Sử dụng Toggle switch khi

  • Khi thay đổi được thực hiện ngay lập tức không cần thêm một thao tác nào khác nữa
  • Không cần user confirm trước khi thực hiện

Checkbox hay Toggle switch - gợi ý cho thiết kế

Màn hình settings

Sử dụng checkbox khi

  • Cần confirm trước khi thay đổi, hoặc user có thể xem lại trước khi thật sự lưu(submit)
  • Trong form có các nút Submit, Ok, Next, Apply để lưu thay đổi.

Checkbox hay Toggle switch - gợi ý cho thiết kế

Nhiều lựa chọn

Sử dụng checkbox khi

  • Có nhiều lựa chọn để user chọn, các lựa chọn này thuộc cùng một category hoặc group.

Checkbox hay Toggle switch - gợi ý cho thiết kế

4: Khi thay đổi lựa chọn ảnh hưởng đến các lựa chọn khác

Sử dụng Checkbox khi

  • Nếu thay đổi giá trị của checkbox hiện tại, sẽ ảnh hưởng đến các lựa chọn con bên trong. Ví dụ các lựa chọn bên dưới All chỉ xuất hiện (hoặc enable select) khi All được chọn

Checkbox hay Toggle switch - gợi ý cho thiết kế

Kết quả on/off có thể dễ dàng nhận thấy

Sử dụng Checkbox khi

  • Đôi khi trạng thái on/off của toggle switch sẽ gây nhầm lẫn. Ví dụ Auto-fill form bên dưới không biết là dạng trạng thái hay ám chỉ một action cụ thể.

Checkbox hay Toggle switch - gợi ý cho thiết kế

Các phần tử liên quan với nhau

Sử dụng Checkbox khi

  • User chọn một trong danh sách các phần tử có liên quan với nhau về một chủ đề

Checkbox hay Toggle switch - gợi ý cho thiết kế

Sử dụng Toggle switch khi các phần tử này là những tính năng độc lập

Checkbox hay Toggle switch - gợi ý cho thiết kế

Một lựa chọn

Sử dụng Checkbox khi

  • Muốn khuyến khích user chọn, hoặc bắt buộc user phải chọn

Checkbox hay Toggle switch - gợi ý cho thiết kế

Sử dụng Toggle switch khi đang cung cấp cho một user option chứ ko bắt buộc hay gợi ý

Checkbox hay Toggle switch - gợi ý cho thiết kế

📜 Checkbox vs Toggle Switch - Saadia Minhas