FormsIt’s a dirty job but someone’s gotta do it

Mauricio Wolff

Resumo das Best Practices do Livro1. O que realmente importa?2. Por um caminho claro3. O mundo dos Labels4. Inputz5. Ações do Form6. Textos de Ajuda7. Erros e Acertos8. Validação9. HTML5

O que realmente importa• O mínimo possível de campos• Labels compactos• Se o label for ambíguo, use

linguagem coloquial• Organização em grupos lógicos• Grupos em forma de diálogo• Deve-se usar o mínimo de

informação visual para distinguir grupos, e a primeira letra maiúscula

• Opcionais depois de completar o form aumentou de 10% a 40% a quantidade de respostas

Por um caminho claro• Explique para que serve o Form• Se for preciso buscar documentos,

start page• Mostrar o caminho até a conclusão

(Indicador de progresso)• Em Checkouts ou signups, elimine

elementos que podem causar abandono

• tabindex

O mundo dos Labels• Alinhar pelo topo é geralmente

melhor• Pela direita quando se precisa de

espaço vertical• Pela esquerda quando a leitura

deve ser atenta• Labels e respostas devem ser

claramente diferentes, principalmente dentro dos inputs

Inputz• Tipo certo para a pergunta• O tamanho do input indica o

tamanho da resposta (affordance)• Asteriscos junto aos labels• Se todos são required, marcar

somente os opcionais• Um “optional” vale mais que um *

com legenda• Coerência (pattern)• Programadores shouldn’t be lazy

(flexible inputs)Telefone:(51) 3333.333351 3333-333351 3333 33333333-3333

Ações do Form• Evitar ações secundárias, caso

necessárias torná-las visualmente distintas

• Alinhar ação primária com inputs• Se a ação secundária for

destrutiva, confirme• Animação para evitar duplos• Disable no submit ao invés de

texto de ajuda• Juntar a ação de Agree com Submit

Textos de Ajuda• Quanto menos, melhor• Explicar porque se está

perguntando, questões de privacidade, recomendações de como se responder

• Texto conciso e perto da pergunta• Dentro dos inputs, só

recomendações de como preencher

• Ícones devem ser colocados perto dos labels, não dos inputs

Erros e Acertos• Caso haja mais de um erro, na

mensagem principal todos devem estar listados

• Erros devem aparecer no contexto e definindo próximas ações

• Associar visualmente o input que precisa ser resolvido

• Mostrar também quando o usuário acerta

Validação• Inline depois de completado o

input• Qualidade da senha ao invés de

exigências• Limitador de caracteres

twitter style

HTML5• Autofocus• Autocomplete• List• Multiple• Placeholder• Required• Regex• Validation• Numbers, Integers, Floats• Dates, Times• Urls, Emails, Telephone, Color

HTML5

HTML5

Cross Browser HTML5 Forms Now, Using modernizr, webforms2 and html5Widgets

Q&A?