Controles da interface do usuário
Os controles são elementos de IU que determinam como dados, texto, imagens e outras informações aparecem nos formulários do usuário tanto para exibição quando para entrada do usuário. Cada tipo de controle tem uma aparência única e oferece diferentes funções aos usuários. O sistema atribui um controle padrão quando um novo campo é definido. Por exemplo, os clientes devem criar um perfil para se cadastrar em um programa de recompensas. Um campo de data é definido para os clientes inserirem ou selecionarem sua data de nascimento. O sistema atribui um controle de Data e Hora ao campo de data de nascimento.
Os controles não são necessariamente associados aos dados. Por exemplo, depois de criar um perfil, os clientes podem visualizar e editar seus perfis. Um botão de controle é criado para permitir que os clientes editem as informações do perfil. Não há dados associados ao controle do botão.
Validação de dados com controles
Os controles representam a abordagem mais comum de validação. É possível validar a entrada do usuário com os controles usando tipos de controle, campos requisitados e configurações editáveis.
Tipos de controle
O uso do tipo de controle correto para um propósito específico garante que os usuários insiram valores válidos. A tabela a seguir mostra o exemplo de casos de uso para diferentes tipos de controle.
| Caso de uso | Tipo de controle | Como o controle ajuda na validação |
|---|---|---|
| Os usuários devem inserir uma data que inclua dia, mês e ano. | Data e Hora | A seleção de uma data a partir de um ícone de calendário garante que os usuários insiram uma data em formato válido. |
| Os usuários devem selecionar um dos três tipos possíveis de empréstimo. O usuário deve ver todos os tipos no formulário. | Radio buttons | Restringe as escolhas a um conjunto de valores válidos e permite aos usuários selecionar somente um valor. É possível usar radio buttons quando somente um pequeno número de opções (por exemplo, menos do que cinco) está disponível. |
| Os usuários devem selecionar um dos 10 tipos de cadeiras de escritório em uma lista. As opções não precisam ser exibidas no formulário. | Dropdown | Restringe os valores válidos aos que aparecem na lista. Uma lista do dropdown apresenta as opções somente quando os usuários clicam no controle. Isso ajuda a reduzir a quantidade de informações no formulário. |
| Os usuários devem selecionar o país no qual residem em uma lista. O usuário pode inserir texto no controle para ajudar a encontrar o país correto. | Autocompletar | Quando os usuários inserem um ou mais valores no controle, o controle filtra as opções disponíveis. Isto ajuda os usuários a encontrar uma opção em uma lista caso haja um grande número (por exemplo, mais de 20) de opções possíveis. |
| Os usuários selecionam uma opção para adquirir seguro de viagem adicional. | Checkbox | Os usuários podem selecionar a checkbox ou deixá-la em branco. Essa opção assegura que uma propriedade verdadeira/falsa seja verdadeira (selecionada) ou falsa (não selecionada). |
Configurações editáveis
As configurações editáveis podem ser usadas nos controles para restringir os valores de entrada aos formatos válidos. As configurações são específicas ao tipo de controle. Por exemplo, é possível especificar se os usuários não podem inserir dados como texto. No caso, eles devem selecionar uma data a partir do ícone de calendário. É uma melhor prática fazer com que os usuários especifiquem datas utilizando um ícone de calendário para garantir que a data inserida corresponda ao formato esperado pelo aplicativo. Também é possível especificar o mínimo e o máximo de caracteres permitidos em um controle de entrada de texto.
Campos obrigatórios
Configurar um controle como um campo obrigatório garante que o usuário insira um valor. Caso não haja valor, os usuários recebem uma mensagem de erro quando tentam enviar um formulário. No exemplo do perfil do programa de prêmios, você decide configurar a data de nascimento como um campo obrigatório. Caso os usuários não insiram uma data no campo, uma mensagem de erro aparece quando os usuários tentam enviar o formulário. A mensagem de erro não aparece caso haja uma data no campo.
No centro da imagem a seguir, deslize a linha vertical para ver a visualização Criar perfil (Create profile) sem uma data inserida no campo obrigatório e com uma data inserida no campo obrigatório.
Nota: Certifique-se de que os usuários preencham os formulários em um aplicativo de forma correta fornecendo instruções breves. Usando rótulos, texto de auxílio e espaços reservados, é possível definir que tipo de entrada vai em cada controle, reduzindo o tempo necessário para preencher o formulário. Para mais informações sobre a edição de controles, consulte Adição de texto a controles.
Verifique seus conhecimentos com a interação a seguir.
This Topic is available in the following Module:
If you are having problems with your training, please review the Pega Academy Support FAQs.
Quer nos ajudar a melhorar esse conteúdo?