Conheça "Padrões de design de formulários", nosso novo livro sobre formulários da Web acessíveis - já disponível!

Formulários. Não é coincidência que a palavra rima com “bocejos” – formulários da web são chatos de codificar e ainda mais chatos para seus visitantes preencherem. Mas sem formulários, a web seria apenas uma biblioteca. Eles nos permitem comentar, coletar, reservar, comprar, compartilhar e uma série de outros verbos. E principalmente eles nos permitem fazer essas coisas de uma maneira estranha, opaca, confusa, estranha, frustrante, alarmante ou alienante. Os formulários são uma parte tão importante da web, mas nós os projetamos mal o tempo todo. Quando eles não são superprojetados, geralmente não são projetados.

Com o novo livro Form Design Patterns , queremos resolver esse problema. Ao passar por problemas comuns do mundo real passo a passo, você aprenderá a projetar formulários simples, robustos , leves , responsivos, acessíveis , progressivamente aprimorados , interoperáveis ​​e intuitivos que permitem que os usuários façam as coisas, não importa o quê. E no final do livro você terá uma lista quase exaustiva de componentes entregues como um sistema de design que você pode usar imediatamente em seus próprios projetos. (Salte para o índice.)

Índice

Cada capítulo gira em torno de um problema específico — afinal, é assim que resolvemos problemas na vida real. Mas não se preocupe, muitos dos estilos, componentes e padrões nascidos de cada capítulo são reutilizáveis ​​e aplicáveis ​​muito além das especificidades e você verá exemplos disso à medida que avançamos no livro.

Baixe o trecho em PDF gratuitamente (0,7 MB) para ter uma ideia de como é o livro por dentro.

1. Um formulário de registro
   Começaremos analisando as qualidades fundamentais de um formulário bem projetado e como pensar sobre elas. Ao aplicar algo chamado protocolo de perguntas, veremos como reduzir o atrito sem sequer tocar na interface. Em seguida, veremos alguns padrões cruciais, incluindo validação, que queremos usar para cada formulário.
2. Um formulário de check-out
   Consideraremos os fluxos de checkout e analisaremos vários tipos de entrada e como eles afetam a experiência do usuário em navegadores para dispositivos móveis e desktops, enquanto procuramos maneiras de ajudar clientes iniciantes e recorrentes a fazer pedidos de maneira rápida e simples.
3. Um formulário de reserva de voo
   Vamos mergulhar no mundo dos componentes de formulário personalizados progressivamente aprimorados usando ARIA. Faremos isso explorando a melhor maneira de permitir que os usuários selecionem destinos, escolham datas, adicionem passageiros e escolham assentos. Analisaremos os controles de formulário nativos e veremos como romper com a convenção quando for necessário.
4. Um formulário de login
   Veremos o formulário de login onipresente. Apesar de sua aparência simples, há um monte de falhas de usabilidade que muitos sites sofrem.
5. Uma caixa de entrada
   Vamos projetar maneiras de gerenciar e-mails em massa, nossa primeira visão das interfaces administrativas. Como tal, isso vem com seu próprio conjunto de desafios e padrões, incluindo um menu de ação responsivo descrito em ARIA, seleção múltipla e mensagens na mesma página .
6. Um formulário de pesquisa
   Criaremos um formulário de pesquisa responsivo que estará prontamente disponível para os usuários em todas as páginas e também consideraremos a importância do mecanismo de pesquisa que o alimenta.
7. Um formulário de filtro
   Os usuários geralmente precisam filtrar um grande conjunto de resultados de pesquisa complicados. Sem um filtro bem projetado, os usuários são obrigados a desistir. Os filtros apresentam vários problemas de design interessantes e exclusivos que podem nos forçar a desafiar as práticas recomendadas para oferecer aos usuários uma experiência melhor.
8. Um formulário de carregamento
   Muitos serviços, como compartilhamento de fotos, mensagens e muitos aplicativos de back-office, permitem que os usuários carreguem imagens e documentos. Estudaremos a entrada do arquivo e como podemos usá-la para fazer upload de vários arquivos de uma só vez. Em seguida, veremos os meandros de uma interface aprimorada de arrastar e soltar com Ajax que inclui usuários de teclado e leitor de tela.
