Redesign and Enhancements of Calendar design layout

ishaan730 commented 1 year ago

Is your feature request related to a problem? Please describe.

The current layout of the Calendar web application has presented several usability issues, I see this as an opportunity to improve the user experience. I have identified some specific areas for improvement, such as the placement of left sidebar action buttons, which can cause confusion for users. I also believe that the overall visual design of the calendar view could be enhanced to increase usability. Furthermore, I recognize that the edit event right sidebar could be more user-friendly, and I am looking at ways to improve the placement of its tab options. Additionally, I am working on making the time and date picker input fields more intuitive and streamlined to simplify the scheduling process. By redesigning and enhancing the calendar layout, I aim to provide our users with an even better experience.

Current Design

Describe the solution you'd like

Purposed design changes

New Calendar re-design

1. The arrangement of buttons, such as the calendar view, month view, and current day, can be optimized for user convenience.

The placement of buttons should follow the principles of visual hierarchy and proximity. Visual hierarchy refers to the arrangement of elements in a way that guides the user's attention to the most important elements first. Proximity refers to the principle that elements that are related to each other should be placed close to each other.

So, if the create event button is the primary action that we want the user to take, it should be given the most prominent placement and visual treatment, such as being placed at the top of the sidebar or being larger and more colorful than the other buttons, (which is correct here) but the current date button and calendar view button should be placed near each other since they are related to each other(Which is also correct here), but they should be placed in a less prominent position than the create event button. Similarly, the month change button should be placed near the other buttons related to the calendar view, but it should not be given the same level of prominence as the create event button.

Placing the month change button on top of the other buttons, even though it is related to the calendar view, can create confusion and disrupt the user's mental model of how the interface works. Users may expect the month change button to be grouped with the other calendar view buttons, which are typically related to the current view and not the overall navigation of the calendar.

Additionally, if the create event button is the primary action that the user is expected to take, it should be given the most prominent placement to draw the user's attention to it. Placing it in the same row as the current date and calendar view buttons may make it less noticeable and less likely to be clicked. The current date and calendar view buttons should be grouped together, but they should not compete with the create event button for attention.

2. Arrangement of a concise monthly calendar view.

Keeping a month view calendar just under the "Create New Event" button can be a good design choice here because it provides users with a quick and easy way to navigate to a specific date or time for creating an event.

A month view calendar can give users a broad overview of the dates and events in a particular month, allowing them to quickly navigate to the desired date by clicking on the date in the calendar. This can save time and effort compared to scrolling through a long list of dates or manually entering the date and time.

Additionally, placing the month view calendar just under the "Create New Event" button can help users to maintain their focus on the primary task of creating a new event. The month view calendar is in close proximity to the "Create New Event" button, which makes it easy for users to switch back and forth between selecting a date and entering event details. And by providing users with a visual representation of the calendar in the sidebar, you can help them to maintain a mental model of where they are in time and make it easier for them to plan their schedule.

3. Time and date picker

Keeping the time and date selector input fields separately in the create event left sidebar edit panel can be a design improvement and here’s why and how:

Simplicity: By separating the time and date selectors, we can simplify the input process for the user. Instead of having to enter the full date and time in a single input field, users can select the date from one field and the time from another, which can make the input process less overwhelming.
Flexibility: By having separate time and date input fields, we can offer users more flexibility in how users enter their event information. For example, some users may prefer to enter the date and time separately, while others may prefer to enter them together.
Error prevention: Separating the time and date selectors can help prevent input errors. For example, if the user accidentally enters the wrong time in a combined input field, they would need to start over and re-enter both the date and time. By having separate fields, users can correct errors in either the time or date field without having to redo the entire input.

And also separating the time and date input fields can help to reduce cognitive load for the user. If the user only needs to edit the time of an event, for example, they can easily locate and adjust that field without being distracted by the date field.

As for the timezone button - keeping it separate but closer than the time picker input field can improve our current UX because it maintains proximity while emphasizing its importance. The time zone is an important element in scheduling events, and users may need to adjust it frequently depending on their location or the location of the event. By placing the timezone button close to the time picker input field, you can maintain the principle of proximity while emphasizing the importance of setting the timezone.

