O documento fornece diretrizes para o projeto de formulários web, incluindo alinhar rótulos principalmente à direita, usar espaçamento entre campos, agrupar seções relacionadas, destacar campos obrigatórios e ações principais, e dividir o formulário em etapas claras.

1. Web Form
Lourdilene Souza

2. Ró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

3. Alinhamento de rótulo
41% dos sites avaliados utilizam alinhamento à direita
30% usam rótulos alinhados em cima
29% usam rótulos alinhado à esquerda

4. Etiquetas e espaços entre os
campos
Qual o valor que estava
marcado antes de ser
clicado ?
Dê espaço para os campos

5. Formulário de cadastro
Facebook
Campos com etiquetas não
perdem referência do assunto.
Leitura vertical
Antigo formulário de cadastro
Novo formulário de cadastro

6. Indicar claramente os campos
obrigató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?

7. Áreas afins Grupo com
fieldsets
Dividir seções do formulário para melhor compreensão e
apresentação

8. Exemplo
Grupo de informações definidas
Apenas um campo opcional

9. Ações primárias vs secundárias
Etapa de preenchimento devidamente identificada
Botão relacionado à ação primária com maior destaque visual

10. Referências
UxDesign
http://uxdesign.smashingmagazine.com/

11. Obrigada.
lourdilene.souza@gmail.com
Facebook.com/ait-proeg
Slideshare.com/ait-proeg