Skip to main content

cockpitOS Digital Signage Content Guide

Special guide for touchscreen content

Table of Contents​

  1. Digital Signage Basics
  2. Content Creation for Touchscreens
  3. Interactive Elements
  4. Wayfinding and Navigation (including AR Navigation (Beta))
  5. QR Code Integration
  6. Performance Optimization
  7. Best Practices

1. Digital Signage Basics​

What is Digital Signage in cockpitOS?​

Digital signage encompasses all interactive touchscreen displays in shopping centers:

  • Wayfinding Terminals at entrances and central points
  • Shop Information Displays in front of stores
  • Event Screens for event announcements
  • Service Terminals for customer information

Additionally, there is the DOOH Mode (Digital Out-of-Home): During Idle Phases, when the kiosk is not in use, playlists (videos, images, slideshows) or Local Hero content (highlighted shops, news, events, offers) run. For details see DOOH Mode in Kiosk and Local Hero & All-Inclusive Package.

Specifics of Touchscreen Content​

Technical Differences:

  • Portrait Mode: 9:16 instead of 16:9 (1080x1920px)
  • Touch Optimization: Large, easily accessible buttons
  • Fast Load Times: Max. 3 seconds per page
  • Robust Navigation: Simple, intuitive operation

User Behavior:

  • Short Attention Span: 10-30 seconds
  • Standing Operation: Ergonomic considerations
  • Public Space: Privacy and data protection
  • Diverse User Groups: Accessibility is important

2. Content Creation for Touchscreens​

2.1 Image Optimization​

Optimal Image Sizes:

  • Full-screen Background: 1080x1920px
  • Content Areas: 800x1400px
  • Buttons and Icons: Minimum 120x120px
  • Logos: 200x200px for good visibility

Technical Requirements:

  • Format: JPG for photos, PNG for graphics
  • Resolution: At least 150 DPI
  • File Size: Max. 1MB per image
  • Contrast: High contrast for good readability

Color Guidelines:

  • Background: Light, neutral colors
  • Text: Dark font on a light background
  • Accents: Use corporate design colors sparingly
  • Warning Signals: Red only for important notices

2.2 Typography​

Font Sizes:

  • Headings: At least 48px
  • Body Text: At least 32px
  • Buttons: At least 28px
  • Notes: At least 24px

Fonts:

  • Primary: System font for best readability
  • Secondary: Corporate design font for headings
  • Avoid: Ornate or too thin fonts

Text Formatting:

  • Line Length: Max. 8-10 words per line
  • Line Spacing: 1.5x the font size
  • Paragraphs: Short and concise
  • Lists: Bullet points for better structure

2.3 Layout Principles​

Screen Division:

  • Header: 15% for logo and navigation
  • Content: 70% for main content
  • Footer: 15% for actions and QR codes

Touch Areas:

  • Minimum Size: 44x44px (11mm)
  • Spacing: At least 8px between elements
  • Position: Important buttons within reach (60-140cm height)

Information Hierarchy:

  • Most Important First: Place at the top and center
  • Scannable Structure: Consider F-pattern
  • Visual Weighting: Use size and contrast

3. Interactive Elements​

3.1 Navigation​

Main Navigation:

  • Home Button: Always visible and accessible
  • Back Button: Consistent position (top left)
  • Breadcrumbs: Orientation in deep structures
  • Search Function: Prominently placed

Menu Structure:

  • Flat Hierarchy: Max. 3 levels deep
  • Categories: Logical and understandable
  • Icons: Supportive, not stand-alone
  • Labels: Clear and concise

3.2 Buttons and Actions​

Button Design:

  • Size: At least 60x60px
  • Shape: Rounded corners for a modern look
  • Color: High contrast to background
  • State: Hover/Active effects for feedback

Call-to-Action:

  • Clear: "Start Wayfinding," "Learn More"
  • Action-Oriented: Use verbs
  • Prominent: Noticeable placement and design
  • Limited: Max. 2-3 CTAs per screen

3.3 Forms and Inputs​

