UX de arrastar e soltar: significantes, feedback e alternativas acessíveis
Como projetar o recurso de arrastar e soltar que as pessoas podem descobrir e usar: agarrar significantes, levantar e visualizar feedback, zonas para soltar, física e a alternativa sem arrastar que o WCAG 2.2 exige.
Ponto principal
Torne os itens arrastáveis óbvios com uma alça de captura ou mudança de cursor, confirme a captura com elevação e sombra, visualize o resultado enquanto arrasta destacando zonas para soltar e resolva o item claramente quando solto, com desfazer. Sempre forneça uma maneira sem arrastar de fazer a mesma coisa; WCAG 2.2 requer nível AA.
Feedback em todas as etapas
A orientação de Nielsen Norman Group é que significantes claros e feedback claro em cada estágio tornam o recurso de arrastar e soltar detectável e fácil de usar. Depois que um item é agarrado, as pessoas precisam saber que ele foi agarrado e ver o que acontecerá antes de deixá-lo cair.
- Significante: um ícone de alça, um cursor de captura ao passar o mouse ou ambos.
- Agarrado: levante o item com uma sombra e uma leve escala para que pareça segurado.
- Pré-visualização: destaque zonas de lançamento válidas e mostre onde o item irá parar.
- Caiu: anime o item no lugar e ofereça desfazer.
Acessibilidade: ofereça sempre outro caminho
O critério de sucesso 2.5.7 do WCAG 2.2, Movimentos de Arrasto (nível AA), exige que qualquer coisa feita arrastando também possa ser feita com um único ponteiro sem arrastar, a menos que arrastar seja essencial. Alternativas comuns são botões de mover para cima e para baixo, um menu "Mover para" ou suporte de teclado com teclas de seta. NN/g também observa que uma alternativa precisa geralmente ajuda a todos, por exemplo, arrastando-o aproximadamente para o lugar e empurrando-o com as teclas de seta.
A física faz com que arrastar pareça direto
Os itens arrastados devem seguir o ponteiro sem atraso. Quando liberada, uma mola que carrega a velocidade de liberação para o assentamento faz com que a queda pareça física, e outros itens se movendo suavemente para o lado mostram onde está a lacuna. Mantenha esses movimentos curtos e reduza-os quando o movimento reduzido estiver ativado.
Detalhes de toque
Em telas sensíveis ao toque, diferencie um arrastar de uma rolagem, geralmente com um toque longo para continuar. Torne as alças grandes o suficiente para acertar, role automaticamente as listas ao arrastar perto da borda e forneça feedback tátil ao pegar e soltar onde a plataforma suporta.
Princípios-chave para lembrar
- Mostre o que é arrastável com alças ou alterações de cursor
- Confirme a captura e visualize a queda
- Resolva com movimento claro e ofereça desfazer
- WCAG 2.5.7 (AA): fornece uma alternativa sem arrastar
- Utilize molas para liberação natural; reduzir para movimento reduzido
Perguntas frequentes
Fontes
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI