Maggie HTTN
Visual Algorithms • UX/UI Case Study

Designing a Clearer DFS Experience

Reducing confusion in graph traversal through state visibility, path focus, backtracking cues, and edge interpretation.

Depth-First Search can be hard to follow because users must track multiple changing states at once: the current node, the visited set, the exploration path, and the moment when backtracking begins.

This project focuses on making DFS more legible by showing where the traversal is, what has already been discovered, and how the graph structure becomes more meaningful when tree and non-tree edges are made visible.

Watch Demo

Quick Facts

Project Goal
Make DFS traversal and edge interpretation easier to follow through visual hierarchy, motion, and state cues.
Audience
CS beginners and visually oriented learners studying graph algorithms.
My Role
UX/UI design, visual system design, animation planning, and implementation.
Tools
Manim (Python), web presentation, caption system, and step-based graph visualization.

User Problem

Users often understand the rule “go deep, then backtrack,” but still lose track of where the traversal is, which nodes are already visited, and why DFS suddenly returns to an earlier branch. When edge analysis is added, many users also struggle to see how non-tree edges relate to the traversal tree.

UX Challenge

Make traversal state visible
Users need to know which node is active, which nodes are already discovered, and what part of the graph remains unexplored.
Clarify backtracking
Backtracking can feel invisible in static diagrams. The experience needed to show when forward exploration stops and return motion begins.
Separate tree vs non-tree edges
Users must understand which edges define the DFS tree and which edges reveal additional graph structure.
Reduce graph overload
Graphs can become visually dense quickly. The design needed to preserve focus without making the graph feel fragmented.

Key UX Decisions

  • Active-node emphasis: the current node is visually distinguished so users always know where the traversal is focused.
  • Visited-state cues: discovered nodes remain visibly marked to reduce memory load during deeper exploration.
  • Path visibility: the current DFS path is emphasized so users can track depth and understand return points.
  • Backtracking feedback: the design makes return movement legible instead of treating it as an implied step.
  • Edge categorization: tree edges and non-tree edges are separated visually so the traversal structure remains readable.

Interaction Design Focus

Traversal view
The first demo prioritizes orientation: current node, visited nodes, depth progression, and visible backtracking moments.
Edge-analysis view
The second demo reframes the same graph to reveal how DFS exposes structure through tree and non-tree edges.

Demo 1 — DFS Traversal

Interaction Focus

This view is designed to help users follow one exploration path at a time, recognize when depth-first movement stops, and understand how backtracking restores earlier decision points.

Demo 2 — Non-tree Edge Analysis

Interaction Focus

This view helps users distinguish the edges used to discover nodes from the edges that reveal additional structure such as cycles, ancestry, and branch relationships.

Design Process

  1. Identified confusion points around active state, backtracking, and edge interpretation.
  2. Separated traversal and analysis views so users were not asked to process everything at once.
  3. Designed reusable graph cues for active node, visited state, path emphasis, and edge role.
  4. Refined pacing and explanations to make depth progression and return motion easier to follow.

Accessibility & Learnability

  • Consistent graph cues reduce cognitive search during traversal.
  • Short explanatory captions support comprehension without overcrowding the screen.
  • Non-color-only meaning helps communicate state changes through labels, motion, and structure.
  • Paced transitions allow users to process one traversal event at a time.

Outcome

The final design makes DFS easier to track by turning traversal into a visible sequence of states instead of a mentally simulated process. It also makes edge interpretation more legible by separating the DFS tree from the additional structural information carried by non-tree edges.