Input Fields:

  • Large Keys: Optimized virtual keyboard
  • Autocomplete: For frequent inputs
  • Validation: Immediate feedback on errors
  • Data Protection: Do not store personal data

Search Function:

  • Autocomplete: Suggestions during input
  • Category Filter: Quick narrowing down
  • Spelling Tolerance: Fuzzy search implemented
  • Results Display: Clear and sorted

4. Wayfinding and Navigation​

Subtopics: Map Integration · Shop Directory · Route Guidance · AR Navigation (Beta)

4.1 Map Integration​

Map Types:

  • Overview Map: Entire center with orientation points
  • Floor Plans: Detailed view per floor
  • Route Planning: Step-by-step navigation
  • 3D View: For complex building structures
  • AR View (Beta): Camera live feed with directional arrow and shopfront recognition (Companion)

Map Elements:

  • Location Marker: Clearly indicate "You are here"
  • Destination Marker: Highlight destination
  • Route: Colorfully marked path
  • Orientation Points: Elevators, stairs, entrances
  • AR Overlay: Shop information upon recognizing storefront (name, offers, events)

4.2 Shop Directory​

Display:

  • Alphabetical List: With jump marks A-Z
  • Categories: Sorted by industry
  • Search Function: Name and category searchable
  • Favorites: Prominently displayed frequently searched shops

Shop Information:

  • Name and Logo: Clearly visible
  • Category: Clear assignment
  • Location: Floor and area
  • Opening Hours: Current and complete
  • Contact: Phone and website optional

4.3 Route Guidance​

Calculate Route:

  • Starting Point: Automatically current location
  • Destination: Shop, service, or exit
  • Routing Options: Shortest path, barrier-free
  • Time Estimation: Walking time in minutes

Route Display:

  • Step-by-Step: Individual waypoints
  • Directions: Left, right, straight ahead
  • Landmarks: "Pass by the café," "towards the elevator"
  • Distance: Meter indications to waypoints

4.4 AR Navigation (Beta)​

The companion app (NOW!) offers an AR Mode as an alternative to the classic map view:

Functionality:

  • Plan/AR Toggle: User switches between 3D map and AR camera view in wayfinding
  • Direction Arrow: On the camera live feed, an arrow shows the direction to the target
  • Dead Reckoning: Gyroscope + step counting estimate position and direction
  • Map Matching: Position projected onto known corridors (drift correction)
  • Re-calibration: Via QR scan or automatically upon shopfront recognition

Shopfront Recognition (Image Tracking):

  • MindAR.js: Browser-based image tracking -- no native app needed
  • Shopfront Images: Photos of storefronts stored in the dashboard as AR markers
  • AR Overlay: When a shop is recognized, name, category, offers, and events appear
  • Automatic Calibration: Recognized storefronts correct position estimation

Setting up in Dashboard:

  1. Upload shopfront images for waypoints in the route editor under "AR Navigation (Beta)"
  2. The "AR Marker" button compiles all images into a .mind file (MindAR format)
  3. Configure the .mind file URL in the center options

Note: This feature is labeled as Beta and can be activated/deactivated per center. For further details, see the Premium AI Template.

4.5 Premium-AI Kiosk: New Modules and UI Updates​

For the Premium AI template, additional center-specific togglable modules have been added:

  • New Basic Quicklinks (default off): Traffic, social feed, public transport monitor
  • Alternative Names per Icon: e.g., custom names for shops, services, traffic
  • Extended Kiosk UI: Modernized slide-ups (shops/cafés/services/news/highlights), harmonized spacing, up to 5 maps per line in landscape/XL
  • Accessible Routing: Consideration of stair avoidance/elevator preference based on the mode

Configuration and technical details see Premium AI Template.

5. QR Code Integration​

5.1 QR Code Generation​

Automatic Generation:

  • Shop Information: Direct link to details
  • Wayfinding: Transfer route to smartphone
  • Offers: Direct access to promotions
  • Events: Create calendar entry
  • Contacts: vCard for address book

QR Code Design:

  • Size: At least 3x3cm for good scanability
  • Contrast: Black on white background
  • Error Correction: Level M (15%) for robustness
  • Branding: Logo in the center possible

