🤠 🏖️ 🙏🏿 Padrões de design de formulário. Revisão do livro 👨‍🏫 🥂 📔

Introdução pelo autor da revisão

O livro revela, às vezes não óbvio para designers e desenvolvedores de front-end, os temas do design de campo, o conceito de trabalhar com tipos de dados e usabilidade. O livro será útil para designers iniciantes e conhecedores de interface, pois o primeiro fornecerá uma compreensão do básico e o segundo fornecerá ideias para refletir, às vezes controversos, padrões de design. A revisão será apresentada na forma de resumos curtos do livro e breves comentários pelo revisor.

Parte um. Sobre os campos

1. Uma etiqueta na parte superior é melhor que uma etiqueta à esquerda.

Motivo: a tese se tornou um clássico do gênero. Muitos artigos foram escritos sobre esse tópico, por exemplo , este e centenas de artigos semelhantes. Além disso, ao colocar a etiqueta em cima, obteremos mais espaço se a etiqueta for longa. Parece óbvio, mas muitos designers teimosamente colocam etiquetas à esquerda.

2. Espaços reservados para não descrever as regras de preenchimento

Motivo: os espaços reservados desaparecem quando clicados + recortar no campo.

3. Não peça uma senha novamente

Motivo: enfurece a entrada duas vezes.

4. Texto de erro para escrever entre o rótulo e o campo

Motivo: não será fechado por um preenchimento automático ou teclado em um telefone celular.

Opinião: Parece que a tese é compreensível, mas parece realmente super incomum. Durante todo o tempo de criação de interfaces (mais de 9 anos), eu só encontrei isso uma vez e apenas nos layouts de um designer. Mas talvez valha a pena levar esse padrão a serviço.

5. Seleciona é melhor não usar

Por quê: oculte opções, não aplique zoom em alguns dispositivos, um clique extra, alguém está tentando escrever para eles.

Opinião: Eu tento não usar seleciona se os pontos são menores ou iguais ao 3º. Nesse caso, é mais fácil criar tags ou um grupo de rádio. Talvez seja o fato de algumas pessoas acreditarem que esse é um campo de entrada, não um select e tentar escrever nele, deu origem a um híbrido de input e select na forma de um menu suspenso, mas o primeiro item é um campo de input (geralmente uma pesquisa). Esta é uma solução e uma muleta ao mesmo tempo.

6. Quando você não precisa de um calendário para indicar datas

Não é necessário um calendário para:

Datas de nascimento, porque todo mundo se lembra dessa data de cor e é mais fácil entrar manualmente;
Datas de vencimento do cartão;
As datas que estão escritas nos documentos e você só precisa digitá-las novamente novamente sem hesitar.

7. Crie uma "senha"

Motivo: existe uma opinião de que a frase é mais fácil de lembrar.
Opinião: ¯ \ _ (ツ) _ / ¯

8. Use "- / +" em vez de seleciona

Regra: Use mais e menos se os números não forem grandes. Um bom exemplo é a escolha do número de passageiros por voo. O livro diz que houve testes sobre esse assunto e o sinal de mais / menos mostrou-se melhor.

9. O tamanho do campo deve estar abaixo do conteúdo

Por que: Sim, porque é lógico! E não importa que, dessa forma, os campos não sejam uniformes. Mas em meio segundo fica claro que tipo de conteúdo deve haver.

10. Fale exatamente onde está o erro

Por que geralmente não é assim: acredita-se que isso não é uma segurança, afinal, dizendo que a senha não está correta, sugerimos que o login esteja correto. Mas, na verdade, os hackers não verificarão todas as senhas existentes no mundo se descobrirem o Login, que geralmente é um endereço de email. correio e é uma informação aberta adequada.

Parte dois. Sobre os botões

1. Alinhe os botões à esquerda

Motivo: o olhar vai da esquerda para a direita. Uma exceção pode ser uma janela modal na qual não há campos de entrada. Por exemplo, no design do material do botão do Google nos modais à direita.

