Navigation App Architecture

The Navigation App provides interactive button-based navigation for touchscreen kiosk deployments, enabling menu-driven interfaces where buttons serve as entry points to content, applications, or media collections. This touch-optimized navigation pattern supports self-service workflows where users select desired content from visual menus rather than passively consuming scheduled playlists.

Interactive Hub Pattern

Navigation apps function as interactive content hubs—playlist pages containing configurable buttons that launch target content when touched. Each button associates with a specific target (application, media asset, content folder, or web application), creating menu structures that users navigate through touch interaction.

This hub-and-spoke model separates navigation (the button menu) from content (the target items), enabling centralized navigation design decoupled from content updates. Organizations can modify target content without redesigning navigation interfaces, maintaining consistent user experiences across content lifecycle changes.

Button Target Types

Navigation buttons support multiple target content types, enabling flexible navigation architectures:

Application Targets: Buttons launch custom or pre-built TelemetryOS applications, enabling interactive experiences beyond passive media display. Applications run in overlay mode, maintaining navigation context for return-to-menu workflows.

Media Targets: Buttons display specific media assets (images, videos, PDFs), supporting direct-access media viewers. Users select media from visual menus rather than waiting for scheduled rotation.

Content Folder Targets: Buttons present folder contents as selectable galleries, enabling user-driven browsing of media collections. Users choose specific items from folders rather than viewing automated slideshows.

WebApp Targets: Buttons launch web applications hosted within TelemetryOS or externally, integrating web-based tools into kiosk workflows.

Button Customization Options

Navigation buttons support extensive visual and behavioral customization:

Text vs. Image Buttons: Buttons can display as text labels (styled with custom fonts, colors, sizes) or images (custom graphics, icons, branded elements), accommodating different design aesthetics and usability requirements.

Color Customization: Background and text colors enable brand alignment and visual hierarchy, with color coding supporting categorization or wayfinding patterns.

Size Options: Small, medium, and large size presets accommodate different button densities, with fixed-width options ensuring consistent layouts across varying text lengths.

Rounded Styling: Optional rounded corners support modern UI aesthetics, though this styling applies only to text buttons (image buttons maintain their source image shape).

Timeout and Return Behavior

Automatic Content Closure: Optional timeout configuration automatically closes target content after specified durations, returning users to the navigation menu. This timeout mechanism prevents kiosks from remaining on single content items indefinitely when users walk away mid-interaction.

Manual return functionality provides explicit user control through close buttons (typically "X" icons) on content overlays, enabling user-driven navigation rather than forced timeout-based returns.

Button Configuration

Button Properties

Each navigation button includes:

Applications support up to 8 buttons per navigation page, enabling multi-option menus without scrolling.

Button Styling

Text buttons: Customizable colors, fonts, and rounded corners
Image buttons: Custom graphics maintaining source image shape
Fixed widths: Optional consistent button sizing regardless of label length
Size presets: Three scaling options for different densities

Text button color customization supports brand alignment and visual hierarchy. Image buttons use uploaded graphics for icon-based navigation.

Layout and Positioning

Button alignment: Horizontal (left, center, right, justified) and vertical (top, center, bottom)
Overlay margins: CSS-based spacing control for content positioning
Background options: Static images, videos, or transparency
Aspect ratio support: 16:9 landscape and 9:16 portrait orientations

Alignment settings position button groups rather than individual buttons, maintaining consistent group composition.

Common Use Cases

Wayfinding kiosks: Building directories, floor maps, location-based navigation

Information kiosks: Service directories, facility information, resource guides

Product catalogs: Product categories, feature showcases, specification viewers

Digital signage directories: Employee directories, department information, contact details

Educational displays: Course catalogs, campus maps, program information

Event navigation: Session schedules, speaker information, venue maps

Self-service terminals: Form access, document downloads, information requests

Retail displays: Product categories, brand stories, promotion details

Healthcare kiosks: Provider directories, department locations, patient resources

Museum exhibits: Exhibit categories, artwork details, educational content

Integration with Playlist Zones

Navigation apps integrate with Playlist Zones for comprehensive interactive layouts. Zone composition enables:

• Navigation buttons alongside informational content (weather, time, announcements)
• Multi-region displays combining navigation with branding or wayfinding maps
• Context-aware interfaces presenting navigation with relevant supplementary information

Zone integration separates navigation functionality from contextual content, enabling independent updates without navigation redesign.

Configuration Specifications

Applications are created and configured through the Playlist Editor or Applications interface. Navigation configurations specify buttons, targets, styling, and behavior options.

Required Settings

• At least one button with text/image
• Target type and target selection for each button

Optional Settings

• Application label
• Button styling (colors, size, rounded corners, fixed width)
• Automatic content closure with timeout
• Overlay positioning margins
• Background images or videos
• Background box visibility
• Button alignment (horizontal and vertical)
• Multiple buttons (up to 8)

Limitations

• Maximum 8 buttons per navigation page
• Image buttons maintain source image shape (no rounded corners)
• Fixed width applies to text buttons only
• Aspect ratio detection based on source image dimensions
• Automatic closure requires timeout configuration (manual close always available)
• Content overlay margins use CSS syntax (requires CSS knowledge for precision)
• Button group alignment affects all buttons (no individual positioning)
• Touch interaction required (not functional on non-interactive displays)