Progress chart UX: explain the selected period

Name the range and show its actual dates

OWNU offers Last 7 days, Last month, Last 3 months and Last year in a period menu. Impulse shows 1W, 1M, 6M and 1Y with an explicit April 26 to May 24 interval. A short chip saves space, but the exact dates are what let the person verify which sessions or measurements belong in the chart.

Decide whether Last month means the previous calendar month or a rolling month ending today. Both interpretations exist in ordinary language. Prefer Last 30 days for a fixed rolling interval, or name the calendar month when that is what you mean. Display the resolved dates near the chart, especially when arrows can move to earlier periods.

Keep boundaries consistent with the user’s applicable time zone and explain unusual cutoffs when relevant. A session near midnight should not appear to vanish because the chart uses a different zone from the activity list. When travel or daylight-saving changes affect grouping, preserve the underlying event time and make the displayed date convention predictable rather than silently shifting history.

Separate calendar navigation from rolling windows

Focus Traveller shows Day, Week, Month and Year with a dated week and navigation arrows. Seven offers All Time, 30 days and 7 days beside summary metrics. The first suggests navigating calendar periods; the second emphasizes recent windows. They answer related but different questions: what happened in that week, and what happened recently?

Label previous and next actions with the period they move to where space allows, and announce that change accessibly. A selected Week tab alone does not reveal whether the chart ends today or at the end of a calendar week. Disable future navigation or show a clearly empty future period intentionally. Do not allow an invisible date offset to carry into another range without updating the displayed dates.

When switching between Week and Month, choose a stable anchor date. If the person is inspecting a past week, jumping back to today on every tab change can disrupt comparison. Either preserve the inspected date or provide a distinct Today action. Test the interaction across year boundaries, incomplete current periods and months of different lengths.

Do not let totals and averages hide their denominator

Habitify offers rolling windows alongside calendar choices and displays completion categories. Interval Timer separates To Date, Last Week and Last Month with counts and time totals. Such summaries can be useful, but their meaning depends on what is counted and how the period is defined. A chart label should not force the person to reverse-engineer a denominator.

State whether an average is per calendar day, active day, scheduled opportunity or recorded session. Those calculations can differ substantially. A weekly total and a daily average can share a screen if both are labeled. Avoid comparing a partial current week with a complete previous week without explaining the difference or offering an equivalent elapsed-period comparison.

Keep units visible and consistent across the axis, detail view and summary. If minutes become hours at a larger range, make the change explicit. A percentage also needs a defined whole: completed planned actions is not the same as days with any activity. Do not imply causal improvement from a rising line or add a positive interpretation when the metric itself does not support one.

Treat missing data as a state, not a disappointing zero

Grit places an annual heatmap, weekly completion and a Last 7 days chart on one screen. Monju explicitly says that only one record is available and suggests trying a longer range, while withholding an estimate. These examples expose two interpretation problems: multiple time horizons on the same page and insufficient observations for a useful trend.

Give each visualization its own range label when the page mixes horizons. A global Month chip should not appear to govern an annual heatmap if it does not. For sparse data, show the available observation and explain the limitation. Do not draw a smooth trend through one point or manufacture a forecast simply to make the card look complete.

Differentiate no records, a confirmed zero and unavailable data. A failed sync should not become a zero-height bar that suggests inactivity. Provide the last successful update when it helps explain freshness, and let the person retry a failed source. If an estimate needs a minimum sample, disclose the requirement as a product rule rather than implying that the person has failed a goal.

Make the axis and grouping survive a change of layout

The Boostcamp recording contains a rotated chart with Daily, Weekly and Monthly grouping choices and a single plotted value. Focus Tree shows a weekly chart with a dated interval and a time axis. The available space and units differ, but both need enough labeling to make a point meaningful. A number without a metric or unit is not an explanation.

Preserve a landscape source at its real aspect ratio when presenting a reference or an expanded chart. Stretching it into a phone-shaped frame distorts both the screen and the visual judgment. In the product itself, rotation or expansion should retain the selected period, metric and focused data point. Do not reset the person’s investigation just because the chart has more room.

Explain whether Daily, Weekly and Monthly changes the number of dates shown or groups the same date range into different buckets. Grouping should specify the operation, such as sum or average, when it is not obvious. A tooltip or accessible detail view should include the bucket dates, metric, unit and value, not only a bare number floating above the line.

Give the chart one explicit query contract

Represent the metric, start, end, time zone, aggregation and missing-data rule together. Use the same contract for the plotted series and its summary so a total cannot describe a different period from the line underneath it. Return or calculate resolved dates explicitly rather than relying on a chip label to define them in several places.

Protect rapid changes from stale responses. If someone selects Month and then Week, a slow Month response must not overwrite the weekly chart while the Week chip remains selected. Keep the last confirmed chart visibly distinct from the requested state during loading. A cached series can remain useful if its period and freshness are clear.

Provide a text or table alternative that exposes the same data, including missing entries. Screen-reader users should be able to move between meaningful points without navigating every decorative grid line. Avoid encoding completion categories only through color. Ensure selected states, focus indicators and labels remain legible in both themes and with larger text.

Test interpretation before celebrating interaction

Ask someone to identify the included dates, explain one point and describe the average. If they cannot answer those questions, adding smoother animation will not fix the chart. Include a partly completed week and a metric with missing records so the task tests the semantics rather than only the ideal dataset.

Use fixtures with zero activity, one observation, long gaps, a large outlier and a year boundary. Check that an empty chart does not reuse an old summary. Verify that navigation updates all relevant labels, and compare chart totals with the corresponding activity list under the same time-zone rule.

Review small screens, landscape, large text and accessible point navigation. A tooltip must remain inside the viewport and not obscure the selected point’s identity. Watch for labels clipped by the chart container. Measure whether people can answer the intended question correctly; a tap on a range control alone does not establish that the chart is understandable.

Check the meaning of every plotted value

Use these checks on a working build, not only on the polished reference state.

• ✓The selected period resolves to visible start and end dates.
• ✓Calendar periods and rolling ranges are named differently.
• ✓Metric, unit, aggregation and average denominator are clear.
• ✓Zero, missing data and failed synchronization are distinct.
• ✓Sparse observations do not produce unjustified trends or estimates.
• ✓Range changes cannot display stale data under a new label.
• ✓The same values are available without interpreting color or dragging a chart.

Use charts to support a real product task

The workout-tracker design examples put progress beside recording and planning. A chart should explain those activities rather than become an isolated dashboard decoration.

Compare loading-state examples when deciding how a range change distinguishes cached results, a pending request and a failed refresh.