Design, Dados e Doação de Sangue: Como um Totem me Fez Repensar a Experiência do Usuário

Era uma manhã qualquer quando pisei no Hemocentro do Hospital das Clínicas, em São Paulo, para doar sangue. Tudo fluía bem: a equipe era atenciosa, o ambiente acolhedor, o processo organizado. Mas, ao usar o totem de autoatendimento para digitar meu CPF, algo me travou. Não era nada grave, só... meio desajeitado. Levei uns segundos a mais do que o esperado, e aquele pequeno atrito acendeu uma faísca na minha cabeça de designer: será que dá pra melhorar isso?

[Imagem 1: Foto do totem de autoatendimento no Hemocentro, mostrando a tela de digitação do CPF. A imagem deve ser clara, com foco na interface do totem, em um ângulo que destaque os botões coloridos e o layout atual. Use iluminação natural para transmitir um ambiente acolhedor.]

Essa experiência, tão cotidiana quanto uma xícara de café, virou o ponto de partida para um experimento de design. Vamos mergulhar nessa história e ver como um totem pode ensinar muito sobre criar interfaces mais humanas.

Do Pequeno Incômodo à Grande Ideia

Como designer, eu vivo caçando oportunidades nos detalhes. Aquele totem, com seus botões coloridos e um layout meio desalinhado, me fez pensar: por que complicar o que pode ser simples? Afinal, digitar um CPF é algo que fazemos o tempo todo, em caixas eletrônicos, maquininhas de cartão, teclados de smartphone... Então, por que não usar algo que já conhecemos de cor?

Foi aí que surgiu a hipótese: um teclado numérico no padrão PIN pad 3×4 (como o das maquininhas) ou até mesmo um layout linear (como o de smartphones) pode tornar a digitação do CPF mais rápida e menos frustrante. Essa ideia alinha com a segunda heurística de Nielsen — correspondência entre o sistema e o mundo real. Quando uma interface respeita o que já é familiar, ela reduz o esforço mental e faz tudo fluir melhor.

O Experimento: Hemocentro Totem A/B/C Test

Para tirar a prova, criei o Hemocentro Totem A/B/C Test, um experimento de usabilidade simples, aberto e direto ao ponto. O teste compara três interfaces para digitar o CPF:

1. Versão A: O modelo atual do totem, com visual vibrante e botões personalizados.
2. Versão B: Minha proposta, mais clean, inspirada no padrão PIN pad 3×4.
3. Versão C: Um ajuste no layout atual, com os números dispostos em uma única linha, pensando que esse formato pode ser mais intuitivo para quem está acostumado a teclados lineares, como os de smartphones.

[Imagem 2: Comparação visual das três versões do teclado (A, B e C). Use um mockup ou captura de tela lado a lado, com legendas claras identificando cada versão. A imagem deve ter um fundo neutro e destacar as diferenças nos layouts, com ênfase na simplicidade da Versão B e na linearidade da Versão C.]

Quem acessa o teste é direcionado aleatoriamente para uma das três versões. O sistema mede o tempo de interação, o número de erros e a taxa de conclusão — tudo de forma anônima, com o CPF mascarado para garantir privacidade.

Quer dar uma chance? O protótipo está no ar:

👉 bolivaralencastro.github.io/hemocentro-totem-ab-test

Como Tudo Ganhou Vida

Montei o projeto com um empurrãozinho da inteligência artificial, usando Angular para a interface, Microsoft Clarity para rastrear interações e Google Sheets + Apps Script para organizar os dados. A IA foi uma aliada incrível: acelerou o desenvolvimento, gerou documentação técnica e me deixou focar no que realmente importa — o comportamento do usuário.

Em poucas horas, o protótipo estava hospedado no GitHub Pages, pronto para qualquer pessoa testar. É o tipo de coisa que me deixa animado: transformar uma faísca de curiosidade em algo palpável.

[Imagem 3: Captura de tela do protótipo rodando no GitHub Pages, mostrando a interface em ação. A imagem deve incluir um dispositivo (como um tablet ou laptop) exibindo o site, com a URL visível, para reforçar a acessibilidade do teste. Use um fundo limpo para destacar o dispositivo.]

A Ciência por Trás do Design

Testes A/B/C são como uma bússola para designers: eliminam achismos e mostram, com números, o que funciona. As métricas são claras:

1. ⏱️ Tempo de interação: Quanto tempo leva para digitar o CPF?
2. 🔢 Erros de digitação: Quantas vezes a pessoa precisou corrigir?
3. 🎯 Taxa de conclusão: Quantos conseguiram completar a tarefa?

