UX kéo và thả: Dấu hiệu, Phản hồi và các lựa chọn thay thế có thể truy cập

Phản hồi ở mọi giai đoạn

Hướng dẫn của Nielsen Norman Group là các dấu hiệu rõ ràng và phản hồi rõ ràng ở mọi giai đoạn giúp cho thao tác kéo và thả có thể được khám phá và dễ sử dụng. Khi một món đồ bị lấy đi, mọi người cần biết nó đã bị lấy đi và xem điều gì sẽ xảy ra trước khi họ đánh rơi nó.

• Dấu hiệu: biểu tượng tay cầm, con trỏ lấy khi di chuột hoặc cả hai.
• Đã nắm: nâng vật phẩm có bóng và vảy nhẹ để nó trông có vẻ được giữ chặt.
• Xem trước: đánh dấu các vùng thả hợp lệ và hiển thị nơi vật phẩm sẽ hạ cánh.
• Đã bỏ: tạo hiệu ứng cho mục vào đúng vị trí và đề xuất hoàn tác.

Khả năng tiếp cận: luôn cung cấp một cách khác

Tiêu chí thành công WCAG 2.2 2.5.7, Chuyển động kéo (cấp AA), yêu cầu mọi thao tác được thực hiện bằng cách kéo cũng có thể được thực hiện bằng một con trỏ mà không cần kéo, trừ khi việc kéo là cần thiết. Các lựa chọn thay thế phổ biến là nút di chuyển lên và di chuyển xuống, menu "Chuyển đến" hoặc hỗ trợ bàn phím với các phím mũi tên. NN/g cũng lưu ý rằng một giải pháp thay thế chính xác thường hữu ích cho mọi người, chẳng hạn như kéo mạnh vào vị trí và di chuyển bằng phím mũi tên.

Vật lý làm cho việc kéo có cảm giác trực tiếp

Các mục được kéo sẽ đi theo con trỏ mà không bị trễ. Khi được thả ra, một lò xo mang tốc độ nhả vào chỗ lắng tạo ra cảm giác rơi tự nhiên và các vật thể khác di chuyển sang một bên một cách trơn tru sẽ hiển thị khoảng trống ở đâu. Giữ những chuyển động này ngắn và giảm chúng khi bật chuyển động giảm.

Chi tiết cảm ứng

Trên màn hình cảm ứng, hãy phân biệt thao tác kéo với cuộn, thường phải nhấn và giữ để chọn. Tạo các tay cầm đủ lớn để nhấn, tự động cuộn danh sách khi kéo gần cạnh và đưa ra phản hồi xúc giác khi nhấc và thả ở nơi nền tảng hỗ trợ.