Article Type: Standard / Reference Audience: Solution Architects, Application Designers, Developers Module: Fuuz Platform - Mobile Application Design Applies to Versions: 2025.12+ Template Reference: mobile_screen_standard_template_0_0_1.json

1. Overview

Mobile screens in the Fuuz Application Designer provide task-focused interfaces for smartphones and tablets, enabling industrial operators, technicians, and warehouse personnel to perform critical operations on the shop floor. This mobile-first framework emphasizes layout stability, touch-friendly interactions, and predictable behavior across all device sizes, ensuring reliable data entry and process execution in demanding operational environments where accuracy and speed are paramount.

Design Principles

1. Constrained Flexibility: Leverage responsive layouts while maintaining strict control over growth and overflow to prevent layout instability
2. Predictable Behavior: Screen elements remain stable and do not shift during user interaction—critical for safety-critical operations
3. Task-Focused Design: Each screen accomplishes one primary task with minimal cognitive load for operators in high-pressure environments
4. Touch-First Interaction: All interactive elements meet minimum touch target requirements for gloved or bare-hand operation
5. Layout Stability: Validation messages and dynamic content never cause screen elements to jump or shift position

Target Devices

Note: Use device emulation for iPhone SE (320px), iPhone 12/13/14 (390px), and iPad mini (768px) to verify layouts at key breakpoints. Test all interactive elements with touch simulation, not mouse clicks.

2. Architecture & Data Flow

Container Hierarchy

The standard mobile template uses a six-level container architecture with branded separators:

ROOT (Screen)
└── ContainerOuter (Layout constraint container)
    ├── ContainerHeader (Fixed: 40px)
    │   ├── ScreenName (left-aligned title)
    │   └── ContainerNavigation (right-aligned menu)
    ├── BrandSeparator (Fixed: 4px gradient)
    ├── ContainerBody (Flexible, scrollable)
    │   └── Form1
    │       └── ContainerInnerBody (Content wrapper with padding)
    │           └── [Form inputs]
    ├── BrandSeparator (Fixed: 4px gradient)
    └── ContainerFooter (Fixed: 60px)

Container Specifications

ContainerOuter

Purpose: Primary layout constraint container that prevents uncontrolled growth in both X and Y axes.

ContainerHeader

Purpose: Fixed navigation and title area with brand styling. Height: 40px fixed.

BrandSeparator

Purpose: 4px visual brand accent between major screen sections. Gradient: linear-gradient(90deg, #39005a, #5b30df, #03caaf).

ContainerBody

Purpose: Main scrollable content area. Set height: 0px with flexGrow: true to fill available space and enable scroll.

ContainerFooter

Purpose: Fixed action button area. Height: 60px fixed.

3. Use Cases

• Inventory Transactions: Scan barcode, verify item details, enter quantity adjustment, confirm transaction
• Work Order Data Collection: Record production quantities, downtime events, scrap reasons, and quality inspections
• Equipment Inspections: Complete safety checklists, maintenance verification forms, and pre-shift equipment checks
• Quality Control: Perform in-process inspections, record measurement data, capture defect photos
• Material Traceability: Scan lot numbers, verify genealogy, record consumption events
• Shipping Verification: Scan outbound packages, verify contents against pick lists
• Maintenance Requests: Report equipment issues, attach photos, submit work requests
• Time Tracking: Clock in/out of jobs, record indirect labor activities

4. Screen Details

Component Standards

Form Input General Properties

Button Color Coding

5. Technical Details

Accessibility

• Minimum touch target: 44×44px (iOS standard), 48×48dp (Android standard)
• Footer buttons: height: 100% fills 60px footer (exceeds minimum)
• Input fields: height: 120px provides ample touch area

6. Troubleshooting

7. Revision History