How to design a more professional time display? Let’s take a look at the methods summarized by big manufacturers!

background

"Time" is a frequently appearing element in human-computer interaction interfaces, and its essence is to convey information about the time dimension. However, when we use some Internet products, we often find that the display status or form of "time" is often different in different scenes and pages. What is the reason for this? Today we will talk about how to grasp the tricks of "time" display in product design and make it play the greatest role in the page.

[[406093]]

Classification of the "Time" element

According to the appearance scenarios and functions of the "time" element on the page, it can be roughly divided into the following categories:

A. Key elements of the incident

Time is an important part of describing the entire event. If it is missing, it will have a serious impact on the content that was originally intended to be conveyed, and then affect the user's usage expectations and results. For example, the user may not be able to complete the purchase of goods at a lower price, or miss the time of the product launch conference.

B. Time stamping of behavior

It refers to the time stamp that the user, as the subject of the action or the recipient of the action, puts on an action after it occurs, for example, the time when "I" place an order for a product or the time when I receive an email.

C. Information about the content

When users consume content using the product, time serves as supplementary information to the content, such as the release time of a short video or news.

In the above cases, we can find that "time" plays different roles in the corresponding scenarios, and users often pay different attention to time when using products. Therefore, when designing a page, we need to judge the importance and priority of the "time" element based on the specific scenario and user demands. Usually: time as the key component of an event > time mark of the behavior > ancillary information of the content, and then think about what kind of design form to use to display it to achieve our goal.

How to present and use “time”

Before discussing the design of the "time" element, let's first share some common understandings and concepts about time. Time can be divided into two dimensions: "time point" and "time period", similar to the concepts of "moment" and "time interval" that we learned in high school physics.

Take a meeting as an example: "The meeting starts at 4:30 pm" and "The meeting ends at 6:00 pm" describe the time points when the event starts and ends, while "The entire meeting lasts 1.5 hours" and "The meeting time is 4:30-6:00 pm" describe the time period of the event process; however, we can also say at the beginning of the meeting "The meeting will end in 1.5 hours."

From the above examples, we can find that when describing the same thing, different time points and time periods are used to express it, the meaning is the same but different emotions are conveyed, and there is the following "conversion" relationship between the two:

A time period plus an adjective will become a time point (but they are both time points, "6:00 p.m." is an absolute time, while "1.5 hours later" is a relative time, which just corresponds to the two timestamp types we designed);

The time between two time points represents a period of time.

Therefore, when we express or design in our daily life, we should first think clearly whether we want to use "time" to focus on expressing the immediate time point when an event or action occurs? Or do we want to describe the time process it lasts? Then we can choose appropriate copywriting and presentation methods according to different contexts.

The presentation of time is inseparable from: timestamp type, time display format, and time granularity. Among them, time granularity refers to the smallest unit for describing time. The finer the granularity, the stronger the sense of certainty conveyed to users (such as the transfer time is 15:15:20 on the 12th), and the more obvious the incentive effect on users (such as only 00 hours, 01 minutes and 23.6 seconds left until the end of the rush sale).

1. Absolute timestamp

Absolute time can be understood as the exact time when something happens, which is composed of a specific date (year, month, day) and time (hour, minute, second). The advantage of using an absolute timestamp is that the information is conveyed accurately, appears formal, gives people a sense of certainty and security, and is neatly arranged, which is easy to form cognitive habits; but the disadvantage is that the content is too long to be read and takes up a lot of space.

When choosing a time display format, in order to avoid confusion, it is recommended to use text format or the "-" separator to separate dates. The "/" separator has different display order habits in different countries and is easy to cause misunderstanding, so try to use it as little as possible.

The choice of time granularity depends on the situation. The general scenarios are summarized as follows:

2. Relative timestamp

In the field of product design, relative time usually refers to the time difference from the current time point when content is produced, arrives, or its status changes. It is often used in push notifications and information flow products, emphasizing the timeliness of content. "Countdown" is also a kind of relative time, focusing on creating a sense of urgency. The advantage of using relative timestamps is that users have low identification and understanding costs, and do not need to use calculations to determine how much time has passed or how much time is left. The disadvantage is that it is not precise and formal enough, and it is difficult to measure the proximity of two time points.

When using relative time, pay attention to the friendly format. The time unit can change automatically over time; the number should not be too much, try to round it up; and the critical point for conversion with absolute time can be set.

Summarize

When designing the "time" element in the interface, we must follow the general principles of scene fit and easy reading and understanding; then, according to the scene and goal, select the appropriate "time" presentation method (including timestamp type, time display format, and time granularity).

When time is the key component of an event

In general, absolute time is used, and it depends on whether it is to emphasize a key time node or to focus on expressing the entire continuous process. In addition, choosing copywriting related to the scene or using the form of countdown (relative time) can, to a certain extent, promote users to concentrate more, increase their attention to information, and achieve special incentives and conversion effects.

When time is used as a "time marker for behavior"

This scenario is usually for the pursuit of a sense of certainty. By providing precise time and date, it is convenient for users to locate a certain time point (period) in the past or future to search and review the corresponding content. Therefore, most of them use absolute time, and the time granularity depends on the specific situation.

When time is used as "C. Attached information to the content"

If the content provided by the designed product is updated quickly, the user activity is high, and the accuracy of the time information of the content is not so important but the timeliness of the content is more important, then relative time is usually used. Some information flow products (such as news and information, community) will use relative time on the list page and absolute time on the detail page. The time granularity is also determined by the situation; and as time goes by, the relative time will be converted to absolute time before a certain time node.