4 Dicas de Design UX de Design que você deve saber (com exemplos)

Nós tendemos a pensar em formulários simplesmente como um meio de coletar dados do usuário, mas eles também são um caminho, às vezes o único jeito, para nossos usuários conecte-se conosco. É provavelmente delirante pensar que podemos fazer usuários amor preenchendo formulários, mas certamente é possível para encontrar soluções que não incomodam muito, e ajudá-los ao longo do processo.

Enquanto navega na rede, podemos encontrar soluções surpreendentes que são programaticamente corretas, mas são projetadas de uma maneira que provavelmente faz com que muitos usuários abandonem o site por causa da má experiência do usuário.

Se nossos formulários forem bem projetados, poderemos não apenas agradar nossos usuários, mas também a equipe de back-end que pode lidar com muito menos erros de entrada do usuário. Assim, neste artigo, vamos dar uma olhada em como podemos minimizar erros de entrada do usuário e ainda mantenha nossos usuários felizes.

Antecipar as necessidades do usuário

Websites e aplicativos têm diferentes bases de usuários e metas, e até mesmo o mesmo local pode hospedar muitos formulários que coletam diferentes tipos de dados, apenas para nomear os mais frequentes:

• Formulários de login
• Formulários de inscrição
• Formulários de perfil de usuário
• Formulários de inscrição de boletim informativo
• Formulários de checkout
• Pesquisas de usuários
• Formulários de contato
• Formulários de comentários
• Formulários de pesquisa

Todos esses tipos de formulário requer coisas diferentes. Ao projetar um formulário de check-out, é crucial garantir aos usuários segurança sobre segurança, enquanto no caso de formulários de comentários, é uma boa ideia adicionar emoticons ou outros métodos que permitem aos usuários expressar seu humor real.

No entanto, até mesmo tipos de formulários semelhantes podem precisar ser projetados de forma diferente, já que todos os sites têm suas base de usuários única. Antes de embarcar no processo de design, é sempre uma boa ideia antecipar o que nossos usuários precisam, e projetar em conformidade.

Exemplo: logins sociais que direcionam as necessidades do usuário

O formulário de login do Codepen contém três logins sociais com o Github no topo. Esta escolha não seria razoável para a maioria dos sites.

Mas é perfeito para Codepen, como sua base de usuários consiste em desenvolvedores, muitos dos quais desejam fazer login com suas contas do Github, ou conectar suas contas de desenvolvimento entre si de uma só vez.

Think Mobile-First

Usuários móveis e de desktop têm necessidades diferentes, mas como preencher formulários é um desafio muito maior em uma tela de celular, usando gestos de mão do que em um teclado físico, abordagem mobile-first pode nos levar mais longe quando queremos projetar formas utilizáveis.

Além disso, muitos padrões de interface do usuário de formulários que funcionam bem em dispositivos móveis funcionarão bem.

Exemplo: controles de toque

Formulários móveis de alta qualidade não podem ser imaginados sem controles visíveis em qual os usuários de dispositivos móveis podem tocar facilmente com os dedos.

O formulário de inscrição em boletins informativos da conferência de web design An Event Apart se adapta à maneira como os usuários móveis acessam a tela - ele contém dois campos de entrada fáceis de tocar e um botão do tamanho de uma ponta do dedo.

Os campos de entrada de texto são mais altos, como de costume, para que os usuários móveis possam tocá-los com facilidade, e o grande botão laranja com um ícone de marcação incentiva ainda mais os usuários a enviarem o formulário.

A versão desktop do site usa o mesmo design de formulário, como também parece bom e funciona bem em telas maiores.

Exemplo: Entrada Consumível

Ao criar formulários para dispositivos móveis, é sempre importante considerar como podemos minimizar o espaço que usamos. o entrada descartável Padrão de design da interface do usuário tornou-se bastante popular ultimamente, e funciona especialmente bem no celular.

A Booking.com aproveita esse padrão no formulário de pesquisa em seu site para celular. Quando o usuário toca no campo de pesquisa, ele se expande para deixar mais espaço para gestos, e uma lista de seleção com recomendações também aparece abaixo dela.

Quando o usuário sai do campo, ele diminui e a informação extra desaparece.

Exemplo: Botão Morphing

Botões Morphing levar o padrão de entrada descartável um passo ainda mais longe, já que os usuários primeiro vêem um botão, que então se transforma em uma forma quando eles tocam.

A imagem abaixo é do brilhante artigo do The Startup sobre design de formulários inovadores, que também apresenta muitas outras soluções criativas.

Facilitar o recebimento de entrada

Formulários longos tendem a dissuadir os usuários. O melhor que podemos fazer é só peço a entrada que realmente precisamos. Isso não é importante apenas a partir de uma perspectiva de experiência do usuário, mas os usuários também podem hesitar em fornecer muitas informações pessoais por causa de preocupações com a privacidade.

Às vezes, porém, nós ainda tem que ir junto com formulários mais longos. Neste caso, é uma boa ideia dividi-los em pedaços menores, e servir os pedaços como telas sucessivas.

