Introdução
O preenchimento de questionários é uma tarefa essencial para a maioria dos profissionais de saúde que usam apps de saúde para dispositivos móveis.
Inserir dados pode ser difícil e podem ocorrer erros. Nosso objetivo com a biblioteca de captura de dados estruturados (SDC, na sigla em inglês) e as diretrizes de design é permitir que você melhore a experiência do usuário na entrada de dados e a qualidade dos dados capturados.
Os quatro temas abordados nesta seção são:
Layout e navegação
Rolagem longa e layout paginado
![Comparação de rolagem longa e layouts paginados. A rolagem longa tem três perguntas em uma página, enquanto a paginada tem uma pergunta.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/comparinglayouts.png?hl=pt-br)
O SDK FHIR Android tem duas opções de layout para você escolher:
- Rolagem longa (padrão)
- Paginado
Um questionário de rolagem longa mostra todas as perguntas em uma página, e os usuários acessam cada uma delas rolando a tela.
Um questionário paginado exibe o conteúdo em páginas separadas. As perguntas ou os campos de entrada relacionados podem ser agrupados em uma página. Os botões "Voltar" e "Próximo" são fixados na parte de baixo da página para navegar entre elas.
Saiba como criar um questionário paginado no GitHub (em inglês).
Qual layout você deve selecionar?
Cada opção de layout tem suas vantagens e desvantagens. Abaixo estão alguns atributos de cada tipo de layout que você precisa considerar ao escolher qual deles usar.
Rolagem longa | Paginado | |
---|---|---|
Velocidade da navegação | Navegação mais rápida | Navegação mais lenta |
Precisão da navegação | Navegação menos precisa | Navegação mais precisa |
Mudar o foco na pergunta após trocar de tarefa | Dificuldade de reorientar após a interrupção | Facilidade de reorientação após interrupção |
Preencher o questionário digital após a visita (cópia do artigo) | É mais fácil copiar do papel | É mais difícil copiar do papel |
Telas pequenas | pior para telas pequenas | melhor para telas pequenas |
Acessibilidade | Pior para acessibilidade. Difícil de navegar. | Melhor para acessibilidade. Telas discretas que podem ser processadas por leitores de tela, conversão de texto em voz e outras tecnologias. |
Espaço para instruções e explicações | Pior para orientações e instruções | Melhor para orientações e instruções |
Rolagem longa
![Questionário com números exibidos na frente do título da pergunta.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/numberedquestionnaire.png?hl=pt-br)
Numere as perguntas para facilitar a navegação em um layout de página única.
![Comparando o tamanho da fonte do título da pergunta. A rolagem longa é de 16 px. A largura da página é 28 px.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/adjustfont.png?hl=pt-br)
Diminua o tamanho da fonte dos títulos das perguntas ao usar a rolagem longa para que mais conteúdo fique visível na tela. Exemplo: a rolagem longa tem 16 pixels. A largura da página é 28 px.
Paginação
![Pergunta paginada "Em que estado eles moram?" com
seleções do menu suspenso.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/onequestion.png?hl=pt-br)
Teclados, menus suspensos e outros componentes ocupam espaço na página, portanto, tente ter uma pergunta por página.
![Campos de endereço paginados em que o campo inferior não fica visível na tela.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/hidecontent.png?hl=pt-br)
O conteúdo precisa ficar visível acima da dobra.
![Diversos campos de texto agrupados como uma pergunta. O título da pergunta é
a pessoa de contato alternativa, com nome, relacionamento e número de telefone
como campos de entrada.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/groupcontent.png?hl=pt-br)
Exemplo: esses três campos de texto estão relacionados a dados de contato alternativos, então eles são agrupados em uma página.
![Perguntas não relacionadas na mesma página. A primeira pergunta é sobre a cobertura do seguro e a segunda é sobre condições de saúde anteriores.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/unrelatedgroup.png?hl=pt-br)
Evite agrupar conteúdo não relacionado em uma página para evitar confusão.
Indicador de progresso
O indicador de progresso reflete o progresso feito em um questionário.
Inclua um indicador de progresso em questionários longos para ajudar os usuários a navegar e ver o progresso. Os indicadores de progresso mostram a localização em um questionário e quanto ainda falta ser concluído.
![Indicador de progresso localizado na parte superior, abaixo do título do questionário.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/progress-scroll.png?hl=pt-br)
Posicione no topo acima da pergunta e da âncora para que fique sempre visível, mesmo ao rolar a tela.
![Indicador de progresso localizado na parte de baixo, acima dos botões de navegação.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/progress-paginated.png?hl=pt-br)
É possível posicionar a câmera na parte de baixo, acima dos botões "Voltar" e "Próximo". Com esse layout, você também pode exibir em qual página o usuário está.
Botões de navegação
Botões de navegação (Voltar, próximo) são fixados na parte inferior do questionário. Em uma rolagem infinita ou na última página de um questionário paginado, o botão "Próxima" será marcado como "Enviar".
Mantenha os botões em um local consistente e sempre use botões ativos marcados com a ação deles, como "Voltar" e "Próximo".
![Os botões de navegação estão ativos. Botão "Avançar" com preenchimento azul.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/active-buttons.png?hl=pt-br)
Sempre mostre os botões ativos, mesmo que os formulários estejam incompletos. Ao tocar em "Próxima", mostre uma caixa de diálogo pop-up com instruções para preencher campos ausentes ou erros de validação.
![O botão "Próxima" está inativo. Botão "Avançar" com preenchimento cinza.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/inactive-buttons.png?hl=pt-br)
Os botões inativos dificultam que os usuários saibam como corrigir o problema.
![O botão "Próxima" tem apenas um ícone de seta, sem descrição.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/icon-buttons.png?hl=pt-br)
Evite usar botões somente para ícones. Sempre rotule os botões com uma ação descritiva.
Perguntas e instruções
![Questionário paginado com anotações que mostra os componentes das perguntas e instruções.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/question-banner.png?hl=pt-br)
- Título do questionário.
- Indicador de progresso.
- Cabeçalho do grupo.
- Título da pergunta.
- Instruções.
- Campo de entrada.
- Formato de entrada.
- Campos obrigatórios.
- Ajuda.
Cabeçalho do grupo
O cabeçalho do grupo é um cabeçalho de texto exibido acima dos títulos das perguntas.
Use o cabeçalho do grupo para agrupar perguntas semelhantes. Use o cabeçalho do grupo somente quando ele adicionar informações úteis.
![O cabeçalho do grupo é Histórico do paciente.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/group-short.png?hl=pt-br)
Use um título curto para agrupar perguntas semelhantes. Exemplo: todas as perguntas relacionadas ao histórico do paciente são agrupadas.
![O cabeçalho do grupo contém informações pessoais e informações de estilo de vida.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/group-long.png?hl=pt-br)
Evite títulos complexos ou longos que excedam uma linha.
Título da pergunta
O título da pergunta descreve de forma sucinta quais informações são solicitadas. Os títulos das perguntas têm a maior fonte na página para chamar a atenção do usuário para a pergunta.
Todas as páginas ou perguntas precisam ter um título de pergunta. Mantenha os títulos das perguntas curtos ou crie uma frase.
![O título da pergunta é a data de nascimento.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-short.png?hl=pt-br)
Os títulos curtos facilitam a leitura dos usuários.
![O título da pergunta é "Qual é sua data de nascimento?" Em que cidade você nasceu?](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-long.png?hl=pt-br)
Evite perguntas muito longas ou aninhar duas perguntas.
![Sem título de pergunta.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-none.png?hl=pt-br)
Sempre inclua um título de pergunta para que os usuários saibam com mais facilidade quais informações precisam ser inseridas.
Instruções
Instruções é um campo de texto opcional mostrado abaixo do título da pergunta.
Use o campo de instructions para explicar instruções relevantes. Por exemplo, se a pergunta é obrigatória, quantas seleções podem ser feitas (uma ou várias) e o que os usuários precisam fazer se não conseguirem preencher todas as informações ou responder à pergunta.
![Instruções: selecione uma opção. Pergunta obrigatória.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-required.png?hl=pt-br)
Use o campo de instruções para informar se uma pergunta é necessária e quantas seleções podem ser feitas.
![Instruções: se o DOB exato for desconhecido, marque a caixa de seleção DOB desconhecido.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-edge.png?hl=pt-br)
Use instruções para informar aos usuários o que fazer se encontrarem uma situação em que não conseguem preencher todos os campos.
![Instruções: o contato alternativo é usado em casos de
emergência e pode ser parente, por exemplo, parceiro,
mãe ou irmão.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-definitions.png?hl=pt-br)
Use instruções para dar mais contexto ou definições para os termos usados no título da pergunta.
Rotular texto
O Texto do rótulo informa aos usuários quais informações são solicitadas para um campo de texto ou uma lista suspensa. Quando o campo é selecionado, o texto do rótulo se move do meio do campo de texto para a parte superior.
Cada campo de texto e menu suspenso precisa ter um rótulo. O texto do rótulo precisa ser curto, claro e totalmente visível.
![Texto do rótulo: nome.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-short.png?hl=pt-br)
O texto do rótulo precisa ser curto, claro e totalmente visível.
![Texto do rótulo: insira o nome do cliente.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-long.png?hl=pt-br)
O texto do marcador não deve ser muito longo, truncado nem ocupar várias linhas.
![Nenhum texto de marcador.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-none.png?hl=pt-br)
Sempre rotule o campo de texto para que os usuários saibam quais informações precisam ser inseridas.
Formato de entrada
EntryFormat é mostrado abaixo do campo de texto para informar os usuários sobre o formato específico que precisa ser inserido. Mensagens de erro serão exibidas no campo EntryFormat e substituem as instruções atuais do EntryFormat.
Use EntryFormat para datas, números de telefone, unidades e números inteiros.
![Formato de data: dd/mm/aaaa.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-do.png?hl=pt-br)
Mostre o formato de data abaixo do campo e inclua uma frase descritiva.
![Nenhum formato de data.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-none.png?hl=pt-br)
Não mostrar formatos de dados pode fazer com que os dados sejam inseridos incorretamente.
![Abaixo do campo de texto de frequência cardíaca, o formato de entrada mostra: Faixa
normal: de 60 a 100 bpm. Abaixo do campo de texto de saturação de oxigênio no sangue, o
formato de entrada mostra: Intervalo normal: 95 a 100%.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-range.png?hl=pt-br)
Ao inserir faixas médicas, forneça exemplos da faixa normal. Isso pode ajudar os usuários a detectar erros ou números que estão fora do intervalo.
Campos obrigatórios
Os campos obrigatórios indicam que o usuário precisa preencher o campo e não pode avançar até que ele seja preenchido.
Para indicar que um campo é obrigatório, mostre um asterisco (*) no final do título da pergunta. Inclua "pergunta obrigatória" no campo de instruções, já que não é óbvio para todos o que um asterisco (*) indica. Se não houver um título de pergunta, mostre o asterisco (*) no texto do rótulo.
![Asterisco após o título e a pergunta obrigatória nas instruções abaixo.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-explanation.png?hl=pt-br)
Mostre que o campo é obrigatório com asterisco (*) e inclua instruções por escrito que indiquem "pergunta obrigatória". Muitos deles não conhecem o que o asterisco(*) significa e se beneficiariam com a explicação.
![Asterisco após o título da pergunta, mas sem descrição por escrito explicando o que é o asterisco.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-noexplanation.png?hl=pt-br)
Evite mostrar apenas o asterisco (*) sem nenhuma descrição por escrito do que ele significa.
![As instruções abaixo mostram um asterisco após o título e a pergunta obrigatória.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-localize.png?hl=pt-br)
Use os termos mais conhecidos dos usuários. Exemplo: "Obrigatório" pode ser o termo mais familiar e usado em alguns países em vez de "Obrigatório".
![Sem asterisco. As instruções são opcionais.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-optional.png?hl=pt-br)
Se a maioria das perguntas for obrigatória, indique quais são opcionais.
![Asterisco após o texto do rótulo. Pergunta obrigatória exibida no campo "Formato de entrada".](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-label.png?hl=pt-br)
Se não houver um título de pergunta, mostre o asterisco.
Ajuda
Um ícone de ajuda aparece ao lado do título da pergunta. Ao tocar no ícone, uma caixa de informações de ajuda vai aparecer com mais informações. Tocar no ícone novamente fecha a caixa de informações de ajuda.
Este é um componente opcional. Use somente quando for útil para exibir informações adicionais que não precisam estar sempre visíveis.
![Ajuda: a vacina sazonal contra a gripe também é chamada de imunização contra a gripe.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/help-do.png?hl=pt-br)
Use a ajuda para informações que os usuários precisam ver apenas uma vez ou que ofereçam informações adicionais.
![Ajuda: Selecione uma opção.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/help-dont.png?hl=pt-br)
Evite ocultar instruções que devem estar visíveis para todos.
Captura de dados
![Oito componentes de captura de dados: campos de texto, seletor de data, menu suspenso, controle deslizante, escolha única, escolha booleana, múltipla escolha e escolha aberta.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datacapture-banner.png?hl=pt-br)
Quando usar qual componente?
Tipo de entrada de dados | Escolha booleana | Uma única escolha | Múltipla escolha | Opção aberta | Lista suspensa | Seletor de data | Campo de texto | Controle deslizante | Preenchimento automático |
---|---|---|---|---|---|---|---|---|---|
Selecione "Sim" ou "Não" | |||||||||
Selecionar uma opção | Atenção |
||||||||
Selecionar várias opções | Atenção |
||||||||
Texto | |||||||||
Datas | |||||||||
Números | Atenção |
Campos de texto
Os campos de texto indicam que os usuários podem inserir informações.
Use campos de texto quando alguém precisar inserir texto no questionário, como nome, número de telefone ou endereço. Limite a entrada de dados que exija entrada de texto (teclado) quando for possível usar uma seleção pré-preenchida (múltipla escolha ou escolha única).
Saiba mais sobre campos de texto em material.io (link em inglês)
![Título da pergunta: "Registrar uma nova pessoa". Campo de texto 1: nome. Campo de texto 2: número de telefone.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/text-do.png?hl=pt-br)
Use campos de texto para entrada de dados que exija a digitação de palavras ou números exclusivos.
![Título da pergunta: motivo da visita? Campo de texto: descreva o motivo](https://developers.google.cn/static/open-health-stack/design/images/data-capture/text-dont.png?hl=pt-br)
Evite usar respostas de texto livre se elas forem de seleção múltipla, menu suspenso ou de escolha única.
Escolha única e escolha booleana
Escolha única e escolha booleana são um controle de seleção que aparece como botões de opção quando os usuários precisam selecionar uma opção.
Use a boolean choice quando houver uma escolha binária de "Sim" ou "Não". Caso contrário, use o componente de escolha única. Se houver mais de 10 opções na lista, use um menu suspenso em vez de uma única escolha. Um menu suspenso é mais denso e mais fácil de navegar quando há muitas opções.
![Question title: É a primeira visita dele? As opções de seleção booleana são sim e não.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-boolean.png?hl=pt-br)
Use a escolha booleana quando as opções forem "sim" e "não".
![Question title: Qual é o nível mais elevado de educação alcançado?
Estas são as opções de escolha única: 1. Não sabe 2. Sem formação
3. ensino fundamental 4. ensino médio.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-single.png?hl=pt-br)
Use uma única opção quando os usuários puderem selecionar uma opção na lista.
![Lista de escolha única mostrando uma lista muito longa de estados. Os estados 23 a 27
são visíveis.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-dont.png?hl=pt-br)
Evite escolher uma única opção para listas muito longas (mais de 10). Use um menu suspenso.
Seletor de data
O seletor de data permite que os usuários insiram datas usando o seletor de datas do calendário e o teclado. O seletor de data do calendário é ativado quando o ícone de calendário é tocado.
Use o seletor de datas apenas para datas próximas à data de hoje, como a última menstruação ou a próxima visita. Caso contrário, priorize a entrada do teclado para datas como data de nascimento.
![Data de nascimento A entrada da data do teclado está ativa. Ícone do Agenda no lado direito da caixa do campo de texto. A caixa de seleção está marcada, indicando que a data é aproximada.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datepicker-do.png?hl=pt-br)
Para inserir datas, ative a entrada do teclado (ao tocar na caixa de texto) e o seletor de data da agenda (toque no ícone).
![Visualização da agenda do seletor de data.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datepicker-dont.png?hl=pt-br)
Evite ativar o seletor de data da agenda como o único método de entrada para datas de nascimento. Navegar para o mês e o ano é difícil.
Lista suspensa
Os menus suspensos permitem que os usuários escolham entre várias opções. À medida que o usuário começa a digitar, as opções são filtradas com base no que é inserido. Isso pode ajudar os usuários a encontrar rapidamente a opção certa em uma lista grande.
Os menus menu suspenso são uma ótima alternativa para uma única escolha quando a lista de opções é muito longa (mais de 10) porque ocupam menos espaço.
![Menu suspenso para os estados da ficha dos estados A a F.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/dropdown-do.png?hl=pt-br)
Use um menu suspenso ao selecionar uma opção em uma lista muito longa, como selecionar um estado ou cidade.
![Menu suspenso de idade, listando números de um a seis.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/dropdown-dont.png?hl=pt-br)
Evite usar um menu suspenso quando for mais fácil digitar o conteúdo em vez de percorrer todas as opções, como a idade.
Múltipla escolha
Múltipla escolha é um controle de seleção que aparece como caixas de seleção quando os usuários podem fazer várias seções de uma lista de opções.
Use múltipla escolha quando os usuários só puderem selecionar opções de uma lista predeterminada de opções. Se os usuários também puderem adicionar a própria resposta livre, use o componente Open Choice. No campo instructions, escreva "Selecione todas as opções aplicáveis" para que os usuários saibam que podem selecionar várias opções.
![Question title: Qual o motivo da visita de hoje? Quatro caixas de seleção
e opções mostradas, uma em cada linha.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/multiple-do.png?hl=pt-br)
A aparência padrão é um contêiner ao redor das caixas de seleção para destacar a área tocável.
![Título da pergunta: Qual é o motivo da visita de hoje? Seis caixas de seleção
e opções exibidas, duas em cada linha. Parte do texto é cortada para duas
das opções.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/multiple-dont.png?hl=pt-br)
Evite mostrar várias opções por linha, já que o texto pode ser cortado devido à variação no tamanho da tela do smartphone e no tamanho do texto.
Opção aberta
A escolha aberta é semelhante à múltipla escolha, mas adiciona a possibilidade de o usuário selecionar Outro e digitar texto livre.
Use escolha aberta quando houver uma lista predefinida, mas os usuários também podem adicionar outras opções. Use escolha aberta quando a maioria das opções for conhecida, mas você prevê que alguns usuários vão selecionar Outros porque nenhuma das opções fornecidas se aplica.
!["Outro" está selecionado. O campo para adicionar texto livre está ativo.
O teclado está visível.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/openchoice-do.png?hl=pt-br)
Use quando for importante que dados precisos sejam coletados e nenhuma das opções predefinidas se aplicar. Exemplo: ocupação.
![Título da pergunta: Gostaria de informar algo mais? Três opções: "Sim", "Não" e
"Outro". "Outro" está selecionado. O campo para adicionar texto livre está ativo.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/openchoice-dont.png?hl=pt-br)
Evite usar essa opção se a maioria das respostas exigir a seleção de Outro. Nesse caso, use um campo de texto ou de parágrafo.
Controle deslizante
Com os controles deslizantes, os usuários podem fazer seleções em um intervalo de valores. O controle deslizante no SDK FHIR Android é um controle deslizante discreto. Um controle deslizante discreto permite que os usuários selecionem um valor específico de um intervalo predeterminado. Marcas de seleção podem ser usadas para indicar os valores disponíveis. Evite usar o controle deslizante para a entrada de dados numéricos. Em vez disso, use um campo de texto ou um menu suspenso.
Saiba mais sobre controles deslizantes em material.io (link em inglês)
![Título da pergunta: quantos filhos o cliente tem? Um controle deslizante
com o número quatro é selecionado.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/slider-dont.png?hl=pt-br)
Evite usar o controle deslizante para valores específicos quando houver um intervalo grande. Use campos de texto com entrada de teclado.
Validação e erros de dados
Validação de dados
As validações de dados restringem o tipo de dados ou os valores que podem ser inseridos em um campo de texto. A validação de dados pode melhorar a qualidade dos dados coletados.
Use o campo EntryFormat para mostrar restrições de formato ou valor. Mostre mensagens de erro significativas de validação de dados inline e imediatamente para que os usuários possam corrigir o erro.
![Texto do marcador: número de telefone. Formato de entrada: oito dígitos.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-show.png?hl=pt-br)
Mostre as restrições de validação de dados com antecedência para que os usuários saibam como inserir os dados.
![Texto do marcador: número de telefone. Formato de entrada: nenhum.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-hide.png?hl=pt-br)
Sem mostrar quantos dígitos o número de telefone precisa ter, os usuários provavelmente vão encontrar um erro e esse processo levará mais tempo para ser concluído.
![A data inserida é 22/33/4444. Mensagem de erro: formato de data incorreto. O formato precisa ser: dd/mm/aaaa.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-timely.png?hl=pt-br)
Mostrar erros significativos de validação de dados imediatamente após o preenchimento do campo. As mensagens de erro substituem o texto do formato de entrada.
![Caixa de diálogo. Corrija os erros a seguir. 1. número de telefone. 2. data de nascimento;
Botão 1: enviar mesmo assim. Botão 2: corrigir erros.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-dontwait.png?hl=pt-br)
Não espere o usuário pressionar "Enviar" para mostrar os erros de validação pela primeira vez.
Erros
As mensagens de erro alertam os usuários quando algo dá errado e informam como corrigir o problema.
Usar cores, iconografia e texto para comunicar erros.
Saiba mais sobre mensagens de erro em material.io (link em inglês)
![A mensagem de erro é "Pergunta obrigatória. Selecione uma opção".](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-howtofix.png?hl=pt-br)
Explique por que há um erro (pergunta obrigatória) e o que pode ser feito para corrigi-lo (selecione uma opção).
![A mensagem de erro é "Erro".](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-noexplanation.png?hl=pt-br)
Uma mensagem de erro que diz apenas "error" não é útil para os usuários saberem como corrigir o erro.
![Data de nascimento A data inserida é 22/33/4444. A mensagem de erro está no formato de data incorreto. O formato precisa ser: dd/mm/aaaa.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-noblame.png?hl=pt-br)
Exemplo: "Formato de data incorreto. O formato precisa ser dd/mm/aaaa".
![Data de nascimento A data inserida é 22/33/4444. A mensagem de erro é "Você
inseriu o formato de data errado".](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-dontblame.png?hl=pt-br)
Evite culpar o usuário com mensagens de erro que incluam "você". Exemplo: "Você inseriu o formato de data errado".
![Mensagem de erro com um ícone na frente de um texto vermelho exibindo uma pergunta "obrigatória". Selecione uma ou mais opções". Os contêineres de caixa de seleção têm um
contorno vermelho.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-combo.png?hl=pt-br)
Use cores, iconografia e texto para informar aos usuários que há um erro.
![Nenhuma mensagem de erro ou ícone. Os contêineres de caixa de seleção têm um contorno vermelho,
que é o único indicador de erro.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-onlycolor.png?hl=pt-br)
Para oferecer suporte a deficiências visuais comuns, como o daltonismo de vermelho e verde, evite confiar apenas na cor para comunicar um erro.
![Os contêineres de caixa de seleção têm um contorno vermelho e um ícone de erro exibido
atrás de cada contêiner. Três ícones estão visíveis.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-icons.png?hl=pt-br)
Um ícone costuma ser suficiente. Não exagere no uso de ícones para comunicar o erro.