Forms101

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.ﬂickr.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://ﬂickr.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áﬁcos + Atenção no apoio ao cliente + Análise de trafego + Eye tracking + e muito cuidado com convenções WEB. = Um bom formulário!

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 ﬁnal

29 Indicador de Progresso

Etiquetas

31 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 clariﬁcaçã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

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íﬁca 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 simpliﬁcar, re-utilizar e garantir consistência entre mensagens!

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 ﬁnal 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.ﬂickr.com/photos/rosenfeldmedia/sets/ 72157604272550634/

72 Obrigado ;)

http://blog.centopeia.com	59
http://codebits.sapo.pt	42
http://codebits.eu	22
http://blog.pedrocustodio.com	12
http://www.soup.io	2
https://www.sharepoint.hu.nl	1
http://static.slideshare.net	1
http://www.agglom.com	1

Forms101

by Pedro Custódio

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 140

Statistics

Forms101 Presentation Transcript