Guia de Usabilidade

UX, UI e Customização de componentes

Uma experiência de reconhecimento facial fácil, intuitiva, rápida e bem-sucedida para o usuário que está realizando a captura é o maior objetivo da Fortface. Para que isso aconteça, todas as decisões são baseadas em estudos e nas melhores práticas de UX e UI.

Confira abaixo dicas e diretrizes que a Fortface recomenda seguir ao customizar alguns itens da interface.

Tela de instruções

A tela de instruções prepara o usuário para a etapa de captura. É nela que o sistema orienta como tirar uma boa foto, além de prepará-lo para a abertura da câmera, evitando surpresas. Essa etapa aumenta as chances de sucesso na primeira tentativa e reduz o retrabalho que próximas tentativas geram.

Principais instruções

• Deixe o rosto visível e retire itens como óculos e boné. Quanto menos intervenções e mais visível estiver o rosto do usuário, melhores serão as taxas de aprovação de liveness.
• Busque um local iluminado. A iluminação afeta diretamente o sucesso da captura. Locais escuros ou com focos de luz indiretos que criam sombras no rosto prejudicam o resultado da aprovação.
• Mantenha a sua expressão neutra. Por ser uma foto, os usuários podem estar acostumados a sorrir ou fazer poses, mas expressões naturais e neutras são as mais adequadas para o reconhecimento facial.
• Posicione seu celular na altura do seu rosto. Segurar o dispositivo móvel em posição confortável normalmente significa mantê-lo mais baixo, com os braços relaxados. No entanto, é importante orientar para que a foto seja feita de frente, pois essa posição tem maiores chances de sucesso no reconhecimento.

Boas práticas

• Objetividade do texto: As instruções devem ser diretas, usando frases curtas e linguagem simples. Termos técnicos como “captura” ou frases longas e formais tendem a gerar confusão e aumentar a carga cognitiva.
• Tom de voz: Prefira termos de orientação do que fazer em vez de negativos que apenas citam o que está errado, pois são mais bem processados pelo cérebro. Por exemplo: use “retire” em vez de “não use”.
• Reconhecimento visual: Ícones ilustrativos são tão importantes quanto o texto. Estudos de usabilidade mostram que imagens são processadas mais rapidamente pelo cérebro, servindo como reforço imediato da mensagem escrita. Por exemplo: um ícone de sol pode reforçar a instrução de “busque um ambiente iluminado”.

Cores da interface

As cores da interface cumprem um papel fundamental para guiar o usuário durante o processo de captura da foto. Elas não servem apenas para complementar o visual, mas também para indicar estados, orientar ações e influenciar a percepção.

• Cor de fundo: Dê preferência sempre para cores claras e neutras ao customizar o background da tela de captura. Elas funcionam como fonte de luz refletida no rosto do usuário, o que melhora a iluminação para a captura. Esse efeito reduz sombras, facilita a leitura da câmera e aumenta a taxa de sucesso da biometria.

• Cor dos elementos: Tome muito cuidado ao customizar as cores dos elementos de oval e dos frames da mensagem, seguindo sempre o significado reconhecido mais convencionalmente pelo usuário.

  • Status Alerta: Utilize cores que representem alerta de forma universal, como tons de laranja e amarelo, mas evite cores agressivas que indiquem erro, como tons de vermelho.
  • Status Sucesso: A maioria dos usuários relatou identificar quando atingiu o posicionamento correto do rosto ao ver os elementos em verde. A cor verde está diretamente associada ao sucesso, por isso é recomendada para esse status.
  • Status Luminosidade: Esse status representa uma informação adicional que pode facilitar a captura. Recomenda-se o uso de cores neutras ou tons de azul (já associados a informações). É importante que não se confundam com os outros status, garantindo destaque visual quando o feedback estiver ativo.

informação

Em testes de usabilidade da Fortface, o usuário se mostrou mais dependente das cores, de alerta e de sucesso, do que das mensagens para auxiliar na conclusão da captura.

Acessibilidade

Todos os elementos textuais devem ser aplicados com cores que tenham contraste mínimo de 7:1 entre primeiro e segundo plano, seguindo os parâmetros da WCAG – nível AAA de contraste (Critério 1.4.6 – Contraste melhorado). Confira mais detalhes aqui.

Mensagens de posicionamento

As mensagens de posicionamento são exibidas em tempo real durante a captura, variando conforme a posição do usuário. Seu objetivo é orientar o ajuste do rosto para que ele esteja corretamente posicionado e a captura automática seja realizada.

Diretrizes para customização

• Texto objetivo: Use frases simples, curtas e fáceis de compreender (“Aproxime o rosto”, “Olhe para frente”).
• Consistência de linguagem: Mantenha o mesmo estilo e tom em todas as instruções, facilitando a familiaridade do usuário com o fluxo.
• Induzir a ação: Diga ao usuário o que ele precisa fazer, e não apenas o que está errado. O cérebro reage mais rapidamente a comandos claros. Por exemplo: em vez de “seu rosto está longe”, use “aproxime seu rosto”. Assim, o usuário não precisa considerar o que fazer, apenas reagir.

Acessibilidade

Em testes com pessoas com deficiência visual, foi identificado que a mensagem “Deixe sua cabeça reta” (NoFaceRoll) não é bem interpretada por esse perfil. Porém, ao testar uma nova possibilidade de mensagem com pessoas que enxergam, os resultados não foram satisfatórios, trazendo mais sucesso no posicionamento com a mensagem atual.

Por isso, o SDK adota a seguinte regra:

• Quando identificado que o leitor de tela nativo do aparelho está ativo, a mensagem de NoFaceRoll é substituída por duas:
  • FaceRollLeft: “Incline sua cabeça para a esquerda”
  • FaceRollRight: “Incline sua cabeça para a direita”

informação

Essas mensagens específicas de acessibilidade foram testadas e validadas com usuários reais. Não se recomenda a customização.

Abaixo estão as mensagens de posicionamento padrão para cada cenário presente na SDK de captura biométrica. Todas foram amplamente testadas e validadas, customize somente se necessário.

• FacePositioned: "Aguarde a validação, tente não se mexer"
• NoFace: "Posicione seu rosto na área indicada"
• FaceFar: "Aproxime o seu rosto"
• FaceNear: "Afaste o seu rosto"
• FaceCenterLeft: “Mova a câmera para a esquerda”
• FaceCenterRight: "Mova a câmera para a direita"
• FaceCenterUp: "Mova a câmera para cima”
• FaceCenterDown: "Mova a câmera para baixo"
• FacePitchIsUp: "Abaixe seu rosto"
• FacePitchIsDown: "Levante seu rosto"
• NoFaceYaw: "Olhe para frente"
• NoFaceRoll: "Deixe sua cabeça reta"
  • FaceRollLeft: “Incline sua cabeça para a esquerda”
  • FaceRollRight: “Incline sua cabeça para a direita”
• FaceBrightnessLow: "Melhore a iluminação"
• FaceBrightnessHigh: "Diminua a luz no seu rosto"