Article Type: Concept / Standard
Audience: Solution Architects, Application Designers, HMI Engineers, Partners
Module: Fuuz Platform / Screen Designer
Applies to Versions: 2025.7+
Reference Standard: ANSI/ISA-101.01-2015

1. Overview

This standard defines the guidelines for designing Human Machine Interface (HMI) screens within the Fuuz Industrial Operations Platform that comply with ANSI/ISA-101.01-2015. It establishes the philosophy, display hierarchy, element standards, and lifecycle management practices necessary for creating effective operator interfaces across continuous, batch, and discrete manufacturing processes.

The Fuuz Screen Designer provides the tooling to implement ISA-101 compliant HMI systems while leveraging the platform's cloud-to-edge architecture, real-time data integration, and role-based access control.

2. ISA-101 Lifecycle Mapping to Fuuz

Definitions

• HMI Philosophy: Strategic document addressing guiding principles that govern HMI design structure — implemented in Fuuz via Design Standards documentation and Screen Templates
• HMI Style Guide: Facility/company-specific standards for design implementation — implemented in Fuuz via Application-level screen templates and component libraries
• HMI Toolkit: Collection of design elements for use within the platform — Fuuz provides pre-built screen elements, input types, visualizations, and reusable widgets
• Display: Visual representation of process information — implemented as Fuuz Screens with Routes for navigation
• Screen Element: Component parts of screens including containers, inputs, tables, charts, and actions
• Faceplate: Popup display for single device/loop control — implemented via Fuuz modal screens or widget screens

HMI Lifecycle Stages in Fuuz

3. Display Hierarchy Standard

ISA-101 recommends a four-level display hierarchy to provide operators with structured views of their responsibility scope while enabling drill-down to greater detail. The following maps ISA-101 levels to Fuuz screen types:

Level 1: Overview Displays

Purpose: Provide summary of key parameters, alarms, and process conditions for an operator's entire span of control on a single display.

Purpose: Primary operating displays for routine monitoring and changes during normal operations. Should be task-based to allow operators to perform tasks with minimal navigation.

Level 3: Detail Displays (System/Subsystem)

Purpose: Displays for non-routine operations such as lineup changes, equipment switching, or complex routine tasks. Provide sufficient information for process diagnostics.

Level 4: Diagnostic Displays

Purpose: Provide all system information for troubleshooting and diagnostics. May appear as faceplates or popups due to intermittent use.

4. Screen Architecture Standards

Standard Container Hierarchy

All HMI screens shall follow a consistent container hierarchy for predictable user experience and ISA-101 compliance:

ROOT (Screen)
└── ContainerOuter (Layout constraint)
    ├── ContainerHeader (Fixed height: 40px)
    │   ├── ScreenName (left-aligned)
    │   └── ContainerNavigation (right-aligned menu/actions)
    ├── BrandSeparator (4px gradient)
    ├── ContainerBody (Flexible, scrollable)
    │   └── [Content varies by screen type]
    ├── BrandSeparator (4px gradient)
    └── ContainerFooter (Fixed height: 60px - optional)

ISA-101 Display Styles to Fuuz Screen Types

5. Human Factors Engineering Standards

ISA-101 mandates Human Factors Engineering (HFE) principles in HMI design. The following requirements shall be applied to all Fuuz HMI screens:

Color Standards

Visual Dynamics (Blinking/Flashing)

• Blinking: Reserved for unacknowledged alarms only. Must have operator-controllable stop mechanism.
• Flashing: Reserved for situations requiring operator attention. Should not persist after acknowledgment.
• Text/Numbers: Shall never blink or move as it impairs readability.
• Implementation: Use Fuuz conditional styling with animation properties via JSONata expressions tied to alarm acknowledgment status.

Typography Standards

Touch Target Sizing (Accessibility)

• Minimum touch target: 44×44px (iOS) / 48×48dp (Android)
• Footer buttons: height fills 60px container
• Input fields: minimum height 80px (120px with validation)
• Minimum spacing between interactive elements: 8px

6. Navigation Standards

ISA-101 requires effective navigation that minimizes operator keystroke-equivalent actions and supports workflow for both normal and abnormal conditions.

Navigation Performance Requirements

Route Configuration Standards

// Level 1 Overview Route
{
  "title": "Plant Overview",
  "path": "/overview",
  "isMenuAccessible": true,
  "submenu": "Operations",
  "isFullscreen": true
}

// Level 2 Process Route
{
  "title": "Reactor Control",
  "path": "/reactor/:reactorId",
  "isMenuAccessible": true,
  "submenu": "Operations/Process Areas",
  "isFullscreen": false
}

// Level 3 Detail Route
{
  "title": "Equipment Detail",
  "path": "/equipment/:equipmentId",
  "isMenuAccessible": false,  // Accessed via table linkTarget
  "isFullscreen": false
}

// Level 4 Diagnostic Route (Widget)
{
  "title": "Point Faceplate",
  "path": "/faceplate/:tagId",
  "isMenuAccessible": false,
  "isFullscreen": false
}

7. Screen Configuration Reference

Core Screen Properties

Standard Element Naming Conventions

8. Troubleshooting

9. Related Resources

• ANSI/ISA-101.01-2015: Human Machine Interfaces for Process Automation Systems
• ANSI/ISA-18.2-2009: Management of Alarm Systems for the Process Industries
• Fuuz Table Data Screen Standard: Comprehensive framework for filter-and-table data management screens
• Fuuz Mobile Screen Design Standard: Transactional mobile-optimized data entry screens
• Fuuz Data Management Form Specification: Individual record form screens with sidebar layout
• ISO 11064: Ergonomic Design of Control Centres

10. Revision History

Fuuz Knowledge Base
Document ID: STD-HMI-101 • Version: 1.0.0 • © 2026 Fuuz