Displaying a date range with labels, what is the best practice?

Question

So I have a date range, for example:

21-05-2022 - 27-05-2022

Bear in mind that the date is in dd-mm-yyyy format. So my user wanted to add the "Start Date" and "Due date" before the date. So it becomes like this:

Start date: 21-05-2022 - Due date: 27-05-2022

I don't think that's right (at least according to my gut), if you want to use labels I think you need to put line breaks like so:

Start date: 21-05-2022
Due date: 27-05-2022

What do you think? I need some validation for this to present to them. Thank you

UPDATE:

For more context, this is supposed to be displayed in a web page I'm working on. So I'm currently working on a web page, mostly text, with a layout like so:

TITLE OF THE TASK
Start Date: 07-04-2022
Due Date: 17-04-2022

Header 1

Content...

It's not about displaying a date range picker component, it's just displaying the date text. In fact, the date cannot be changed (at least in this page)

Answer 1

My assumption here is what users need is to scan, read and compare the dates. To achieve this, in the following example I used alignment, a monospace font for the dates and larger text size for them to make them stand out a bit better opposed to their label. Those are just examples of what you can do to make it more usable.

Or horizontal ...

Answer 2

From where did you get putting dates in the same line is not correct? Nearly all travel websites have the dates arranged in a line, which, in addition to following the reading order from left to right in continuity with the rest of the information, perceptively helps to better interpret which is the beginning ← and which is the end →.

What you can propose is placing the label on top:

Answer 3

Listing labeled individual dates (your example) is correct. Showing a date range with a general label like "Time frame" is correct. Labeling both dates in a range (at least in American English) is incorrect.

If your company is large enough to have a copy editor, head of content, or tech writer on staff, this is something with which you should enlist their help. They are likely going to have a style guide that is considered the source of truth for your company.

Answer 4

If one looks at travel booking sites, or doctor appointment sites, or pregnancy due date caluculators, the date format is dd-mm-yyyy presented in the same line. I guess this is the industry standards and the users are familiar with this way of functioning. Hence this becomes a control variable. In UX research, particularly, during the usability tests when we test new features of a product design control variables play a huge part as familiarity with the function or a feature makes the users tasks less cumbersome.

Answer 5

Related data like a period, a start and end, an interval or however you want to call it, is based on the same basic rules on the language/region of the application/website. Most of the world like US/Europe are used to analyzing data from left -> right and top to bottom, but 1st and most important is LEFT to RIGHT. (If you would build something for Japan it would be different).

So, if dates are part of an interval/period and related, it would be best to place them next to each other on the same line, because a period can be compared with a "sentence", and it makes sense to be displayed and read in one go.

So it's natural to have Date 1 followed by a Date 2 which is an event further in time related to Date 1.

How to place the label that's up to your design/consideration.

Regards.