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.

Note: Implementing ISA-101 standards in Fuuz improves operator situation awareness, reduces response time to abnormal conditions, ensures consistency across facilities, and supports regulatory compliance for process automation systems.

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.

The ISA Level 1 Real Time Dashboard template displays no data until connected to a datasource — it is a template, not a live screen.

Level 2: Process Displays (Primary Operating)

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.

ISA Level 2 Dashboard Alarm — Element Hierarchy

Screen (ROOT) └── L2ContainerOuter ├── L2ResizableFilterPanel (300px default/max) │ └── L2ContainerFilterOuter │ ├── L2ContainerFilterPanelHeader │ │ ├── L2ContainerFilterPanelHeaderInner │ │ │ ├── L2FilterPanelTitle ("Filter Panel") │ │ │ └── L2ContainerFilterActions │ │ │ └── L2ActionSearch (magnifying-glass) │ │ └── L2FilterBrandSeparator (4px gradient) │ └── L2FormFilterPanel │ └── L2ContainerFilterInputs │ ├── L2SelectFilterStatus │ ├── L2SelectFilterArea │ ├── L2SelectFilterType │ ├── L2SelectFilterAlarm │ └── L2GraphQlWhereInput │ └── L2ContainerBody (purple left border) ├── L2TopActionSkeleton (35px, light background) │ ├── L2ContainerActionsStandard (100px) │ │ ├── L2ActionCreateSingle (+) │ │ └── L2ActionDeleteMultiple (trash-list) │ └── L2ContainerActionsCustom (250px) │ ├── L2ActionRefresh │ ├── L2ActionExport │ ├── L2ActionAlarm (ISA-101 <1sec) │ └── L2ActionOverview (→ Level 1) ├── L2BrandBandSeparator (4px gradient) └── L2Table1 (filterFormName: "L2FormFilterPanel") ├── L2TableColumnSpacer ├── L2TableColumnActions (menu) ├── L2TableColumnName ├── L2TableColumnStatus ├── L2TableColumnValue (editable) ├── L2TableColumnAlarm ├── L2TableColumnCreatedAt ├── L2TableColumnCreatedByUser ├── L2TableColumnUpdatedAt └── L2TableColumnUpdatedByUser 

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.

The Level 3 page is a Form screen in Fuuz and may include more details based upon specific deployment needs.

Level 4: Diagnostic Displays

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

Asset Widget - Fixed Forms or Dynamic Cards

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

Important: Color shall not be used as the only method of differentiation. All color-coded elements must have redundant indicators (shape, text, position, or pattern).

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

//Level1OverviewRoute{"title":"Plant Overview","path":"/overview","isMenuAccessible":true,"submenu":"Operations","isFullscreen":true}//Level2ProcessRoute{"title":"Reactor Control","path":"/reactor/:reactorId","isMenuAccessible":true,"submenu":"Operations/Process Areas","isFullscreen":false}//Level3DetailRoute{"title":"Equipment Detail","path":"/equipment/:equipmentId","isMenuAccessible":false,"isFullscreen":false}//Level4DiagnosticRoute(Widget){"title":"Point Faceplate","path":"/faceplate/:tagId","isMenuAccessible":false,"isFullscreen":false}

Level 3 routes are typically accessed via table linkTarget rather than the menu.

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
• ISO 11064: Ergonomic Design of Control Centres

10. Revision History

See Also

• Master Data Table Screen Design Standard
• Mobile Screen Design Standard
• Fuuz Form Detail Screen Specification
• Historical Data Table Screen Design Standard
• Gateway System Requirements
• Fuuz Deployment Methodologies