Design da interface do usuário para solicitar itens na lista
Qual componente/design de interface do usuário você usaria para solicitar itens em uma lista (uma tabela com os botões mover para cima/baixo)?
Arrastar e soltar itens é provavelmente o melhor para a maioria das UIs. Infelizmente, é difícil tornar esse recurso detectável. Uma área "agarradora" próxima a cada item ajuda. O feedback visual ao arrastar e a rolagem automática quando um item é arrastado para um Edge são necessários em uma boa interface de usuário de classificação de arrastar e soltar.
É bom fornecer move up e move down botões, além de arrastar e soltar. Não existe um ícone/estilo universal e imediatamente reconhecido. Para interfaces usadas com pouca frequência, o tempo gasto com os botões um tanto desajeitados pode ser menor que o tempo para o usuário descobrir a funcionalidade mais eficiente de arrastar e soltar.
Além disso, com o recurso de arrastar e soltar, há muitos detalhes sutis que são frustrantes para o usuário se não forem feitos corretamente (por exemplo, rolagem automática). Os botões são ineficientes no uso frequente, mas óbvios, fáceis de usar e muito mais fáceis de codificar.
Arrastar e soltar pode ser considerado 'manipulação direta', onde cliques diretamente na lista têm efeito, vs 'manipulação indireta', na qual você tem um botão separado ou outra ação que entra em vigor na lista.
Dependendo do que está na sua lista, ambos podem ser apropriados.
Faça o que fizer, lembre-se dos sábios conselhos de Os 10 principais erros de design de aplicativos de Jakob Nielsen :
Projetos de arrastar e soltar são geralmente os piores criminosos quando não é aparente que algo possa ser arrastado ou onde algo possa ser descartado. (Ou o que acontecerá se você arrastar ou soltar.) Por outro lado, caixas de seleção simples e botões de comando geralmente tornam muito óbvio o que você pode clicar.
Portanto, se você fornecer uma capacidade de manipulação direta em uma lista, forneça dicas visuais como:
- área visual 'grabber' (série de pontos ou linhas) que sugere 'grabbability'
- mudança de curso
- feedback à medida que você se move. Veja esta demonstração , embora observe como meu ponto (1) não é suportado e, portanto, não é óbvio que essas listas são classificáveis.
Eu concordo que a manipulação direta de elementos provavelmente é a preferida agora.
Não obstante as acusações de que 37 sinais são um pouco arrogantes, o Basecamp é um aplicativo eminentemente utilizável. Quase todas as listas desse aplicativo permitem a reordenação de elementos por meio de arrastar e soltar.
Primeiro, você precisa clicar para entrar no modo de pedido novamente, através de um link de texto no canto superior. Depois, há uma pequena imagem que sugere claramente 'capacidade de agarrar', na qual você clica e segura e depois manipula para mover o item. Ver anexo.
Os botões para cima/para baixo estão OK, mas a tendência é operar diretamente nos dados, ou seja, poder clicar (ou tocar) no item e movê-lo. Um exemplo de destaque é a fila do Netflix. Isso pode funcionar mesmo ao selecionar vários itens na lista.
Minha preferência é usar o recurso de arrastar e soltar com seletores de arrasto claros que aparecem na passagem do mouse. Em nosso aplicativo, usamos uma seta dupla para cima/baixo que aparece para indicar que o item pode ser reordenado.
Simplesmente alterar o cursor é bom o suficiente para uma multidão de entendidos em tecnologia, mas para aplicativos de uso geral você deseja algo mais óbvio.