Arrastar e soltar: quando ajuda e que alternativa oferecer

Arrastar e soltar ajuda quando a pessoa precisa mover, reordenar, agrupar ou redimensionar algo que ela vê na tela, e quando ela espera fazer isso com o gesto. Ele cobra caro em distância longa, em ajuste fino e no celular. Por isso, não deve ser o único caminho. As WCAG 2.2, as diretrizes de acessibilidade do W3C, pedem que toda ação feita arrastando também funcione com um clique ou um toque simples, salvo quando arrastar é essencial (WCAG 2.2, critério 2.5.7).

O que é o gesto

Arrastar e soltar é um tipo de manipulação direta: a pessoa age sobre o objeto que está vendo, e o efeito aparece na hora. O termo é de Ben Shneiderman, do começo dos anos 1980, quando o normal era digitar comandos (Nielsen Norman Group, o NN/g, sobre manipulação direta (em inglês)). Mover um arquivo para outra pasta é o exemplo clássico. Na linha de comando, a mesma tarefa pede o nome do comando e o caminho das duas pastas, tudo de memória.

Page Laubheimer, no NN/g (em inglês), descreve o gesto em quatro passos:

o objeto está visível na tela;
a pessoa pega o objeto, com um clique ou um toque longo;
sem soltar, leva o objeto até o destino;
solta, e o objeto muda de lugar ou dispara uma ação, como apagar o arquivo jogado na lixeira.

Quando ele ajuda

O ganho vem de ver tudo acontecer. O artigo sobre manipulação direta (em inglês) lista as vantagens: o objeto fica à vista, o efeito aparece logo, o erro se desfaz fácil e o aprendizado é rápido. A pessoa reconhece o que pode fazer, em vez de decorar.

Segundo o NN/g (em inglês), o gesto encaixa em quatro tarefas: agrupar, reordenar, mover e redimensionar. Um quadro de tarefas com colunas, como o Trello, é o caso típico. A coluna de destino está ali, o cartão também, e o movimento conta a mudança sem precisar de texto.

Onde ele cobra

O mesmo gesto tem custo físico. O NN/g (em inglês) diz que ele pode ser lento, impreciso e cansativo, ainda mais em distância longa. O mouse chega ao fim da mesa, o dedo precisa trocar de posição, e o objeto cai no lugar errado. Aí a pessoa recomeça.

A lei de Fitts ajuda a entender o porquê. Ela diz que o tempo para alcançar um alvo cresce com a distância e cai com o tamanho do alvo (NN/g, lei de Fitts (em inglês)). Soltar um objeto num ponto exato é justamente o caso do alvo pequeno.

Tarefa repetida também sofre. No exemplo do NN/g sobre manipulação direta (em inglês), uma lista de reprodução do YouTube com 113 vídeos deixava arrastar o vídeo ou mandá-lo para o topo ou para o fim. Para levar um vídeo até o meio da lista, uma opção de mover para uma posição numerada seria mais rápida.

No celular falta o hover, o estado de quando o cursor passa por cima de algo, que costuma avisar que dá para arrastar. Por isso o NN/g (em inglês) recomenda o gesto no toque só quando a pesquisa mostra que as pessoas esperam por ele e quando não existe alternativa mais simples, como um menu. O Gmail é o exemplo do artigo: no computador, a mensagem vai para a pasta arrastando; no celular, vai por menu.

O que a acessibilidade pede

O critério 2.5.7 das WCAG 2.2 é novo nesta versão e tem nível AA. Ele pede que toda função feita arrastando também possa ser feita com ponteiro único, sem arrastar. Ponteiro único é mouse, dedo ou caneta, um ponto por vez. Ficam de fora os casos em que arrastar é essencial e os gestos do próprio navegador, como rolar a página.

O motivo está na página que explica o critério (em inglês). Tem gente que não consegue segurar e mover ao mesmo tempo com precisão. Tem gente que usa mouse controlado pela cabeça, rastreador de olhar ou comando de voz que imita o mouse. Para essas pessoas, arrastar é lento e dá erro.

A mesma página (em inglês) traz exemplos que servem de modelo:

