Mobile Screen Design Standard

Mobile Screen Design Standard

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

Category	Width Range	Examples
Primary	320px – 428px	iPhone SE, iPhone 12/13/14, Android phones
Secondary	768px – 834px	iPad mini, tablets in portrait mode

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)

Visual Layout

┌─────────────────────────────────────┐
│  ContainerHeader (40px)             │
│  ┌─────────────────────┬─────────┐  │
│  │ SCREEN TITLE        │  ☰ Menu │  │
│  └─────────────────────┴─────────┘  │
├─────────────────────────────────────┤ ← Brand Gradient (4px)
│                                     │
│  ContainerBody (flexGrow, scroll)   │
│  ┌─────────────────────────────┐    │
│  │ Form1                       │    │
│  │ ┌─────────────────────────┐ │    │
│  │ │ ContainerInnerBody      │ │    │
│  │ │                         │ │    │
│  │ │ ┌─────────────────────┐ │ │    │
│  │ │ │ Input Field 1       │ │ │    │
│  │ │ └─────────────────────┘ │ │    │
│  │ │ ┌─────────────────────┐ │ │    │
│  │ │ │ Input Field 2       │ │ │    │
│  │ │ └─────────────────────┘ │ │    │
│  │ │ ┌─────────────────────┐ │ │    │
│  │ │ │ Select Field        │ │ │    │
│  │ │ └─────────────────────┘ │ │    │
│  │ └─────────────────────────┘ │    │
│  └─────────────────────────────┘    │
│                                     │
├─────────────────────────────────────┤ ← Brand Gradient (4px)
│  ContainerFooter (60px)             │
│  ┌───────────────┬─────────────────┐│
│  │    SUBMIT     │      CLEAR      ││
│  └───────────────┴─────────────────┘│
└─────────────────────────────────────┘

Container Specifications

ContainerOuter

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

Property	Value	Why
width	100%	Fill available screen width
height	100%	Fill available screen height
flexDirection	column	Stack children vertically
justifyContent	space-between	Push header to top, footer to bottom
alignItems	stretch	Children fill full width
flexGrow	false	Prevent container expansion
flexShrink	false	Prevent container shrinking
overflow-x	hidden	Prevent horizontal scroll
overflow-y	hidden	Prevent page-level scroll

Important: The overflow: hidden on ContainerOuter is the foundation of layout stability. Without this, content can push the screen beyond viewport bounds, causing unpredictable scrolling behavior and layout instability.

ContainerHeader

Purpose: Fixed navigation and title area with brand styling.

