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