A meta é que a Versão B ou C reduza o tempo de digitação em pelo menos 15% e os erros em 20% ou mais. Isso vai além de “melhorar a vibe” — é sobre tornar a experiência mais fluida e intuitiva.

E tem mais: a heurística de feedback do sistema entra em jogo aqui. Estudos mostram que interações devem levar entre 0,1 e 1 segundo para parecerem instantâneas. Passou de 1 segundo? O usuário já sente a demora. Passou de 10? Ele começa a se distrair. Medir cada fração de segundo não é só nerdice — é essencial para criar algo que respeite o ritmo humano.

Entre o Realismo e a Simplicidade

No processo, me deparei com um velho dilema do design: até onde imitar o mundo real? O skeuomorfismo (aquele estilo que copia objetos físicos) ajuda iniciantes, mas pode pesar. Já o flat design é moderno e leve, mas às vezes deixa o usuário sem pistas claras.

Decidi por um meio-termo: botões simples, com contraste nítido e foco na ação principal. Nada de firulas, mas sem perder aquela sensação tátil que guia o olhar. E, claro, acessibilidade não é opcional: evitei combinações de cores problemáticas para daltônicos (adeus, vermelho e verde juntos!) e garanti um contraste mínimo de 4.5:1, seguindo as diretrizes da WCAG 2.1. Assim, a interface fica clara para todos, independentemente de como enxergam o mundo.

[Imagem 4: Exemplo de um botão da interface da Versão B, destacando o contraste e a simplicidade. Use um close-up do botão com uma paleta de cores ao lado, mostrando o cumprimento das diretrizes de acessibilidade WCAG 2.1. A imagem deve be informativa, com anotações visuais sobre o contraste.]

O Desafio de Engajar Pessoas no Teste

Ter uma ideia é só o começo. De nada adianta um protótipo incrível se as pessoas não participarem. Engajar usuários para testar a ferramenta tem sido um desafio e tanto. Tentei divulgar no LinkedIn e no Instagram, mas, após dois dias, o número de participantes ainda está abaixo do esperado. Comunicar o valor do experimento e convencer as pessoas a dedicarem um minutinho é tão crucial quanto o design em si. Agora, estou pensando em explorar outras formas de engajamento — talvez parcerias com comunidades de design ou até uma abordagem mais direta com doadores no Hemocentro. Cada clique no protótipo é uma chance de coletar dados reais e tornar a experiência de doar sangue mais fluida.

[Imagem 5: Montagem com capturas de tela das publicações no LinkedIn e Instagram, mostrando os posts de divulgação. A imagem deve transmitir a tentativa de engajamento, com um fundo que sugira conexão social (como ícones de redes sociais ou um celular exibindo os posts). Inclua uma nota visual sobre a busca por mais participantes.]

O Que Já Aprendi (e o Que Vem por Aí)

Mesmo antes dos resultados finais, o projeto já me ensinou algumas coisas:

1. Padrões são poderosos: Usar layouts familiares, como o PIN pad ou uma linha numérica, reduz a curva de aprendizado.
2. Dados mandam: Intuição é legal, mas só os números mostram o que realmente funciona.
3. Planejamento de divulgação é essencial: Engajar usuários exige estratégia. Escolher os canais certos, criar mensagens que conectem e planejar ações como parcerias ou campanhas direcionadas faz toda a diferença para garantir dados reais de uso.
4. IA é parceira: Ela agiliza, organiza, mas o toque humano dá o norte.
5. Design é impacto: Uma interface bem feita pode economizar tempo, reduzir erros e tornar um momento importante — como doar sangue — ainda mais especial.

O experimento vai ficar no ar por algumas semanas, coletando dados. Depois, farei uma análise estatística e publicarei os resultados completos. A ideia é que esse estudo inspire melhorias reais em totens de autoatendimento e motive outros designers a testarem suas hipóteses com método.

Um Toque de Coração

Doar sangue é um gesto de carinho com o outro. Tornar esse processo mais simples e agradável é, de certa forma, uma extensão desse cuidado. Talvez o design seja isso: perceber os detalhes que parecem pequenos, mas que fazem uma baita diferença.

[Imagem 6: Ilustração ou foto inspiradora de uma gota de sangue ou um coração estilizado, simbolizando a doação de sangue. A imagem deve ser emotiva, com cores quentes (como vermelho e laranja) e um estilo minimalista, reforçando o impacto humano do projeto.]

Quer ajudar a moldar o futuro das interfaces? Participe do teste:

🔗 bolivaralencastro.github.io/hemocentro-totem-ab-test