Guia de Usabilidade

UX, UI and Component Customization​

A user-friendly, intuitive, fast and well-succeeded facial recognition experience for the user performing the capture is the main goal of Fortface. To achieve this, all decisions are based on studies and the best practices of UX and UI.

Check out the guidelines and directives that Fortface recommends following when customizing some interface elements.

Instruction Screen​

The instruction screen prepares the user for the capture stage. It is the screen where the system guides the user on how to take a good photo, as well as prepares them for the camera opening, avoiding surprises. This stage increases the chances of success on the first attempt and reduces the backlash that subsequent attempts generate.

Main Instructions​

  • Keep your face visible and remove items such as glasses and hats. The fewer interventions and the more visible the user's face is, the better the liveness approval rates will be.
  • Look for a well-lit location. Illumination directly affects the capture success. Dark locations or those with indirect light that creates shadows on the face will harm the approval rates.
  • Maintain a neutral expression. As it is a photo, users may be used to smiling or making poses, but natural and neutral expressions are the most suitable for facial recognition.
  • Position your mobile at the height of your face. Holding the mobile device in a comfortable position normally means keeping it lower, with relaxed arms. In addition, it is important to orient it so that the photo is taken from the front, as this position has higher chances of success in recognition.

Good Practices​

  • Text Objectivity: Instructions should be direct, using short sentences and simple language. Technical terms like “capture” or long and formal phrases tend to generate confusion and increase cognitive load.
  • Voice Tone: Prefer orientation terms over doing instead of negative terms that only cite what is wrong, since they are better processed by the brain. For example: use “remove” instead of “do not use”.
  • Visual Recognition: Illustrative icons are just as important as text. Studies of usability show that images are processed more quickly by the brain, serving as immediate reinforcement of the written message. For example: an icon of the sun can reinforce the instruction of “seek a well-lit area”.

Interface Colors​

The colors of the interface fulfill a fundamental role in guiding the user during the photo capture process. They are not only for visual complementation, but also to indicate states, orient actions and influence perception.

  • Background Color: Always prefer light and neutral colors when customizing the background of the capture screen. They act as a source of reflected light on the user's face, which improves illumination for capture. This effect reduces shadows, facilitates camera reading, and increases the success rate of biometric approval.

  • Element Colors: Be very careful when customizing the colors of the message oval and frame elements, always following the conventionally recognized meaning by the user.

    • Alert Status: Use colors that universally represent alert, such as yellow and amber, but avoid aggressive colors that imply error, such as red.
    • Success Status: Most users reported identifying when the face was correctly positioned upon seeing green elements. Green is directly associated with success, so it is recommended for this status.
    • Luminosity Status: This status represents additional information that can facilitate capture. It is recommended to use neutral colors or blue tones (already associated with information). It is important not to confuse them with other statuses, ensuring visual distinction when feedback is active.
info

In Fortface usability tests, users showed high dependence on alert and success colors, as well as colors used to aid in conclusion of the capture.

Accessibility​

All text elements must have a minimum contrast of 7:1 between the first and second plane, following the parameters of WCAG - AAA level of contrast (Criteria 1.4.6 - Contrast Enhanced). Check out more details here.

Positioning Messages​

Positioning messages are displayed in real-time during the capture, varying according to the user's position. Their objective is to orient the face adjustment so that it is correctly positioned and automatic capture is performed.

Directives for customization​

  • Objective text: Use simple, short, and easy-to-understand phrases (“Approach the face”, “Look straight ahead”).
  • Language consistency: Maintain the same style and tone throughout all instructions, facilitating the user's familiarity with the flow.
  • Induce action: Tell the user what they need to do, rather than just what's wrong. The brain reacts more quickly to clear commands. For example, instead of “your face is too far away”, use “approach your face”. This way, the user doesn't need to think about what to do, just react.

Accessibility​

In tests with people with visual impairment, it was identified that the message “Leave your head straight” (NoFaceRoll) is not well interpreted by this profile. However, when testing a new possibility of message with people who can see, the results were not satisfactory, bringing more success in positioning with the current message.

For this reason, the SDK adopts the following rule:

  • When identified that the native screen reader of the device is active, the NoFaceRoll message is replaced by two:
    • FaceRollLeft: “Incline sua cabeça para a esquerda”
    • FaceRollRight: “Incline sua cabeça para a direita”
info

These accessibility-specific messages were tested and validated with real users. Customization is not recommended.

Below are the default positioning messages for each scenario present in the SDK's biometric capture. All have been extensively tested and validated, customize only if necessary.

  • 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"
Last updated on by Henrique dos Santos Scarabele