Kiểm tra phản hồi sau hai lần kích hoạt liên tiếp
Nhấn nút khi mạng chậm rồi nhấn lại. Phản hồi trạng thái xử lý đủ sớm, tránh gửi trùng và dùng nhãn cho biết kết quả của hành động thay vì một từ chung chung.
Nút bấm Design system
Làm rõ hành động và phản hồi sau khi kích hoạt.
Nội dung checklist
Tiến độ kiểm tra
01
Cấu trúc và ý nghĩa
Đối chiếu thông tin và cách trình bày trong ngữ cảnh sử dụng.
02
Tương tác và khả năng sử dụng
Thử thao tác, thay đổi trạng thái và đường tiếp tục công việc.
Tiến độ được lưu tự động trên trình duyệt này.
HƯỚNG DẪN
Cách kiểm tra
VÍ DỤ
Ví dụ áp dụng
Lưu một thay đổi đang xử lý
Nút “Lưu thay đổi” chuyển sang “Đang lưu…” trong lúc xử lý; khi hoàn tất, hiển thị xác nhận và cho tiếp tục chỉnh sửa.
Các biến thể và tình huống
Kích thước theo ngữ cảnh
Dùng thang kích thước rõ cho biểu mẫu, thanh công cụ và hành động trên mobile.
Thử nhãn dài và tăng cỡ chữ; nút giữ vùng chạm mà không tràn khỏi bố cục.
Ví dụ Nút “Xác nhận đặt hàng” rộng ở mobile; nút lọc gọn trong toolbar.
Trạng thái tương tác
Mặc định, hover, focus, disabled và loading cần có dấu hiệu riêng, không phụ thuộc mỗi màu.
Gửi một lần rồi bấm tiếp trong lúc chờ; tác vụ không chạy trùng và focus vẫn nhìn thấy.
Ví dụ Nút chuyển sang “Đang lưu…” trong lúc request đang xử lý.
Mặc định
Đang chọn
Đang nhập
Không khả dụng
Biểu tượng trong nút
Icon bổ trợ ý nghĩa nhãn; nút chỉ có icon cần tên truy cập và gợi ý khi cần.
Đọc tên nút bằng screen reader và thử với người chưa biết biểu tượng.
Ví dụ Nút thùng rác có aria-label “Xóa bản nháp”, không chỉ “Xóa”.
Cấp độ hành động
Phân biệt hành động chính, phụ và nguy hiểm bằng hệ thống nhất quán.
Đặt hai hành động cạnh nhau; người dùng cần nhận ra bước chính và hậu quả của việc xóa.
Ví dụ “Lưu thay đổi” dùng nút chính; “Hủy” dùng nút nhẹ hơn.