um quadro com colunas abre, ao tocar no cartão, um menu para escolher a coluna de destino;
uma lista ordenável mostra botões de subir e descer ao lado do item escolhido;
um controle deslizante aceita clique em qualquer ponto da trilha;
um mapa que se arrasta também tem botões para mover a vista.

Um campo de texto também vale como alternativa, porque dá para preencher com teclado, voz ou toque.

Como desenhar o gesto

As recomendações do NN/g (em inglês) e do guia de interface da Apple (em inglês) se completam:

Mostre que dá para pegar. Use uma alça de arrasto e o cursor padrão do sistema. O NN/g (em inglês) avisa que os ícones de alça variam muito e lembram o menu de três pontos ou o de três linhas, então eles não bastam sozinhos.
Mostre que pegou. Sombra, contorno, leve inclinação ou uma imagem translúcida do objeto. A Apple (em inglês) sugere mostrar essa imagem assim que o objeto anda cerca de três pontos, a unidade de medida de tela que a Apple usa.
Mostre o que vai acontecer. Numa lista, os outros itens abrem espaço antes de a pessoa soltar. O NN/g (em inglês) sugere uma animação curta, perto de 100 milissegundos, que começa quando o centro do objeto passa da borda do vizinho.
Ajude a acertar o destino. A área de soltura pode ser um pouco maior do que parece, com destaque quando o objeto entra nela. A Apple (em inglês) pede destaque só nos destinos que aceitam aquele conteúdo.
Avise quando não deu certo. Se a pessoa solta num lugar inválido, o objeto volta para a origem.
Deixe desfazer. A Apple (em inglês) recomenda permitir desfazer o arrasto e pedir confirmação quando a ação não tem volta.
No toque, dê espaço e sinal. O NN/g (em inglês) pede pelo menos 1 cm por 1 cm livre para pegar o objeto e um pequeno atraso para separar toque, rolagem e pegada. Uma vibração leve confirma que o objeto foi pego.

Onde as fontes divergem

A Apple quer o gesto em todo lugar. O guia diz para oferecer arrastar e soltar no app “o máximo possível”, porque as pessoas conhecem o gesto e tentam usá-lo em tudo (Apple, Human Interface Guidelines (em inglês)). O NN/g é mais cauteloso, pelo menos no toque. Ali, o gesto só entra com evidência de que as pessoas o esperam e sem alternativa mais simples (NN/g (em inglês)).

Eu junto as duas assim: o arrasto como atalho e o menu como caminho garantido. O mesmo guia da Apple pede outras formas de fazer a ação, como um comando de menu para mover o item.

A segunda diferença é o teclado. O NN/g (em inglês) trata a acessibilidade do gesto pelo teclado: a alça recebe foco com Tab, a barra de espaço pega o objeto e as setas movem. As WCAG separam as duas coisas. A página do critério 2.5.7 (em inglês) diz que um caminho por teclado não cumpre o critério sozinho, porque quem usa tela de toque pode não ter teclado. O teclado é cobrado por outros critérios, o 2.1.1 e o 2.1.3.

Onde usei isso

A Vexor instala assistentes de IA no WhatsApp, e o painel que vem com o assistente tem um quadro de clientes por nível de interesse: novo, interessado, quente, agendado, cliente ou frio. Mudar de etapa é arrastar o cartão para outra coluna. O estágio muda na hora, e a mudança fica registrada no histórico, com a data.

É o terreno em que o gesto ajuda: poucas colunas, todas à vista, e um movimento que conta a mudança sozinho. O registro com data responde a uma parte do que as fontes pedem, que é deixar visível o que mudou e quando.

Esse quadro também é o exemplo do próprio W3C, então a regra vale para ele. Mudar de etapa precisa funcionar ainda com um clique ou um toque simples, como um menu de etapa no cartão. Para a parte do teclado, o texto sobre HTML semântico mostra o que o navegador já entrega pronto.

O erro comum

O deslize mais frequente é fazer do arrasto o único jeito de agir. Na demonstração, com mouse e tela grande, ele parece natural. Falha com o dedo no celular, numa lista longa e com quem não consegue segurar e mover ao mesmo tempo. O arrasto pode ficar como atalho. O caminho garantido é um botão ou um menu que faz a mesma coisa com um clique.