0
Web Form
Lourdilene Souza
Rótulos principais alinhados

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

Oito fixações visuais, dir...
Alinhamento de rótulo
41% dos sites avaliados utilizam alinhamento à direita
30% usam rótulos alinhados em cima
29% usam r...
Etiquetas e espaços entre os
campos
Qual o valor que estava
marcado antes de ser
clicado ?

Dê espaço para os campos
Formulário de cadastro
Facebook
Campos com etiquetas não
perdem referência do assunto.
Leitura vertical

Antigo formulário...
Indicar claramente os campos
obrigatórios ou opcionais
Qualquer pessoa que tenha preenchido os formulários web ao
longo do...
Áreas afins Grupo com
fieldsets
Dividir seções do formulário para melhor compreensão e
apresentação
Exemplo
Grupo de informações definidas
Apenas um campo opcional
Ações primárias vs secundárias
Etapa de preenchimento devidamente identificada
Botão relacionado à ação primária com maior...
Referências
UxDesign
http://uxdesign.smashingmagazine.com/
Obrigada.
lourdilene.souza@gmail.com
Facebook.com/ait-proeg
Slideshare.com/ait-proeg
Upcoming SlideShare
Loading in...5
×

Web form

384

Published on

Usabilidade para formulários web

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
384
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Web form"

  1. 1. Web Form Lourdilene Souza
  2. 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. 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. 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. 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. 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. 7. Áreas afins Grupo com fieldsets Dividir seções do formulário para melhor compreensão e apresentação
  8. 8. Exemplo Grupo de informações definidas Apenas um campo opcional
  9. 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. 10. Referências UxDesign http://uxdesign.smashingmagazine.com/
  11. 11. Obrigada. lourdilene.souza@gmail.com Facebook.com/ait-proeg Slideshare.com/ait-proeg
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×