Categorias

Newsletter

  • http://chocoladesign.com/wp-content/uploads/2014/05/cover.png
    Design UX/UI Design

    Otimizando formulários de contato

    Formulários de contato é um recurso muito comum nos websites. Porém, você está usando isso de maneira correta?


    Ter um formulário de contato em uma página na internet é algo bastante comum mesmo antes da web 2.0. Antigamente usava-se muitos campos, a maioria feitos em tabelas (como a maioria dos sites) com uma variedade de preenchimentos. Em alguns casos, parecia mais uma entrevista do que uma forma de contato em si.

    A internet evoluiu, mas a ideia dos formulários não cresceu muito. Vejo por aí muitos sites modernos, recheados de boas doses de UX com efeitos em Javascript e etc e com alguns empecilhos muito ultrapassados, como certos tipos de formulários de contato.

    Hoje em dia, o acesso a informação é tão rápido e direto que acaba dispensando muita coisa. Por exemplo: aqueles famosos dropdowns de “Selecione seu País, seu estado, sua cidade, seu bairro”. E o bloco de informações do tipo “Telefone residencial (obrigatório); telefone celular (obrigatório); telefone de trabalho (obrigatório)”. Com exceções a formulários de cadastro e pesquisa, não se faz necessário o uso destes campos, até porque o contato pela internet hoje é melhor realizado por redes sociais.

    Por que ter um formulário consistente?

    Ou não ter. Em muitos casos, eu acho o uso de formulário altamente dispensável. Por exemplo: se você tem um produto e lança um hotsite ou um “single-page” (com parallax e etc etc etc) direcionado a ele, não é necessário um formulário de contato. É algo muito mecânico sabe? A pessoa que estiver interessada no seu produto e que preencher o formulário de contato desse site promocional, ela no mínimo exigirá uma resposta. Para ela, será mais fácil recorrer ao twitter ou página do facebook. A melhor ação aqui é um campo de cadastro de email, com aqueles avisos automáticos. Isso gera um engajamento muito melhor do que um abandonado formulário de contato.

    bons exemplos de formulários. @ Dribbble

    bons exemplos de formulários. @ Dribbble

    A imagem acima mostra alguns bons exemplos de formulários de contato, todos feitos por designers no Dribbble. O que todos eles têm em comum? A quantia de inputs ou campos. As pessoas não gostam de preencher muitos dados, além de chato e cansativo pode soar duvidoso. Particularmente, eu recuso até mesmo o uso do campo “assunto”, pois é algo que você saberá do que se trata ao ler a mensagem. A menos que você queira filtrar as mensagens: Neste caso, recomendo o uso de um dropdown com setores pré-definidos. Um campo de nome, email e mensagem é suficiente.

    So wrong, dude.

    So wrong, dude.

    A imagem acima mostra um bom exemplo de como há tantos formulários desta forma (ainda). As pessoas nao querem preencher tantos dados sem ter a certeza de que serão respondidas. Como havia mencionado vagamente, um campo de newsletter pode substituir muito bem um formulário de contato, como Mailchimp ou Madmimi.

    Recomendações

    Alguns ajustes visuais podem melhorar a maneira de como seu formulário é visto pelo usuário. Forms com campos padrão, com aquelas bordas feias e sem tamanho padronizado é ruim e pouco atrativo. Campos com descrição fora (ou labels) também é defasado: Existe placeholder e um pequeno javascript para fazer um toggle do conteúdo a ser digitado.

    Pode melhorar, né?

    Pode melhorar, né?

    O exemplo acima não está errado, mas pode ser melhorado. Note que as descrições podem ficar dentro do campo, ficando muito mais limpo. A cor do texto no botão enviar é diferente do texto acima, o que não fica legal. O tamanho do campo de texto também não está nada proporcional e desperdiçando espaço. Ah! Esse botão “apagar”… Sério mesmo?

    Agora sim

    Agora sim

    Eis uma versão bem melhorada do nosso formulário. A cor de todos os textos é a mesma, inclusive no botão. A legenda de cada campo está dentro e é apagada no ato do clique. Note também, que a área de texto não é redimensionável e o mesmo é mais wide, melhorando a distribuição dos elementos em si. Outro fator bacana de UX para manter um bom aspecto visual.

    Refinamentos

    Detalhes como validação de campos é importante. Você não precisa manter todos os campos obrigatórios, mas validar todos eles é interessante, até para evitar spam. Campo de email que não tiver arroba, não aceite! Campos numéricos, que aceitem apenas números e assim por diante.

    Se você elaborou um formulário bacana e quer compartilhar conosco, fale com a gente! você também pode deixar aqui nos comentários, me mandar um tweet ou fazer um sinal de fumaça. E me seguir no Dribbble também.

    That’s all folks!

    FIQUE ATUALIZADO !

    Insira aqui o seu email para receber gratuitamente as atualizações do blog!

    I will never give away, trade or sell your email address. You can unsubscribe at any time.


    • É importante ressaltar que não é recomendado usar o placeholder como única descrição. Uma vez que o formulário está preenchido, é difícil para o usuário determinar o nome original do campo. Existem algumas alternativas para driblar esse problema — por exemplo: http://mozmonkey.com/2013/12/good-ux-for-placeholders-as-field-labels/ — mas, via de regra, um label externo tende a ser a melhor opção pois sempre deixa clara a descrição do campo.

      • Lucas Haas (Jericho)

        Olá Paul, obrigado pelo seu feedback! Entendo seu ponto de vista, mas ainda acedito que o label será deixado no passado em breve. se contar que a era “mobile” e a onda de apps têm aderido essa ideia do placeholder, essa unificação acontecerá sem dúvidas.

        Ps: muito bacana esse link que voce mandou! seria bacana pra mobile tambem, em forma de bubble, acredito eu. hehe. Abraço!

        • Outro modo muito bacana, e ao mesmo tempo moderno, é colocar icones no label, algo que ajuda a identificar o campo, como uma pessoa para o campo nome, um @ para o e-mail, entre outros…. Sem contar que é algo muito fácil de se adaptar no responsivo.

          • Genival Júnior

            Exato!