FORMS 101
Pedro Custódio
CodeBits 2008
Lisboa, Portugal

Quem sou
eu? :)
Pedro Custódio
http://blog.centopeia.com
http://sapo.pt
Responsável pela Qualidade e
Usabilidade

Disclaimer
‘Web Form Design’ by
Luke Wroblewski (aka LukeW)
http://www.rosenfeldmedia.com/books/webforms/
A maioria das imagens presentes nesta apresentação são
extraídas do livro e podem ser consultadas em:
http://www.flickr.com/photos/rosenfeldmedia/sets/ 72157604272550634/

Formulários, hein?

5
Os formulários são essenciais em quase tudo o que fazemos
online:
e-commerce
comunidades
etc.

...no entanto
quase todos funcionam como
verdadeiras barreiras

7
entre nós e o utilizador
photo by http://flickr.com/photos/thetruthabout

8
Desenhar
Formulários

9
Quem preenche
formulários?

Todos odiamos formulários...

11
É preciso estabelecer um
diálogo com os utilizadores

12
Num diálogo real, existem alguns aspectos que fazem
com que uma conversa seja um sucesso ou insucesso
em termos de comunicação:
pistas visuais (dadas por cada interlocutor durante uma
conversa);
atenção aos detalhes (abrir uma caixa apple por exemplo,
receber um presente, etc.)
no entanto online tudo se resume a um...

Formulário...

14
mas então como
garantir que obtemos
um bom formulário?

15
Testes de Usabilidade +
Estudos etnográficos +
Atenção no apoio ao cliente +
Análise de trafego +
Eye tracking +
e muito cuidado com convenções WEB. =
Um bom formulário!

16

17
A ter sempre em mente!
Minimizar desconforto;
Indicar o caminho para o sucesso;
Ter em conta o contexto;
Consistência na comunicação;
os utilizadores preocupam-se SEMPRE com o que lhes é
perguntado!

18
Organização de
formulários

19
Organizar um formulário
Criar grupos lógicos para os vários campos;
separar grupos visualmente;
estruturar o formulário como se de um diálogo se tratasse;
considerar adiar algumas perguntas;
cuidado com convenções (ex: *);
considerar a partição do formulário por páginas/tabs.

Organizar um
formulário
Criar grupos lógicos para os
vários campos;
separar grupos visualmente;
estruturar o formulário como se
de um diálogo se tratasse;
considerar adiar algumas
perguntas;

Organizar um
formulário
cuidado com convenções (ex: *);
considerar a partição do
formulário por páginas/tabs.

22
Formulação de perguntas
ao formular as questões ter sempre em conta os seguintes
critérios:
cortar
manter
adiar
explicar

23
A caminho do sucesso!

Nomes
Títulos dos formulários
Introdução ao preenchimento/
formulário
Títulos dos grupos
Nomes/Etiquetas dos campos

Página inicial
Quando o processo é complexo e
demorado e envolve um conjunto
não trivial de passos/dados...
... é importante criar uma página
de introdução ao formulário onde
são indicadas todas as
necessidades e restrições
aplicáveis ao formulário.

26
Linhas Visuais

27
Linhas Visuais

Minimizar
Distracções
Se o processo é complexo e
sujeito a múltiplos problemas, a
ideia deve ser de minimizar as
distracções do objectivo final

29
Indicador de Progresso

Etiquetas

31
Posicionamento
topo
direita
esquerda
dentro dos campos

32
Posicionamento
topo
direita
esquerda
dentro dos campos

33
Posicionamento
topo
direita
esquerda
dentro dos campos

34
Posicionamento
topo
direita
esquerda
dentro dos campos

35
Posicionamento
topo
direita
esquerda
dentro dos campos

36
Regras para etiquetas
serem sucintas, claras e consistentes em termos de escrita
se o objectivo é:
reduzir tempo de preenchimento -> etiquetas sobre os campos
encurtar o formulário -> etiquetas alinhadas à direita
varrimento visual do formulário -> etiquetas à esquerda
em condições extremas de espaço, usar etiquetas dentro dos
próprios campos, com cuidado para não quebrar interacção.

37
Campos

38
Tipos de
Campos

Tamanho dos Campos

Campos
Obrigatórios vs
Opcionais
Evitar sempre que possível a utilização
de campos opcionais, e quando tal não
for possível, adicionar uma legenda
para clarificação da terminologia usada.

Desenho
estrutural de
Campos
É importante ter em conta aspectos
como a relação entre campos, o seu
agrupamento visual e funcional, as
suas interdependências...

42
Campos Inteligentes

43
Acções

44
Acções Primárias vs
Secundárias

45
Posição/
Formato

46

47

48

49
Formato

50
Progresso

51
Ajuda

KIS
quanto menos texto
melhor...
ser conciso!

53
Explicar

Inline
se necessário usar ‘inline
help’ nos pontos onde os
utilizadores pareçam ter
dúvidas ou incertezas de
preenchimento.

Validações
Inline
usar com cautela, de modo
a garantir consistência visual
e funcional.

Extras
Em caso de ser necessário
uma ‘ajuda’ mais longa/
complexa, criar uma página
específica de ajuda ao
preenchimento.

57
Mensagens de
Erro e Sucesso !

58
Mensagens
As mensagens, quer sejam de erros, ou sucessos nunca
são fáceis...
nem de ler... nem de as escrever!
São um elemento crítico na avaliação subjectiva dos
utilizadores sobre a experiência de utilização e de
usabilidade de um formulário.

59
1º passo...
Inventariar todas as possíveis mensagens de um serviço,
como e onde estas são usadas e a determinar a
quantidade de mensagens
permite simplificar, re-utilizar e garantir consistência
entre mensagens!

60

61
Tipos de Mensagens
conhecer os diferentes tipos de mensagens é adaptá-las
às necessidades dos utilizadores:
erro
sucesso
marketing
educacionais
...

62
Mensagens de ERRO!
só devem surgir quando:
1. o utilizador introduziu algo que o sistema não consegue ‘digerir’
e como tal não é possível continuar!
2. Algo de MUITO errado aconteceu e o utilizador não consegue
prosseguir.
tudo o resto NÃO são mensagens de erro!

63
Regras para mensagens
Utilizar um layout uniforme para mensagens
Oferecer mensagens de erro dentro do contexto onde estas
podem ser resolvidas
Oferecer alternativas perante os problemas
Indicar claramente quando algo que depende do utilizador é
impeditivo de continuar

64
Regras para mensagens
Quando existe mais do que um erro, usar uma mensagem
genérica no topo do formulário com uma lista de todos os
erros presentes.
Indicar visualmente quais os campos que apresentam erros
Reservar o texto a vermelho e ícones de alerta para as
mensagens de erro
Indicar clara e de forma explícita o sucesso de uma acção

65
Regras para mensagens
Revelar problemas o mais cedo possível e não somente no
final de todo o formulário;
Evitar páginas de sucesso/erro sem saídas

66
Envolvimento
progressivo!

67
Colocar as questões
certas !

68
Um longo namoro...

69
Perguntas?

Saber mais?
‘Web Form Design’ by
Luke Wroblewski (aka LukeW)
Desconto 15% - usar código ‘CUSTODIO’
http://www.rosenfeldmedia.com/books/webforms/
A maioria das imagens presentes nesta apresentação são
extraídas do livro e podem ser consultadas em:
http://www.flickr.com/photos/rosenfeldmedia/sets/ 72157604272550634/

71

72
Obrigado ;)