Os slides da minha apresentação para o CodeBits 2008 (http://codebits.sapo.pt) sobre desenho de formulários web, basedada no livro ‘Web Form Design’ do
Luke Wroblewski.
Luke kindly provided a discount code for anyone interested in buying the book or his recent webinar "Modern Web Form Design", just use the code 'CUSTODIO' -> http://www.rosenfeldmedia.com/
1. FORMS 101
Pedro Custódio
CodeBits 2008
Lisboa, Portugal
2. Quem sou
eu? :)
Pedro Custódio
http://blog.centopeia.com
http://sapo.pt
Responsável pela Qualidade e
Usabilidade
3. 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/
11. 11
É preciso estabelecer um
diálogo com os utilizadores
12. 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...
14. 14
mas então como
garantir que obtemos
um bom formulário?
15. 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!
17. 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!
19. 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.
20. 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;
24. Nomes
Títulos dos formulários
Introdução ao preenchimento/
formulário
Títulos dos grupos
Nomes/Etiquetas dos campos
25. 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.
36. 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.
40. 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.
58. 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. 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!
61. 61
Tipos de Mensagens
conhecer os diferentes tipos de mensagens é adaptá-las
às necessidades dos utilizadores:
erro
sucesso
marketing
educacionais
...
62. 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. 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. 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. 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
70. 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/