ISA-101-Compliant HMI (How-to Guide) applies to FrameworX, the ISA-101 consistent methodology for designing, building, and managing Human-Machine Interfaces (HMIs) in industrial automation. This guide implements ISA-101 principles within FrameworX displays, ensuring effective operator UI that enhance situational awareness and reduce human error.

In this page:

    

Displays →  Tutorial | Concept | How-to Guide | ISA-101 |Reference


Quick Reference

  • Standard Focus: HMI lifecycle management, style guide development, and performance metrics
  • Key Principles: Consistency, clarity, performance-based design
  • FrameworX Tools: Display templates, symbol libraries, theme management, alarm visualization
  • Success Metrics: Operator response time, error rates, situation awareness levels

1. HMI Philosophy and Style Guide

Design Philosophy Statement

Primary Purpose: Enable operators to maintain safe, efficient process control

Design Principles:

  • Abnormal situations should be immediately obvious
  • Navigation must be intuitive and consistent
  • Critical information always visible
  • Minimize cognitive load through effective information hierarchy

Color Philosophy

Process States (Not Alarms):

  • Running: #2D862D (Dark Green)
  • Stopped: #808080 (Gray)
  • Transition: #FFD700 (Yellow/Gold)
  • Manual Mode: #4169E1 (Blue)

Alarm States (ISA-18.2 Aligned):

  • Critical: #FF0000 (Red)
  • High: #FF8C00 (Orange)
  • Medium: #FFD700 (Yellow)
  • Low: #00BFFF (Cyan)
  • Suppressed: #9370DB (Purple)

Background Standards:

  • Level 1 Overview: #F0F0F0 (Light Gray)
  • Level 2 Control: #D3D3D3 (Medium Gray)
  • Level 3 Detail: #C0C0C0 (Darker Gray)
  • Level 4 Support: #F5F5F5 (Off-White)

Text and Typography

Font Hierarchy:

  • Headers: Sans-serif, Bold, 18-24pt
  • Process Values: Sans-serif, Regular, 14-16pt
  • Labels: Sans-serif, Regular, 10-12pt
  • Alarm Text: Sans-serif, Bold, 12-14pt

Text Colors:

  • Primary Text: #000000 (Black)
  • Secondary Text: #404040 (Dark Gray)
  • Emphasis: #0000FF (Blue)
  • Warning Text: Matches alarm priority color

2. Display Hierarchy and Navigation

Four-Level Hierarchy Structure

Level 1: Overview Displays

  • Purpose: Plant-wide situational awareness
  • Content:
    • Key performance indicators
    • Area status summary
    • Active alarm counts by area
    • Production metrics
  • Navigation: Direct links to all Level 2 displays
  • Update Rate: 1-2 seconds

Level 2: Control Displays

  • Purpose: Primary operator control
  • Content:
    • Process unit graphics
    • Control loops
    • Alarm banners
    • Trend indicators
  • Density: 50-60 control points maximum
  • Update Rate: 0.5-1 second

Level 3: Detail Displays

  • Purpose: Detailed equipment/loop information
  • Content:
    • Individual equipment faceplates
    • Detailed P&IDs
    • Maintenance information
    • Historical trends
  • Access: Pop-ups or dedicated screens
  • Update Rate: 0.5 seconds

Level 4: Support Displays

  • Purpose: Administrative and diagnostic
  • Content:
    • Alarm configuration
    • System diagnostics
    • Reports and logs
    • Help documentation

Navigation Standards

<!-- FrameworX Navigation Template -->
<NavigationBar>
    <HomeButton target="Level1_Overview"/>
    <Breadcrumb maxLevels="3"/>
    <AreaSelector>
        <Area name="Production" target="Level2_Production"/>
        <Area name="Utilities" target="Level2_Utilities"/>
        <Area name="Packaging" target="Level2_Packaging"/>
    </AreaSelector>
    <AlarmSummary visible="always"/>
</NavigationBar>

