Desenvolvimento

3 jun, 2015

Os cliques duplos na Web

Publicidade

Aqui está um recurso de usabilidade para a web: desativar os cliques duplos em links e envio de formulários.

Antes que você pense que eu sou um idiota completo, deixa eu tentar colocar algum sentido na ideia.

O clique duplo fora da Web

Em todo o sistema operacional, seja ele Windows ou Mac OSX, o comportamento padrão para navegar entre diretórios é clicando duas vezes sobre eles. Somos treinados para clicar duas vezes qualquer coisa.

Quer abrir um aplicativo? Clique duas vezes no ícone. Quer abrir um e-mail? Clique duas vezes no assunto. Clique duplo por toda parte.

Exceto na web. A web é um lugar de clique único.

O dobro de cliques, o dobro de diversão

Sabemos que só devemos clicar uma vez em um link. Sabemos que só devemos clicar em um formulário de envio uma vez. Mas, às vezes, acabamos clicando duas vezes. Não que a gente faça intencionalmente, mas os nossos cérebros são programados para darmos um clique duplo em tudo.

Para técnicos como nós, os cliques duplos acontecem por acidente. Mas, para pessoas menos técnicas, também conhecidas como o homem ou a mulher comum, os cliques duplos acontecem o tempo todo. O usuário não tem uma formação técnica, de modo que ele não sabe que a Web funciona com cliques únicos. Ou talvez até saiba, só que não vê o mal em fazer um clique duplo.

Mas o comportamento padrão do navegador é aceitar a entrada do usuário. Por mais tolice que seja.

Se você clica acidentalmente duas vezes em um formulário de envio, você irá enviá-lo duas vezes. É simples assim.

10.0.1.1 - - [18/Apr/2015:00:37:06 +0400] "POST /index.php HTTP/1.1" 200 0 
10.0.1.1 - - [18/Apr/2015:00:37:07 +0400] "POST /index.php HTTP/1.1" 200 0

Se você clica duas vezes em um link, ele vai abrir duas vezes.

10.0.1.1 - - [18/Apr/2015:00:37:06 +0400] "GET /index.php HTTP/1.1" 200 9105 
10.0.1.1 - - [18/Apr/2015:00:37:07 +0400] "GET /index.php HTTP/1.1" 200 9104

O problema é mais ou menos resolvido com servidores rápidos. Se a página carrega rápido o suficiente, a próxima já pode ser baixada/renderizada, aí o segundo clique do duplo clique atingirá um tipo de vazio, o limbo entre a página atual e a próxima.

Para os servidores mais lentos, que simplesmente levam mais tempo para gerar uma resposta, um clique duplo ainda iria acontecer e reenviar ou reabrir um link.

Soluções alternativas

Eu entrei recentemente com um pedido de recurso nos nossos devs com um problema semelhante.

Se você, acidentalmente, (e todos nós fazemos isso) clica duas vezes em um formulário de envio, vai enviá-lo duas vezes. Isso significa que qualquer ação que foi solicitada é executada pelo servidor duas vezes.

A correção do lado do cliente é relativamente simples: desativar o botão do formulário de envio após o primeiro submit ser registrado. Existe um trecho simples de jquery que pode resolver isso para você.

$(document).ready(function(){
    $("form").submit(function(){
        setTimeout(function() {
            $('input').attr('disabled', 'disabled');
            $('a').attr('disabled', 'disabled');
        }, 50);
    })
});

Do lado do servidor, uma correção poderia ser implementar algum tipo de limitação de velocidade ou proteção contra duplo envio num prazo determinado. Do lado do servidor, esse é um problema muito mais difícil de resolver.

É 2015, por que isso é algo a se considerar?

Solução proposta

Eu não posso pensar em uma única razão pela qual algo como um formulário de envio deva ter que ser executado duas vezes como resultado de um clique duplo.

Para um servidor de resposta lenta, é aceitável para um usuário clicar no “enviar” novamente depois que alguns segundos se passaram e nenhum feedback foi dado. Por causa da falta de feedback visual que o pedido ainda está sendo processado, a expectativa foi levantada de que o envio de formulário não funcionou.

Assim, o usuário envia novamente, pensando que ele deve ter cometido um erro na primeira tentativa. Se o mesmo envio de formulário tiver sido registrado pelo navegador em menos de 2 segundos, certamente isso deve ter sido um erro e que significaria um clique duplo acidental?

Por que todos os serviços web não implementam uma proteção de clique duplo, quer do lado do cliente ou do lado do servidor, e reinventa a roda? Não seria isso um grande recurso do navegador?

E se um clique duplo for bloqueado por padrão e puder ser ativado novamente, definindo um novo atributo no formulário?

<form action="/something.php" allowmultiplesubmits>
...
<form>

Configurar o atributo allowmultiplesubmits faz com que o navegador permita vários envios para o mesmo formulário na mesma página e, por padrão, o navegador tem algum tipo de flood/repetição/proteção contra clique duplo para evitar isso.

Talvez eu esteja pensando demais sobre isso, e isso não seja um problema. Mas quem é ativo na web já, em algum momento, clicou duas vezes acidentalmente. E acho que nós temos toda a tecnologia disponível para corrigir isso, de uma vez por todas.

***

Mattias Geniar faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: https://ma.ttias.be/double-clicking-on-the-web/