9. Um formulário de despesas
   Investigaremos o problema especial da necessidade de criar e adicionar muitas despesas (ou qualquer outra coisa) a um sistema. Esta é realmente uma desculpa para cobrir o add another pattern , que geralmente é útil em interfaces administrativas.
10. Um formulário muito longo e complicado
    Alguns formulários são muito longos e levam horas para serem preenchidos. Veremos alguns dos padrões que podemos usar para facilitar o gerenciamento de formulários longos.

Sobre o autor

Adam Silver é designer de interação com mais de 15 anos de experiência trabalhando na web para diversas empresas, incluindo Tesco, BBC, Just Eat, Financial Times, Department for Work and Pensions e outras.

Ele está particularmente interessado em design inclusivo e sistemas de design e escreve sobre isso em seu blog e em publicações populares de design, como A List Apart . Este também não é seu primeiro livro: ele escreveu anteriormente Maintenanceable CSS , um livro sobre a criação de interfaces de usuário sustentáveis ​​com CSS.

Detalhes técnicos

• 384 páginas, 14 × 21 cm ( 5,5 × 8,25 polegadas),
• ISBN: 978-3-945749-73-9 (impressão),
• Capa dura de qualidade com encadernação costurada e marcador de página de fita,
• O eBook está disponível em PDF, EPUB e Amazon Kindle.
• Envio gratuito de correio aéreo mundial da Alemanha. Tempos de entrega.
• Disponível como impresso, capa dura de qualidade e eBook.

Depoimentos

Nosso objetivo é tornar o livro o mais prático e útil possível . Temos a honra de receber críticas muito positivas de pessoas que criam sites em pequena e grande escala.

• “Eu escrevo formulários em HTML há mais de 20 anos. Este livro captura a essência do que é adotar padrões, aprimorar progressivamente e fornecer formulários simples e acessíveis . Ao formalizar padrões de design que todos podemos usar e implementar, desenvolvedores e designers podem se concentrar em seu site e produto. Eu gostaria que isso estivesse disponível há 20 anos!”
  — Paul Duncan, tecnólogos de design e professor de acessibilidade
• “Em um mundo de formas horrivelmente marcadas, este livro é um farol de luz que ilumina o caminho para experiências de usuário mais acessíveis. Eu recomendo para qualquer pessoa que esteja projetando ou desenvolvendo interfaces de usuário para evitar as armadilhas comuns de acessibilidade de formulários que vemos com muita frequência.”
  — Marcy Sutton, defensora da acessibilidade
• “Formulários. Não é coincidência que a palavra rima com “bocejos” - formulários são chatos de codificar e ainda mais chatos para seus visitantes preencherem. Então faça com que funcionem melhor para todos, usando as dicas concretas, código e microcópias deste livro. E tire seus próprios bocejos, pois Adam Silver fez toda a pesquisa e codificação para você.”
  — Bruce Lawson, advogado de padrões da Web
• “Form Design Patterns está estabelecendo o senso comum e soluções inclusivas para formulários simples e potencialmente complexos. É o seu companheiro enquanto você se esforça para criar uma web interativa mais simples e fácil.”
  — Heydon Pickering, consultor de UX e acessibilidade

Por que este livro é para você

Este livro é um guia prático para quem precisa projetar, prototipar e construir todos os tipos de formulários para serviços, produtos e sites digitais. Você aprenderá :

1. Elementos de formulário nativos disponíveis e seus poderes, limitações e restrições.
2. Quando e como criar componentes de formulário personalizados acessíveis que podem oferecer aos usuários uma experiência melhor em comparação com seus equivalentes nativos.
3. Como reduzir significativamente o atrito nos formulários com o uso cuidadoso da linguagem, fluxo e ordem.
4. Maneiras (e maneiras não) de ajudar os usuários a corrigir erros de formulário facilmente.
5. Como lidar com interfaces complexas que permitem aos usuários fazer upload de arquivos e adicionar vários itens de qualquer tipo.
6. Formas de permitir que os usuários pesquisem e filtrem um grande conjunto de resultados de acordo com seu próprio modelo mental.
7. Como ajudar os clientes a preencher formulários especialmente longos e complexos que podem levar semanas para serem preenchidos.

Mal podemos esperar para saber sua opinião sobre o livro! Boa leitura e esperamos que você ache o livro tão útil quanto nós. Basta ter uma xícara de café (ou chá) pronta antes de começar a ler, é claro. Fique arrasando e... miau !