2. Não desative o botão

Motivo: não será possível acessá-lo pressionando Tab, ele não será lido por alguns leitores de tela e é pouco visível devido ao embotamento.

Opinião: Até recentemente, eu preferia criar um botão para deixar claro aos usuários que eles estavam preenchendo pouco o formulário. E de alguma forma ele nem duvidou que isso não fosse óbvio. Testes em usuários mostraram que os usuários veem uma cor cinza, mas nem todo mundo entende que isso significa que algo está errado. É como se você visse pela primeira vez um semáforo e fosse capaz de distinguir suas cores, mas simplesmente não sabia o que significa cada cor. Você não importaria o que está queimando agora.

3. Escreva nos botões um verbo

Motivo: fica mais claro o que acontecerá.

4. Não coloque o link "Não me lembro da senha" na frente do botão

Motivo: para aqueles que passam pelos campos na guia, isso pode funcionar como acessar um link em vez de um botão e por hábito, ele pressionará Enter, executando um script de recuperação de senha desnecessário.

5. Com um formato longo, não tenha vergonha de colocar um botão em cima

Opinião: Algum tipo de bobagem. É melhor corrigir o botão por baixo para que ele fique sempre visível ao rolar. Mas, por exemplo, o Yandex.Mail coloca um botão em cima.

imagem

Parte TRÊS. Navegadores e automação

Não faça transições automáticas de um campo para outro ao inserir o número necessário de caracteres. Pode confundir usuários
Os navegadores habilitados para HTML5 possuem validadores de formulário internos e cada navegador tem sua própria lógica. Faz sentido desativar a validação padrão
É necessário desativar a correção automática de erros e aumentar automaticamente a primeira letra. Caso contrário, parece aos usuários que isso foi um erro e os dados não seriam aceitos
Segundo as estatísticas, o preenchimento automático no Chrome é usado 9 bilhões de vezes por mês. Isso, em média, economiza 12 segundos ao usuário, o que dá 1.250.000 dias por mês. Fato engraçado
Não filtre sem clicar no botão "Filtro". Um botão é necessário, por exemplo, se não houver apenas caixas de opção e rádio, mas também campos de entrada (custo, alguns intervalos, etc.). Mas eles próprios continuam a escrever sobre testes, onde os usuários acreditam que o filtro não funciona sem perceber que você precisa clicar no botão "Filtro". ¯ \ _ (ツ) _ / ¯

Parte Quatro. Sobre tudo

Em algum momento, o livro passou de formulários para descrever a usabilidade de ícones e outras coisas que não são relevantes para o tópico. Eles escrevem no livro que é bastante estranho ver textos sobre ícones aqui, mas os ícones também fazem parte da interface, como formas, e, portanto, podem ser descritos. No entanto, encontrei coisas bastante interessantes entre as poucas informações úteis. Sobre eles abaixo.

1. Espalhar os campos Login e Senha em páginas diferentes não é uma vergonha

No site do GOV.UK, na forma de autorização, eles fizeram um Login em uma página e a Senha em outra (agora não) e os usuários não notaram nada de estranho.

Opinião: Agora percebo cada vez mais essa abordagem. Do Google a vários serviços como Resumo.

imagem

2. Mostrar etapas é opcional

Não faz sentido mostrar barras de progresso com etapas. Eles ocupam muito espaço. O governo britânico removeu a barra e a conversão não mudou.

imagem

3. O tópico com memorização de 7 ± 2 elementos não é mais relevante

Motivo: porque ninguém se lembra de nada nos sites. Você pode simplesmente rolar para cima se esquecer alguma coisa.

4. Coloque os campos de endereço na ordem aceita em uma região específica

Isto não é do livro, mas do meu ensaio. A Associação Postal Internacional tem regras escritas. Por exemplo, na Rússia, o seguinte procedimento foi adotado:

Ivanov Ivan
st. Lesnaya, casa 5, apto. onze
Moscou
Rússia
Código Postal

Padrões de design de formulário. Revisão do livro