10 coisas que todo designer precisa saber sobre formulários

Autor: Lewis Jackson
Data De Criação: 6 Poderia 2021
Data De Atualização: 15 Poderia 2024
Anonim
Somente os 4% Mais Atentos Passarão Neste Teste
Vídeo: Somente os 4% Mais Atentos Passarão Neste Teste

Contente

Formulários, não há nada que muitos designers odeiem mais do que formulários. Eles não necessariamente trazem a criatividade para fora, ou não? Talvez seja hora de olharmos os formulários novamente e entender que um formulário, em sua forma mais básica, é uma conversa entre o usuário e o software.

Esqueça apontar e clicar, os formulários representam a interação mais rica que nós, como designers digitais, enfrentaremos. Da próxima vez que um formulário vier em sua direção, não pense que é apenas uma questão de aplicar alguns efeitos CSS legais ou adicionar um toque de jQuery legal. Há muito mais profundidade no design de formulários.

Eu testei centenas de formulários e projetei alguns formulários complexos para seguradoras, interações de reservas de férias e muito mais. Provavelmente, você usou um dos meus formulários nos últimos meses.

Aqui estão as lições que gostaria de ter aprendido antes de começar a projetar formulários.

1. Não marque os campos obrigatórios

Você conhece o asterisco que denota um campo obrigatório? Já vi isso falhar muitas vezes em testes de usuários. Como um conceito, os campos obrigatórios não fazem muito sentido, eles não têm equivalente off-line. Eles são ótimos para desenvolvedores porque oferecem uma boa abordagem em preto e branco para a conclusão. O asterisco e o campo obrigatório falham porque é um comportamento aprendido. O comportamento típico que vi em testes de usuário é o usuário preencher o formulário na parte superior e terminar quando há algo para impedi-lo ou quando ele pressiona um botão.


A solução é simples, marque os campos opcionais, marque o lugar onde nosso simpático usuário deve parar e pensar se precisa preencher aquele campo.

2. Não use spinners

HTML5 é brilhante, não é? Ele oferece um monte de novas ferramentas brilhantes para brincar. Precisamos pensar sobre a adequação de nossos novos brinquedos. O campo de número agora inclui pequenas setas para cima e para baixo para permitir que o usuário percorra os números.

Existem dois problemas aqui. Em primeiro lugar, a exibição padrão das setas do navegador os torna realmente pequenos. Com um clique muito complicado, os dedos gordos entre nós vão ter problemas em um iPhone. É chamada de Lei de Fitt, quanto menor é algo, mais difícil é clicar nele.

Mas eu ouço você gritar, você pode simplesmente digitar o número diretamente no campo numérico. Sim, você pode, mas vamos olhar para a tela do navegador, as setas giratórias para cima / para baixo se parecem com nosso amigo fiel da caixa de seleção. Um usuário apresentado com um botão giratório pela primeira vez vai presumir, visto que se assemelha a uma caixa de seleção, que eles não podem digitar nela.


Meu conselho é ficar longe até que eles se tornem um lugar comum ou até que os desenvolvedores do navegador resolvam o design padrão.

3. Ter apenas um tipo de botão ou melhor ainda, apenas um botão por formulário

Existe um princípio de psicologia pouco conhecido chamado Lei de Hick. A Lei de Hick afirma que quanto mais opções temos, mais difícil é fazer uma escolha. Não é ciência de foguetes, eu sei, mas uma regra que vale a pena manter em mente.

Você pode ajudar seu bom usuário, ajudando-o a fazer uma escolha. Tornar todos os botões primários uma cor e ter apenas um deles por página torna a escolha mais fácil. Qual é o botão que eu deveria apertar? Oh, é fácil, é o grande colorido.

4. Campos de pedaços

Estudei neurociência em uma vida anterior e, portanto, estudei a psicologia da memória - especificamente a memória de curto prazo ou de trabalho. Agora, antes que você diga; não, a capacidade de memória de curto prazo não é 7 +/- 2, 4 +/- 1 ou em humanos falam três a cinco blocos. Nós, como humanos, somos ótimos para avaliar estímulos visuais, a restrição é que somos melhores quando o número é menor. Dividir um formulário em grupos menores torna a avaliação mais fácil, já que muitas vezes o que o usuário precisa inserir no formulário vem de sua memória.


Certifique-se de que seus grupos de campos tenham cerca de quatro de comprimento.

5. Pense por que você está perguntando algo e como é para o usuário

Este é provavelmente o conselho mais direto que dou, mas geralmente é o menos utilizado.

Vamos pegar o seguinte:

Questione cada pergunta que você fizer. Isso é necessário? Qual é a sensação de ser perguntado sobre isso?

