web form

Web FormWeb FormLourdilene SouzaLourdilene Souza

Rótulos principais alinhadosRótulos principais alinhados

Quatro fixações visuais e apenas uma direção visual (para baixo)

Oito fixações visuais, direções: esquerda - direita, esquerda - direita, esquerda - direita, esquerda - direita

Alinhamento de rótuloAlinhamento de rótulo

41% dos sites avaliados utilizam alinhamento à direita

30% usam rótulos alinhados em cima

29% usam rótulos alinhado à esquerda

Etiquetas e espaços entre os Etiquetas e espaços entre os camposcampos

Qual o valor que estava marcado antes de ser clicado ?

Dê espaço para os camposDê espaço para os campos

Formulário de cadastro Formulário de cadastro FacebookFacebook

Antigo formulário de cadastro Novo formulário de cadastro

Campos com etiquetas não perdem referência do assunto.

Leitura vertical

Indicar claramente os campos Indicar claramente os campos obrigatórios ou opcionaisobrigatórios ou opcionais

Qualquer pessoa que tenha preenchido os formulários web ao longo dos anos pode entender o significado do asterisco ao lado de um rótulo, mas e os usuários menos experientes?

Áreas afins Grupo com Áreas afins Grupo com fieldsetsfieldsets

Dividir seções do formulário para melhor compreensão e apresentação

ExemploExemplo

Grupo de informações definidasApenas um campo opcional

Ações primárias vs secundáriasAções primárias vs secundárias

Etapa de preenchimento devidamente identificadaBotão relacionado à ação primária com maior destaque visual

Referências

UxDesignhttp://uxdesign.smashingmagazine.com/

Obrigada.Obrigada.lourdilene.souza@gmail.comlourdilene.souza@gmail.com

Facebook.com/ait-proegFacebook.com/ait-proegSlideshare.com/ait-proegSlideshare.com/ait-proeg