드래그 앤 드롭 UX: 기호, 피드백 및 접근 가능한 대안

모든 단계에서의 피드백

Nielsen Norman Group의 지침은 모든 단계에서 명확한 기호와 명확한 피드백을 통해 드래그 앤 드롭을 쉽게 발견하고 사용할 수 있도록 한다는 것입니다. 물건을 집으면 사람들은 그 물건이 집혔다는 사실을 알아야 하고, 물건을 떨어뜨리기 전에 어떤 일이 일어날지 확인해야 합니다.

• 기호: 잡기 핸들 아이콘, 마우스 오버 시 잡기 커서 또는 둘 다.
• 붙잡음: 그림자와 약간의 비늘로 항목을 들어올려 붙잡힌 것처럼 보입니다.
• 미리보기: 유효한 낙하 영역을 강조 표시하고 항목이 착륙할 위치를 표시합니다.
• 삭제됨: 항목을 제자리에 애니메이션으로 적용하고 실행 취소를 제공합니다.

접근성: 항상 다른 방법을 제공합니다.

WCAG 2.2 성공 기준 2.5.7, 끌기 동작(레벨 AA)에서는 끌기가 필수적인 경우를 제외하고는 끌기로 수행되는 모든 작업을 끌기 없이 단일 포인터로도 수행할 수 있어야 합니다. 일반적인 대안으로는 위로 이동 및 아래로 이동 버튼, "다음으로 이동" 메뉴 또는 화살표 키를 사용한 키보드 지원이 있습니다. NN/g는 또한 예를 들어 대충 제자리로 끌고 화살표 키로 살짝 누르는 것과 같은 정확한 대안이 모든 사람에게 도움이 되는 경우가 많다고 지적합니다.

물리학을 통해 드래그하는 느낌이 직접적으로 느껴집니다.

드래그된 항목은 지연 없이 포인터를 따라야 합니다. 풀렸을 때, 풀림 속도를 안착부에 전달하는 스프링이 물리적인 낙하 느낌을 주며, 옆으로 부드럽게 움직이는 다른 아이템들은 틈이 어디에 있는지 보여줍니다. 이러한 동작을 짧게 유지하고 동작 감소가 켜져 있으면 이를 줄이세요.

세부정보를 터치하세요.

터치 스크린에서는 드래그와 스크롤을 구별하며, 길게 눌러 선택하는 경우가 많습니다. 칠 수 있을 만큼 큰 핸들을 만들고, 가장자리 근처에서 드래그할 때 목록을 자동 스크롤하고, 플랫폼이 지원하는 픽업 및 드롭에 대한 햅틱 피드백을 제공합니다.