← Back to devlog

2026-07-04 — v17 competitor-grounded design research

July 4, 2026

This entry is intentionally docs-only. The app already has real depth — parse/render, zoom/pan, reverse-complement, trimming, search, metadata, multi-trace workspace, mixed-base calling, annotations, editable bases with undo/redo, FASTQ/QUAL export, a quality track, and a keyboard base inspector — but today that power is spread across a long toolbar and a mostly linear stack. The goal here is to study how serious trace tools package that power, then make concrete layout, interaction, and design-system decisions for the next implementation wave without losing a single existing capability.

Research method and current-product baseline

I used official product pages, vendor help centers, and official tutorials wherever I could. For older tools with sparse documentation, I used the most direct product or training pages I could verify. I also cross-checked the current sanger-viewer feature inventory against the live repository controls, README, and devlog history so the proposal below maps every current feature into the new information architecture instead of hand-waving about a redesign.

• Current app baseline: single-page static Vite app, GitHub Pages deployment, client-side only.
• Current UX baseline: one primary toolbar plus stacked canvas, annotation track, quality track, workspace bar, readout, sequence panel, inspector, metadata panel.
• Current risk: strong capability, but high command density and weak grouping make first use harder than it needs to be.
• Design target: retain expert throughput, lower novice friction, preserve Pages/base-path deployment, and keep light/dark + accessibility first-class.

Competitor landscape at a glance

Per-competitor study

Synthesis: the patterns worth keeping

1. Trace-first default: Chromas and FinchTV are right that the first screen must answer the biological question immediately.
2. Contextual side panels beat giant toolbars: SnapGene and Geneious make complex state easier to manage by grouping it near the content it affects.
3. Overview + detail is not optional: FinchTV and UGENE both reinforce that users need a global read before diving into single bases.
4. Non-destructive edits need to feel trustworthy: UGENE’s derivative edit model and SnapGene’s explicit save semantics are great reliability signals.
5. Annotations and comparisons should be first-class, not “misc”: Geneious and Benchling both show that trace review becomes more useful when tied to context.
6. Design polish changes usability: Geneious and newer SnapGene material simply feel less intimidating because the hierarchy is better.

Concrete proposal for sanger-viewer

(a) Target information architecture and layout

Recommendation: turn the current long, flat command bar into a four-zone workbench: global workspace, trace actions, central analysis canvas, and contextual side rail. The default screen should still let a user load a trace and start reading in seconds.

Desktop / wide layout

┌──────────────────────────────────────────────────────────────────────────────┐
│ Global bar: logo | open | sample | workspace tabs | theme | help            │
├──────────────────────────────────────────────────────────────────────────────┤
│ Primary trace bar: Zoom  Fit  Strand  Find  Export ▼  Compare ▼             │
│ Secondary mode bar: Review | Edit | Annotate | Compare | Export             │
├───────────────────────────────┬──────────────────────────────────────────────┤
│ Context rail (right, 320px)   │ Main analysis stage                          │
│ ─ Inspect tab                 │ ┌──────────────────────────────────────────┐ │
│   base inspector              │ │ Annotation lane                           │ │
│   exact peaks / quality       │ ├──────────────────────────────────────────┤ │
│ ─ Trace tab                   │ │ Chromatogram canvas                       │ │
│   trim / mixed-base / strand  │ ├──────────────────────────────────────────┤ │
│ ─ Metadata tab                │ │ Quality track                             │ │
│   sample / run / instrument   │ ├──────────────────────────────────────────┤ │
│ ─ Export tab                  │ │ Sequence strip + selection + search hits  │ │
│   FASTA PNG SVG FASTQ QUAL    │ └──────────────────────────────────────────┘ │
│                               │ footer: viewport readout | match count      │
├───────────────────────────────┴──────────────────────────────────────────────┤
│ Optional compare drawer: extra traces, align-to-reference, SVG/report tools  │
└──────────────────────────────────────────────────────────────────────────────┘

Narrow / tablet layout

