Visual Algorithms • UX/UI Case Study

Designing a Clearer B-tree Insertion Experience

Reducing confusion in insertion, overflow, and node splitting through state visibility, motion design, and progressive disclosure.

B-tree insertion looks simple at first, but learners often lose track of what changed when a node fills up and splits. Static diagrams usually show the before and after states, but not the decision flow that connects them.

This project focuses on making insertion easier to follow by showing where the key travels, when overflow occurs, and how promotion reshapes the tree. The design emphasizes visible system state, consistent hierarchy, and smooth transitions that preserve orientation.

Watch Demo

Quick Facts

Project Goal

Make insertion and split behavior easier to track through visual structure, motion, and consistent state cues.

Audience

CS beginners and visually oriented learners studying balanced tree structures.

My Role

UX/UI design, visual system design, animation planning, and implementation.

Tools

Manim (Python), web presentation, caption system, and rule-based visual sequencing.

User Problem

Learners often understand that a key is inserted into a leaf, but they struggle to see why a split happens, which key gets promoted, and how the tree preserves order after rebalancing. The main UX problem is low visibility of system state during a multi-step structural change.

UX Challenge

Make insertion state visible

Users need to see where the new key is heading and which node is currently active.

Clarify overflow as an event

Overflow is often treated as an abstract rule. The interface needed to show the exact moment the node exceeds capacity.

Explain promotion without disorientation

When a median key moves upward, users must understand both what left the node and where it went.

Preserve orientation during split

Splits can cause the tree to reshape quickly. Layout stability was needed so users would not lose their mental map.

Key UX Decisions

Path highlighting: the active search path is emphasized so users can track where the key is traveling before insertion happens.
Active-node focus: the current node is visually distinguished to reduce attention drift during multi-level operations.
Overflow signal: a clear warning state marks the exact point where a node exceeds capacity and a split becomes necessary.
Promotion animation: the median key visibly moves upward so users can connect cause and effect across levels.
Stable visual grammar: the same highlight rules are reused for active path, inserted key, promoted key, and split result.

Demo

Interaction Focus

The animation is designed to help users follow insertion, detect overflow, and understand how node splitting preserves structure without losing visual continuity.

Design Process

Mapped confusion points around insertion path, overflow, and promotion.
Converted textbook steps into visual states that could be shown consistently across each insertion case.
Designed motion cues so users could see exactly what moved during split and promotion.
Refined pacing and captions to make the most confusing moments readable without overloading the screen.

Accessibility & Learnability

Consistent positioning helps users keep track of tree relationships during reshaping.
Short captions support comprehension without competing with the visual action.
Non-color-only meaning reduces reliance on color by combining labels, motion, and placement cues.
Paced transitions give users time to process search, insertion, overflow, and split as separate events.

Outcome

The final design makes B-tree insertion more legible by showing where the key goes, when capacity breaks, and how the tree restores balance through promotion and split. Instead of presenting insertion as a sudden transformation, the experience turns it into a visible sequence of connected states.