Most calendar apps fail to display upcoming events with ease, without scroll bars or pagination obstructing the view.
In this article, I want to go over some of the inefficiencies in most Calendar UI/UX designs and what simple changes could vastly improve the user experience.
The Goal
A Calendar’s UI should be built with one goal in mind: to give the user an easy overview of all upcoming appointments. What this means in practice is:
- Don't waste screen space on “past” events.
- Don't waste screen space on “empty” timeframes.
- Do its best not to “hide” any upcoming events in any view so that users don’t have to scroll, pinch, zoom, or change views to see every event.
Sounds simple in theory, right? But is that what we are getting? Let us check out Google-Calendar’s design.
Does Google Calendar Deliver?
When looking at google calendar, it doesn’t seem to deliver on any of those requirements:
- Why does the calendar often focus on timeframes like 00:00 to 06:00 AM, in which there are no events? This wastes precious screen size and often hides events that start much later.
- Why is it that, when looking at the calendar at night, it doesn’t show events happening the next morning at 8:00 AM? Instead, it wastes screen space to still display events that “already happened” that day.
- Wouldn’t it make more sense to focus on the timeframes in which there are events and show the user useful information?
When users open their calendars, they want to see a quick overview of what appointments they have on a set day and, hopefully, an overview of what is to come during the next few days.
However, often we are met with screens like these (image [1] ), displaying empty timeframes like 00:00 to 08:00 AM:
In most cases, this leads to users not seeing their full day’s schedule without having to scroll. This is especially troublesome on phones, which have limited screen sizes.
Calendars should show users all upcoming events without forcing the user to scroll or load multiple pages
How to improve the design
Step 1: Center the view on existing events
This first change does not even require a redesign of the calendar, all it needs is for the calendar to automatically center the view on existing events on the user’s screen.
Check the previous image [2]: The user only has events from 08:00 to 18:00 (8 AM to 6 PM), so the calendar should automatically center the view on those timeframes (no need to start at midnight if the first event is as 08:00).
But every user has appointments at different times, we can’t use the same view for everyone. What if someone works at night?
Yes, exactly! Currently, google calendar automatically loads by zooming into the current time, with little regard to upcoming events. So if the user opens the calendar at 19:00 (7 PM), it will show events close to that time, risking to hide events the user might have the next morning at 08:00 AM.
Instead, the calendar should set the view to automatically fit all available events into view. This way, it works even if the user has a schedule outside of regular hours.
Check the example bellow image [3], even though the user has events much later in the day (20:00), the calendar is still able to display everything.
The regular action of calendars like google is to zoom into the current time, which in the example above [3] would hide the events happening before lunch 12:00.
Step 2: Stop wasting screen space with the past
The next issue is that over 50% of the available screen-size is being used to display events that have already happened. Check the image [3] again: it is a Friday in that example, and the calendar is wasting all that screen space to display days that have already passed.
This probably happens because calendars are still based on paper calendars and fail to take advantage of the flexibility we have nowadays to load and display content by dynamically adapting it to the user’s needs.
Instead of displaying dates that are already in the past, in a pointless effort to copy the design of paper calendars, the calendar-app should instead display the upcoming 7 days. Who wouldn’t want to see the upcoming week when opening the calendar on a Friday?
Check out the above example [4]: To help users recognize weekends, all I changed was to add some shading to highlight the weekend and move the current date to the first slot. With that simple change, already the user gains a full overview of the upcoming week without wasting screen space with dates that have already happened.
Doesn’t that feel better already?
Last: Remove unused timeframes
The last thing we can look at is all those empty spaces taking up so much of the screen. For example, 09:00 to 12:00 doesn’t have events in any of the displayed days. So why is that taking up so much space? The same happens from 13:00–17:00 (sorry to anyone who uses AM/PM system, but you should at least know how to read 17:00, right?).
The final touch will be to remove even more unused space, by removing any timeframes that don’t contain events. We can simply skip over those:
And lastly, we can trim the weekend, which is empty as well:
Now compare that to the first image, and check out how much space we saved and, more than that, how much more relevant events we are seeing:
In the first version, we weren’t seeing A SINGLE upcoming event, AND the calendar was hiding our 08:00 event from sight. In the second version, we get to see all upcoming events from Monday, Tuesday, Wednesday and Thursday, all with only 50% of the required screen space.
Isn’t that amazingly simple? Of course: the user will want to see all those hidden timeframes when creating events. However, when watching the calendar to check on the daily schedule, this simplistic approach is so much better!
Focus on what the user needs to see
More than new fonts, colors, or designs, mobile apps should focus on saving space. Be careful when getting inspiration from existing designs, especially when those were inspired by physical objects created decades ago. Instead, always think about how to display data efficiently in a way to serve the user, not the UI.
This is what I like doing: I find simple solutions to issues most people overlook. Follow me if you wish to read more articles like this one and feel free to reach out on Twitter and tell me about your project.
