Visual Algorithms • HCI Teaching Micro Case Study

Boolean Operations

Intersection, Union, Difference, XOR — explained with animation + code

This micro case study uses a simple mental model—two student clubs—to teach boolean logic as visual rules. The animation highlights the exact region that satisfies each operation, then connects that shaded region to real programming conditions.

Watch Demo Visual → Code HCI Notes

Overview

Boolean operations are the foundation of conditional logic (like if and while). In this lesson, the animation uses two sets A and B to reduce abstraction: the shaded region shows exactly which elements satisfy the rule.

Learning goal

Students may find it challenging to translate Boolean symbols (∩ ∪ ⊕ −) into correct if conditions. This page is designed to help learners see the rule first (shaded region), then translate it into code.

Demo / Media

What you’re seeing

A and B represent two student clubs.
The filled region shows which people satisfy the condition.
In code, that filled region is the moment an if condition becomes true.

One diagram, four operations

Intersection (AND)

Only elements in both A and B count.

Union (OR)

Elements in A or B count (including overlap).

XOR (Exclusive OR)

Elements in exactly one set count (overlap excluded).

Difference (A − B)

Elements in A but not B count.

Visual → Code

The animation’s shading can be read as a programming condition: if you are in the shaded region, the code runs.

1) Intersection (AND)

Teaching intent: Emphasize the meaning of “both” by focusing on the overlap region before introducing the code symbol and.

Intersection means BOTH conditions are true at the same time. The overlap is the only region that counts.

is_logged_in = True
is_premium   = True

# Intersection: BOTH must be True
if is_logged_in and is_premium:
    print("Download starting...")
else:
    print("Access denied.")

2) Union (OR)

Teaching intent: Reinforce “either is enough” using everyday eligibility logic, then map it to or.

Union means A, or B, or both. If a person is in at least one club, they are included.

is_tuesday  = False
has_coupon  = True

# Union: only ONE needs to be True
if is_tuesday or has_coupon:
    print("Apply 10% discount!")

3) Difference (A − B)

Teaching intent: Show subtraction as a two-step mental action: start with A, then remove anyone who is also in B.

Difference means in A but not in B. Think: “start with A, then exclude the overlap.”

is_student         = True
is_already_member  = False

# Difference: in A AND NOT in B
if is_student and not is_already_member:
    print("Sending invitation email...")

4) XOR (Exclusive OR)

Teaching intent: Prevent the common confusion between OR and XOR by explicitly naming the “both” case as excluded.

XOR means exactly one condition is true. If someone is in both clubs, they are excluded.

has_fire_sword = True
has_ice_sword  = True

# XOR: True only if they are DIFFERENT
if has_fire_sword ^ has_ice_sword:
    print("Weapon power activated!")
else:
    print("Magic conflict! Power disabled.")

Summary table

Operation	Set Symbol	Code	Mental rule
Intersection	`A ∩ B`	`and`	Both must be true
Union	`A ∪ B`	`or`	At least one is true
Difference	`A − B`	`and not`	A is true, B is false
XOR	`A ⊕ B`	`^`	Exactly one is true

HCI / UX Teaching Notes (Micro Case Study)

This page is designed as a self-learning artifact: reduce abstraction, guide attention, and connect visual rules to working code.

UX & HCI Principles Applied

Problem framing: Focus on a beginner pain point—turning symbols into correct if logic.
Mental model alignment: “Club membership” makes sets feel concrete and familiar.
User-centered communication: Rules are written in plain language (“both,” “either,” “exclude”).
Progressive disclosure: Each operation is revealed one at a time to reduce cognitive load.
Visual hierarchy: Color and spatial grouping distinguish sets and results.
Scaffolding: Learners move from concrete visuals to abstract symbols and code operators.
Narrative context: Membership examples support independent learning without instructor help.

Mental model

“Two clubs” is a familiar metaphor that makes sets and boolean logic feel concrete.

Attention guidance

The shaded region is the single focus point. The learner always knows what matters.

Progressive disclosure

One operation at a time. Each rule appears, then the visual confirms it.

Transfer to practice

Each operation maps to a real programming scenario, so the learner can immediately apply it.

Accessibility

Labels inside A/B, clear symbols (∩ ∪ ⊕ −), and consistent layout support comprehension and reduce memory load.