Quick Exploration of Time Formatting in Product Design
Quick Exploration of Time Formatting in Product Design
Today I was working on a pattern for picking time ranges and I was curious about the conventions for presenting time in user interfaces, specifically the "a.m" and "p.m" part. According to The Chicago Manual of Style, there are 6 ways to abbreviate ante meridiem(a.m) and post meridiem (p.m). I wanted to learn more about the guidelines established by design systems like Apple's Human Interface Guidelines (HIG) and Material Design. Here's what I learned:
Apple's Human Interface Guidelines (HIG)
The first design system I looked at was Apple's HIG. The HIG emphasizes clarity and conciseness in time formatting and suggests using relative formats, such as "Today" or "Tomorrow", to present dates in an intuitive manner. The guidelines also provide the option to include an AM/PM designation to convey the time of day clearly. You can find more information on HIG here.
Material Design
I also looked at Material Design, Google's design system. The guidelines for time formatting in Material Design have options for both 24-hour and 12-hour time formats. It allows for both relative and absolute formats, such as "In 2 hours" or "3:30 PM". So again, capitalized "AM" and "PM". You can find more information on Material Design's date and time format here.
My project
In my case though, space was very limited. Going with 8:00 AM - 9:00 AM was out of the question. Here are some of the options I considered:
Before I found this information, I was already leaning towards using capitalized AM and PM. I also thought 8-9 AM was less precise than 8 AM - 9 AM even though it takes more space. However, from a visual perspective, the symmetry makes it look cleaner.
In conclusion, my exploration of time formatting in UI and UX design has shown me the importance of proper time formatting and the role established design systems play in guiding the presentation of time information in user interfaces. I ended up not following exactly their recommendation but I believe that in this specific case, this was the solution that made the most sense.
Whether you're an experienced designer or just starting out, I hope this article has provided useful information and insights if you ever find yourself pondering similar questions.