Separating the timezone button from the time and date input fields also prevents confusion and improves the user's mental model of the input process. Users may be less likely to accidentally change the timezone when selecting the date or time if the timezone button is clearly separated from the other input fields.

4. Here's why using different tabs in middle of edit flow for Details, Attendees, and Resources in the middle of the create event left sidebar edit panel may not provide the best user experience.

Disrupting Flow: Using tabs to separate details, attendees, and resources can disrupt the user's flow while creating the event. Users may need to switch back and forth between tabs to reference information or input data, which can interrupt their thought process and make it more difficult to create the event.
Fragmented information: Separating information into different tabs can make it harder for users to get a complete picture of the event they are creating. Users may need to constantly switch between tabs to see all the relevant information, which can lead to errors or missed information.-
Inefficient navigation: Having to switch between tabs can slow down the user's workflow and make it more difficult to navigate through the create event process. Users may need to go back and forth between tabs to make changes or add information, which can make the process more time-consuming and frustrating.

Instead, a better approach could be to use a single form layout that allows users to input all the required information in a single flow. This can reduce cognitive load and help users to maintain their flow while creating the event. To make the input process more manageable, you can use sections or headings to separate details, attendees, and resources, but without requiring users to switch between tabs.

Or it may be better to after grouping all the relevant information together in a single view, such as a long-scrolling form or a collapsible panel. This can help reduce cognitive load, prevent fragmented information, and improve the efficiency of the user's workflow.

By keeping all the input fields on a single flow , users can easily reference and edit their input without switching between different tabs. This approach can improve the user experience and make it easier for users to create events with minimal frustration.

lastly, In addition to these modifications, I have organized the most pertinent input fields and options with clear labeling and helpful text. However, it is entirely optional to incorporate these changes into the existing design. Additionally, I have prioritized the event color option to enhance its accessibility and ease of use for users.

Please note that this was a rapid mockup, and it may not align with our current design language.

Describe alternatives you've considered

No response

Additional context

No response

tcitworld commented 1 year ago

cc @nextcloud/designers

nimishavijay commented 1 year ago

Thank you for the detailed mockups and explanations! Super nice work :) Some feedback from my side:

The arrangement of buttons, such as the calendar view, month view, and current day, can be optimized for user convenience.

Great point! My concern with this is how it looks on smaller screens. For example on mobile, there is already 50px taken by the header, 30px taken by the date indicator on top and another 48px taken by the "All day" section. If we add another ~50px for the buttons above, that's almost 1/3rd of the screen never showing your events. For that, I suggest that in mobile view the buttons stay in the navigation. What do you think about this @jancborchardt ? :)

Arrangement of a concise monthly calendar view.

Also another great improvement! All other calendar clients have a concise month view so it is expected :)

Time and date picker

Here's why using different tabs in middle of edit flow for Details, Attendees, and Resources in the middle of the create event left sidebar edit panel may not provide the best user experience.

Also agreed! There were some mockups a while ago with the same idea, but didn't use the existing visual design of the components either as they were not standardised at the time https://github.com/nextcloud/calendar/issues/3543 some combination of those old mockups, your new mockups and the current components would work perfectly! :)

ishaan730 commented 1 year ago

Great point! My concern with this is how it looks on smaller screens. For example on mobile, there is already 50px taken by the header, 30px taken by the date indicator on top and another 48px taken by the "All day" section. If we add another ~50px for the buttons above, that's almost 1/3rd of the screen never showing your events. For that, I suggest that in mobile view the buttons stay in the navigation. What do you think about this @jancborchardt ? :)

Thank you so much, @nimishavijay, for your feedback. I share your concern and have already considered potential solutions. I will share a quick mockup with you shortly to illustrate my proposed approach :)

Cyberes commented 1 year ago

I'm trying to move all my calendars over from Outlook to Nextcloud. There are a few things that I miss (@ishaan730 covers most of them) and I'm just voicing my support for @ishaan730's ideas.

One thing I would like to see as well is the ability to click and drag calendar events to quickly adjust them (something Outlook has)

nextcloud / calendar