Na maioria das vezes, há uma necessidade comercial de fazer uma pergunta e nós, como designers, podemos discutir sobre a necessidade até ficarmos roxos. A pergunta tem que ser feita. Ao compreender a necessidade comercial desses dados, podemos freqüentemente comprometer.

Podemos ajudar dizendo ao nosso bom usuário por que precisamos fazer essa pergunta. Tranquilize sobre o uso e o compartilhamento desses dados e, em geral, seja legal.

Tomando nosso exemplo novamente:

Ainda é uma pergunta difícil, mas espero que tenhamos adoçado a pílula.

6. Os encontros estão confusos, amiguinhos

Inserir datas pode ser um verdadeiro desafio e existem algumas armadilhas que você pode evitar. O maior problema é lidar com os erros.

A abordagem mais fácil é lançar um calendário. É importante notar que as semanas começam em uma segunda-feira no Reino Unido e um domingo nos EUA. Se o seu usuário não estiver concentrado, ele pode muito bem selecionar um domingo, quando significa uma segunda-feira.

Também vale a pena mencionar os formatos de data internacionais. Os EUA colocam o mês em primeiro lugar, no Japão o ano em primeiro. Portanto, uma data como 5/4/12 pode ser interpretada de três maneiras.

É por isso que é melhor usar caixas de seleção.

7. Formulários como ofício do desenvolvedor

Os formulários são criados tanto para desenvolvedores quanto para designers. Compreender quais erros podem ser cometidos ao inserir dados e projetar seu código de back-end para lidar com isso é um desafio.

Aqui está um simples. Inserindo um valor de moeda. Os possíveis erros que o usuário pode cometer são enormes. Forçar formatos de dados que os usuários precisam atender é frustrante para o usuário e, vamos encarar, um pouco preguiçoso da parte dos desenvolvedores.

Que melhor desafio para um desenvolvedor do que construir um formulário à prova de balas.

8. Não use colunas em formulários

O grande problema em usar colunas em formulários é o fluxo. Começamos um formulário na parte superior e terminamos na parte inferior. Ao introduzir colunas, o fluxo do formulário pode ser interrompido.

Não presuma que os usuários percorram os formulários e, portanto, o foco é uma forma de navegar pelos formulários em colunas. É raro que eu tenha visto isso em testes com usuários. Na maioria das vezes, vemos inserir os detalhes, clicar no próximo campo com o mouse / trackpad / dedo e inserir os detalhes e assim por diante.

9. Não use dois campos quando um fará

A maioria das pessoas não é datilógrafa. Nos testes de usuário, vemos pessoas olhando para o teclado enquanto digitam.

Ao inserir um número de telefone, a divisão do campo do formulário, digamos, para adicionar o código de área e o número, causa problemas reais. Os usuários não veem ou não se lembram de que existem dois campos, então insira o número completo no primeiro campo, pior se o campo for limitado a um determinado número de caracteres.

Use apenas um campo para o número de telefone, o mesmo se aplica ao número da casa / rua - use apenas uma caixa de entrada de texto.

10. Seja legal

Você ficaria surpreso com a quantidade de mensagens de erro bastante rudes que existem por aí.

Aqui está um exemplo de um que encontrei recentemente.

O próprio fato de eles estarem sugerindo que você entraria voluntariamente em uma data no futuro e, em seguida, uma resposta um tanto jocosa, bem, não é muito bom.

Coloque-se novamente no lugar do usuário, como você se sentiria ao ver esse erro? Incomodado? Talvez até pior. Ser legal é fácil.

Eu produzi um berço / folha de referências para download para ajudá-lo a criar formulários melhores. Inclui muitas outras formas de práticas recomendadas para projetar formulários melhores.

Para Você
Novo livro ilustra notícias de 2015
Consulte Mais Informação

Novo livro ilustra notícias de 2015

Dizem que uma imagem vale mai que mil palavra . Quando e trata de alguma da maiore notícia de te ano, à veze apena uma imagem pode fazer ju tiça. Yellow é um projeto do zine de qua...
Cinco maneiras incríveis de usar botões em seu site
Consulte Mais Informação

Cinco maneiras incríveis de usar botões em seu site

Ge talt é a palavra alemã que pode er definida como a "e ência ou forma da forma completa de uma entidade". U amo o termo em de ign gráfico para no referirmo à ideia...
Computer Arts 200: Quark revida
Consulte Mais Informação

Computer Arts 200: Quark revida

e você de eja uma demon tração prática da diferença entre a Computer Art agora e a Computer Art de então, aqui e tá. E ta notícia obre novo de envolvimento emo...