Designing Mobile-First Analysis UX for Serious Study

I used to think mobile analysis UX was mostly a responsive layout problem.

It was not.

For serious study, the real problem was restraint: keep the board primary, keep move navigation fast, and make every secondary control earn its space.

Why responsive alone was not enough

At first, it was tempting to treat mobile as "desktop, but smaller."

That approach failed quickly. Stacked controls squeezed the board, move review slowed down, and the interface felt busy when it needed to feel focused. Serious analysis on a phone is less about feature visibility and more about preserving study flow.

I ended up treating desktop, tablet, and mobile as different interaction modes, not just different breakpoints.

Board-first was a hard constraint

On mobile, the board is not just another panel. It is the study surface.

That changed layout decisions:

• Board sizing uses viewport runway, slot position, and control height, then clamps to a protected floor.
• Lower controls adapt before they are allowed to heavily compress board space.
• The board stays mounted from first paint and is only visually hidden during intro transitions, avoiding jarring remount behavior.

In practice, this prevented "death by stacked controls."

Interaction stability mattered more than visual polish

Small mobile interaction bugs feel much worse during analysis than during casual browsing.

One example: document scrolling on smaller screens is intentionally controlled so the page does not drift behind fixed analysis controls. That tiny drift makes the app feel unstable, especially while reviewing moves quickly.

The lesson was straightforward: if the workspace moves when the user expects the board to be anchored, trust drops fast.

Fast move scrubbing beat feature density

Serious review means constant move jumping. If that path is sluggish, the whole tool feels amateur.

So navigation got optimized directly:

• Cached positions for instant jumps
• "Prime-first" board updates before heavier downstream work
• Throttled move updates to avoid rapid-update stalls
• Long-press and hold-to-scrub behavior for quicker traversal
• Touch handling that guards against duplicate touch + click firing

This work was more important than adding another visible control.

Progressive disclosure over permanent stacking

I did not remove advanced controls. I removed their right to live in the main study path.

Quick controls stay near the board. Secondary controls move into a mobile settings sheet:

• Arrows, eval bar, flip board, sound
• Scrub speed and hold behavior
• Continuous analysis controls and engine settings
• Highlights, sharing/export, and diagnostics

Same capability, cleaner primary surface.

The flow chart stayed useful by becoming optional

The chart is valuable for navigation, but always-expanded charts consume too much vertical space on phones.

So on mobile it became toggleable and progressive:

• Easy to open when needed
• Not permanently consuming board space
• Still integrated with tap-to-jump behavior

That tradeoff kept the board readable without sacrificing navigation value.

Entry state and study state are different modes

The first seconds of review are not the same as minute ten of active scrubbing.

Mobile now treats those moments differently:

• Intro/preview mode: richer context and clear "start review" action
• Active study mode: tighter, denser, board-centered controls

The UI shifts from orientation to execution.

What got cut from the main surface

Not functionality. Constant visibility.

From the always-visible layer, I cut:

• Persistent advanced settings
• Always-open diagnostics
• Always-expanded chart area
• Extra metadata that distracted once review began

Those features still exist, but they no longer compete with the board every second.

The broader lesson

Mobile-first analysis UX is mostly a discipline problem, not a creativity problem.

The hardest decisions were not what to add. They were what to move out of the critical path so serious study could remain fast, legible, and trustworthy on a phone.