web form
TRANSCRIPT
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
[email protected]@gmail.com
Facebook.com/ait-proegFacebook.com/ait-proegSlideshare.com/ait-proegSlideshare.com/ait-proeg