5.2 Companion App Integration​

Features:

  • Seamless Transfer: From touchscreen to smartphone
  • Offline Availability: Store maps and information
  • Personalization: Individual recommendations
  • Loyalty Program: Points for interactions

Data Transmission:

  • Session ID: Unique session identifier
  • Encryption: Secure data transfer
  • Time Limit: QR codes become invalid after 5 minutes
  • Anonymity: No personal data required

6. Performance Optimization​

6.1 Load Times​

Target Values:

  • Homepage: Max. 2 seconds
  • Navigation: Max. 1 second
  • Content Pages: Max. 3 seconds
  • Map View: Max. 5 seconds

Optimization Measures:

  • Image Compression: Use WebP format
  • Caching: Hold frequently used content
  • Lazy Loading: Load images as needed
  • Minimization: Compress CSS and JavaScript

6.2 Offline Functionality​

Available Functions:

  • Basic Navigation: Always functional
  • Maps: Locally stored
  • Shop Directory: Basic information
  • Emergency Information: Exits, safety

Synchronization:

  • Automatic: When internet connection is available
  • Incremental: Only changes transmitted
  • Fallback: Local data in case of connection issues
  • Update Interval: Every 15 minutes

7. Best Practices​

7.1 User Guidance​

Onboarding:

  • Welcome Screen: Short introduction
  • Main Functions: Overview of possibilities
  • Touch Instructions: Explain first interaction
  • Timeout: Return to start after 30 seconds of inactivity

Feedback:

  • Visual: Buttons react to touch
  • Auditory: Subtle confirmation sounds
  • Haptic: Vibration on available devices
  • Timely: Immediate response to inputs

7.2 Accessibility​

Visual Impairments:

  • High Contrast: Meet WCAG AA standard
  • Large Fonts: Scalable display
  • Screen Readers: Alt text for all images
  • Color Coding: Not used solely for information

Motor Limitations:

  • Large Touch Areas: Minimum 44px
  • Long Touch Time: 3 seconds for confirmation
  • Alternative Inputs: Voice control where possible
  • Height Adjustment: For diverse user groups

7.3 Maintenance and Updates​

Content Updates:

  • Automatic: Synchronization with CMS
  • Time-Controlled: Updates outside peak hours
  • Versioning: Rollback possible in case of issues
  • Monitoring: Monitoring functionality

Technical Maintenance:

  • Remote Maintenance: Updates without onsite service
  • Monitoring: 24/7 system monitoring
  • Backup: Daily configuration backup
  • Support: Quick response to outages

Checklist for Digital Signage Content​

Check before publication:​

Design:

  • Portrait layout (9:16) used
  • Font sizes at least 32px
  • High contrast between text and background
  • Touch areas at least 44x44px
  • Corporate design adhered to

Content:

  • Texts short and concise
  • Spelling and grammar correct
  • Current information checked
  • Call-to-actions clearly formulated
  • Accessibility considered

Technical:

  • Images optimized (max. 1MB)
  • Load times under 3 seconds
  • Navigation functional
  • QR codes scannable
  • Offline functionality tested

Legal:

  • Image rights clarified
  • Data protection observed
  • Imprint and contact available
  • Accessibility ensured

Additional Topics​

  • Kiosk, Companion & NOW! App – Terms, usage, Use Cases for Visitors (take route, share session, parking) and Benefits for the Center
  • Premium AI Template – Technical structure of the Premium AI template (Kiosk + Companion)
  • Concierge – AI Assistant: Content, technology, and tutorial for editorial and support
  • Reserve & Collect – Product reservation, pick-up code, entries (QR, kiosk, social shop)
  • Local Hero & All-Inclusive Package – Concept to strengthen “small” in the mall: Product → Website → Hot Pick → DOOH → Tenant Evaluation
  • DOOH Mode in Kiosk – Playlists, Local Hero, Idle Slot: Video/Image/Campaign on screens

This manual is part of the cockpitOS documentation and will be updated regularly.

Version: 1.0
Status: December 2024

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/digital-signage/CockpitOS_Digital_Signage_Guide