forms usability 101
TRANSCRIPT
FORMS 101Pedro 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)
A maioria das imagens presentes nesta apresentação são extraídas do livro e podem ser consultadas em:
http://www.rosenfeldmedia.com/books/webforms/
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.
quase todos funcionam como verdadeiras barreiras
...no entanto
7
entre nós e o utilizador
photo by http://flickr.com/photos/thetruthabout
8
Desenhar Formulários
Quem preenche formulários?
9
Todos odiamos formulários...
É preciso estabelecer um diálogo com os utilizadores
11
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...
mas então como garantir que obtemos
um bom formulário?
14
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
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!
17
A ter sempre em mente!
Organização de formulários
18
Organizar um formulário
19
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.
Formulação de perguntas
22
ao formular as questões ter sempre em conta os seguintes critérios:
cortar
manter
adiar
explicar
A caminho do sucesso!
23
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.
Linhas Visuais
26
Linhas Visuais
27
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
Indicador de Progresso
29
Etiquetas
Posicionamento
31
topo
direita
esquerda
dentro dos campos
Posicionamento
32
topo
direita
esquerda
dentro dos campos
Posicionamento
33
topo
direita
esquerda
dentro dos campos
Posicionamento
34
topo
direita
esquerda
dentro dos campos
Posicionamento
35
topo
direita
esquerda
dentro dos campos
Regras para etiquetasserem 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.
36
Campos
37
Tipos de Campos
38
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...
Campos Inteligentes
42
Acções
43
Acções Primárias vs Secundárias
44
Posição/Formato
45
46
47
48
Formato
49
Progresso
50
Ajuda
51
KISquanto menos texto melhor...
ser conciso!
Explicar
53
Inlinese necessário usar ‘inline help’ nos pontos onde os utilizadores pareçam ter dúvidas ou incertezas de preenchimento.
Validações Inlineusar com cautela, de modo a garantir consistência visual e funcional.
ExtrasEm caso de ser necessário uma ‘ajuda’ mais longa/complexa, criar uma página específica de ajuda ao preenchimento.
Mensagens de Erro e Sucesso !
57
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.
58
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!
59
60
Tipos de Mensagens
conhecer os diferentes tipos de mensagens é adaptá-las às necessidades dos utilizadores:
erro
sucesso
marketing
educacionais
...
61
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!
62
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
63
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
64
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
65
Regras para mensagens
Envolvimento progressivo!
66
Colocar as questões certas !
67
Um longo namoro...
68
Perguntas?
69
Saber mais?‘Web Form Design’ by
Luke Wroblewski (aka LukeW)
A maioria das imagens presentes nesta apresentação são extraídas do livro e podem ser consultadas em:
http://www.rosenfeldmedia.com/books/webforms/
http://www.flickr.com/photos/rosenfeldmedia/sets/ 72157604272550634/
Desconto 15% - usar código ‘CUSTODIO’
71
Obrigado ;)
72