Property	Value
height	40px (fixed)
width	100%
flexDirection	row
justifyContent	space-between
alignItems	center
background	paper (or custom #5b30df)
padding	4
flexGrow / flexShrink	false

Header Content:

• ScreenName (left): RichText element, 18px bold, black text
• ContainerNavigation (right): 50px container with MenuButton (bars icon, large size)

BrandSeparator

Purpose: 4px visual brand accent between major screen sections.

Property	Value
height	4px (fixed)
width	100%
flexGrow / flexShrink	false
shadow	true
style.background-image	linear-gradient(90deg, #39005a, #5b30df, #03caaf)

Placement: Include two BrandSeparator elements—one between Header and Body, one between Body and Footer.

ContainerBody

Purpose: Main scrollable content area that fills available space between header and footer.

Property	Value	Why
height	0px	Allows flexGrow to control size
width	100%	Fill available width
flexGrow	true	Expand to fill available space
flexShrink	false	Never shrink below content
flexDirection	column	Stack content vertically
overflow-y	auto	Enable vertical scrolling
overflow-x	hidden	Prevent horizontal scroll
scrollbar-width	thin	Minimal scrollbar footprint

Important: Setting height: 0px with flexGrow: true allows the body to fill available space without causing overflow issues. This is essential for proper scroll behavior. Without this, content can push the footer off-screen.

ContainerFooter

Purpose: Fixed action button area for primary and secondary actions.

Property	Value
height	60px (fixed)
width	100%
flexDirection	row
justifyContent	space-between
alignItems	stretch
flexGrow / flexShrink	false

3. Use Cases

• Inventory Transactions: Scan barcode, verify item details, enter quantity adjustment, confirm transaction—streamlined for warehouse receiving, picking, cycle counting
• Work Order Data Collection: Record production quantities, downtime events, scrap reasons, and quality inspections directly from the shop floor without desktop access
• Equipment Inspections: Complete safety checklists, maintenance verification forms, and pre-shift equipment checks with guided workflows and photo capture
• Quality Control: Perform in-process inspections, record measurement data, capture defect photos, and trigger corrective actions from production areas
• Material Traceability: Scan lot numbers, verify genealogy, record consumption events, and maintain complete chain of custody for regulated materials
• Asset Management: Perform asset verification walks, update locations, record condition assessments, and capture asset identification photos
• Shipping Verification: Scan outbound packages, verify contents against pick lists, record carrier information, and confirm shipment completion
• Maintenance Requests: Report equipment issues, attach photos, select priority levels, and submit work requests directly from production floor
• Time Tracking: Clock in/out of jobs, record indirect labor activities, switch between operations, and capture labor efficiency data
• Kiosk Operations: Deploy shared tablets or phones at workstations for operator data entry without individual device assignment

4. Screen Details

Component Standards

Form Input General Properties

All form inputs on mobile screens should include these base properties:

Property	Value	Notes
height	120px	With validation; use 80px or auto without
width	100%	Always full width on mobile
variant	outlined	Visual indicator for input fields
dataFontSize	24	Readable without zoom
labelFontSize	15	Clear but not overwhelming
alignItems	start	Top-align content

Note: Use 120px when field has validation rules (required, format, etc.) to reserve space for error messages. Use 80px or auto when field has no validation and space is limited. Fixed height prevents screen elements from shifting when validation messages appear.

Input Type Reference

Use Case	Input Type	Key Properties
Short text (SKU, ID, names)	TextInput	type: "text"
Numbers only	TextInput	type: "number"
Barcode/QR scan	TextInput + ScanButton	type: "text" with scan action
Selection from list	SelectInput	dialogMode: "never", optionLimit: 5
Yes/No, True/False	SwitchInput	Simple toggle
Date selection	DateInput	Native date picker
Multi-line text	TextInput	multiline: true

SelectInput Configuration

{
  "type": "select",
  "height": "120px",
  "width": "100%",
  "variant": "outlined",
  "dataFontSize": 24,
  "labelFontSize": 15,
  "dialogMode": "never",
  "optionLimit": 5,
  "isClearable": true,
  "searchPredicate": "contains",
  "orderByDirection": "asc",
  "additionalFilter": {
    "_and": [{ "active": { "_eq": true } }]
  }
}

Important: Always use additionalFilter to return only active/usable options. Presenting inactive or deleted records to mobile users causes confusion and support issues in operational environments.

Footer Buttons

Buttons in ContainerFooter should fill available space with consistent styling:

Property	Value
width	50%
height	100%
margin	4
customTextSize	24

Button Color Coding

Color	Usage	Examples
Green	Primary affirmative action	Submit, Save, Confirm
Amber	Secondary action	Clear, Cancel, Reset
Red	Destructive action (use sparingly)	Delete
Blue	Navigation action	Back, Next, Continue

Disabled State Logic

Submit Button Pattern: Disabled when ANY required field is empty

$isNilOrEmpty($components.Form1.formState.values.field1)
or
$isNilOrEmpty($components.Form1.formState.values.field2)

Clear Button Pattern: Disabled when ALL fields are already empty

$isNilOrEmpty($components.Form1.data.field1)
and
$isNilOrEmpty($components.Form1.data.field2)
and
$isNilOrEmpty($components.Form1.data.field3)

Why Different? Submit uses formState.values to check current input state. Clear uses data to check if there's anything to clear.

Navigation

The MenuButton in ContainerNavigation provides app-wide navigation:

• Home: Explicit "Home" page as primary navigation hub (required)
• Function Pages: Task-specific pages accessible from Home
• Menu Icon: "bars" (hamburger), large size

Note: A separate template for mobile Home/Dashboard screens will be provided. The Home screen serves as the primary navigation hub with status information and action buttons to functional pages.

Common Patterns

Pattern 1: Simple Data Collection

Use Case: Collect 2-3 pieces of information and submit

ContainerHeader (Screen Title + Menu)
BrandSeparator
ContainerBody
  └── Form1
      └── ContainerInnerBody
          ├── Input 1 (required)
          ├── Input 2 (required)
          └── Input 3 (optional)
BrandSeparator
ContainerFooter
  ├── Submit Button (50%, green)
  └── Clear Button (50%, amber)

Pattern 2: Scan and Verify

Use Case: Scan barcode, display related data, collect additional input

ContainerHeader (Screen Title + Menu)
BrandSeparator
ContainerBody
  └── Form1
      └── ContainerInnerBody
          ├── Scan Input (TextInput with scan button)
          ├── Display Data (read-only, loaded after scan)
          ├── Additional Input 1
          └── Additional Input 2
BrandSeparator
ContainerFooter
  ├── Submit Button (50%, green)
  └── Cancel Button (50%, amber)

Pattern 3: Selection and Confirmation

Use Case: Choose from list, review selection, confirm action (two-screen pattern)

Pattern 4: Multi-Step Process

Use Case: Complex task requiring multiple inputs in sequence

Implementation: Multi-step wizards are built using Webflow templates. The base mobile screen template provides the structure; Webflows handle step navigation, data persistence between steps, and conditional logic. Each step has maximum 3 inputs to reduce cognitive load.

5. Technical Details

Layout Principles - Responsive Layout Thought Process

1. Start with Structure, Not Content

Think: "What needs to be fixed, and what needs to be flexible?"

• Fixed Elements: Header (40px), Footer (60px), BrandSeparators (4px)
• Flexible Elements: ContainerBody, ContainerInnerBody

2. Control Growth Explicitly

Think: "Where should expansion occur, and where must it stop?"

• Set flexGrow: false on containers that must maintain size
• Set flexGrow: true only on content areas that should fill available space
• Use height: 0px with flexGrow: true to prevent initial overflow
• Always set flexShrink: false on fixed-height elements

3. Manage Overflow Intentionally

Container	Overflow Setting	Behavior
ContainerOuter	hidden	Prevent page scroll
ContainerBody	overflow-y: auto	Enable content scroll
ContainerHeader/Footer	none	Fixed size, no overflow

Accessibility

Touch Target Sizing

• 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
• Minimum spacing between interactive elements: 8px

Font Sizing

Element	Size	Rationale
Input data	24px	Readable without zoom
Input labels	15px	Clear but not overwhelming
Button text	24px	Easy to read at glance
Header title	18px	Bold, prominent

6. Troubleshooting

Issue	Cause	Fix
Screen scrolls horizontally	ContainerOuter missing overflow-x: hidden; child element width exceeds 100%; fixed-width elements too wide for mobile	Set ContainerOuter overflow-x: hidden; check all child elements for width: 100%; verify no fixed-width elements exceed 320px minimum screen width
Screen content behind footer	ContainerBody not using proper flexbox configuration; missing flexGrow: true on ContainerBody	Set ContainerBody height: 0px and flexGrow: true; verify ContainerOuter has justifyContent: space-between; ensure footer has fixed height (60px)
Layout shifts when validation errors appear	Input height set to auto instead of fixed height; error messages adding to container height	Set all inputs with validation to height: 120px; never use height: auto on validated form inputs
Cannot scroll content area	ContainerBody missing overflow-y: auto; ContainerOuter has overflow-y: auto (wrong place)	Set ContainerBody overflow-y: auto; set ContainerOuter overflow-y: hidden; verify body has height: 0px and flexGrow: true
Submit button always disabled	Disabled logic checking wrong data path; typo in field reference; logic using "and" instead of "or"	Verify disabled logic uses formState.values not just data; check exact field path; use "or" between required field checks (disabled if ANY empty)
Clear button doesn't work	No webflow attached to Clear button; webflow not configured to reset form	Create webflow attached to Clear button; use form reset action in webflow; verify form element name matches (Form1)
SelectInput shows inactive/deleted records	Missing additionalFilter on SelectInput; filter not checking active status	Add additionalFilter with active status check; verify field name (active, isActive, status); use _eq: true for boolean active fields
Text too small to read on mobile	Using default font sizes instead of mobile-optimized sizes	Set dataFontSize: 24 for all input fields; set labelFontSize: 15; set button customTextSize: 24
Footer buttons too small to tap reliably	Footer height too small or buttons not filling height	Set ContainerFooter height: 60px; set buttons height: 100%, width: 50%; verify minimum touch target of 44x44px met
Brand separators not visible	Missing BrandSeparator containers or gradient not applied	Add two BrandSeparator containers (after header, before footer); set height: 4px; apply gradient: linear-gradient(90deg, #39005a, #5b30df, #03caaf)

7. Revision History

Version	Date	Editor	Description
1.0	2024-12-26	Fuuz Documentation Team	Initial Release - Mobile Screen Design Standard

See Also

• HMI-Template-Standard-ISA-101-Compliant
• Fuuz-Form-Detail-Screen-Specification
• Master-Data-Table-Screen-Design-Standard
• Setup-Data-Table-Screen-Design-Standard
• Historical-Data-Table-Screen-Design-Standard

---

Source: support.fuuz.com