Skip to main content

UX guidelines

When building a custom age gate by using the k-ID API, follow these UX guidelines to create a compliant and user-friendly experience. These recommendations help ensure players can complete age verification smoothly while meeting regulatory requirements.

When to use these guidelines

These guidelines apply when you're building a custom age gate using the k-ID API directly. If you're using the k-ID embedded widget, the UX is already handled for you.

Age input methods​

Your implementation should support at least two methods of collecting a player's age: an age slider or a date picker. Check the approvedAgeCollectionMethods field from the /age-gate/get-requirements endpoint to determine which collection methods are permitted for the player's jurisdiction.

Age slider​

An age slider provides a simple, intuitive way for players to input their age. This is the recommended approach for most jurisdictions.

Age slider - desktop

Design recommendations:

  • Set the slider range from 0 to 35+ (per ESRB guidelines)
  • Start in a neutral state with the default position at 0
  • Keep the continue button inactive until the player interacts with the slider
  • Display the selected age clearly as the player adjusts the slider
  • Support keyboard navigation for accessibility

Mobile version:

Age slider - mobile

Date picker​

A date picker collects the player's full date of birth. This method is required in certain jurisdictions.

Date picker

Design recommendations:

  • Support day/month/year entry in the local date format
  • Display clear validation messages for invalid dates
  • Match the date format to local conventions (DD/MM/YYYY or MM/DD/YYYY)

Age confirmation​

After collecting the player's age, display a confirmation screen before proceeding. This step helps prevent accidental errors and reinforces the importance of accurate age information.

Age confirmation screen

Design recommendations:

  • Summarize the entered age or date of birth clearly
  • Explain that the entered age affects the player's experience
  • Provide clear options to go back and correct the age, or confirm and continue

When a player is below the digital consent age for their region, they need approval from a trusted adult. Your UI should present all three consent methods to maximize completion rates.

Trusted adult consent options

Provide these three options for the trusted adult to complete consent:

  1. Email: Allow the player to enter a parent or guardian's email address. Call /challenge/send-email to send the consent request.

  2. QR code: Display a scannable QR code from the challenge.url field. The trusted adult scans this with their phone to access the consent portal.

  3. Manual code entry: Display the challenge.oneTimePassword and direct the trusted adult to asktoplay.com to enter it.

Design recommendations​

  • Display all three options with equal visibility
  • Include a "Do This Later" option for players who need to return later
  • Add a copy button for the one-time code to improve usability
  • Store the challengeId so players can resume the flow if they return before consent is granted
QR codes and one-time passwords expire

The QR code and one-time password expire after 1 hour and must be refreshed using the /challenge/generate-otp API. Design your UI to handle expiration gracefully by providing a refresh option or automatically regenerating credentials. For more details, see Challenge expiration and time-based authentication.

Data-lite mode​

If your game supports data-lite mode, players under the digital consent age can access limited features while awaiting parental approval.

Design recommendations:

  • Clearly communicate which features are available in data-lite mode
  • Explain what additional features become available after consent is granted
  • Provide a way for players to check consent status or resend the consent request

Accessibility​

Ensure your custom age gate UI meets accessibility standards:

RequirementImplementation
Keyboard navigationAll interactive elements accessible via keyboard
Screen reader supportAppropriate ARIA labels and semantic HTML
Color contrastSufficient contrast for text and interactive elements
Tap targetsMinimum 44×44 pixel tap targets for buttons
Error messagingDescriptive error messages that explain how to resolve issues