Designing a Calendar Tracker
As I’m building my SelfCare app, I went back into my User Experience and User Interaction design. Right now, I’m trying to determine how can I implement a tracker for sleep, moods, medication, drinks, and exercise. To do this, I researched a bit on the design of calendars.
In UX Collective’s article “A Brief History of Calendar Design,” I learned that objects have history where their design patterns and functionality stood the test of time. The calendar grid is one such example whose design pattern may have peaked in its design iteration. Throughout design we solve problems by refining our solutions through learning what worked and what didn’t work. Iteration is an important process throughout a design.
Calendars evolved to help organize events and answer information in a table or grid format. They create a forecast for present and future time be it for weather, astrology, farming, or health. Before the grid, some calendars were found to be represented in a circular diagrams defining cycles. We can see some circular calendars such as the astrological calendar and sometimes the female menstrual cycle.
The HelloClue App does a great example of tracking the female menstrual cycle both in a circular and grid layout. The circular layout allows a user to view when their period came, when the fertile window will occur, and when their PMS will show up. The grid layout shows the same data patterns along with other symptoms the user can track. I’m very impressed by such a simple design to show users patterns related to their cycle. From this inspiration, I went about figuring out how I can apply something similar to my app.
The goal of my app is help users find patterns to take back control of their mental health. Like the HelloClue app, users can best prepare themselves if they can see and sense possible episodes or event triggers. During my design thinking, I designed the grid with a sleep diary as its basis. The sleep diary I’m familiar with “start” the day at 12pm/Noon and ends at 11am. I wonder if this is done because of the 24 hour cycle being readable at the start of 12. I chose to use a sleep diary as the basis because the quality and amount of sleep can determine our overall day upon waking up. However, many things can affect our sleep such as the amount and timing of alcohol and caffeine consumption, interrupted sleep (waking up in the middle of the night), number and length of naps, and exercise time. Medication can also be factor depending on the prescription one takes. Given these factors I envisioned two types of a grid calendar for daily tracking.
Option A can be a problem for smaller devices as its more wide than long, but is easily readable.
Option B allows users to scroll downward eliminating the need to scroll horizontally but looks to stretched out.
Thinking of the sleep cycle, I tested out two daily circular layouts. From the looks of it, Option A reads funny. I was thinking that I could break out the day and night 12 hour cycle into two circles in the way a clock would read. The sleep cycle would begin at the outer circle (Noon) then enters the inner circle once we get to the midnight hour. At this point, I wonder if I should just do a spiral like shape. Though it was still funky.
Option B of the circular layout has a much better setup. This one would have a 24 hour set-up. This has a cleaner and more organized form of data entry. Notations can be added and the overall cycle is still visible. As its shape, the circle brings us back to point A with ease. Perhaps it might be our perception of how time operates. I’m curious if the common form of reading time has been in a circular shape, that’s why clocks are usually circular. After hitting the 12th hour, we automatically understand to switch from day to afternoon then night. For some, this cycle can be viewed in the 24 hour standard (3pm = 15 hr).
At the moment I’m preferring Option B — Circular cycle as the calendar design for my app. I’ve also looked at other forms of uncommon calendars and almanacs for ideas. Below is an example of a Chinese calendar and a Chinese almanac. There are many details in each describing auspicious days, what to eat and not eat it, and other do’s and don’ts. It’s funny how time is perceived throughout the world from one culture to another. The perception can really determine the design of the calendar and how its read. When designing an app relating to time, cycles, and health, what would be the consensus? So far, the grid has stood the test of time. Perhaps the calendar has really come to its final iteration.
Let me know in the comments which design option you think would be best to use. Share your thoughts about calendars and their design. I would like to know more how others perceived designing time.
