Em uma grade, como reordenar manualmente as linhas?
Desejo permitir que meus usuários reordenem elementos em uma grade - não faça a classificação automática em uma coluna. Eles selecionam qual elemento é o primeiro, qual vem após o outro etc.
Pensei e vi algumas soluções que podem funcionar, dependendo do caso:
- Arrastar e soltar: sexy, mas não funciona para grades longas com rolagem ou paginação. Outra desvantagem é que ela é invisível, talvez você nem saiba que essa funcionalidade está disponível. Finalmente, é necessária alguma destreza. No entanto, pode ser usado para mover mais de um elemento de cada vez.
- Setas para cima/para baixo: compreensível e fácil de usar para pequenos movimentos, mas chato quando você precisa mover o último elemento em primeiro lugar. Além disso, quando você move um elemento algumas etapas, é necessário capturar essa seta após cada movimento. Funciona apenas em um elemento de cada vez.
- Uma coluna de índice: o usuário digita um número indicando a posição do elemento. Útil quando o usuário conhece a posição absoluta desejada. Difícil adivinhar o que acontecerá se um número já existente for inserido. Funciona apenas em um elemento de cada vez.
Fico tentado a combinar duas dessas técnicas, como a coluna de índice + arrastar e soltar, mas tenho medo de acumular os inconvenientes de ambos, em vez de ter os benefícios de ambos.
Quais são as técnicas de reordenação que provaram funcionar?
A Netflix combina três métodos em sua fila. Você pode arrastar e soltar, mas também especificar um número de linha específico ou clicar para movê-lo para o topo:
O que acho interessante sobre a abordagem deles é que eles colocaram o ícone "Início" (circulado em verde) ali mesmo em cada linha, em vez de exigir que o usuário faça uma seleção e clique em algum lugar na parte superior da página, onde a maioria dos aplicativos da web coloca esses ícones ou botões.
No seu caso, eu usaria o recurso de arrastar e soltar, mas colocaria um ícone de engrenagem em cada linha:
Isso permitiria várias ações:
O usuário pode arrastar e soltar uma ou mais linhas
O usuário pode selecionar várias linhas e clicar no ícone de engrenagem para exibir um menu suspenso e executar várias coisas, por exemplo mova a seleção para cima ou para baixo, mova a seleção para um número especificado de linhas para cima ou para baixo (nesse caso, uma pequena caixa de diálogo será exibida), copie, corte etc. etc. Praticamente sem limite.
A primeira coisa que você precisa se perguntar antes de tentar descobrir como fazê-lo é com que frequência os usuários o farão.
Se ele for usado com frequência, eu tentaria criá-lo para que você possa arrastar e soltar e simplesmente rolar automaticamente a página quando o usuário atingir um certo limite.
É uma boa regra geral dizer que, se um usuário precisar fazer algo com bastante frequência e você puder facilitar, mesmo introduzindo algum tipo exótico de interação, faça-o. O usuário está de acordo com a curva de aprendizado, pois os beneficiará posteriormente.
Se não for usado com frequência, eu faria uma seta para cima/para baixo, talvez não esteja saindo, mas está claro.
Eu combinaria setas para cima/para baixo com arrastar e soltar.
Ter que adivinhar algum número, ou ter que resolver isso de antemão, é simplesmente complicado. E, embora as colisões possam e devam ser tratadas no código, por exemplo, simplesmente aumentando todos os números que estão acima ou acima do número digitado, a maioria dos usuários tentará calcular o número correto de antemão, mesmo que apenas por incerteza sobre como uma duplicata ou número errado será tratado.
As setas para cima e para baixo são uma maneira muito mais conveniente de reordenar em distâncias curtas.
Para distâncias maiores e para vários movimentos de itens, é possível adicionar drag'n'drop. Para garantir a usabilidade do drag'n'drop em distâncias superiores a uma única página, a rolagem automática da grade também deve ser implementada. Isso significa que, durante uma operação de arrastar, a grade rolará automaticamente quando você arrastar o mouse dentro de uma certa margem da borda superior ou inferior da grade. Qual é exatamente o que o Windows Explorer faz.
Para aumentar ainda mais, a velocidade de rolagem pode começar devagar e aumentar à medida que a resistência continua na área "sensível à rolagem". Porém, tenha cuidado com isso, além de definir uma velocidade máxima de rolagem: fui levado à fúria pela rolagem automática que acelerou tanto e/ou tão rapidamente que sempre rolava muito além de onde precisava estar.
O CMS Drupal $ tem uma solução relativamente boa para isso, que pode ser escalada para listas de 30 a 50 itens. Não tenho certeza de como seria maior.
A configuração de "blocos" do site é um exemplo - veja a captura de tela abaixo.
- Cada item possui uma alça de quatro direções que pode ser agarrada para operações de arrastar e soltar.
A alça fornece uma "vantagem" visual de que o item pode ser arrastado. - A lista é dividida em seções.
É possível mover um item para uma seção específica, selecionando-o na caixa de combinação mostrada para esse item
A abordagem "arrastar e soltar" é muito mais suave do que ter setas que movem os itens um passo. JIRA faz isso e é realmente trabalhoso colocar as coisas no lugar certo.
Depende de como os usuários estão usando o sistema:
Se o número da linha for significativo (por exemplo, posição na fila), você provavelmente deseja exibi-lo e torná-lo editável.
Se "fazer isso primeiro" for uma ação comum, convém introduzir um botão "mover para cima" (ou mover para baixo).
Se seus usuários, como os atalhos de teclado, adicionam atalhos para cima e para baixo, verifique se a seleção/foco segue a linha quando ela se move, de modo que pressionar o atalho para cima 3 vezes irá mover a linha para cima em 3 lugares.
Você pode adicionar botões para cima/para baixo, meus usuários não gostam muito deles (eles podem ser diferentes)
E, finalmente, Drag & Drop, a maneira favorita de meus usuários para reordenar linhas - no meu aplicativo não há alças de arrastar e os usuários conseguem arrastar e soltar muito bem (seus usuários podem ser diferentes)
E, faça o que fizer, teste-o em usuários específicos e veja como eles gostam.