Design Philosophy
The DST frontend strives to balance three goals that are often in tension with each other.
The Three Goals
1. Minimize Scrolling
Present information densely so users can see and compare data without scrolling. Use compact layouts, collapsible sections, and smart use of available screen real estate.
2. Minimize Clicks
Reduce the number of interactions required to complete a task. Prefer inline editing, auto-save, and direct manipulation over multi-step workflows.
3. Minimize Popups
Avoid modals, dialogs, and overlays when content can be shown inline or on the same page. Reserve modals for confirmations and truly secondary workflows.
Trade-Offs
These three goals are not always simultaneously achievable:
- Reducing scrolling may require collapsible sections (more clicks)
- Avoiding popups may mean more content on-page (more scrolling)
- Minimizing clicks may require always-visible controls (more visual density)
Every layout decision should consciously weigh all three and strike the best balance for the specific context. When trade-offs are necessary, favor the option that keeps the user's primary workflow the most fluid.
Practical Examples
Good trade-off: A collapsible section that's expanded by default. Users see the content without scrolling on large screens, and can collapse it to reduce scrolling on smaller screens. One extra click to collapse, but scrolling is minimized in the common case.
Bad trade-off: A modal dialog for editing a single field. The user clicks to open the modal, edits the value, then clicks to save and close. Three interactions for what could be a single inline edit.
Good trade-off: Auto-save with debounce instead of a "Save" button. Zero clicks for saving, and the user never has to think about whether their work is saved.