UI Guide - Minimal iPhone-Style Interface¶

Visual Layout¶

┌─────────────────────────────────────────────────────────┐
│                                                         │
│                                                         │
│                                                         │
│     ◯                                            ◯     │
│     ◀                                            ▶     │
│   PREVIOUS                                     NEXT    │
│                                                         │
│                   360° MEDIA                           │
│                   (No Overlays)                        │
│                                                         │
│                                                         │
│                                                         │
│                                                         │
│                   [ Enter VR ]                         │
│                                                         │
└─────────────────────────────────────────────────────────┘

UI Elements¶

Left Circle - Previous - Position: Left side, vertically centered - Size: 80px diameter - Style: White outline, semi-transparent background - Action: Navigate to previous stage - Keyboard: ← Arrow key (future enhancement)

Right Circle - Next - Position: Right side, vertically centered - Size: 80px diameter - Style: White outline, semi-transparent background - Action: Navigate to next stage - Keyboard: → Arrow key (future enhancement)

2. Enter VR Button¶

Position: Bottom center
Style: White pill-shaped button
Action: Enter immersive VR mode
Only visible when WebXR is supported

3. Loading Screen¶

Appears briefly on startup
Simple spinner animation
Automatically hides when ready

Interaction Methods¶

Desktop Mode¶

Mouse: - Drag: Look around in 360° - Click Left Circle: Previous stage - Click Right Circle: Next stage - Click Enter VR: Start VR session

Mouse Wheel: - Zoom in/out (for 3D models only)

VR Mode¶

Controllers: - Point & Click Left Circle: Previous stage - Point & Click Right Circle: Next stage - Thumbstick: Teleport movement

Gaze (No Controllers): - Look at circles: Auto-highlight - Hold gaze: Activate button

Stage 1 (Video) → Stage 2 (Image) → Stage 3 (Model) → ...
     ↑                                                   |
     └───────────────────────────────────────────────────┘
           (Wraps around to beginning)

Visual Examples¶

Clean 360 Video Experience¶

No title bars
No progress indicators overlay
No control panels
Just pure immersive content

↓ Focus on the experience ↓

Minimal Button Design¶

    ╭─────╮          Transparent background
    │  ◀  │  ←       Subtle white outline
    ╰─────╯          Fades in on hover

Hover States¶

Buttons: - Default: rgba(0, 0, 0, 0.3) background, 80% opacity - Hover: rgba(255, 255, 255, 0.2) background, thicker border - Active: Slight scale animation

Enter VR: - Default: White background, subtle shadow - Hover: Slightly larger (scale 1.05) - Disabled: Gray, semi-transparent

Design Principles¶

1. Minimalism¶

Only essential controls visible
No unnecessary text or labels
Let the 360 content be the focus

2. Intuitive¶

Universal left/right navigation
Familiar circular button pattern
Clear visual affordances

3. Accessible¶

Large touch targets (80px)
High contrast white on dark
Works with gaze, touch, mouse, controllers

4. Unobtrusive¶

Semi-transparent backgrounds
Positioned at screen edges
Fade effects for smooth transitions

Comparison: Before vs After¶

Before (Complex)¶

┌────────────────────────────────────┐
│ [XRGallery - Title Bar]       │
│ [Videos] [Images] [Models]        │
│ ─────────────────────────────────  │
│           360 Content              │
│     "Sample Video Title"           │
│ ─────────────────────────────────  │
│ [Prev] [Play/Pause] [Next]        │
│ Info: Use controllers...           │
└────────────────────────────────────┘

After (Minimal)¶

┌────────────────────────────────────┐
│                                    │
│  ◯                          ◯     │
│                                    │
│         360 Content                │
│       (No Overlays!)               │
│                                    │
│         [Enter VR]                 │
└────────────────────────────────────┘

Button States in VR¶

Not Interacting¶

◯  ← Subtle outline
   Semi-transparent

Gaze/Point At¶

◉  ← Brighter
   Thicker border
   Slight glow

Clicked¶

◉  ← Brief highlight
   Immediate stage switch

Configuration Impact on UI¶

Single Stage¶

{ "stages": [{ "id": "only-one", ... }] }

Result: Navigation circles auto-hide (nothing to navigate)

Multiple Stages¶

{ "stages": [
  { "id": "stage-1", ... },
  { "id": "stage-2", ... }
]}

Result: Navigation circles visible

Tips for Best Experience¶

1. High-Quality Media¶

Use 4K 360 videos for sharpness
Compress images to reasonable file sizes
Optimize 3D models for performance

2. Stage Order¶

Start with engaging content
Mix media types for variety
End with memorable content

3. Video Autoplay¶

{
  "type": "video",
  "autoplay": true  ← Starts playing immediately
}

4. VR Testing¶

Test on actual VR headset
Verify button placement is comfortable
Check text legibility in VR

Keyboard Shortcuts (Future)¶

Planned for next version: - ← Previous stage - → Next stage - Space Play/Pause video (when in video stage) - Esc Exit VR mode

Mobile Support¶

The circular buttons work great on mobile: - Large touch targets - Positioned for thumb reach - Responsive to orientation changes

Troubleshooting UI¶

Buttons Not Visible¶

Check browser console for errors
Verify multiple stages in config.json
Ensure JavaScript is enabled

Buttons Not Clickable¶

Check z-index conflicts
Verify pointer events enabled
Test in different browser

VR Button Not Showing¶

WebXR not supported on device
Check HTTPS requirement
Try different browser (Chrome/Edge)

Summary¶

The new UI is minimal, intuitive, and beautiful. Perfect for: - Art galleries - Real estate tours - Product showcases - Educational experiences - Anywhere you want the content to shine! ✨