Maggie HTTN
Visual Algorithms • UX/UI Case Study

Designing a Clearer Huffman Coding Experience

Reducing confusion in greedy merging, tree growth, and bit-code extraction through visual hierarchy, repetition, and state visibility.

Huffman Coding is conceptually rich but visually difficult for many learners: users must understand why the two smallest nodes are always chosen, how repeated merges build a tree, and how that final tree turns into binary codes.

This project focuses on making those transformations easier to follow by turning the algorithm into a readable sequence of repeated visual states: select, merge, reinsert, grow the tree, then extract the codes.

Watch Demo

Quick Facts

Project Goal
Make greedy merge decisions, tree construction, and code extraction easier to track through repeated visual patterns.
Audience
CS learners and visually oriented users studying compression, trees, and greedy algorithms.
My Role
UX/UI design, visual sequencing, animation planning, and implementation.
Tools
Manim (Python), web presentation, captions, and step-based visual transitions.

User Problem

Users often memorize that Huffman Coding “merges the two smallest nodes,” but still do not understand why that choice repeats, how the merged node re-enters the set, or how the finished tree becomes a usable binary code. Without visible transitions, the algorithm can feel like disconnected snapshots instead of one coherent process.

UX Challenge

Make the greedy choice obvious
Users need to see immediately which two nodes are currently the minimum and why those two are selected next.
Show merge → reinsert as one cycle
The algorithm repeats a simple pattern, but users lose it if selection, summation, and reinsertion are not visually linked.
Preserve orientation as the tree grows
As structure expands, the layout must stay stable enough that users can connect earlier merges to later tree form.
Translate structure into bits
The jump from tree to code is often the hardest abstraction. The interface needed to make root-to-leaf paths feel readable and predictable.

Information Flow

1. Read Inputs
Start with symbols and frequencies as visible, comparable units.
2. Select Two Minimums
Highlight the current greedy choice clearly before anything moves.
3. Merge & Reinsert
Show the new parent node and place it back into the set.
4. Read Final Codes
Translate the finished tree into binary paths users can follow.

Key UX Decisions

  • Minimum-node emphasis: the two selected nodes are visually isolated so the greedy choice is not hidden inside the set.
  • Repeated visual grammar: each cycle follows the same pattern — select, merge, sum, reinsert — to support recognition instead of re-learning each step.
  • Stable growth of the tree: the evolving structure is introduced gradually so users can connect local merges to the final hierarchy.
  • Explicit tree-to-code mapping: final root-to-leaf paths are turned into readable bitstrings rather than leaving users to infer the conversion alone.
  • Caption economy: short text focuses on why the current step matters instead of repeating all algorithm rules on screen.

Demo

Interaction Focus

The animation is designed to help users see greedy selection, repeated merging, and final code extraction as one continuous experience instead of three separate ideas.

Common Failure Points the Design Addresses

“Why these two nodes?”
The interface makes the minimum pair visually explicit at every iteration so the greedy rule stays visible.
“What happened after the merge?”
Summation and reinsertion are shown as linked actions, not separate events.
“How do the codes come from the tree?”
The final state converts root-to-leaf navigation into explicit bitstrings to reduce abstraction.
“What about ties?”
The design supports one valid path clearly while leaving room to explain that different optimal trees can still exist.

Design Process

  1. Identified confusion points around greedy choice, repeated reinsertion, and code extraction.
  2. Turned the algorithm into a repeatable state pattern so each iteration feels familiar instead of visually new.
  3. Designed transitions for structural continuity to preserve the relationship between earlier merges and later tree growth.
  4. Refined final readout so the code-generation step felt like a natural continuation of the tree, not a separate topic.

Accessibility & Learnability

  • Repeated step pattern supports recognition and reduces cognitive re-orientation.
  • Short captions reinforce decision points without overcrowding the scene.
  • Non-color-only meaning helps communicate structure through placement, motion, labels, and hierarchy.
  • Paced transitions give users time to process each merge as a distinct event.

Outcome

The final design makes Huffman Coding easier to follow by turning a dense compression algorithm into a visible cycle of repeated decisions and clear structural growth. Users can track why nodes merge, how the tree forms, and how that tree becomes a prefix-free code.