Native Frame Carousel — UX Integration Guidelines

Layout & Sizing Recommendations

Mobile (< 768px screen width)

• The carousel container must occupy a large portion of the viewport to maintain usability and immersion.

• Minimum height requirement:

Desktop (≥ 768px screen width)

• Ensure sufficient vertical space for proper rendering of frames and controls.

• Minimum height requirement:

UI Structure & Behavior

Selector Panel (Right-side block)

• The selector panel (carousel / product list) should behave as a modal overlay.

• Only display a close icon (✕) in the top-right corner.

• Avoid adding extra UI elements (titles, headers, buttons) to keep focus on product selection.

Visual & Branding Guidelines

Brand Color

• The color-brand must maintain high contrast against white backgrounds.

• This ensures accessibility and visibility of interactive elements.

Thumbnail Visibility

Frame Color & Lens Color Thumbnails

• If a thumbnail image is light or low-contrast, add a visible border

border: 1px solid rgba(0, 0, 0, 0.2);

• Use a gradient thumbnail: This visually communicates the photochromic effect.

  • Transition from the lens color to black

• In lens labels, explicitly indicate:

  • "Photochromic" (e.g., Grey Photochromic)

Data & Configuration Constraints

Frames Display

To ensure frames are correctly displayed in the carousel:

• Each frame must have a valid ID

  • Missing or invalid IDs will prevent display.

• The default/selected frame must be listed first

  This ensures it appears first in the carousel suggestions 

Lens Colors Ordering

For optimal UX and logical browsing:

1. Standard lenses (clear, basic tints)

2. Gradient lenses

3. Photochromic lenses (last)

This ordering helps users understand complexity progressively.

UX Best Practices

• Prioritize clarity over density: avoid overcrowding the carousel.

• Ensure touch targets are large enough on mobile.

• Maintain visual consistency between thumbnails and actual VTO rendering.

• Keep interactions simple and predictable (especially for modal behavior).

Implementation Checklist

Before going live, verify:

• Carousel respects min-height rules (mobile & desktop)

• Selector panel behaves as overlay with only a close icon

• Brand color meets contrast requirements

• Photochromic lenses use gradient thumbnails + labeled correctly

• All frames have valid IDs

• Default frame is listed first

• Lens colors are ordered correctly