Estilos de formulários

Depois de algum tempo desenhando sistemas complexos para grandes empresas e me deparar com todo o tipo de troca de informação, me desafiei a encontrar as melhores formas de criar uma experiência agradável (ou menos complicada possível) para o preenchimento de grandes formulários.

O Problema

A internet é uma rede constante de troca de informações. Consumir e inserir dados é o que faz da internet a Internet. No entanto, o "inserir" se torna muito mais difícil quando comparado ao consumo de toda essa experiência. Compras, vendas, assinaturas, serviços, ações e trocas de informação vêm acompanhadas de formulários, na maioria das vezes, chatos, demorados e difíceis de preencher.

Quando comecei a desenhar um grande sistema web que tinha como principal objetivo a troca de dados entre funcionários e suas empresas empregadoras percebi com mais carinho a importância de desenhar um formulário. Ele se tornou parte central de todo o layout do produto. Então, para criar um excelente produto, os formulários deveriam ser agradáveis, de fácil compreensão e dinâmicos o suficiente para ter sempre a mesma experiência em qualquer plataforma.

Tamanhos e tipografia

Comecei todos os estudos de peso tipográfico, hierarquia, espaçamento e cores testando em telas pequenas e de baixa resolução. Uma vez que a experiência é agradável e legível em telas de menor qualidade, a adaptação para telas melhores é mais fácil.

Toda a estrutura dos formulários foram pensados para telas com no mínimo de 320 pixels e limitados a 960 pixels.

A tipografia foi utilizada pensando na quantidade de estilos e pesos suficientes para compor uma hierarquia visual interessante. A Lato possui 18 estilos diferentes, é uma Google Font e seu traço humanista dá uma leitura agradável.

Especificações de formulário

Os formulários foram pensados nesse formato porque os usuários dos sistemas desenvolvidos para ele estavam acostumados a usar Excell e formulários de papel. Além de economizar mais espaço em tela e deixar as informações melhor organizadas.

Formulário aplicado em layout

Abaixo temos um exemplo de como os formulários podem ficar dispostos em tela dentro de cards. Os cards facilitam muito na hora de pensar os tamanhos de telas, uma vez que as informações estão limitadas a ele.

Conclusões

É possível afirmar que mais de 90% dos usuários que testaram esse tipo de formulário não tiveram problemas e, inclusive, acreditaram ser realmente mais fácil de ler, principalmente em telas menores.