Introdução
Preencher questionários é uma tarefa essencial para a maioria dos profissionais de saúde que usam apps de saúde móvel.
A entrada de dados pode ser difícil e erros acontecem. Nosso objetivo com a biblioteca de captura de dados estruturados (SDC, na sigla em inglês) e as diretrizes de design é ajudar você a melhorar 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
O SDK FHIR do 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 navegam até cada uma delas rolando a tela.
Um questionário paginado mostra o conteúdo em páginas separadas. Perguntas ou campos de entrada relacionados podem ser agrupados em uma página. Os botões "Voltar" e "Próxima" ficam ancorados na parte de baixo da página para navegar entre elas.
Saiba como paginar um questionário no GitHub
Qual layout você deve selecionar?
Cada opção de layout tem vantagens e desvantagens. Confira abaixo alguns atributos de cada tipo de layout para considerar ao escolher qual usar.
| Rolagem longa | Paginado | |
|---|---|---|
| Velocidade de navegação | Navegação mais rápida | Mais lento para navegar |
| Precisão da navegação | Navegação menos precisa | Navegação mais precisa |
| Retomar a pergunta após a troca de tarefas | Dificuldade de se reorientar após uma interrupção | Mais fácil de se reorientar após uma interrupção |
| Preencher o questionário digital após a visita (copiando do papel) | Mais fácil ao copiar de um documento | Mais difícil ao copiar de um papel |
| Telas pequenas | Pior para telas pequenas | Melhor para telas pequenas |
| Acessibilidade | Pior para acessibilidade. É difícil 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ção e instruções | Melhor para orientação e instruções |
Rolagem longa
Numere as perguntas para facilitar a navegação em um layout de página única.
Diminua o tamanho da fonte dos títulos das perguntas ao usar a rolagem longa para mais conteúdo ficar visível na tela. Exemplo: rolagem longa é de 16 px. Paginado é 28 px.
Paginação
Teclados, menus suspensos e outros componentes ocupam espaço na página. Por isso, faça uma pergunta por página.
O conteúdo precisa estar visível acima da dobra.
Exemplo: estes três campos de texto estão relacionados a informações de uma pessoa para contato alternativo. Por isso, eles são agrupados em uma página.
Evite agrupar conteúdo não relacionado em uma página para não causar 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 acompanhar o progresso. Os indicadores de progresso mostram a localização em um questionário e quanto falta para concluir.
Posicione na parte de cima, acima da pergunta, e fixe para que fique sempre visível, mesmo ao rolar a tela.
Pode ser posicionado na parte de baixo, acima dos botões "Voltar" e "Próxima". Com esse layout, você também pode mostrar em qual página o usuário está.
Botões de navegação
Os botões de navegação (voltar, próxima) ficam ancorados na parte de baixo do questionário. Em uma rolagem infinita ou na última página de um questionário paginado, o botão "Próxima" é chamado de "Enviar".
Mantenha os botões em um local consistente e sempre use botões ativos rotulados com a ação deles, como "Voltar" e "Próxima".
Sempre mostre 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 os campos ausentes ou erros de validação.
Botões inativos dificultam que os usuários saibam como corrigir o problema.
Evite botões somente com ícones. Sempre rotule os botões com uma ação descritiva.
Perguntas e instruções
- Título do questionário.
- Indicador de progresso.
- Cabeçalho do grupo.
- Título da pergunta.
- Instruções.
- Campo de entrada.
- Formato da 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 apenas o cabeçalho do grupo quando ele adicionar informações úteis.
Use um título curto para agrupar perguntas semelhantes. Exemplo: todas as perguntas relacionadas ao histórico do paciente são agrupadas.
Evite títulos complexos ou longos que ultrapassem uma linha.
Título da pergunta
O título da pergunta descreve de forma concisa quais informações são solicitadas. Os títulos das perguntas têm o maior tamanho de fonte da página para atrair a atenção do usuário para a pergunta.
Cada página ou pergunta precisa ter um título. Mantenha os títulos das perguntas curtos ou formule-os como uma pergunta.
Títulos curtos facilitam a leitura para os usuários.
Evite perguntas muito longas ou que contenham duas perguntas.
Sempre inclua um título para facilitar a compreensão dos usuários sobre as informações que precisam inserir.
Instruções
Instruções é um campo de texto opcional mostrado abaixo do título da pergunta.
Use o campo instruções para explicar instruções relevantes, como se a pergunta é obrigatória, quantas seleções podem ser feitas (uma ou várias) e o que os usuários devem fazer se não conseguirem preencher todas as informações ou responder à pergunta.
Use o campo de instruções para informar se uma pergunta é obrigatória e quantas seleções podem ser feitas.
Use instruções para informar aos usuários o que fazer se eles encontrarem um cenário como não conseguir preencher todos os campos.
Use instruções para fornecer mais contexto ou definições de termos usados no título da pergunta.
Texto do marcador
O texto do rótulo informa aos usuários quais informações são solicitadas em um campo de texto ou um menu suspenso. Quando o campo é selecionado, o texto do rótulo se move do meio para a parte de cima do campo de texto.
Todo campo de texto e caixa de menu suspenso precisa ter um rótulo. O texto do rótulo precisa ser curto, claro e totalmente visível.
O texto do rótulo precisa ser curto, claro e totalmente visível.
O texto do rótulo não pode ser muito longo, truncado ou ocupar várias linhas.
Sempre rotule o campo de texto para que os usuários saibam quais informações inserir.
Formato da entrada
O EntryFormat é mostrado abaixo do campo de texto para informar aos usuários o formato específico em que os dados precisam ser inseridos. As mensagens de erro vão aparecer no campo EntryFormat e substituir as instruções atuais.
Use EntryFormat para datas, números de telefone, unidades e números inteiros.
Mostrar o formato da data abaixo do campo e incluir uma frase descritiva.
Não mostrar formatos de dados pode levar à entrada incorreta de dados.
Ao inserir intervalos médicos, dê exemplos do intervalo normal. Isso pode ajudar os usuários a identificar erros ou números fora do intervalo.
Campos obrigatórios
Os campos obrigatórios indicam que um usuário precisa preencher o campo e não pode avançar até que ele seja concluído.
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 nem todo mundo sabe o que um asterisco (*) indica. Se não houver um título da pergunta, mostre o asterisco (*) no texto do rótulo.
Mostre que o campo é obrigatório com um asterisco (*) e inclua instruções por escrito que indiquem "pergunta obrigatória". Muitas pessoas não sabem o que o asterisco(*) significa e se beneficiariam com a explicação.
Evite mostrar apenas o asterisco (*) sem uma descrição escrita do que ele significa.
Use os termos mais familiares aos seus usuários. Por exemplo, "Obrigatório" pode ser o termo mais conhecido e usado em alguns países em vez de "Necessário".
Se a maioria das perguntas for obrigatória, indique quais são opcionais.
Se não houver um título da pergunta, mostre o asterisco no texto do rótulo.
Ajuda
Um ícone de ajuda aparece ao lado do título da pergunta. Ao tocar no ícone, uma caixa de informações de ajuda aparece com mais detalhes. Tocar no ícone novamente fecha a caixa de informações de ajuda.
Este é um componente opcional. Use apenas quando for útil mostrar mais informações que não precisam estar sempre visíveis.
Use a ajuda para informações que os usuários talvez precisem ver apenas uma vez ou que forneçam informações adicionais.
Evite ocultar instruções na caixa de ajuda que devem estar visíveis para todos.
Captura de dados
Quando usar cada componente?
| Tipo de entrada de dados | Escolha booleana | Uma única escolha | Múltipla escolha | Opção aberta | Menu suspenso | Seletor de data | Campo de texto | Controle deslizante | Preenchimento automático |
|---|---|---|---|---|---|---|---|---|---|
| Selecione "Sim" ou "Não" | |||||||||
| Selecionar uma opção | cuidado |
||||||||
| Selecionar várias opções | cuidado |
||||||||
| Texto | |||||||||
| Datas | |||||||||
| Números | cuidado |
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 um nome, número de telefone ou endereço. Limite a entrada de dados que exige texto (teclado) quando uma seleção pré-preenchida (múltipla escolha ou escolha única) pode ser usada.
Saiba mais sobre campos de texto em material.io
Use campos de texto para entrada de dados que exija digitação de palavras ou números exclusivos.
Evite usar respostas de texto livre quando for possível usar uma seleção múltipla, um menu suspenso ou uma seleção única.
Escolha única e booleana
Escolha única e escolha booleana são controles de seleção que aparecem como botões de opção quando os usuários precisam escolher uma opção.
Use escolha booleana quando houver uma opção 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 escolha única. Um menu suspenso é mais denso e fácil de navegar quando há muitas opções.
Use a escolha booleana quando as opções forem "sim" e "não".
Use a escolha única quando os usuários puderem selecionar uma opção na lista.
Evite a escolha única para listas muito longas (mais de 10 itens). Use um menu suspenso.
Seletor de data
O seletor de datas permite que os usuários insiram datas usando o seletor de datas do calendário e o teclado. O seletor de datas do calendário é ativado quando o ícone do calendário é tocado.
Use o seletor de data do calendário apenas para datas próximas à de hoje, como o último período menstrual ou a próxima consulta. Caso contrário, priorize a entrada pelo teclado para datas como a de nascimento.
Para inserir datas, ative a entrada pelo teclado (toque na caixa de texto) e o seletor de data do calendário (toque no ícone).
Evite ativar o seletor de datas do calendário como o único método de entrada para datas de nascimento. É difícil navegar até o mês e o ano.
Menu suspenso
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 foi inserido. Isso pode ajudar os usuários a encontrar rapidamente a opção certa em uma lista grande.
Os menus suspensos são uma ótima alternativa à escolha única quando a lista de opções é muito longa (mais de 10 opções), já que ocupam menos espaço.
Use um menu suspenso ao selecionar uma opção em uma lista muito longa, como um estado ou uma cidade.
Evite usar um menu suspenso quando for mais fácil digitar o conteúdo em vez de rolar por todas as opções, como 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 seleções em uma lista de opções.
Use a múltipla escolha quando os usuários só puderem selecionar em uma lista predeterminada de opções. Se os usuários também puderem adicionar uma resposta livre, use o componente escolha aberta. No campo instruções, escreva "Selecione todas as opções aplicáveis" para que os usuários saibam que podem selecionar várias opções.
A aparência padrão é um contêiner ao redor das caixas de seleção para deixar a área tocável óbvia.
Evite mostrar várias opções por linha. Devido à variação no tamanho da tela do smartphone e no tamanho do texto, o texto pode ser cortado.
Opção aberta
A escolha aberta é semelhante à múltipla escolha, mas permite que o usuário selecione Outro e digite um texto livre.
Use a escolha aberta quando houver uma lista predefinida de opções, mas os usuários também puderem adicionar outras opções. Use a escolha aberta quando a maioria das opções for conhecida, mas você prevê que alguns usuários vão selecionar Outro porque nenhuma das opções fornecidas se aplica.
Use quando for importante coletar dados precisos e nenhuma das opções predefinidas se aplicar. Exemplo: ocupação.
Evite usar se a maioria das respostas exigir a seleção de Outro. Nesse caso, use um campo de texto ou parágrafo.
Controle deslizante
Com os controles deslizantes, os usuários podem escolher um valor em um intervalo. O controle deslizante no SDK FHIR do Android é discreto. Um controle deslizante discreto permite que os usuários selecionem um valor específico em um intervalo predeterminado. As marcas de tique podem ser usadas para indicar valores disponíveis. Evite usar o controle deslizante para 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
Evite usar o controle deslizante para valores específicos quando houver um intervalo grande. Use campos de texto com entrada de teclado.
Validação de dados e erros
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 das informações coletadas.
Use o campo EntryFormat para mostrar restrições de formato ou valor. Mostre mensagens de erro de validação de dados significativas em linha e imediatamente para que os usuários possam corrigir o erro.
Mostre as restrições de validação de dados antecipadamente para que os usuários saibam como inserir os dados.
Sem mostrar quantos dígitos o número de telefone precisa ter, é provável que os usuários encontrem um erro e levem mais tempo para concluir.
Mostre erros de validação de dados significativos imediatamente após concluir o campo. As mensagens de erro substituem o texto do formato de entrada atual.
Não espere até que o usuário pressione "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 comunicam como corrigir o problema.
Use cores, ícones e texto para comunicar erros.
Saiba mais sobre mensagens de erro em material.io
Explique por que há um erro (pergunta obrigatória) e o que pode ser feito para corrigir (selecione uma opção).
Uma mensagem de erro que diz apenas "erro" não ajuda os usuários a saber como corrigir o problema.
Exemplo: "Formato de data incorreto. O formato precisa ser dd/mm/aaaa".
Evite culpar o usuário com mensagens de erro que incluem "você". Exemplo: "Você inseriu o formato de data errado".
Use cores, iconografia e texto para informar aos usuários que há um erro.
Para oferecer suporte a deficiências visuais comuns, como daltonismo vermelho-verde, evite confiar apenas na cor para comunicar um erro.
Um ícone geralmente é suficiente. Não exagere no uso de ícones para comunicar o erro.