Tutorial Axure: como criar um formulário interativo

Aprenda do zero a compor um formulário com todos os elementos necessários no Axure RP, com Diga33!

No desenvolvimento de páginas e apps para e-commerce, uma tarefa fundamental é criar um bom mecanismo para interagir com o cliente, entender suas necessidades, conhecer seus gostos e oferecer a ele os produtos e serviços que procura.

Para isso existe a inclusão de formulários em suas páginas. Neste tutorial, Luz de León, diretora-geral da empresa de design estratégico e tecnologia criativa Diga33!, ensina como fazê-lo de forma simples usando o software Axure.

Descubra no vídeo.

5 passos para inserir formulários nos seus apps usando o Axure

1. Localize os elementos do formulário e comece pelo "input" do texto

Os elementos necessários para criar seu formulário – texto básico, senha, listas etc. – estão na seção "Forms". Comece inserindo na tela em branco um "input" básico, o elemento de texto.

Em seguida, escreva a descrição da caixa: nome, sobrenome ou qualquer outro dado que pedirá ao usuário neste formulário.

2. Explore outros tipos de campos

Se precisar de um campo de texto de ajuda, com letras menores e diferentes, por exemplo, utilize a ferramenta "Label".

Para a senha, cujos componentes, por sua natureza, não estão o tempo todo visíveis na tela, existe um elemento próprio: "Password". Insira cada um dos elementos na tela em branco e adicione a descrição de cada campo.

3. Descubra o comando "Hint"

É muito útil quando você quer que um texto escrito dentro de uma caixa do formulário desapareça quando o usuário clicar nela.

Para isso, use o elemento "Hint", presente na biblioteca de "Forms".

4. Adicionando elementos suspensos

Uma data de nascimento, por exemplo, costuma ter a opção de seleção em um formulário através de uma lista suspensa com os meses do ano e os dias do mês.

Para criar algo assim em sua página, utilize a ferramenta "Droplist".

5. Utilizando o comando "Checkbox"

Por fim, para determinar os elementos que o usuário poderá marcar (como, por exemplo, gênero ou estado civil, entre outros), escolha a ferramenta "Checkbox" e adicione ao seu formulário.

Não se esqueça de agrupar os elementos clicando com o botão direito do mouse e selecionando "Assign Radio Group", caso queira criar um campo de "Checkbox" no qual haja apenas uma opção de resposta possível.

Curtiu as dicas? Lembre-se de que pode aprender a projetar experiências de usuários e exibi-las através de protótipos avançados no Axure no curso de Luz de León, UX: prototipagem e criação de um aplicativo de comércio eletrônico com o Axure 9.

Você também pode se interessar por:

- Dos e Don'ts do UX Design
- Como usar guias e grids no Adobe XD
- Design de aplicativos: prototipagem para iniciantes, um curso de Filippos Protogeridis
- Criação de UI Kits com Sketch, um curso de Nodos.
- Design de produto digital com Lean e UX, um curso de Óscar Santos Pérez