What I Learned Designing Calendars
Six years ago, in a sunny autumn afternoon my colleague Kostadina and I attended an important handover meeting. It took only one hour of our working day, but it marked the beginning of an unexpected journey into the world of calendars. Little did we know back then that designing a planning tool could be so exciting and challenging at the same time. The long years of collaboration on this topic earned us the name “The Calendar Duo”, which we now carry proudly as our badge of honor.
At first glance calendar apps look straightforward enough, but it turns out there are a lot of things we simply overlook as users. As a user experience designer, I had no idea this control could have such a wide range of usage. When we began working on this topic, we started off by exploring various calendars, tools, and priorities. We invested a huge amount of time, thought, and effort into building a universal shell which could fit the content of various scenarios. This was a long journey, and not an easy one to be honest, but based on the recent positive feedback I received for the component, I can proudly say we achieved a lot.
Nowadays, as I continue my work on time-related UI components and after being deep into the topic for years, I realised there are important aspects of building an application for planning that deserve to be mentioned explicitly. Here are some of my findings.
Know your users
As usual, in UX design knowing your users is the key to success. Are you designing for students who need to plan their lectures, prepare, and learn for exams? Or are you designing a business tool for teams where users will be able to have an overview and compare tasks on projects. With a calendar, it’s also possible to keep track of almost anything, such as machine operations or transportation and delivery services. Actually, a calendar can be used by everyone, but answering the question of who will be using it and for what purpose will determine the specific design requirements. Understanding your users will guide you through the challenging moments and help you distinguish between critical, optional, and obsolete features.
Consider what’s already out there
After you’ve done your research and you are already familiar with potential use cases, take time to explore what is out there in the web already. You will be surprised by the variety of UI components that already exist out there for something we all use on a daily basis. Read and collect these ideas. While reading, keep an eye for the familiar patterns. These help us quickly solve common issues and prevent user errors. For example, designing and positioning the navigation, the timeline and appointments grid should be your top priority. These are the first things we see on the screen, and it should speak to the users immediately. As much as we all love to innovate, there are some places where we simply must stick to the conventional look and feel.
Don’t be afraid to experiment and explore
Of course, as designers we want to leave our mark, and the good news is that calendars offer a lot of functionalities and features we can do that with. After covering the basics, the focus shifts to the time formats, legend and color coding, appointment sizes, order, and types of calendar views. Choosing the right set of views for your users is essential.
Consider this example: I wake up, take my coffee, and check my calendar every morning. I do it on my phone in the schedule view, but once I turn on my laptop, I prefer to have an overview of my work week. It is not only a personal preference, though. In some cases, having the proper view can be crucial. If you have a calendar full of short daily appointments, a one-day view with detailed information might be a good idea. At the same time, in one month, you will probably not be able to read the labels of all the tasks, but you can check for available slots or reduce workload. Again, it is very much use case dependent, so do not waste time on assumptions and consider this one of your top tasks for exploration.
Use space wisely
Last, but not least I would like to pay attention to the space. If you design a calendar or a complex app, the main purpose of which is planning, give the calendar some space. Organising time is not easy and if you squeeze the calendar in some corner, you will make it even harder. Appointments need to be visible, accessible, readable, and editable. Let your users play around with them — create, click, tap, drag, and drop, resize directly on the grid. Sure, there is a lot to consider achieving harmony between all the possible actions, but I am sure everyone will appreciate the freedom.
On the other hand, don’t put it all out there. A calendar can be busy with content, but if you have a lot of other components taking additional space on the screen it might easily get cluttered. To avoid such situations, you can design optional or role-based functionalities which can be turned on or off based on the need or preferences of the user. This will eliminate the risk of information overload on the screen at least to some point.
Bringing it all together to create a calendar app
In general, our winning strategy is to look for balance and keep the calendar app simple and neat. After all, planning is all about putting order into things, even though allowing users to do that may feel chaotic to a designer. I still have a lot more to share on the topic, so if you are interested in this content feel free to leave me a comment and we can start a discussion.
About the author: Mariya Peneva is a user experience designer at SAP.