Muitos sites de comércio eletrônico (por exemplo, Amazon) usam essa solução para reduzir as taxas de abandono de carrinho.

Se quisermos facilitar a conclusão de campos de formulário, a regra geral é reduza as distrações e as ações do usuário tanto quanto possível.

Exemplo: selecionador de entrada personalizado

Diferentes selecionadores de conteúdo, como selecionadores de data ou selecionadores de cores, não apenas facilitam a entrada correta, mas também fazem a forma mais atrativo, e significativamente reduzir erros do usuário.

O aplicativo de lista de tarefas de Todoist dá dicas personalizadas dentro de seu selecionador de data quando o usuário paira sobre os dias.

Por exemplo, na imagem abaixo, o usuário pode ver que, para 31 de agosto, ela já tem 2 tarefas devidas e pode levar essas informações em consideração ao decidir a data certa para as tarefas. É uma excelente ideia para um aplicativo em que a produtividade é a principal preocupação do usuário.

Exemplo: entrada de arrastar e soltar

Designs de arrastar e soltar geralmente funcionam bem com campos de upload de arquivos, especialmente onde os usuários devem fazer upload de imagens.

Eles provavelmente não reduzem muito as ações do usuário em comparação com o comum Carregar um arquivo, mas tornam muito mais fácil escolher qual arquivo o usuário deseja fazer upload, reduzindo assim a chance de enviar um arquivo errado.

O WordPress.com fornece uma elegante e intuitiva interface de entrada do usuário arrastar e soltar em seu editor de postagem. o pequenas miniaturas e a representação visual dos arquivos já enviados ajudar ainda mais os usuários a executar rapidamente o upload.

Exemplo: sobreposição para remover distrações

Se os usuários se distraírem enquanto preenchem nosso formulário, eles são mais propensos a erros, e também se irritam mais facilmente

Sobreposições de conteúdo são uma ótima alternativa para o design minimalista de formulários. Eles são usados por sites mais complexos que deseja exibir diferentes tipos de informações na mesma tela.

Na imagem abaixo, você pode ver a versão desktop do Booking.com. Quando os usuários passam o mouse sobre o formulário de pesquisa, o restante do conteúdo fica coberto por uma sobreposição acinzentada para ajudá-los mantenha o foco no processo de preenchimento de formulários.

Dar feedback aos usuários

Dando o feedback certo no momento certo pode melhorar significativamente a experiência do usuário.

No design de formulários, existem dois tipos de feedbacks do usuário:

1. Feedback dado antes submissão de formulários - a fim de reduzir erros e taxas de abandono, como rastreadores de progresso, validação de entrada instantânea que recompensa imediatamente os usuários pela entrada correta ou dicas de ferramentas de ajuda
2. Feedback dado depois de submissão de formulários - para que os usuários saibam eles cometeram um erro, como mensagens de erro

O tipo de feedback do usuário que nossos usuários precisam depende muito das características do nosso público-alvo e do objetivo do nosso site..

Exemplo: Progress Tracker

Formulários com mais de uma página, como pesquisas e a maioria dos formulários de verificação de comércio eletrônico, podem alavancar rastreador de progresso padrão de design. Os rastreadores de progresso dão uma feedback visual instantâneo aos usuários sobre seu status e incentivá-los a seguir em frente com o processo.

O aplicativo da web do criador de pesquisas SnapSurveys mostra um pequeno rastreador de progresso logo acima dos botões de envio para que os usuários possam naturalmente preve-lo.

ele rastreador de progresso não usa nenhum rótulo, mas o jeito que ele foi projetado deixa claro seu objetivo - o número de círculos indica o número de etapas, as etapas já executadas se tornam azuis e os usuários podem ver facilmente quantas etapas ainda estão à sua frente.

Exemplo: validação em tempo real

O varejista de cosméticos Body Shop usa validação em tempo real em seu formulário de perfil de usuário para eliminar erros e melhorar o UX do processo de conclusão de formulário.

As entradas são verificadas enquanto os usuários preenchem o formulário, e as respostas certas e erradas são imediatamente indicadas por ícones facilmente distinguíveis um pouco mais à direita, mas ainda na área visível.

Exemplo: Dicas Expressivas

Microcópia compreensível também é uma parte essencial do feedback do usuário bem-sucedido no design de formulários. Por definição, a microcópia de um website consiste em pequenos pedaços de texto usado em diferentes elementos - rótulos, botões, mensagens de erro, dicas de ferramentas, etc..

Em seu formulário de login, o grupo bancário do Barclay responde às perguntas que os usuários podem fazer com a ajuda de dicas de ferramentas bem projetadas que inclui Microcópia fácil de entender.

As dicas de ferramentas estão escondidas atrás de pouco? ícones não para distrair os usuários quem sabe como preencher o formulário de login, mas estar sempre presente para usuários que não têm certeza.

Algumas das dicas de ferramentas contêm um pouco de visual de um cartão de débito anotado para que os usuários possam encontrar facilmente os dados que precisam inserir no formulário de login.