# UX de verificação de CPF em totens de autoatendimento e quiosques
> Aprenda boas práticas de UX para verificação de CPF em totens de autoatendimento e quiosques, com exemplos de interface e integração via API.
**Publicado:** 04/09/2025
**Autor:** Redação CPFHub.io
**URL:** https://cpfhub.io/blog/ux-de-verificacao-de-cpf-em-totens-de-autoatendimento-e-quiosques
---
Projetar a UX de verificação de CPF em totens exige teclado numérico dedicado, máscara automática e feedback visual em menos de 300ms. Com a CPFHub.io, a resposta chega em ~900ms e o plano gratuito — 50 consultas mensais, sem cartão de crédito — permite prototipar e testar o fluxo completo antes de entrar em produção.
## Introdução
Totens de autoatendimento e quiosques digitais estão cada vez mais presentes em farmácias, aeroportos, clínicas, bancos e lojas de varejo. Esses dispositivos permitem que o cliente realize operações de forma autônoma -- sem depender de um atendente -- e a verificação de CPF é frequentemente o primeiro passo desse fluxo.
No entanto, projetar a experiência de entrada e validação de CPF em um totem é muito diferente de projetar para web ou mobile. A tela é touch, o teclado é virtual, o usuário está de pé e muitas vezes com pressa.
---
## Por que totens exigem uma abordagem diferente de UX
Diferentemente de um smartphone ou computador, totens de autoatendimento apresentam restrições específicas que impactam diretamente o design da interface:
### Contexto de uso
- O usuário está de pé, muitas vezes em um ambiente barulhento.
- Não há teclado físico -- a digitação é feita em teclado virtual na tela touch.
- O tempo de interação deve ser o menor possível para evitar filas.
- O usuário pode ter pouca familiaridade com tecnologia.
### Restrições técnicas
- Telas geralmente são de 15 a 22 polegadas, com resolução limitada.
- A conectividade pode ser via Wi-Fi ou 4G, com latência variável.
- O sistema operacional costuma ser Linux embarcado ou Windows IoT.
Essas particularidades exigem interfaces com botões grandes, feedback visual claro e fluxos extremamente simplificados.
---
## Boas práticas de UX para entrada de CPF em totens
### 1. Teclado numérico dedicado
Nunca exiba um teclado QWERTY completo para entrada de CPF. Utilize um teclado numérico com botões grandes -- no mínimo 60x60 pixels -- para facilitar o toque com o dedo.
### 2. Máscara automática com feedback imediato
Aplique a máscara `000.000.000-00` à medida que o usuário digita. Cada dígito inserido deve gerar um feedback visual imediato -- como o campo mudando de cor ou o dígito aparecendo com uma breve animação.
### 3. Botão de correção visível
Inclua um botão "Apagar" grande e acessível. Muitos totens não possuem tecla backspace intuitiva, e o usuário precisa corrigir erros com facilidade.
### 4. Validação local antes da consulta
Valide o dígito verificador do CPF localmente antes de enviar a requisição à API. Isso evita chamadas desnecessárias e dá feedback instantâneo ao usuário.
### 5. Indicador de progresso durante a consulta
Enquanto a API está processando, exiba um spinner ou barra de progresso com uma mensagem como "Verificando seu CPF...". Nunca deixe a tela sem feedback por mais de 300ms.
---
## Layout de interface para totem
A seguir, um exemplo de layout HTML/CSS otimizado para tela touch de totem. O design prioriza botões grandes, contraste alto e simplicidade.
```html
Verificação de CPF - Totem
Digite seu CPF
___.___.___-__
```
---
## Acessibilidade em totens
A acessibilidade em totens de autoatendimento merece atenção especial, pois os dispositivos são utilizados por um público diverso.
### Contraste e legibilidade
- Utilize contraste mínimo de 4.5:1 entre texto e fundo (WCAG AA).
- Fontes com no mínimo 24px para textos principais e 18px para secundários.
- Evite fontes serifadas -- sans-serif como Arial ou Segoe UI funcionam melhor em telas touch.
### Acessibilidade para deficientes visuais
- Implemente suporte a leitor de tela via `aria-label` nos botões.
- Considere feedback sonoro a cada dígito inserido.
- Se possível, ofereça entrada por voz como alternativa.
### Altura e alcance
- Posicione os elementos interativos na zona de alcance confortável -- entre 90cm e 130cm do chão.
- Botões críticos devem estar na parte inferior da tela, não no topo.
---
## Tratamento de cenários de erro
Em um totem, o tratamento de erros precisa ser ainda mais cuidadoso do que em uma aplicação web convencional. O usuário não pode abrir o DevTools para investigar o problema.
### Cenários comuns e como tratar
| Cenário | Mensagem sugerida | Ação |
|---|---|---|
| CPF com dígito inválido | "CPF inválido. Verifique os números digitados." | Permitir correção imediata |
| Timeout da API | "A verificação demorou mais que o esperado. Tente novamente." | Botão "Tentar novamente" |
| Erro de rede | "Sem conexão. Procure um atendente." | Exibir código de atendimento |
| CPF não encontrado | "CPF não localizado. Procure um atendente." | Exibir código de atendimento |
### Fallback para atendimento humano
Sempre ofereça uma saída para o atendimento humano. Após duas tentativas falhas, exiba uma mensagem como: "Não foi possível verificar seu CPF. Dirija-se ao balcão de atendimento com o código **T-4821**."
---
## Segurança e privacidade no totem
Totens são dispositivos compartilhados, o que traz preocupações adicionais de segurança.
### Limpeza automática de dados
Após cada sessão, todos os dados do CPF devem ser apagados da memória e da tela. Implemente um timeout de inatividade -- por exemplo, 60 segundos -- que limpa a sessão e retorna à tela inicial.
```javascript
let inactivityTimer;
function resetInactivityTimer() {
clearTimeout(inactivityTimer);
inactivityTimer = setTimeout(() => {
digits = '';
display.textContent = formatCPF('');
status.textContent = '';
btnConfirm.disabled = true;
// Redirecionar para tela inicial
window.location.reload();
}, 60000); // 60 segundos de inatividade
}
// Resetar timer a cada interação
document.addEventListener('click', resetInactivityTimer);
document.addEventListener('touchstart', resetInactivityTimer);
resetInactivityTimer();
```
### Mascaramento parcial
Ao exibir o CPF na tela de confirmação, mascare os dígitos centrais: `123.***.***-45`. Isso protege o dado caso alguém esteja observando a tela por cima do ombro do usuário.
### Comunicação segura
Todas as chamadas à API da [**CPFHub.io**](https://www.cpfhub.io/) trafegam exclusivamente via HTTPS, garantindo que o CPF nunca seja transmitido em texto claro. Certifique-se de que o totem não aceita certificados autoassinados e que a chave de API é armazenada de forma segura no dispositivo, preferencialmente em variável de ambiente ou cofre de segredos.
---
## Testes de usabilidade em totens
Antes de colocar o totem em produção, realize testes de usabilidade com usuários reais. Alguns pontos a observar:
- **Tempo médio de conclusão** -- o fluxo completo de digitação e verificação de CPF deve levar no máximo 15 segundos.
- **Taxa de erro** -- quantos usuários erram a digitação na primeira tentativa.
- **Taxa de abandono** -- quantos usuários desistem antes de completar a verificação.
- **Feedback qualitativo** -- pergunte ao usuário se a interface foi clara e fácil de usar.
Utilize ferramentas de analytics embarcadas para coletar essas métricas de forma contínua após o lançamento.
---
## Perguntas frequentes
### O que é necessário para implementar validação de CPF neste contexto?
A validação de CPF exige uma chamada à API com o número do documento e a chave de autenticação. A CPFHub.io retorna o status do CPF, nome do titular e data de nascimento, permitindo a verificação em tempo real durante o cadastro ou transação.
### A API CPFHub.io funciona para todos os volumes de consulta?
Sim. O plano gratuito oferece 50 consultas por mês sem cartão de crédito — ideal para testes e projetos pequenos. Para volumes maiores, o plano Pro inclui 1.000 consultas mensais por R$149. Se o limite for ultrapassado, a API não bloqueia: cobra R$0,15 por consulta adicional.
### Como garantir conformidade com a LGPD ao usar uma API de CPF?
Use o CPF apenas para a finalidade declarada ao titular, armazene apenas o necessário (não guarde o CPF cru se um token bastar), implemente controle de acesso aos logs de consulta e documente a base legal para o tratamento. A [ANPD](https://www.gov.br/anpd/) orienta que dados de identificação devem ser tratados com o princípio da necessidade.
### Quanto tempo leva para integrar a API CPFHub.io?
A integração básica leva menos de 30 minutos: crie uma conta em cpfhub.io, gere a API key no painel e faça uma chamada GET para `https://api.cpfhub.io/cpf/{CPF}` com o header `x-api-key`. A documentação inclui exemplos em Python, Node.js, PHP, Java e outras linguagens.
### Leia também
- [Como pedir CPF no checkout sem espantar o cliente](https://cpfhub.io/blog/como-pedir-cpf-no-checkout-sem-espantar-o-cliente)
- [APIs de validação de CPF melhoram a experiência do usuário](https://cpfhub.io/blog/apis-validacao-cpf-experiencia-usuario)
- [Diferença entre validação de CPF e consulta de CPF: quando usar cada uma](https://cpfhub.io/blog/diferenca-entre-validacao-de-cpf-e-consulta-de-cpf-quando-usar-cada-uma)
- [Onboarding digital em fintechs: como validar CPF em menos de 30 segundos](https://cpfhub.io/blog/onboarding-digital-em-fintechs-como-validar-cpf-em-menos-de-30-segundos)
---
## Conclusão
Projetar a experiência de verificação de CPF em totens de autoatendimento exige atenção a detalhes que não existem no desenvolvimento web tradicional: teclado virtual, tela touch, ambiente público, usuários com diferentes níveis de familiaridade tecnológica. Um bom design nesse contexto prioriza botões grandes, feedback imediato, fluxos curtos e tratamento robusto de erros.
A API da [**CPFHub.io**](https://www.cpfhub.io/) complementa esse design com resposta em ~900ms, alta disponibilidade e integração direta via chamada HTTP — sem dependência de SDKs ou bibliotecas adicionais.
Cadastre-se em [cpfhub.io](https://www.cpfhub.io/) — 50 consultas mensais gratuitas, sem cartão de crédito — e comece hoje mesmo.