PocketBlocks Docs
Português - Brasil
Português - Brasil
  • Visão geral
  • Instalação
  • Construção de aplicativos
    • Criando um novo aplicativo
    • Editor de aplicativo
    • Manipuladores de eventos
    • Escrevendo JavaScript
      • Escrevendo JavaScript por {{ }}
      • Consulta JavaScript
      • Transformadores
      • Estado temporário
      • Respondedor de dados
      • Funções JavaScript integradas
      • Uso de bibliotecas de terceiros
    • Guias de Componentes
      • Lista de opções
      • Exibição em lista
      • Menu lateral
      • Imagem
      • Gráficos
      • Carregamento de arquivo
      • Componente customizado
      • Uso de Markdown
    • Módulo
    • Interface de usuário do aplicativo
      • Estilo, tema e usabilidade
      • Crie um formulário eficiente e fácil de usar
    • Navigação
    • Atalhos de Teclado
    • Gerenciamento de versão e lançamento
  • Construção de plug-ins
    • Desenvolva plug-ins de componentes de UI
  • Gerenciamento do espaço de trabalho
    • Autenticação
    • Membros e grupos
    • Permissões para recursos
    • Personalização de marca
  • Outros
    • Onde estão as fontes de dados/biblioteca de consultas?
    • Embarcando aplicativos
Powered by GitBook
On this page
  • Selecione os componentes de entrada adequados
  • Mantenha o layout limpo e consistente
  • Agrupe o conteúdo com o divisor PocketBlocks
  • Adicionar feedback do usuário
  • Limpe os campos de entrada no envio
  1. Construção de aplicativos
  2. Interface de usuário do aplicativo

Crie um formulário eficiente e fácil de usar

PreviousEstilo, tema e usabilidadeNextNavigação

Last updated 11 months ago

Selecione os componentes de entrada adequados

O design UX dos componentes de entrada em um formulário é crucial para a eficiência do formulário. Componentes escolhidos corretamente podem economizar esforço dos usuários e levar a melhores resultados. PocketBlocks oferece uma variedade de componentes de entrada, incluindo entrada de texto, entrada de número, lista de opções e botões de opção, cada um dos quais funciona para diferentes cenários.

Por exemplo, quando a entrada é gerada a partir de dados, use a lista de opções para permitir que os usuários preencham a entrada rapidamente.

Outros componentes de entrada, como rádio, são realmente úteis quando os usuários precisam escolher diretamente entre duas opções, por exemplo, para indicar se gostariam de se inscrever em uma atividade específica, como uma conferência.

A entrada de números também é um tipo de componente comumente usado – por exemplo, em um sistema de gerenciamento de pedidos.

Mantenha o layout limpo e consistente

Mantenha todos os comprimentos dos campos de entrada iguais para tornar o formulário visualmente organizado e coloque todos os campos de entrada em uma única coluna para obter melhor legibilidade.

Agrupe o conteúdo com o divisor PocketBlocks

Use o componente PocketBlocks Divisor para agrupar campos de entrada relevantes para ajudar os usuários a processar informações de maneira organizada.

Adicionar feedback do usuário

O componente Formulário é frequentemente usado para operações CRUD, que às vezes podem ser arriscadas devido a erros humanos. Para evitar operações CRUD prejudiciais, você pode adicionar um modal de confirmação antes que os usuários enviem o formulário.

Limpe os campos de entrada no envio

Limpar os campos de entrada em um formulário após o envio ajuda os usuários a prosseguir com os envios subsequentes. Você pode definir na guia Propriedades e alternar Redefinir após envio bem-sucedido.

No entanto, às vezes é melhor deixar o formulário desmarcado — por exemplo, quando muitos dos valores permanecem os mesmos em envios subsequentes ou quando o usuário edita continuamente os dados. Nesses casos, você pode inserir um botão com um manipulador de eventos para limpar cada entrada ao clicar.

Da mesma forma, uma notificação após o envio dos usuários fornece feedback oportuno. Você pode adicionar uma notificação global ao botão Enviar. No PocketBlocks, você pode adicionar notificações globais de três maneiras. Veja para saber mais.

notificação global