Curso Web Design | Dicas para a criação de Formulários

Link to Blog do Curso Web Design - Microcamp SP

Posted: 04 Sep 2014 05:26 AM PDT

Se você é ou pretende ser um desenvolvedor de páginas web, precisa estar atento a vários detalhes para que a experiência do usuário seja a mais satisfatória possível. Desde a sua aparência até a sua funcionalidade, existem regras básicas que podem auxiliá-lo a construir sites melhores e mais eficientes.

O que nos leva a questão dos formulários. Todo site que se preze precisa de um formulário, certo? Sejam simples ou complexos, sua função é capturar as informações dos usuários para armazenamento ou simples consulta. Podemos utiliza-los para receber comentários, pesquisas de um conteúdo, cadastro de informações, contato com os administradores do site ou ainda usa-los para o acesso a páginas restritas. Não importa qual a finalidade, é fácil concluirmos que eles são uma parte fundamental de um site.

Portanto, no post de hoje iremos observar algumas dicas básicas e importantes na hora de criar seus formulários para que eles tenham uma aparência mais bonita e uma funcionalidade mais de acordo com as expectativa de seus utilizadores.

Seja intuitivo na hora de criar seus formulários

Como você pode imaginar, a grande maioria dos usuários não gosta ou não liga muito para formulários. Geralmente, boa parte das pessoas os vê até mesmo como um verdadeiro entrave para alcançar seus objetivos.

Lembre-se daquele momento em que você foi clicar em um conteúdo de seu interesse em um determinado site e… deparou-se com um formulário de cadastro para poder visualizar o conteúdo! Ou ainda quando foi clicar em uma determinada mercadoria em um site de compras online e é confrontado a criar um cadastro para efetuar a compra. Se você se recordou de quais foram as sensações que sentiu nesses momentos (e reconhece que elas não são necessariamente agradáveis) lembre-se que seus usuários terão as mesmas experiências que você. Nesse caso, o melhor é criar formulários o mais descomplicados possível. A ideia aqui é unir objetividade através da simplicidade no design sem comprometer seu funcionamento. Use usa intuição e experiência e deixe que elas o guiem para alcançar os seus objetivos.

Simplicidade é chave

Se o seu público-alvo não for muito experiente para realizar esse tipo de tarefa, o melhor é seguir a abordagem tradicional, com rótulos bem definidos ao lado dos campos, no início das linhas. A vantagem desse tipo de alinhamento é que ela facilita a leitura tradicional, com o movimento dos olhos da esquerda para a direita e conduz o usuário para os conteúdos que devem ser preenchidos.

Agora, se o site que você esta criando é direcionado para usuários mais experientes (e você faz questão de enfatizar isso com muitas informações a serem preenchidas, por exemplo), colocar o rótulo dentro do campo pode ser uma escolha interessante. Até porque se houverem realmente muitos campos a serem preenchidos, você terá um problema de espaço. E colocar o rótulo dentro do campo pode ser um recurso para ganhar mais espaço nesses casos.

Menos é mais

A velha máxima do design continua valendo aqui: existem formulários que são um verdadeiro pesadelo devido a existência de tantos campos opcionais. É claro que existem usuários que tem a paciência e o zelo de preencher tudo, mas sabemos que uma grande parte deles simplesmente ignora o preenchimento dessas informações. Portanto, evite adicionar campos desnecessários. Afinal, quanto mais campos o usuário precisar preencher em um formulário, é menos provável que ele o faça.

Uma boa saída para este dilema – já que as informações opcionais podem ser relevantes para revelar o perfil do usuário – é oferecer um segundo formulário para preenchimento alguns dias após o cadastro básico inicial. O Facebook utiliza um recurso muito parecido: se um usuário não preenche as informações sobre o perfil em um primeiro momento, surgem "balões" convidando-o a fazê-lo em uma futura sessão.

Padronize o tamanho dos campos com CSS

Formulários com tamanho dos campos irregulares promovem um grande desconforto visual – além de serem esteticamente muito feios. Como não é possível controlar seu tamanho somente através da "size" dos inputs, nada melhor do que arrumar isso com CSS.

Desta forma você evita diferenças que existem entre os tamanhos dos campos e até as diferenças que possam surgir causadas entre diferentes navegadores para deixar tudo mais organizado.

Cuide do espaçamento

A unidade e a proximidade são dois elementos fundamentais do design (já vimos isso aqui no blog antes, certo?). Cuidar dos espaços em branco pode adicionar fluidez ao design do seu formulário. Adicionar um espaçamento padrão em todos os seus campos podem ajudar na legibilidade das palavras e criar uma sensação de harmonia no todo. Você também pode controlar esses espaçamentos com CSS, através da atribuição de padding para os campos.

Crie grupos de informações relacionadas nos seus formulários

Procure criar grupos onde possa reunir as informações que estejam relacionadas. Isso auxilia a visualização dos blocos, melhorando a percepção de como os campos devem ser preenchidos e melhora sensivelmente a leitura. As informações mais básicas (nome, endereço, telefone e e-mail) sempre devem estar próximas umas das outras ou mesmo em destaque em uma caixa. Você pode utilizar a propriedade <fieldset> para agrupar campos. Com ela, será criada uma linha em torno do grupo, destacando-o. É especialmente indicada em formulários mais extensos.

A sintaxe da tag <fieldset> é:

<fieldset>  Conjunto de campos que desejamos agrupar  <input...>  </fieldset>

Você também pode usar uma tag <legend> para nomear o grupo. Com ela, será criada uma legenda dentro das linhas criadas pelo <fieldset>.

Veja o exemplo a seguir:

<fieldset>  <legend>Faça seu Login</legend>  <label for="email">E-mail: </label>  <input type="text" name="email"> <br />  <label for="senha">Senha:  </label>  <input type="password" name="senha">  </fieldset>

Veja o resultado:

Utilize o Foco dentro dos campos

Um dos recursos mais práticos e que podem auxiliar o usuário durante o preenchimento é o Foco. Com ele, podemos criar uma maneira de chamar a atenção do utilizador quando ele clicar dentro de um campo ou ainda mudar de um campo para outro. É indispensável principalmente no caso das pessoas que utilizam a tecla TAB para percorrer os campos dentro de um formulário.

Veja o exemplo a seguir:

input[type=text]:focus, textarea:focus{border:1px solid #000;}

Utilize ícones em seus formulários (mas com moderação)

Colocar ícones ao lado dos rótulos dos campos pode ser uma boa ideia para criar um apelo decorativo para o formulário. Mais do que isso, uma representação simbólica do campo pode ser utilizada para um reconhecimento visual rápido por parte do usuário. Mas não abuse. Tenha certeza que eles não passam uma mensagem confusa e atrapalhem o visual em vez de ajudar.

Não esqueça também de dar uma atenção especial à aparência dos botões do formulário. É fundamental que eles se sobressaiam com relações aos elementos do site e que seu objetivo seja claramente definido.

Conclusão

Dedique atenção especial na criação de seus formulários, seja na parte visual ou no seu funcionamento. Saber conduzir o utilizador de forma precisa e clara pode ser de grande valia para capturar com sucesso as informações que deseja obter.

Espero que tenham apreciado as dicas, não deixem de curtir e compartilhar os textos com seus amigos e deixar sua opinião nos comentários. Ela é importante para que possamos melhorar cada vez mais a qualidade de nossos trabalhos.

Bons estudos e até o próximo post!

Páginas

quinta-feira, 4 de setembro de 2014