Forms
-
Upload
bitbonsai -
Category
Technology
-
view
310 -
download
2
description
Transcript of Forms
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?