A verdade dói

Hoje meu chefe recebeu um email dramático de uma cliente da agência em que trabalho. Ela não conseguiu usar o esquema de navegação baseado em arrastar-e-soltar. Não é culpa dela, é culpa minha. Fiz esse site há mais de dois anos, minha carreira tinha acabado de começar. Primeiro site em Flash, experimentei até não poder mais. Os lampejos criativos foram tantos que ganhei um monte prêmios pelo conceito diferente que havia criado. O layout não era lá essas coisas, mas esse roteiro de paródia à mídia me rendeu muitos elogios.

Logo que saiu, a agência ficou toda prosa. Sempre que vinham clientes aqui, era pura gargalhada vindo da sala do chefe. Dava certo porque era meu patrão que arrastava os ícones. Diversas vezes, observei amigos e clientes se batendo para arrastar aqueles ícones malditos até o bebê. Mesmo com a mensagem dando a ordem, alguns não entendiam como fazer, afinal arrastar-e-soltar não é um padrão de navegação na Web.

Leia os emails e chore junto comigo:

From: Solange
Subject: Atenção
" Arraste o ícone e solte no bebê"..... não funciona...

From: Luiz
Subject: Re: Atenção
Obrigado pela atenção, mas aqui esta funcionando....
Você tem que arrastar o ícone com o mouse apertado até o bebê e soltar nele.

From: Solange
Subject: Atenção
Oi Luiz
talvez vc se aborreça com a insistência, massss quando eu arrasto o ícone até a cabeça do bebê e solto nele ( o ícone não sobrepõe a imagem do bebê, tá certo? )..... a barra diz que está Concluído e não acontece nada. Como sei do teu interesse em ter pessoas, digo: muitas pessoas, visitando teu endereço insisto na informação. ok?
abraços e bons negócios

Hoje, minha satisfação não vem mais dos prêmios ou do sorriso do chefe ou do meu cliente. Logo que comecei a ler sobre usabilidade, entendi de cara o que o Lilcoln disse nesse precioso comentário. O website da DC2 está começando a ser reformulado e não terá mais arrastar-e-soltar. Só espero que ele mantenha esse humor irreverente que lhe valeu tantos elogios.

Para me redimir de meu erro, publico abaixo o trecho do meu livro que trata desse movimento. Palhinha especial para meus leitores fiéis.

Drag´n Drop

É o movimento do mouse que consiste em clicar num objeto e manter pressionado o botão enquanto move o mouse, e finalmente soltá-lo. Arrastar-e-soltar, em português.

Se em algum momento, você se sentir tentado a usar esse movimento para tornar mais próximo do real a interação entre os objetos, pense duas vezes. Primeiro poque é preciso explicitar que deve ser assim a interação, já que o normal é clicar nas coisas para elas acontecerem. Segundo porque é um movimento que exige perícia e paciência do usuário. Ele pode, sem querer, diminuir a pressão sobre o botão do mouse e errar. O mouse pode colidir com algum outro objeto na mesa ou o mousepad pode acabar bem na hora e o usuário erra de novo. Para ser cuidadoso, o usuário move o mouse mais devagar do que o normal.

Fora esses aspectos objetivos, o arrastar-e-soltar em geral é visto de forma negativa. Um estudo realizado com crianças revelou que elas preferem o apontar-e-clicar ao invés do arrastar-e-soltar. Metade das crianças jogaram a versão do clássico jogo The Incredible Machine baseada no apontar-e-clicar e a outra metade, no arrastar-e-soltar. As crianças do primeiro grupo resolveram mais quebra-cabeças e foram mais rápidas do que as do segundo grupo.

A vantagem do apontar-e-clicar é que ele decompõem o movimento em duas partes. Para crianças, o esforço físico do arrastar-e-soltar, em geral, não compensa pelo ganho conceitual. Mas, para a audiência que possui boa experiência de uso do computador, o movimento pode ser útil em aplicações complexas. A melhor solução para todos os casos é tornar o arraste opcional. Arrastar um item de uma loja virtual até o carrinho de compras pode ser interessante para algumas pessoas dispostas ao esforço adicional. Para outras, isso pode ser dispensável. Então, em algum lugar proeminente da tela há uma instrução: "arraste os itens até o carrinho ou clique no botão comprar". A interface deve dar sempre a oportunidade do usuário escolher o método para realizar a tarefa que mais lhe agrada.

Se só existe um destino possível para o arraste, ele não apresenta grandes vantagens sobre o apontar-e-clicar. Mas, seguindo a idéia da loja virtual, se houvesse dois destinos (o carrinho de compras e a lista dos itens desejados, por exemplo), o apontar-e-clicar exigiria dois botões desenhados próximo a cada um dos itens, o que aumentaria o ruído visual. Melhor somente duas caixas de destino no canto da tela e os itens para serem arrastados. Quanto mais destinos possíveis, mais o arrastar e soltar é útil.
Quando o assunto é lazer, o arraste pode enriquecer muito a metáfora. Imagine uma loja virtual de roupas. Como não é possível prová-las, o consumidor fica numa situação complicada quando quer comprar peças de roupa avulsas. Um provador virtual serviria para o consumidor testar se as peças escolhidas previamente combinam entre si. Um manequim no centro e as roupas dispostas nos cantos. O usuário pode trocar, ajeitar ou simplesmente bagunçar tudo através do arraste. Não é como ir pessoalmente à loja, mas é mais parecido do que ver só uma foto de cada peça separadamente.

Se você for incluir o arraste em seu projeto, siga as seguintes dicas:

• avise numa mensagem proeminente que o arraste é possível ou necessário. Para determinados tipos de audiência, pode ser útil uma breve animação explicando como é o processo
  
• mude o estado do objeto arrastado a cada etapa do movimento: apontar (onRollOver), clicar (onPress) e soltar (onRelease)
  
• diminua ao máximo a distância entre o item e o destino
  
• aumente as proporções do destino ao máximo possível. Seu tamanho mínimo é igual ao tamanho do maior objeto arrastado
  
• aceite uma margem de erro. Se o objeto for solto próximo ao destino, trate como se tivesse sido na mosca
  
• caso haja algo mais entre o destino e os objetos arrastados, não permita que eles fiquem estagnados no lugar onde forem soltos, à exceção do destino. Isso pode causar uma bagunça tremenda, melhor voltá-los à posição antes do arraste
  

• Usabilidade do mouse em interfaces web
• Movimento do mouse rastreado
• Software para projetar a navegação

Você merece.

Assine nosso conteúdo e receba as novidades!

Atualizado com o Movable Type.

Alguns direitos reservados por Frederick van Amstel.

Apresentação do autor | Website internacional | Política de Privacidade | Contato