┌──────────────────────────────────────────────┐
│ Global bar: open | tabs | more               │
├──────────────────────────────────────────────┤
│ Main stage: annotation lane                  │
│             chromatogram                     │
│             quality track                    │
│             sequence strip                   │
├──────────────────────────────────────────────┤
│ Sticky action row: Zoom  Fit  Find  Export   │
├──────────────────────────────────────────────┤
│ Bottom sheet tabs: Inspect | Trace | Meta    │
│ (collapsed by default, swipe or keyboard)    │
└──────────────────────────────────────────────┘

(b) Interaction and keyboard model

The keyboard model should be opinionated and memorable. The current keyboard support is good in pockets; the redesign should make it systemic.

(c) Design-system specification

The repository already has useful token DNA in src/style.css. The next wave should consolidate those into a named UI system and apply them consistently across the app.

Accessibility rule: all color meaning must be doubled by shape, text, or pattern. Quality should never be color-only; edited bases should never be color-only; mixed bases should never be color-only.

(d) Progressive-disclosure strategy

Key product decision: do not hide capabilities behind a mystery “advanced” toggle. Instead, bind them to the user’s active task. Editing opens edit affordances, comparing opens compare affordances, exporting opens export affordances.

(e) Explicit feature → IA mapping so nothing is lost

Bottom line: every existing feature survives. What changes is grouping, discoverability, and mode framing — not capability.

(f) Performance, reliability, and consistency checklist

1. Render budget: keep first meaningful trace paint under 150 ms for common files and interaction updates under one frame (16 ms target, 50 ms hard ceiling) on modern laptops.
2. Large-trace behavior: maintain overview readability and input responsiveness on long/noisy traces; no rail or sheet may trigger full-stage reflow while panning.
3. Interaction consistency: the same base selection state must drive tooltip, inspector, search highlight, edit state, metadata readout, and export scope language.
4. Cross-feature integrity: reverse-complement, trim mode, mixed-base calling, manual edits, annotations, and search must compose without surprising state loss.
5. Non-destructive clarity: edited bases must remain visibly edited after mode changes, and undo/redo state must survive panel toggles.
6. Quality trust: quality summaries, trim summaries, and quality-track visuals must always agree numerically.
7. Accessibility baseline: full keyboard traversal, visible focus, ARIA labels for mode/panel state, no color-only meaning, and light/dark parity for every new surface.
8. Responsive behavior: desktop rail becomes bottom sheet on narrow widths; no horizontal scrolling for command surfaces.
9. Export consistency: PNG/SVG/FASTA/FASTQ/QUAL naming, scope, and strand/trim/edit semantics must be documented and identical across every export surface.
10. Edge cases: no-quality traces, all-trimmed traces, ambiguous-heavy traces, traces with sparse metadata, multi-trace tab overflow, and failed parse states need explicit UI states, not silent degradation.

Priority order for the implementation wave

1. P0 — information architecture: split the current flat toolbar into global bar, primary trace bar, and contextual rail without changing underlying capabilities.
2. P0 — main stage cleanup: lock the visual stack to annotation lane → chromatogram → quality track → sequence strip → readout.
3. P1 — inspector/metadata/export rail: unify the current inspector + metadata + export affordances into a coherent right-side rail/bottom sheet.
4. P1 — keyboard system: add a shortcuts model, cheat sheet, and consistent focus management across modes.
5. P1 — design tokens rollout: replace ad-hoc spacing/surface treatments with the documented token system and verify light/dark parity.
6. P2 — compare drawer: evolve the existing multi-trace workspace into a clearer compare surface without slowing down single-trace review.

Final recommendation

The redesign should aim for Geneious calm, SnapGene contextuality, FinchTV legibility, Chromas immediacy, UGENE non-destructive trust, and Benchling web-native discipline. That combination fits sanger-viewer unusually well: the project is already a surprisingly capable browser-based trace viewer, so the next win is not raw feature count. It is making the existing power feel intentional, elegant, and easy to learn.