4 Inspirational Form Design Patterns [FREE]

Um estudo conduzido pela HubSpot descobriu que 82% dos inquiridos declararam ter abandonado um funil de compra de websites por causa de formulários pobres ou incompletos e que 93% dessas pessoas tinham encontrado pela primeira vez esses formulários em computadores de secretária.

p>Forms são uma parte essencial do seu website e negócio, quer esteja a realizar uma sondagem, a oferecer aos potenciais clientes um meio de o contactar, ou a encorajar a inscrição no boletim informativo. Há muitas maneiras de fazer um formulário web com grande aspecto e eficaz, mas há sempre espaço para melhorias. Os formulários não têm de ser monótonos.

4 Inspirational Form Design Patterns [FREE]

Um formulário bem concebido acrescenta valor a todo o desenho sem diminuir a sua utilidade. Além disso, tais formas têm um desempenho muito melhor. Na nova estrutura de desenho de IU da Salesforce, Lightning, pequenas alterações de desenho de formulários podem melhorar a conversão de formulários. Vamos mergulhar nisto.

Formulários sem caixa

p>Formulários sem caixa são formulários da web que não têm caixas ou bordas visíveis. Faz com que as webformas pareçam mais contemporâneas e modernas, uma vez que não têm o aspecto tradicional das webformas com caixas à sua volta. Os formulários tradicionais com caixas à sua volta podem ser vistos como datados.

Formas web baseadas em curvas aproveitam o uso de linhas curvas e cantos para criar interesse. As curvas podem ser encontradas nas formas e nos layouts. As caixas curvas bem concebidas não precisam necessariamente de seguir os desenhos tradicionais das caixas. Se feitas correctamente, as curvas podem mesmo conduzir o olho em toda a forma da teia, adicionando tensão entre o espaço negativo e o positivo. Acrescenta um grande apelo visual e pode ajudar a tornar uma teia com aspecto draboso mais excitante e envolvente.

formas animetizadas

Desenho de forma anime é concebido com alguma animação dentro da própria forma. Pode ser feito em muitos níveis diferentes, desde simples animações que ajudam a criar interesse e chamar a atenção (como setas e botões que saltam) até desenhos mais complexos e elaborados que realçam o melhor do desenho animado da web como animações de fundo ou transições entre páginas. O principal objectivo de utilizar tais efeitos animados é tornar a sua experiência de utilizador tão atractiva quanto possível - algo que todos sabemos que os utilizadores lutam com esses tediosos formulários de website!

Slide in from the bottom or side

Este modelo de fluxo web permite aos utilizadores submeter um formulário de contacto a qualquer momento sem prejudicar a aparência geral. Pode permitir que os consumidores entrem em contacto consigo sempre que estejam prontos, adicionando um botão de contacto ao fundo do sítio.

p> Pode também utilizar um menu deslizante para permitir que as pessoas acedam ao seu formulário. Em vez de enviar os visitantes para uma página de contacto, puxe o formulário para dentro a partir do lado do ecrã. É um excelente padrão para casos em que alguém possa querer procurar informação no sítio enquanto assiste.

Full-screen form

Uma grande técnica para chamar a atenção para o seu formulário é eliminar distracções. Em vez de colocar o seu formulário num lugar já ocupado no seu sítio web (como o rodapé), tente incorporar um ponto de compromisso para o tornar num ecrã completo. Isto ajuda o seu utilizador a introduzir a informação que deseja de uma forma fácil e focalizada, facilitando o seu preenchimento.

Formulários em linguagem natural

Se os formulários da Web pudessem falar, poderiam soar assim: "Está prestes a submeter a sua informação. Tem a certeza? É necessário". Os formulários na web nem sempre são tão simples como gostaríamos que fossem. Hoje em dia esperamos que as experiências na web e as interfaces de utilizador sejam mais humanas e familiares; por exemplo, interagir com uma página web deve ter mais vontade de falar do que de escrever. A introdução da linguagem natural é uma dessas formas de fazer com que os formulários web se sintam mais conversadores - ou seja, não apenas mais uma peça de texto escrito que precisa de ser preenchida. Uma interface de linguagem natural ajuda os utilizadores ao fazer perguntas para que os humanos façam perguntas. Permite criar um contexto de conversação, ao mesmo tempo que reduz os mal-entendidos, utilizando a etiqueta convencional do formulário e o padrão da caixa de entrada. Tem também uma sensação única e bem concebida.

Desenho de formulário passo a passo (procedimento)

p>Um desenho de formulário web passo a passo permite-lhe dividir secções de informação em partes digeríveis que são fáceis de seguir. Aqui, o utilizador recebe indicações visuais para preencher cada campo.

Esta página web tem um caminho claro para os utilizadores tomarem as suas etapas de formulário web, com cabeçalhos e indicações visuais que os guiam ao longo do caminho. A utilização deste padrão de formulário torna mais fácil para os indivíduos que possam hesitar em dar a sua informação online.

Licitar as pessoas a acrescentar informação em pedaços fáceis de compreender encoraja o avanço e proporciona uma experiência mais focalizada do que simplesmente mostrar todos os campos ao mesmo tempo.

Um simples clique de um botão pode ser tudo o que é preciso em alguns casos. Mas, por vezes, é preciso mostrar quantos passos são necessários para preencher o formulário, para que um utilizador não se perca ao longo do procedimento.

Conclusões

A web é uma via de dois sentidos, e devemos criar conteúdos valiosos para os utilizadores e mantê-los envolvidos com o design excitante do formulário web. Os formulários são parte integrante da experiência de navegação na web, então porque não passar algum tempo extra a pensar em como tornar os seus formulários web tão envolventes quanto possível? Pensando através destes padrões e acrescentando um toque mais humano aos nossos designs de formulários da web, podemos ajudar a reduzir as taxas de queda ao mesmo tempo que encorajamos um melhor envolvimento com menos confusão.