Olá Habr! Apresento a você a tradução do artigo "
10 dicas para projetar formas perfeitas ".
Os formulários desempenham o papel de um portal entre o usuário e o sistema e geralmente são a base da página. Autorização, registro, atualização de status, entrada de dados de pagamento ou endereço de entrega são controlados por formulários. Para lojas online, formulários bem projetados desempenham um papel significativo. Por experiência própria, um bom design dobra as vendas on-line.
Como os formulários executam funções importantes para a interface do usuário, existem regras para seu design.
1. Comece inserindo dados
Comece com o elemento mais simples - um campo de texto. Esse é o componente mais comum de muitas formas; portanto, se você fizer o certo, estará no meio do caminho.
Existem três elementos principais para o formulário: um campo de texto, um título e uma mensagem de erro. Qualquer que seja o design que você escolher para criá-los, verifique se o usuário sabe quais informações são necessárias e, se houver um erro, como você pode se livrar delas.
Os títulos devem estar no topo.
Tendências nascem e morrem. Agora está na moda colocar o espaço reservado como um cabeçalho. Seu uso, embora não seja enganado, gera alguns problemas de UX (nota: "experiência do usuário"). O fato é que, quando o campo é preenchido, o usuário não vê o cabeçalho.
As manchetes sempre devem ser vistas. Portanto, eles são colocados em cima.
Por que acima, e não à esquerda do campo de entrada de dados?
Quando o cabeçalho estiver à esquerda do campo de texto, na tela do telefone os elementos se moverão em relação um ao outro. Primeiro pense em como tudo ficará na tela do telefone.
Ajude o usuário especificando um exemplo no espaço reservado.
Outro argumento a favor de colocar os títulos acima do campo de entrada de dados é que o usuário lê as informações em uma linha vertical, pois, de acordo com a pesquisa, isso é mais rápido do que mover a visualização da coluna da esquerda para a direita.
2. Mensagem de erro e aviso
Para um campo de texto padrão, são necessárias mensagens de erro.
Aqui estão três dicas para projetá-los:
O erro ocorre devido ao cliente e ao servidor.
No lado do cliente, os problemas são detectados quando o campo obrigatório não é preenchido ou o endereço de email é inserido incorretamente:
- O servidor verifica se o email fornecido existe;
- O usuário é notificado de um erro do cliente antes de enviar o formulário. Erros são necessários para impedir o envio de informações incorretas pelo usuário.
Verifique se há mensagens de erro
Forneça informações sobre qual campo está o erro. Por motivos de segurança, alguns desenvolvedores não indicam um erro no email ou na senha durante a autorização, e isso é absolutamente normal. Porém, quando o usuário assinar a newsletter ou inserir seu endereço durante a compra, indique a ele qual campo está preenchido incorretamente e por quê.
Cada vez que você preencher um campo de texto, verifique como será o erro antes e depois de clicar no botão Enviar.
Use avisos
Informe o usuário se o campo exigir determinados critérios, por exemplo, se a senha deve conter um determinado número de caracteres ou combinar números e letras.
Indique o quão forte é a senha, se o email está registrado no site ou se o login está ocupado.
3. Use formas correspondentes
Visualmente, o formulário parece mais conciso se combinações forem usadas. Considere como o usuário usará o formulário no telefone.
Se todos os campos forem texto, o usuário precisará abrir constantemente o teclado.
Para uma alteração, solicite ao usuário que mude de um campo de texto para o menu suspenso (nota: “listas suspensas”) ou para o botão de opção e vice-versa.
Pense em como o usuário está segurando o telefone e como eliminar os inconvenientes causados por uma combinação dos mesmos campos para inserir dados.
4. Botões de opção, menus suspensos e caixas de seleção
Às vezes, há confusão ao escolher o botão de opção, o menu suspenso e a caixa de seleção.
O botão de opção é ótimo para fornecer um pequeno número de respostas possíveis. Escolha uma resposta possível com antecedência ou pule este campo.
O botão de opção é a melhor solução quando você pode escolher apenas uma opção.
Quando mais elementos são necessários, uma lista suspensa será a opção mais adequada (na prática - mais de 5-6 respostas). Você também pode selecionar o item padrão ou definir o espaço reservado para "Selecionar um item".
A caixa de seleção é a melhor opção quando você precisa preencher apenas um campo (por exemplo, condições e condições) ou mais de uma resposta é fornecida. Se você quiser escolher quais correspondências de publicidade enviar ao usuário, a caixa de seleção permitirá que você faça mais de uma escolha.
Usar a caixa de seleção em vez do botão de opção não deve limitar você nas suas decisões de design da interface do usuário.
Como designer, você tem liberdade suficiente para escolher como os elementos da interface do usuário (nota: “interface do usuário”) serão exibidos na tela. Mesmo que você queira alterar de alguma forma a caixa de seleção para que fique mais interessante, isso não deve afetar a percepção do usuário.
Em vez de escrever texto na frente de pequenos círculos, você pode criar figuras ou ícones para seleção.
5. Se possível, exclua campos opcionais
Se o objetivo da empresa é vender um produto, seu objetivo como designer é eliminar o máximo de inconvenientes possível entre o usuário e o sistema.
A remoção de campos desnecessários permitirá que o usuário faça menos esforço.
Ao se inscrever, é importante conhecer os diferentes tipos de métodos de pagamento e entrega.
Se o departamento de vendas quiser conhecer as preferências dos clientes, faça isso com o e-mail de confirmação.
Sempre procure maneiras de usar um mínimo de campos visíveis.
Se você deseja otimizar sua loja online, minimize o número de campos para o endereço de entrega e a finalização da compra.
Se você estiver criando uma interface para reservar passagens aéreas, mostre ao usuário o menor número de campos necessários para visualizar os voos disponíveis.
Então você pode oferecer mais condições: o número de malas, etc.
6. Use o preenchimento automático para formulários grandes
Dependendo do nome da rua, o preenchimento da barra de endereços pode levar muito tempo, principalmente no telefone. Escrever o endereço corretamente pode ser ainda mais difícil.
Considere usar o GoogleMapsAPI para que os nomes de ruas sejam preenchidos automaticamente. Isso significa que o usuário só precisa inserir alguns caracteres e selecionar a rua desejada na lista proposta. Você também pode preencher automaticamente o CEP com base no nome da rua, mas discutiremos isso mais tarde.
7. Use lógica condicional
Use a lógica para introduzir algumas informações para o usuário facilitar sua vida.
- Se o país do usuário for conhecido, o design poderá conter campos adicionais ("estado" se você estiver nos EUA, "condado" na Irlanda etc.)
- Use o CEP para inserir o nome de uma cidade, estado ou província
- Se você estiver calculando o país do usuário pelo endereço IP, é possível inserir o código do país no campo de entrada do telefone?
Se você deseja preencher alguns campos para o usuário, sempre dê a ele a oportunidade de inserir informações pessoalmente. Existe a possibilidade de você estar enganado em algo.
Por exemplo, você usa o GoogleMapsAPI para encontrar uma rua na Alemanha. Conhecendo o nome da rua, você pode obter o código de área. No entanto, algumas ruas na Alemanha são muito grandes, cobrindo códigos diferentes; portanto, as informações podem estar incorretas no caso das ruas de fronteira. Sempre forneça ao usuário a capacidade de inserir dados, se necessário.
O uso da lógica condicional em todos os países do mundo exigirá muito trabalho; portanto, você precisa estar ciente do significado de seus esforços. Navegue pelos países dos quais os pedidos costumam ser recebidos e comece a otimizá-los. Se isso resultar em rendimentos mais altos, faça o mesmo com o resto dos países.
8. Use o espaço reservado corretamente
Discutimos anteriormente que o espaço reservado nem sempre é usado, pois desaparece ao inserir informações. Mas não consideramos outras maneiras de usá-lo que poderiam ajudar o usuário.
O espaço reservado é uma ótima oportunidade para mostrar ao usuário como inserir informações. Um bom exemplo é entrar em um telefone. O usuário precisa inserir um código de país? Ou código da cidade?
Quando você precisar de um número de telefone ou cartão em um formato específico, informe o usuário sobre isso, fornecendo um exemplo de preenchimento do espaço reservado. Essa é uma ótima maneira de corrigir erros, simplesmente indicando quais informações são necessárias: código do país etc.
9. Relate as próximas etapas.
Se após preencher outro formulário para entrada, informe o usuário.
Em vez de "Avançar" ou "Pagar", você pode escrever "Cheque em ordem" ou "Pagamento por PayPal".
Adicione mensagens indicando as próximas etapas depois de clicar no botão. O processo de pedido será concluído ou o usuário terá tempo para verificar tudo? Ele vai pagar?
Sempre procure maneiras de proporcionar conforto ao usuário, principalmente se ele estiver conectado à sua conta bancária.
Fico aborrecido toda vez que compro na Amazon porque não recebo todas as informações, incluindo custos de envio, até a última etapa. Seja honesto com seu usuário. Ganhe credibilidade fornecendo as informações necessárias em cada etapa do preenchimento e explique claramente o que esperar com o uso futuro.
10. Continue procurando maneiras de otimizar
Depois de lançar um novo formulário, continue analisando-o. Se você achar que muitos usuários saem do site, descubra o motivo. Realize uma pesquisa para descobrir por que os usuários não se sentem à vontade e trabalhe para resolver esse inconveniente. Para o designer, o trabalho nunca é "terminado completamente".
Conclusão
Às vezes, o design dos formulários não é tão interessante, mas, se forem bem-sucedidos, eles podem alterar a percepção do site ou aplicativo pelo usuário. Crie com cuidado os formulários para facilitar para o usuário. Dê claramente mais orientações, forneça dicas com alertas e espaços reservados e sugira o preenchimento automático para que os usuários não digitem demais.