3. High-Performance Graphics

Analog Indicators

Bar Graphs: Primary method for analog values

  • Normal range: Gray fill
  • Current value: Dark line
  • Setpoint: Triangle marker
  • Limits: Colored zones only when exceeded

Trend Sparklines:

  • Embedded 24-hour trends
  • No gridlines
  • Min/max indicators
  • Current value emphasis

Digital Indicators

State Display:

  • Text-based primary (OPEN/CLOSED)
  • Shape secondary (valve symbols)
  • Color for abnormal only
  • Animation minimal

Control Elements

Faceplates:

[Tag Name]
PV: [####.#] [EU]
SP: [####.#] [EU]
OP: [###.#] %
Mode: [AUTO/MAN/CAS]
[Alarm Status]

Interaction Standards:

  • Left-click: Primary faceplate
  • Right-click: Context menu
  • Hover: Tooltip with key values
  • Touch: Enlarged interaction zones

4. Alarm Visualization

Alarm Integration Standards

Embedded Alarm Indicators:

  • Priority border around affected element
  • Flashing only for unacknowledged
  • Text annotation with alarm description
  • Clear visual path to alarm location

Alarm Summary Objects:

Priority | Area | Tag | Description | Value | Time
HIGH | UNIT-01 | TIC-1001 | Temperature High | 185°F | 14:23:45
MEDIUM | UNIT-02 | PIC-2001 | Pressure Deviation | 65 PSI | 14:22:10

Alarm Shelving Display

  • Visual indication of shelved alarms
  • Shelving reason documentation
  • Automatic unshelving timers
  • Management approval indicators

5. Performance Metrics and KPIs

Display Performance Requirements

  • Loading Time: < 2 seconds
  • Update Rate: As specified per level
  • Navigation: < 3 clicks to any display
  • Object Count: < 200 dynamic objects

Operator Performance Metrics

Situation Awareness:

  • Time to detect abnormal situation
  • Correct initial response rate
  • Navigation efficiency

Display Effectiveness Metrics Dashboard:

  • Average time on display
  • Click-through rates
  • Error recovery time
  • Alarm response time

6. FrameworX Implementation

Display Templates

<!-- Level 2 Control Display Template -->
<Display name="Level2_Template">
    <Grid rows="12" columns="16">
        <NavigationBar row="0" colspan="16"/>
        <AlarmBanner row="1" colspan="16"/>
        <ProcessArea row="2" rowspan="8" colspan="12"/>
        <TrendArea row="2" rowspan="4" colspan="4"/>
        <KPIPanel row="6" rowspan="4" colspan="4"/>
        <ControlPanel row="10" rowspan="2" colspan="16"/>
    </Grid>
</Display>

Symbol Library Standards

// Standard Pump Symbol
class PumpSymbol extends FrameworXSymbol {
    properties = {
        tagName: String,
        state: ['Running', 'Stopped', 'Fault'],
        mode: ['Auto', 'Manual', 'Maintenance']
    };
    
    render() {
        return {
            fill: this.state === 'Running' ? '#2D862D' : '#808080',
            stroke: this.hasAlarm ? this.alarmColor : '#000000',
            strokeWidth: this.hasAlarm ? 3 : 1,
            animation: this.state === 'Fault' ? 'flash' : 'none'
        };
    }
}

Theme Configuration

{
    "themes": {
        "dayShift": {
            "background": "#F0F0F0",
            "text": "#000000",
            "borders": "#808080"
        },
        "nightShift": {
            "background": "#1A1A1A",
            "text": "#E0E0E0",
            "borders": "#606060"
        }
    }
}

7. Lifecycle Management

Development Process

  1. Requirements Phase:

    • User task analysis
    • Alarm philosophy alignment
    • Performance criteria definition

  2. Design Phase:

    • Style guide creation
    • Template development
    • Symbol standardization

  3. Implementation Phase:

    • Display building
    • Testing procedures
    • Operator training

  4. Operation Phase:

    • Performance monitoring
    • Feedback collection
    • Continuous improvement

Change Management

Version Control:

  • Display version tracking
  • Change documentation
  • Rollback procedures

Testing Requirements:

  • [ ] Functional testing
  • [ ] Performance testing
  • [ ] Operator acceptance testing
  • [ ] Alarm response testing

8. Best Practices and Common Pitfalls

Best Practices

? Use grayscale as default - Color only for abnormal conditions
? Implement consistent navigation - Same pattern across all displays
? Minimize animation - Static displays with emphasis on abnormal
? Group related information - Logical clustering of data
? Provide context - Show relationships between values
? Design for worst case - Test with maximum alarm load

Common Pitfalls to Avoid

? Color for normal states - Leads to rainbow displays
? 3D effects and gradients - Reduces clarity
? Excessive detail - Information overload
? Inconsistent symbols - Operator confusion
? Poor contrast - Readability issues
? Animation overuse - Distraction from critical information

9. Testing and Validation

Usability Testing Checklist

  • [ ] Scenario-based operator testing
  • [ ] Abnormal situation response time
  • [ ] Navigation path efficiency
  • [ ] Alarm flood handling
  • [ ] Display loading performance
  • [ ] Multi-monitor configuration
  • [ ] Touch screen interaction (if applicable)

Performance Validation

-- Display Performance Query
SELECT
    DisplayName,
    AVG(LoadTime) as AvgLoadTime,
    MAX(LoadTime) as MaxLoadTime,
    COUNT(*) as AccessCount
FROM DisplayMetrics
WHERE Timestamp > DATEADD(day, -7, GETDATE())
GROUP BY DisplayName
HAVING AVG(LoadTime) > 2.0 -- Flag slow displays

10. FrameworX-Specific Configuration

Displays Module Setup

  1. Navigate to Displays → Themes

    • Import ISA-101 color palette
    • Configure day/night themes
    • Set alarm color reservations

  2. Configure Displays → Symbols

    • Create standard symbol library
    • Apply ISA-101 color mappings
    • Set interaction behaviors

  3. Setup Displays → Layouts

    • Create Level 1-4 templates
    • Configure navigation structure
    • Set default update rates

Alarm Integration

  1. In Alarms → Global Settings:

    • Configure priority levels
    • Set color assignments
    • Enable alarm shelving

  2. Configure AlarmViewer control:

    • Set filter defaults
    • Configure columns
    • Enable duration tracking

Performance Monitoring

// Scripts → Tasks → DisplayMetrics
public void MonitorDisplayPerformance()
{
    double loadTime = @Display.CurrentDisplay.LoadTime;
    int objectCount = @Display.CurrentDisplay.DynamicObjects;
    
    if (loadTime > 2.0 || objectCount > 200)
    {
        @Alarm.CustomMessage(
            $"Display performance issue: {loadTime}s load, {objectCount} objects",
            "Performance",
            "Warning"
        );
    }
}

Implementation Checklist

Phase 1: Philosophy and Standards

  • [ ] Create HMI philosophy document
  • [ ] Define color standards
  • [ ] Establish navigation patterns
  • [ ] Create symbol library

Phase 2: Template Development

  • [ ] Level 1 overview template
  • [ ] Level 2 control template
  • [ ] Level 3 detail template
  • [ ] Level 4 support template

Phase 3: Implementation

  • [ ] Convert existing displays
  • [ ] Implement navigation
  • [ ] Configure alarms
  • [ ] Setup performance monitoring

Phase 4: Validation

  • [ ] Operator testing
  • [ ] Performance validation
  • [ ] Documentation review
  • [ ] Training completion

Related Documentation

  • High Performance HMI Handbook
  • Alarms Module Configuration
  • Display Drawing Guide
  • Symbol Library Reference
  • Theme Management


ISA-101-Compliant HMI Design

Overview

ISA-101 establishes a consistent methodology for designing, building, and managing Human-Machine Interfaces (HMIs) in industrial automation. This guide implements ISA-101 principles within FrameworX displays, ensuring effective operator UI that enhance situational awareness and reduce human error.

Quick Reference

  • Standard Focus: HMI lifecycle management, style guide development, and performance metrics
  • Key Principles: Consistency, clarity, performance-based design
  • FrameworX Tools: Display templates, symbol libraries, theme management, alarm visualization
  • Success Metrics: Operator response time, error rates, situation awareness levels

1. HMI Philosophy and Style Guide

Design Philosophy Statement

  • Primary Purpose: Enable operators to maintain safe, efficient process control
  • Design Principles:
    • Abnormal situations should be immediately obvious
    • Navigation must be intuitive and consistent
    • Critical information always visible
    • Minimize cognitive load through effective information hierarchy

Color Philosophy

  • Process States (Not Alarms):

    Running:     #2D862D (Dark Green)
Stopped:     #808080 (Gray)
Transition:  #FFD700 (Yellow/Gold)
Manual Mode: #4169E1 (Blue)

  • Alarm States (ISA-18.2 Aligned):

    Critical:    #FF0000 (Red)
High:        #FF8C00 (Orange)
Medium:      #FFD700 (Yellow)
Low:         #00BFFF (Cyan)
Suppressed:  #9370DB (Purple)

  • Background Standards:

    Level 1 Overview:  #F0F0F0 (Light Gray)
Level 2 Control:   #D3D3D3 (Medium Gray)
Level 3 Detail:    #C0C0C0 (Darker Gray)
Level 4 Support:   #F5F5F5 (Off-White)

Text and Typography

  • Font Hierarchy:

    • Headers: Sans-serif, Bold, 18-24pt
    • Process Values: Sans-serif, Regular, 14-16pt
    • Labels: Sans-serif, Regular, 10-12pt
    • Alarm Text: Sans-serif, Bold, 12-14pt

  • Text Colors:

    • Primary Text: #000000 (Black)
    • Secondary Text: #404040 (Dark Gray)
    • Emphasis: #0000FF (Blue)
    • Warning Text: Matches alarm priority color

2. Display Hierarchy and Navigation

Four-Level Hierarchy Structure

Level 1: Overview Displays

  • Purpose: Plant-wide situational awareness
  • Content:
    • Key performance indicators
    • Area status summary
    • Active alarm counts by area
    • Production metrics
  • Navigation: Direct links to all Level 2 displays
  • Update Rate: 1-2 seconds

Level 2: Control Displays

  • Purpose: Primary operator control
  • Content:
    • Process unit graphics
    • Control loops
    • Alarm banners
    • Trend indicators
  • Density: 50-60 control points maximum
  • Update Rate: 0.5-1 second

Level 3: Detail Displays

  • Purpose: Detailed equipment/loop information
  • Content:
    • Individual equipment faceplates
    • Detailed P&IDs
    • Maintenance information
    • Historical trends
  • Access: Pop-ups or dedicated screens
  • Update Rate: 0.5 seconds

Level 4: Support Displays

  • Purpose: Administrative and diagnostic
  • Content:
    • Alarm configuration
    • System diagnostics
    • Reports and logs
    • Help documentation

Navigation Standards

<!-- FrameworX Navigation Template -->
<NavigationBar>
  <HomeButton target="Level1_Overview"/>
  <Breadcrumb maxLevels="3"/>
  <AreaSelector>
    <Area name="Production" target="Level2_Production"/>
    <Area name="Utilities" target="Level2_Utilities"/>
    <Area name="Packaging" target="Level2_Packaging"/>
  </AreaSelector>
  <AlarmSummary visible="always"/>
</NavigationBar>

3. High-Performance Graphics

Analog Indicators

  • Bar Graphs: Primary method for analog values

    • Normal range: Gray fill
    • Current value: Dark line
    • Setpoint: Triangle marker
    • Limits: Colored zones only when exceeded

  • Trend Sparklines:

    • Embedded 24-hour trends
    • No gridlines
    • Min/max indicators
    • Current value emphasis

Digital Indicators

  • State Display:
    • Text-based primary (OPEN/CLOSED)
    • Shape secondary (valve symbols)
    • Color for abnormal only
    • Animation minimal

Control Elements

  • Faceplates:

    [Tag Name]
PV:  [####.#] [EU]
SP:  [####.#] [EU]
OP:  [###.#] %
Mode: [AUTO/MAN/CAS]
[Alarm Status]

  • Interaction Standards:

    • Left-click: Primary faceplate
    • Right-click: Context menu
    • Hover: Tooltip with key values
    • Touch: Enlarged interaction zones

4. Alarm Visualization

Alarm Integration Standards

  • Embedded Alarm Indicators:

    • Priority border around affected element
    • Flashing only for unacknowledged
    • Text annotation with alarm description
    • Clear visual path to alarm location

  • Alarm Summary Objects:

    Priority | Area    | Tag      | Description        | Value  | Time
HIGH     | UNIT-01 | TIC-1001 | Temperature High   | 185°F  | 14:23:45
MEDIUM   | UNIT-02 | PIC-2001 | Pressure Deviation | 65 PSI | 14:22:10

Alarm Shelving Display

  • Visual indication of shelved alarms
  • Shelving reason documentation
  • Automatic unshelving timers
  • Management approval indicators

5. Performance Metrics and KPIs

Display Performance Requirements

  • Loading Time: < 2 seconds
  • Update Rate: As specified per level
  • Navigation: < 3 clicks to any display
  • Object Count: < 200 dynamic objects

Operator Performance Metrics

  • Situation Awareness:

    • Time to detect abnormal situation
    • Correct initial response rate
    • Navigation efficiency

  • Display Effectiveness:

    Metrics Dashboard:
  - Average time on display
  - Click-through rates
  - Error recovery time
  - Alarm response time

6. FrameworX Implementation

Display Templates

<!-- Level 2 Control Display Template -->
<Display name="Level2_Template">
  <Grid rows="12" columns="16">
    <NavigationBar row="0" colspan="16"/>
    <AlarmBanner row="1" colspan="16"/>
    <ProcessArea row="2" rowspan="8" colspan="12"/>
    <TrendArea row="2" rowspan="4" colspan="4"/>
    <KPIPanel row="6" rowspan="4" colspan="4"/>
    <ControlPanel row="10" rowspan="2" colspan="16"/>
  </Grid>
</Display>

Symbol Library Standards

// Standard Pump Symbol
class PumpSymbol extends FrameworXSymbol {
  properties = {
    tagName: String,
    state: ['Running', 'Stopped', 'Fault'],
    mode: ['Auto', 'Manual', 'Maintenance']
  };
  
  render() {
    return {
      fill: this.state === 'Running' ? '#2D862D' : '#808080',
      stroke: this.hasAlarm ? this.alarmColor : '#000000',
      strokeWidth: this.hasAlarm ? 3 : 1,
      animation: this.state === 'Fault' ? 'flash' : 'none'
    };
  }
}

Theme Configuration

{
  "themes": {
    "dayShift": {
      "background": "#F0F0F0",
      "text": "#000000",
      "borders": "#808080"
    },
    "nightShift": {
      "background": "#1A1A1A",
      "text": "#E0E0E0",
      "borders": "#606060"
    }
  }
}

7. Lifecycle Management

Development Process

  1. Requirements Phase:

    • User task analysis
    • Alarm philosophy alignment
    • Performance criteria definition

  2. Design Phase:

    • Style guide creation
    • Template development
    • Symbol standardization

  3. Implementation Phase:

    • Display building
    • Testing procedures
    • Operator training

  4. Operation Phase:

    • Performance monitoring
    • Feedback collection
    • Continuous improvement

Change Management

  • Version Control:

    • Display version tracking
    • Change documentation
    • Rollback procedures

  • Testing Requirements:

    • [ ] Functional testing
    • [ ] Performance testing
    • [ ] Operator acceptance testing
    • [ ] Alarm response testing

8. Best Practices and Common Pitfalls

Best Practices

? Use grayscale as default - Color only for abnormal conditions ? Implement consistent navigation - Same pattern across all displays ? Minimize animation - Static displays with emphasis on abnormal ? Group related information - Logical clustering of data ? Provide context - Show relationships between values ? Design for worst case - Test with maximum alarm load

Common Pitfalls to Avoid

? Color for normal states - Leads to rainbow displays ? 3D effects and gradients - Reduces clarity ? Excessive detail - Information overload ? Inconsistent symbols - Operator confusion ? Poor contrast - Readability issues ? Animation overuse - Distraction from critical information

9. Testing and Validation

Usability Testing Checklist

  • [ ] Scenario-based operator testing
  • [ ] Abnormal situation response time
  • [ ] Navigation path efficiency
  • [ ] Alarm flood handling
  • [ ] Display loading performance
  • [ ] Multi-monitor configuration
  • [ ] Touch screen interaction (if applicable)

Performance Validation

-- Display Performance Query
SELECT 
  DisplayName,
  AVG(LoadTime) as AvgLoadTime,
  MAX(LoadTime) as MaxLoadTime,
  COUNT(*) as AccessCount
FROM DisplayMetrics
WHERE Timestamp > DATEADD(day, -7, GETDATE())
GROUP BY DisplayName
HAVING AVG(LoadTime) > 2.0  -- Flag slow displays

Related Documentation


  • ISA-101–Compliant HMI Design (Reference)

    Where: under Industry Standards (Reference) (same place you list ISA-95, FDA 21 CFR 11, NERC-CIP, etc.). 

From concept pages (Platform Overview → Technology & Architecture → Security & Compliance), link down to this Reference page; from UI tutorials (Operator UI Design), link sideways to it as background. 


Page outline (bullets you can drop in)

Purpose

  • What ISA-101 is and why it matters for HMI design; who should read (HMI designers, control engineers, O&M).

Core principles

  • Display hierarchy (Level 1 Overview → Level 4 Support/Diagnostics).

  • Situational awareness; minimalism; color usage rules (alarm colors reserved; neutral palette).

  • Consistent navigation, typography, and symbol conventions.

Mapping ISA-101 to FrameworX

  • Display hierarchy in FrameworX: how to structure Overview/Area/Detail/Support pages; recommended naming.

  • Themes & color standards: using Displays → Themes to enforce palettes; alarm color reservations. 

  • Symbols & templates: building a reusable symbol library; applying symbol wizards. 

  • Alarms: configuring severities/states; AlarmViewer conventions (filters, duration, notes). 

  • Trends & analysis: TrendChart behaviors (annotations, saved views) for operator investigations. 

  • Units, localization & accessibility: Displays → Units Conversion / Localization guidelines. 

Design patterns & examples

  • Example screen set: L1 overview, L2 area, L3 equipment detail, L4 diagnostics—what to show on each.

  • Navigation bar & alarm banner standards; KPI tiles; contextual trends.

Verification checklist

  • Palette applied site-wide; alarm colors reserved; max points per display; common widgets sized consistently; operator tasks ≤3 clicks from L1.

  • UX tests: alarm scenarios, trend drill-downs, legibility at typical viewing distances.

Related How-to Guides (link out)

  • Operator UI Design (Tutorials): Add Elements, Canvas Animations, Create Dashboards, Modify & Apply Symbols, TrendChart Properties. 

  • Alarms Recipes (How-to): Alarm Areas, Notifications, History Filters. 

References

  • High-Performance HMI resources; internal color/typography standard; symbol library. 


Optional companion (Concepts)

If you want a short primer too, add “ISA-101 for FrameworX Designers (Concepts)” with a 1-page overview that points to the Reference above and to the UI How-to tutorials.