Scheduled events and other timestamps are all over the Hudl interface. Applying a consistent format to those details is key to building a cohesive experience.
One thing to keep in mind with everything below: moment.js isn’t required, but definitely preferred for the sake of uniformity—at least for now.
More often than not, you’ll only need month, day and year. The day should always be an Arabic figure (Aug 10), never ordinal (Aug 10th).
Months should be abbreviated to the first three letters (handled by moment.js), but the year will always be the full four digits.
We realize the order of these elements changes depending on locale. Rather than list all possible arrangements, we’re trusting moment.js to call those shots, as well.
Sept. 28th, 2019
31 October ’19
Sep 28, 2019
31 Oct 2019
Avoid the numbers-only format whenever possible. For one thing, it’s not as clear, especially when numbers could represent day or month. For another, there’s no good answer re: whether or not we put 0 before a single-digit month or day. Remember, we’re going for consistency.
Sep 10, 2019
9 Oct 2019
If you have a case where all-numbers is the better option, talk to Uniform.
In the case of full schedules and any upcoming event, include day of the week.
When possible, spell out the day. If it must be abbreviated, trim to three letters with no period (same as all other abbreviations).
Jun 17, 2019
Jun 20, 2019
Jun 23, 2019
Monday, Jun 17, 2019
Thursday, Jun 20, 2019
Sunday, Jun 23, 2019
Whenever you include time, it should come with am or pm. Refer to all times with actual numbers—no exceptions for noon or midnight.
Avoid the 24-hour format (it’s why the am/pm is so important). Because durations occasionally appear in the product, we want to avoid any possible confusion of the actual time being a video length.
Oct 25, 10:30 A.M.
Wednesday, 25 Oct at noon
22 Feb, 15:05
Oct 25, 10:30am
Wednesday, 25 Oct, 12:00pm
22 Feb, 3:05pm
Only include time zone when the times pertain to a specific place, like Hudl HQ. All other times displayed in schedules or feeds can be implied as local.
To avoid any Daylight Saving confusion, don’t include S(tandard) or D(aylight) in the time zone abbreviation. That means Hudl HQ will always be CT, no matter the time of year.
Next game: Saturday, Aug 15, 7:00pm PDT
Contact Hudl Support 8:00am to 7:00pm, M–F.
Next game: Saturday, Aug 15, 7:00pm
Contact Hudl Support 8:00am to 7:00pm CT, M–F.
You can find other office time zones here.
For longer life span items like feed cards and exchanges, it’s important to clearly communicate exactly when a thing was created or shared.
Note that the concept of “life span” does not apply to schedules and planned events.
Avoid putting about before these timestamps. The user shouldn’t second-guess how old an item really is.
When we generalize with “one week ago” or “three months ago”, timelines become ambiguous and the user could lose track of what’s relevant when. Providing the right amount of detail makes it easier for them to reference past interactions and plan new ones accordingly.
Durations should always include digits for minutes and seconds—even for those under a minute long. This applies not only to the length of a video, but also to how long a user watches video (found in team management).