Mastering Timestamp Design: When to Use Absolute vs Relative Time in UX

“Timestamp” is a UI element that displays time information; while often overlooked, its design can significantly impact user experience and business value. This article shares practical guidelines from 58’s product teams on how to design timestamp controls.

Absolute Time

Absolute time shows the exact date and time of an event, emphasizing accuracy. It combines a date (year‑month‑day) and time (hour‑minute‑second), e.g., “2:00 PM meeting” or “2022‑11‑01 ~ 2022‑12‑01 holiday”. Advantages include precise communication and user certainty; drawbacks are longer text that can waste space.

Common absolute formats:

“2007‑02‑06” (standard Gregorian date with leading zeros).

“2007/02/06” (order varies by region, use cautiously).

“2007.02.06” (dot separator, may be confused with English notation, so avoid if possible).

Relative Time

Relative time expresses the interval between an event and the current moment, emphasizing immediacy, e.g., “posted 2 days ago” or “expires in 30 days”. It is useful for countdowns, real‑time news, and push notifications, offering low cognitive load but less precision.

Key design considerations:

Unit conversion : As time grows, numeric units can become large and consume space; use concise units (e.g., “2 days ago” instead of “48 hours ago”).

Time rounding : Round fuzzy intervals to simplify reading, e.g., “1 hour 15 minutes ago” → “1 hour ago”.

Granularity Levels

Coarse Granularity

Shows only the day, suitable for generic tips and low‑detail contexts.

Medium Granularity

Shows minutes; two display styles:

Dynamic date : “Yesterday”, “Tue 12:00”, “Feb 6 12:00”, or “2022 Feb 6 12:00” depending on recency.

Fixed date : Full “2022‑02‑06 12:00”, used for key milestones.

Fine Granularity

Shows seconds, typical for financial transactions or order records to convey strong certainty and trust.

Countdown timers often use second‑level precision to create urgency in promotional activities.

Important Content

In critical scenarios such as time‑limited promotions, timestamps highlight key deadlines, influencing whether users can complete tasks like lottery draws or live‑stream viewing.

Behavior Tags

Timestamped actions record user behavior (payment, edits, creation) to enable quick lookup of past activities. B‑side products like “Smart Marketing Platform” and “Cloud Effort 2.0” use timestamps to let users filter actions by time.

Tips Information

When timestamps appear as supplemental info (e.g., message time), they have lower visual priority. Choose type and granularity based on content relevance: absolute time for precise messages, relative time for feed items where freshness matters.

Overall, timestamps are a flexible design element; selecting the appropriate type, format, and granularity while aligning with the specific scenario ensures good user experience and can drive business value, such as encouraging timely purchases or aiding operation tracking.