Como visualizar a possibilidade de arrastar e soltar?

Usei um pouco de textura "agarrável" nas coisas para mostrar que é arrastável. Aqui está a textura do Gmail:

Vi uma apresentação de Sean Kane de Netflix há alguns anos atrás, na qual ele descreveu como a fila de DVD funciona. Você deve estudá-lo se puder (se tiver uma conta ou conhecer alguém que o faça).

Alguns pontos a serem observados:

• Ele disse que o cursor de movimentação padrão não testou muito bem, então eles mudaram para um cursor de captura , conforme sugerido por GoodEnough .

• O recurso de arrastar e soltar é um aprimoramento progressivo. Você ainda pode classificar preenchendo caixas de texto na coluna de ordem da lista. Muitos usuários nunca percebem que o recurso de arrastar e soltar está disponível.

• Não existe uma alça de arrasto. Você pode iniciar o arrasto com o mouse em qualquer lugar da linha (exceto onde outro objeto, como um link, estiver em primeiro plano) .

Há um ícone padrão de três linhas horizontais, uma em cima da outra, que implica que os itens podem ser arrastados e soltos.

Implica "fricção" ou "alça" e é um pouco semelhante às linhas diagonais no canto inferior direito das janelas ou caixas de texto que permitem redimensioná-las.

O cursor de movimentação é comumente usado com itens arrastáveis ​​em aplicativos da web.

css:

cursor:move;

Eu sugiro que você use a mãozinha pequena (aberta ao passar o mouse, fechada ao arrastar). Tenha algum tipo de ícone emocionante (uma alça) que se parece com algo que pode ser agarrado (no Gmail, é um par de colunas de pontos (4 pontos por coluna).

Sugiro também que você adicione uma pequena animação mostrando o comportamento de novos usuários (ou usuários existentes, se for um novo recurso), mas não mostre constantemente a animação sempre que um usuário estiver no seu aplicativo.

Arrastar é uma chatice. Depois de terminar recentemente de renovar algumas UIs de arrastar e soltar, cheguei à conclusão de que na próxima vez as alterarei para uma espécie de "clique e solte". Tenha um widget em cada item que você clicar para selecioná-lo para mover. Então você clica para onde deseja que ele vá. Isso parece estar indo bem nos testes até agora.

Ao mover o cursor sobre objetos arrastáveis, ele deve ser alterado para uma mão aberta. Quando um objeto é agarrado, ele deve ser alterado para uma mão que o agarra. Ao pegar um objeto, as zonas de lançamento permitidas podem ser enfatizadas a partir de outro plano de fundo (ou seja, através de sombreamento ou coloração).

O símbolo Universal Whirlpool pode ser ?.

O aplicativo de área de trabalho com o qual trabalho permite que arquivos fora dos aplicativos possam ser arrastados. Certos aplicativos que permitem arrastar e soltar geralmente têm uma área de queda ou um painel de conteúdo; como uma lista de reprodução em um music player. A usabilidade de arrastar e soltar é uma divulgação progressiva, mas alguns usuários nunca a acessam intuitivamente. Nesses casos, o melhor que eu poderia pensar em anunciar a área de lançamento é ter um fundo de símbolo de hidromassagem.

Estou chegando a esse problema com um aplicativo de desktop. A melhor solução que posso encontrar no momento é ter uma seta em foco, que simplesmente aponta para onde o objeto pode ser arrastado, com algum texto dizendo arrastar e soltar, ou similar.