Visual Algorithms • UX/UI Case Study

Designing a Clearer Dijkstra Experience

Reducing confusion in shortest-path reasoning through state visibility, relaxation feedback, and separation of process from result.

Dijkstra’s Algorithm often feels difficult because users must track several changing states at once: the current node, tentative distances, updated neighbors, visited nodes, and the final shortest-path tree.

This project focuses on making those changes easier to follow by showing what is active, what has changed, and why a distance update happened. The design emphasizes visible system state, consistent feedback, and a clear separation between the algorithm process and the final tree result.

Watch Demo

Quick Facts

Project Goal

Make shortest-path updates easier to track through visual hierarchy, feedback, and staged result extraction.

Audience

CS learners and visually oriented users studying graphs, shortest paths, and pathfinding logic.

My Role

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

Tools

Manim (Python), web presentation, captions, step-state design, and graph animation.

User Problem

Users often understand the basic idea of “pick the nearest node,” but still struggle to see why a distance changes, what “visited” or “settled” means, and how the final shortest-path tree is produced. A common confusion is mixing Dijkstra’s result with a minimum spanning tree because both involve graph edges and a tree-like outcome.

UX Challenge

Make tentative state visible

Users need to distinguish between provisional distances and settled ones without mentally reconstructing the state.

Clarify relaxation updates

Distance changes can feel arbitrary unless the design shows which edge caused the update and what changed numerically.

Preserve focus in a dense graph

Graphs easily become visually noisy. The interface needed to keep the current node and active edges readable at every step.

Separate process from result

Users must understand that the algorithm process and the final shortest-path tree are related, but not visually identical at every moment.

Concept Clarity

Dijkstra’s Algorithm

A process for finding the shortest distances from a selected start node to all reachable nodes with non-negative edge weights.

Shortest-Path Tree

The final structure built from parent pointers recorded during relaxation. It shows the shortest route from the start node to each reachable node.

Key UX Decisions

Two-phase structure

The design separates shortest-path discovery from final tree extraction so users do not confuse the algorithm’s working state with its final result.

Visible “old → new” updates

Relaxation is shown as a before-and-after change so the reason for each update is easier to verify.

State hierarchy

Settled nodes, active nodes, frontier nodes, and updated neighbors are visually distinct to reduce ambiguity.

Misconception guardrail

The result is explicitly framed as a shortest-path tree to prevent confusion with a minimum spanning tree.

Demo

Interaction Focus

The animation is designed to help users follow node selection, edge relaxation, and distance updates in a readable sequence, then see how those updates become the final shortest-path tree.

Design Process

Identified confusion points around settled state, distance updates, and final tree interpretation.
Separated the experience into two visual phases so process and result would not compete for attention.
Designed reusable state cues for active node, settled nodes, updated neighbors, and parent-edge logic.
Refined pacing and captions so the most important changes were visible without overcrowding the graph.

Accessibility & Learnability

Consistent state cues reduce cognitive search during graph updates.
Short explanatory captions support reasoning without overwhelming the screen.
Non-color-only meaning helps communicate graph state through labels, motion, and structural emphasis.
Paced transitions allow users to process one shortest-path update at a time.

Outcome

The final design makes Dijkstra easier to follow by turning shortest-path reasoning into a visible sequence of states instead of a mentally reconstructed process. Users can see what changed, why it changed, and how the resulting parent pointers form the final shortest-path tree.