---
title: "Screens & States"
url: "https://developer.incode.com/design-and-ux/face-capture-screens-states/"
section: "design-and-ux"
group: "Module Customization / Face Capture Design"
version: "v1.1"
status: "live"
---
# Screens & States

A complete view of all screens the user may encounter during the Face Capture experience. Each state includes a brief description. Source of truth for layout, visual specs, interactions, and platform variations.

***

## Tutorial

Pre-capture instructional screen introducing the selfie step. Includes illustration/video and clear guidance before the camera opens.

<Image align="center" src="https://developer.incode.com/assets/dfb36358ad2e1e8a858f5c9731716c73.png" />

<br />

## Permission Screens

Shown when camera permissions have not been granted. Includes pre-permission context, OS-specific instructions, and fallback steps if the system dialog is dismissed.

<Image align="center" src="https://developer.incode.com/assets/783a8d02983152c1f4d76f788f07dc7a.png" />

<br />

## Auto Capture

Automatic capture triggers when face alignment, lighting, and detection thresholds are met. This is the primary and recommended capture method.

<Image align="center" src="https://developer.incode.com/assets/a543b20301653afd3b14d1471e9805ef.png" />

<br />

## Manual Capture (Fallback)

Fallback option shown after a period of inactivity (default: 30 seconds) or when auto-capture cannot confidently detect a valid frame. Users can take the photo manually.

<Image align="center" src="https://developer.incode.com/assets/ebe199b7c1602b8dfe0c1b08cb321e9c.png" />

<br />

## Feedback Messages (Real-Time Guidance)

Real-time, contextual guidance displayed while the camera is active. Helps users correct lighting, distance, positioning, and visibility issues to ensure a valid capture.

<Image align="center" src="https://developer.incode.com/assets/4a1f6fe910f3e89e82e261424bd346a0.png" />

<br />

## Uploading

Displayed while the captured selfie is uploaded and prepared for server-side validation. Prevents users from interacting until upload is complete.

<Image align="center" src="https://developer.incode.com/assets/495110fbeb48ef2a77a3781a2509a320.png" />

<br />

## Success

Shown when the selfie passes validation. The user can proceed to the next verification step without additional input.

<Image align="center" src="https://developer.incode.com/assets/96173d5ed410be8a5253ad96bd13972c.png" />

<br />

## Retry Errors

Displayed when validation fails but attempts remain. Provides specific corrective guidance and a retry CTA. Attempts reset after a successful capture.

<Image align="center" src="https://developer.incode.com/assets/4b85624100005e7aff6007c57d6cc3c2.png" />

<br />

## Final Errors (No Attempts Remaining)

Shown when all capture attempts have been used. The selfie is submitted for manual review, and the user may continue to the next step.

<Image align="center" src="https://developer.incode.com/assets/14faf871c5224aa2b9033e0944ee10da.png" />

<br />

## Connection Error

Displays when connectivity is lost during capture or upload. Users can retry once a stable connection is restored.

<Image align="center" src="https://developer.incode.com/assets/dc0cedc60d1e935e0d280dbdf179e514.png" />