Diretrizes de design para captura de dados

Introdução

Profissional de saúde comunitária olhando para um dispositivo móvel.

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:

  1. Layout e navegação
  2. Perguntas e instruções
  3. Captura de dados
  4. Validação de dados e mensagens de erro

Layout e navegação

Uma visualização estilizada de rolagem longa e layouts paginados.

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.
Layout de rolagem longa (à esquerda) e layout paginado (à direita).

O SDK FHIR Android tem duas opções de layout para você escolher:

  1. Rolagem longa (padrão)
  2. 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.
Faça: numerar as perguntas
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.
Ajuste o tamanho da fonte
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.
O que fazer: uma pergunta por página
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.
Não oculte o conteúdo abaixo da dobra
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.
O que fazer: agrupe conteúdo relacionado como uma pergunta
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.
Não agrupe conteúdo não relacionado
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.
O que fazer: layout de rolagem longo
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.
O que fazer: somente layout paginado
É 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 (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.
O que fazer: botões ativos
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.
O que não fazer: botões inativos
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.
O que não fazer: botões somente para ícones
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.
Visão geral dos nove componentes abordados nesta seção e como eles são combinados em um questionário paginado.
  1. Título do questionário.
  2. Indicador de progresso.
  3. Cabeçalho do grupo.
  4. Título da pergunta.
  5. Instruções.
  6. Campo de entrada.
  7. Formato de entrada.
  8. Campos obrigatórios.
  9. 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.
O que fazer: títulos curtos
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.
O que não fazer — títulos longos
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.
O que fazer: título curto da pergunta
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?
O que não fazer — Título da pergunta longa
Evite perguntas muito longas ou aninhar duas perguntas.
Sem título de pergunta.
O que não fazer — sem título de pergunta
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.
O que fazer: explique o que é necessário
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.
O que fazer: explique o que fazer em casos extremos
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.
O que fazer: explique o contexto ou as definições
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.
Seja conciso
O texto do rótulo precisa ser curto, claro e totalmente visível.
Texto do rótulo: insira o nome do cliente.
Não seja prolixo
O texto do marcador não deve ser muito longo, truncado nem ocupar várias linhas.
Nenhum texto de marcador.
O que não fazer — sem marcador
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.
Usar o formato EntryFormat
Mostre o formato de data abaixo do campo e inclua uma frase descritiva.
Nenhum formato de data.
O que não fazer — Sem EntryFormat
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%.
O que fazer: mostrar faixa normal
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.
O que fazer: explicação por escrito
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.
O que não fazer — sem explicação
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.
O que fazer: localizar a terminologia
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.
O que fazer: indicar perguntas opcionais
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".
O que fazer: mostrar asterisco no texto do marcador
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.
O que fazer: mostrar informações opcionais na caixa de ajuda
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.
O que não fazer: ocultar instruções na caixa de ajuda
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.
Oito dos principais componentes de captura de dados no SDK FHIR Android.

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.
Usar campos de texto para entrada de dados exclusiva
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
O que não fazer: limite o uso de respostas de texto livre
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.
Do — Booleano
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.
O que fazer: escolha única
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.
O que não fazer: listas muito longas
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.
O que fazer: as duas opções de entrada
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.
O que não fazer: evite usar apenas a agenda
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.

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.
Usar para listas longas
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.
O que não fazer: quando digitar é fácil
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.
O que fazer: uma seleção por linha
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.
O que não fazer — Várias opções por linha
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.
O que fazer: use para coleta de dados mais precisa
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.
O que não fazer: se todas as respostas forem diferentes
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.
O que não fazer: usar o controle deslizante para números específicos
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.
O que fazer: mostrar restrições de validação
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.
O que não fazer: ocultar restrições de validação
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.
O que fazer: mostrar erros de validação imediatamente
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.
Não espere até o envio depois
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".
O que fazer: descreva claramente como corrigir um erro
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".
O que não fazer: escreva somente "error"
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.
O que fazer: explique como corrigir o erro sem apontar culpados
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".
Não culpa o usuário
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.
O que fazer: várias sugestões
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.
O que não fazer: usar apenas as cores
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.
Não use ícones demais
Um ícone costuma ser suficiente. Não exagere no uso de ícones para comunicar o erro.