Create Event UI: Improve clumsy UX (reminder, remove tabs, private, faster time-picker, category/color)

[bentolor]

Is your feature request related to a problem? Please describe.
First of all: Thanks for this great overall product which helped me to better manage my data on my own. Without Nextcloud and its ecosysytem this wouldn't be possible at all. I'm a long-term Zimbra user and started to use Nextcloud Calendar and I'm always frustrated when I trie to create a new appointment using the Nextcloud UI. Typically what I want to achieve is 95% of the time always the following:

1. Create an event with custom start- & end time
2. Set it to private (only visible to myself)
3. Have a default reminder 10 minutes ahead of the event
4. Apply a "visual category" via custom event color. In Zimbra this happens implicitly on assigning a category

My big whining (Rant)
Please understand: I'm not writing the following rant to pull anyone down. It's just my effort to convey my daily frustrations and convince you, that it would be great to improve the UI even partially:

Why does the "New Event UI" only use 15% of my screen estate? Why is this bloated with this pointless huge icon on top? Why do I instantly have to scroll down to even see the first page? And WTF why are central properties like attendees, reminders & others hidden in clumsy tabs? What type of sadistic disorder was the developer having designing this date/time-picker: I already picked the date; i just want to adjust the time WTF. What the heck? I just clicked the date to see the times; now I clicked the times but this popup is still in my way? How do I get rid of it again? Why do I always have to manually add a default reminder? Why do I have to rename my calendars, so that "Calendar" and not "Tasks" or others a preselected as target? Why am I not just able to use the category colors? Why does the default set of colors visually appear all together looking the same so that I have to manaully pick a random new color making my calendar a new color art study? WTF – how clumsy is it to mark my event as private. In Zimbra it's just a checkbox = one click? And dude: because of this slide-in ui I always forget this nagging Save button that most of the time is just in my way because I want/need to manually fiddle with this color settings".

Describe alternatives you've considered
Creating events on my mobile using Etar & Davx5. It's somewhat more convenient but I loose the perks of a desktop browser, real monitor and actual keyboard

Describe the solution you'd like

Here my try to visually illustrate some ideas

1. Remove / Move / reduce icon size
2. Move down target calendar selection; remember last selected calendar
3. Split date & time in to fields; offer a 1-click time selection as in Zimbra (see screen: you hover over hour, then minute, then click)
4. Make Confirmed / Visibility / Busy single-click selection (radiobuttons) or even reduce the options (i.e. Zimbra does not differentiate between hide vs. private at all)
5. On selecting a signle category, apply the category color to the event automatically
6. For jesus christ: get rid of the tabs! Use more screen estate please instead
7. Allow to define a default reminder time & use/apply that by default

Additional context
Just for context, here a "create new event" screen in Zimbra. For me this UI has one thing missing: You cannot apply category/color in this screen but must apply it the calendar view.

Final notes
Thanks for you time reading my rant & proposal!

I am aware of 355 other open issues and I'm not sure if there is a chance for at least some suggestions could find the way into Nextcloud. I'm also under the impression that much of the current UI is a direct result of the overall Nextcloud UI concept (which I find cumbersome at some places).

I'd appreciate which aspects sound like a good idea and which rather than a "probably wont happen (soon)" from a nextcloud creator PoV.

[tcitworld]

Related #3543

cc @nextcloud/designers

[dartcafe]

Just want to mention the implementation, we use in polls to pick dates and date/time spant with a single picker. Maybe it is an alternative to the current implementation.

[bentolor]

@dartcafe Regarding this maybe a better fitting alternative:

• I'd assume most events are on a single date. So my user perspective would be 1) select start date (or already selected from calendar view) 2) select start time 3) select end time. Done. Rarely I do adjust the ending date.
• My mind representation of an event is "Starting on Tuesday, 13:00 till Thursday 21:00".
  The displayed UX flow is: "Starting on 20. July to 22. July, starting on 6:00 ending on 6:00"

But my pain is clearly in the time selection area. Specifically:

• I find the overall UI flow strenious. Mostly because UI elements appear/disappear with constantly changing semantics at the same place. I can't "blindly" click. The same way you turn on ventilation in your car w/o looking, because the dial is always at this place.
• Need for scrolling: In practice scrolling is mostly always necessary, i.e., because hrs start at 1 and minutes have 12 options

I'm not sure if i can convey this properly. I.e. the Zimbra UI is rather not a beauty. But its also not strenious for my mind at all. At best I can create a 2h-Event with a total 4 for mouse clicks and no scrolling at all:

1. double click start time/date & directly type event title
2. click down arrow at end-time, hover always directly visible starthour+2
3. hover & click minute-option.
4. Click save

Please don't get me wrong. The zimbra way is by far the only good UX to achieve this task. I'm really just trying to convey the "concentration efforts" the Nextcloud UI currently costs me to create an event. But maybe this is just me.

[aeneby]

Just throwing in my 2c here but I agree. Firstly, there is no way of getting directly to the time selection dialogue; clicking anywhere on the date/time field brings up a calendar, and you must click on "Pick a time" from there.

When you finally do get to the time selection dialogue, it is so different from any others that it is unfamiliar and unintuitive to use:

• the first thing you would logically select (AM/PM) is in the far right column
• the column format in general is a bit strange
• there is no option for 24h time format (at least not that I know of)
• the "default" highlighted time of 10am seems arbitrary, and should probably be the current time

Cheers!

[christf]

there is another bit to this - not sure if it belongs here or should be a separate issue, splease do let me know - in the "conflict check" widget there should be drag&drop support. So if I see that a participant already is booked in this widget I do not want to go back to a different dropdown and select a different time. I as a user want to drag the appointment to a slot that is more appropriate.

[ChristophWurst]

@christf it's in #39

[jancborchardt]

Could we close this as duplicate of #3543 which includes nice mockups? cc @nimishavijay

[bentolor]

@jancborchardt I think this issue has some in-depth UX feedback, design rationales & proposals I'm not seeing mentioned in the referenced issue "It includes nice mockups" is triggering me a little. Wondering if next time I should focus more on pictures and less text & content? 😉

Never mind! My issue was mostly about giving feedback & UX stories. So if the design team, which is actually redesigning the event view, was able to leverage & use the feedback, then please proceed whatever works best!

[axelsimon]

Just a quick comment to confirm picking dates is broken: i just created an event, picked the date and discovered after saving my event and not finding it at the date i was expecting it that the date had not been actually taken into consideration.

For some (bad) reason, one needs to click the date on the mini-calendar to select it, and then also click OK. I think the likelihood of people clicking on a date by mistake and being glad they didn't click "ok" to confirm it is vastly smaller than the likelihood of people clicking on the date they wanted, and then just wanting to be done with selecting dates, which is truly boring activity for most of us.

[joshtrichards]

FYI: #5675 was recently merged.

[aeneby]

Thanks @joshtrichards. Does this change address the time/date selector as well? Sorry I haven't had a chance to test it out.

[jancborchardt]

Considering the merge of #5675 as @joshtrichards mentioned, which implemented the specs from #3543 → I’ll close this issue and any follow-up problems should be opened as individual new issues. That’s better than having one big grouped issue. :)