Instruction messages help guide users on how to interact with your 360° viewer. These customizable messages appear over your viewer to educate users about available interactions and improve their experience.
Instruction Message Settings
Display Options
- Only Once: Shows instruction the first time a user visits
- Always: Shows instruction every time the viewer loads
- Never: Hides instruction messages completely
Background Styles
- Style A: Arrow indicators with background
- Style B: Alternative arrow design
- Style C: No background (text only)
Position Options
- Top: Appears at the top of the viewer
- Middle: Centered in the viewer area
- Bottom: Appears at the bottom of the viewer
Language Support
- Auto Language Detect: Automatically detects user’s browser language
- Specific Languages: Choose from supported languages
- Fallback: Defaults to English if language not supported
When to Use Instruction Messages
Best For:
- New Users: First-time visitors to your site
- Complex Products: Products requiring specific interaction
- Mobile Users: Touch-based interactions need explanation
- Professional Sites: Corporate or B2B applications
Consider Alternatives When:
- Experienced Users: Returning customers who know the interface
- Simple Interactions: Obvious drag-and-drop functionality
- Cluttered Interface: When space is limited
Display Frequency Guidelines
Only Once
- Use For: Most general websites
- Benefit: Doesn’t annoy returning users
- Best Practice: Clear, concise messaging
Always
- Use For: Complex or specialized products
- Benefit: Ensures all users see instructions
- Consideration: May become annoying for frequent users
Never
- Use For: Experienced user base
- Benefit: Clean, uncluttered interface
- Risk: New users may not understand interactions
Background Style Selection
Style A (Arrow Background)
- Best For: General use, most products
- Visual Impact: Clear directional indicators
- Accessibility: High contrast, easy to see
Style B (Alternative Arrows)
- Best For: Modern, minimalist designs
- Visual Impact: Subtle but effective
- Accessibility: Good contrast options
Style C (No Background)
- Best For: Clean, minimal interfaces
- Visual Impact: Subtle text overlay
- Consideration: May be less visible on busy backgrounds
Position Guidelines
Top Position
- Best For: Most use cases
- User Experience: Natural reading flow
- Visibility: High visibility without blocking content
Middle Position
- Best For: Centered layouts
- User Experience: Direct attention to center
- Consideration: May block product view
Bottom Position
- Best For: Minimalist designs
- User Experience: Less intrusive
- Consideration: May be missed by some users
Language and Localization
Auto Language Detect
- Benefit: Automatic localization
- Supported: Detects browser language preferences
- Fallback: Defaults to English if language not supported
Manual Language Selection
- Use For: Specific target markets
- Benefit: Guaranteed language accuracy
- Consideration: Requires manual setup for each language
Mobile Considerations
Touch Instructions
- Touch-Specific: Instructions adapt to touch interactions
- Gesture Recognition: Explains swipe and pinch gestures
- Screen Size: Optimized for mobile screen dimensions
Performance
- Loading Speed: Minimal impact on page load
- Battery Usage: Negligible impact on device battery
- Data Usage: Lightweight text and graphics
Customization Tips
Message Content
- Keep It Simple: Use clear, concise language
- Action-Oriented: Tell users what to do
- Positive Tone: Encourage interaction
Visual Design
- Contrast: Ensure text is readable against backgrounds
- Size: Large enough to be easily read
- Duration: Don’t display too long or too briefly
User Experience
- Non-Intrusive: Don’t block important product details
- Dismissible: Allow users to close if desired
- Contextual: Show relevant instructions for the situation
Troubleshooting
Message Not Appearing
- Check that instruction messages are enabled
- Verify display settings (once/always/never)
- Ensure language settings are correct
Poor Visibility
- Adjust background style for better contrast
- Change position to avoid busy backgrounds
- Consider text color and size options
Language Issues
- Verify browser language detection
- Check supported language list
- Test fallback to English
Mobile Issues
- Test on actual mobile devices
- Verify touch-specific instructions
- Check screen size adaptation
Best Practices
Content Guidelines
- Be Specific: “Drag to rotate” vs “Interact with viewer”
- Use Action Words: “Click”, “Drag”, “Swipe”
- Keep It Brief: One short sentence is ideal
Design Guidelines
- High Contrast: Ensure readability
- Appropriate Size: Visible but not overwhelming
- Consistent Styling: Match your site’s design language
User Experience
- Test with Real Users: Get feedback on clarity
- A/B Test: Try different messages and positions
- Monitor Analytics: Track user engagement after changes