HMI screen layout principles in SCADA systems - Mini Project: Build & Apply

HMI Screen Layout Principles

📖 Scenario: You are designing a simple Human-Machine Interface (HMI) screen for a factory control system. The screen will show the status of three machines and allow operators to see if they are running or stopped.

🎯 Goal: Build a basic HMI screen layout using a dictionary to represent machine statuses, add a configuration for alert threshold, filter machines that need attention, and display the filtered list.

📋 What You'll Learn

Create a dictionary called machines with three machines and their statuses ('running' or 'stopped')

Add a variable called alert_status set to 'stopped' to filter machines needing attention

Use a dictionary comprehension to create alert_machines with only machines matching alert_status

Print the alert_machines dictionary to show machines needing attention

💡 Why This Matters

🌍 Real World

HMI screens in factories show machine statuses clearly so operators can quickly see which machines need attention.

💼 Career

Understanding how to organize and filter data for HMI layouts is important for automation engineers and SCADA system developers.

1

Create the initial machine status dictionary

Create a dictionary called machines with these exact entries: 'Machine1': 'running', 'Machine2': 'stopped', 'Machine3': 'running'.

SCADA systems

# Create the machines dictionary with exact statuses
# Your code here

Hint

Use curly braces to create a dictionary with keys as machine names and values as their statuses.

2

Add the alert status configuration

Add a variable called alert_status and set it to the string 'stopped'.

SCADA systems

machines = {'Machine1': 'running', 'Machine2': 'stopped', 'Machine3': 'running'}
# Set alert_status to 'stopped'
# Your code here

Hint

Simply assign the string 'stopped' to the variable alert_status.

3

Filter machines needing attention

Use a dictionary comprehension to create a new dictionary called alert_machines that includes only machines from machines whose status matches alert_status.

SCADA systems

machines = {'Machine1': 'running', 'Machine2': 'stopped', 'Machine3': 'running'}
alert_status = 'stopped'
# Create alert_machines dictionary with machines matching alert_status
# Your code here

Hint

Use dictionary comprehension syntax: {key: value for key, value in dict.items() if condition}

4

Display the machines needing attention

Write a print statement to display the alert_machines dictionary.

SCADA systems

machines = {'Machine1': 'running', 'Machine2': 'stopped', 'Machine3': 'running'}
alert_status = 'stopped'
alert_machines = {name: status for name, status in machines.items() if status == alert_status}
# Print alert_machines dictionary
# Your code here

Hint

Use print(alert_machines) to show the filtered dictionary.

Practice

1. What is the main purpose of grouping related items together on an HMI screen?

easy

A. To make the screen look more complex

B. To make the screen easier to understand and use

C. To increase the number of buttons

D. To use more colors on the screen

Solution

1. Step 1: Understand grouping concept

   Grouping related items helps users find information quickly and reduces confusion.

2. Step 2: Consider user experience

   A clear layout improves safety and efficiency by making controls intuitive.

3. Final Answer:

   To make the screen easier to understand and use -> Option B

4. Quick Check:

   Grouping = Easier use [OK]

Hint: Group related controls for clarity and ease [OK]

Common Mistakes:

• Thinking more colors always improve clarity
• Adding too many buttons without grouping
• Ignoring user navigation needs

2. Which of the following is the correct way to label buttons on an HMI screen?

easy

A. Use clear, descriptive text like 'Start Pump 1'

B. Use vague terms like 'Start' without context

C. Use only icons without any text

D. Use random colors without meaning

Solution

1. Step 1: Identify labeling best practice

   Clear, descriptive labels help users understand button functions immediately.

2. Step 2: Avoid vague or confusing labels

   Labels like 'Start Pump 1' are better than generic or icon-only labels for clarity.

3. Final Answer:

   Use clear, descriptive text like 'Start Pump 1' -> Option A

4. Quick Check:

   Clear labels = Better understanding [OK]

Hint: Use clear text labels, not vague or icon-only [OK]

Common Mistakes:

• Using unclear or generic button names
• Relying only on icons without text
• Ignoring color meaning in labels

3. Consider this HMI screen layout code snippet:

screen = {
  'title': 'Main Panel',
  'buttons': [
    {'label': 'Start', 'color': 'green'},
    {'label': 'Stop', 'color': 'red'},
    {'label': 'Reset', 'color': 'yellow'}
  ]
}

What is the main issue with this layout?

medium

A. Button colors do not match their typical meanings

B. Button labels are too descriptive

C. The screen title is missing

D. There are too many buttons

Solution

1. Step 1: Analyze button colors and meanings

   Green for 'Start' matches (go/action), red for 'Stop' matches (danger/stop), but yellow for 'Reset' does not--yellow typically means caution/warning, not reset.

2. Step 2: Confirm other options

   Labels are simple (not too descriptive), title present, few buttons--issue is color mismatch.

3. Final Answer:

   Button colors do not match their typical meanings -> Option A

4. Quick Check:

   Colors should match meaning [OK]

Hint: Match button colors to their common meanings [OK]

Common Mistakes:

• Ignoring color conventions
• Assuming more buttons are always bad
• Overlooking screen title presence

4. You notice an HMI screen is cluttered with many controls and colors. What is the best way to fix this?

medium

A. Remove all labels to save space

B. Add more colors to differentiate controls

C. Group related controls and reduce color usage

D. Increase screen brightness

Solution

1. Step 1: Identify clutter causes

   Too many controls and colors make the screen confusing and hard to use.

2. Step 2: Apply layout principles

   Grouping related controls and limiting colors improves clarity and usability.

3. Final Answer:

   Group related controls and reduce color usage -> Option C

4. Quick Check:

   Less clutter = Better usability [OK]

Hint: Group controls and limit colors to reduce clutter [OK]

Common Mistakes:

• Adding more colors increases confusion
• Removing labels reduces clarity
• Changing brightness does not fix layout

5. You need to design an HMI screen for a complex system with many controls. Which approach best follows good layout principles?

hard

A. Use flashing colors to attract attention to all controls

B. Put all controls on one screen with random colors for each

C. Use only icons without labels to save space

D. Create multiple screens grouping related controls and use consistent colors

Solution

1. Step 1: Understand complexity management

   Complex systems require breaking down controls into manageable groups to avoid overwhelming users.

2. Step 2: Apply layout best practices

   Using multiple screens with grouped controls and consistent colors improves navigation and safety.

3. Step 3: Avoid poor practices

   Random colors, icon-only labels, and flashing colors cause confusion and reduce usability.

4. Final Answer:

   Create multiple screens grouping related controls and use consistent colors -> Option D

5. Quick Check:

   Group + consistent colors = Best design [OK]

Hint: Use multiple grouped screens with consistent colors [OK]

Common Mistakes:

• Trying to fit all controls on one screen
• Using random or flashing colors
• Relying only on icons without text