1728743 - Refresh the Today Pane agenda

Status: RESOLVED FIXED

(Calendar :: Calendar Frontend, enhancement)

Description

[Geoff Lankow (:darktrojan)]

I intend to rebuild the agenda list for several reasons:

• as a prototype of the new unified UI <-> calendar interface layer (bug 1727711) to test that it is working as intended
• as a visual refresh
• as a code refresh (I avoid working on the existing code because I dislike it so much)

I think as a part of this, we should drop the Today/Tomorrow/Upcoming sections and just have one heading for every date that has an event. This should reduce clutter – for example, currently my agenda has four lines that say "Monday, 6 September 2021". I think the labels Today and Tomorrow are useful, so I'll keep those if there is something on those days. If a day that's not today is selected in the Today Pane, we'll still show that day's items like we currently do.

Comment 1

[Geoff Lankow (:darktrojan)]

Attachment: before and after

Here's a before/after shot of the current state of things. You can see that events on the same day share a heading which makes things a bit tidier.

Comment 2

[Magnus Melin [:mkmelin]]

That does look better!
Personally, I'm not sure the Today/Tomorrow labels are that useful, but somewhat annoying since they create the incoherence in the list. (Arguably, one often check what today's date is from the calendar, and that's not showing there. )

Comment 3

[Richard Marti (:Paenglab)]

Looks cleaner without the borders in between. How about indent the elements a bit to make the day labels stand out a bit more?

Comment 4

[Alessandro Castellani [:aleca]]

Great improvement indeed!

Quick fly by comment while I'm on vacation:

• Date labels should have a slight different style to create a better "grouped" distinction between events. The bold style is somewhat okay, but in a cluttered list it kinda gets lost.
• "Special events" (all day, repeating, continuing, starting, ending) should have an icon indicator with a tooltip to the right. For example the 22:00 a long event should have the "ending" symbol pushed to the right and disconnected to the label. This solution improves the usability of the area as 1. it keeps the "time" of these events always left aligned, so the users eye doesn't have to jump left/right when looking at a long list, and 2. it help identifying immediately when an event is not "standard" as the little indicator is more noticeable when detached from the main label.

Some possible icon usage for:

• All day event: https://thenounproject.com/search/?q=all+day&i=2826687
• Repeating event: https://thenounproject.com/term/clockwise/4212105/

(In reply to Magnus Melin [:mkmelin] from comment #2)

Personally, I'm not sure the Today/Tomorrow labels are that useful, but somewhat annoying since they create the incoherence in the list. (Arguably, one often check what today's date is from the calendar, and that's not showing there. )

This is a good point as I also find myself checking the events for "Tomorrow" and then wondering "wait, what day is tomorrow?" So maybe we could experiment with having dates but also an indicator/label that highlights both today and tomorrow.

If you want, I can do some mock-ups once I'm back, so you don't code stuff based on written suggestions and we can all sync up on what things could look like :D

Comment 5

[Geoff Lankow (:darktrojan)]

Attachment: Bug 1728743 - Refresh the Today Pane agenda. r=mkmelin

Comment 6

[Geoff Lankow (:darktrojan)]

Personally, I'm not sure the Today/Tomorrow labels are that useful, but somewhat annoying since they create the incoherence in the list. (Arguably, one often check what today's date is from the calendar, and that's not showing there. )

This is a good point as I also find myself checking the events for "Tomorrow" and then wondering "wait, what day is tomorrow?" So maybe we could experiment with having dates but also an indicator/label that highlights both today and tomorrow.

Counterpoint: If I look at this list and see something is happening on Wednesday, September 22, there's a fair chance I won't realise that today is September 22 and the event is about to happen. If you need to know what today's date is there's two different ways of displaying that immediately above the agenda.

I would like to get rid of the year from each label, that's excessive.

This patch is functionally ready, it's just waiting on some tests I haven't begun writing yet. I haven't put any more effort into the look apart from what was necessary anyway.

Comment 7

[Geoff Lankow (:darktrojan)]

Comment on attachment 9242026 [details]
Bug 1728743 - Refresh the Today Pane agenda. r=mkmelin

Time for pixel-pushing. I hate the use of highlight/highlighttext to show the selected item, but I haven't figured out anything better yet.

Comment 8

[Richard Marti (:Paenglab)]

Comment on attachment 9242026 [details]
Bug 1728743 - Refresh the Today Pane agenda. r=mkmelin

I like it.

Comment 9

[Alessandro Castellani [:aleca]]

Attachment: Screenshot from 2021-09-23 11-21-01.png

I got a bunch of feedback on this, but I'm gonna first upload a screenshot of how it looks for me so I can use it as a reference during the quick ui-review.

FYI, I have a 4k monitor without scaled up resolution, but with larger text variation, so it might look a bit odd.

Comment 10

[Alessandro Castellani [:aleca]]

Attachment: Screenshot from 2021-09-23 11-48-18.png

Screenshot of the changes I proposed in the review on Phabricator.
What do you folks think?

Comment 11

[Alessandro Castellani [:aleca]]

We should also consider an hover state for the agenda items.

Comment 12

[Richard Marti (:Paenglab)]

(In reply to Alessandro Castellani [:aleca] from comment #10)

Screenshot of the changes I proposed in the review on Phabricator.
What do you folks think?

I had no all day event in my test profile. The no gradient looks much better. And also the spacing is lighter.

Comment 13

[Alessandro Castellani [:aleca]]

Yeah, it's always better to test UI changes with the busiest possible scenario.

Comment 14

[Geoff Lankow (:darktrojan)]

I find small variations in font size don't work very well on my lower resolution screen. There's not enough pixels for the glyphs to be scaled nicely.
In this case the 0.85em time looks okay, but the 0.9em date header looks a bit weird, especially since there's no other text at that size on most tabs.

Should we line up the event titles horizontally? That is, should all the times be as wide as the widest one? (Bearing in mind that the time could be formatted as 13:00 or 1:00 PM or 1:00 p.m., some of which will have more variation in widths than others.) And if so, should they line up against the end of the column, or the start?

Comment 15

[Alessandro Castellani [:aleca]]

but the 0.9em date header looks a bit weird,

Ah damn, that's annoying. The date header should be a bit smaller than the rest of the text since it has a bolder font weight, so we need to lower its size to create a more digestible visual rhythm.

Should we line up the event titles horizontally? That is, should all the times be as wide as the widest one? (Bearing in mind that the time could be formatted as 13:00 or 1:00 PM or 1:00 p.m., some of which will have more variation in widths than others.) And if so, should they line up against the end of the column, or the start?

Mh....I'm not sure about it, as it might look weird in case there's a wider time alongside a smaller one (eg. 10:45 PM against a 1:00 AM).
Maybe it could be less noticeable if, as you suggested, we move the time to the end of the column.
In that case is more of a question of hierarchy. Which data is more important? The event's name or the event's time?

Comment 16

[Magnus Melin [:mkmelin]]

Since this is directly about calendar information, the time is critical data so I do think that needs to be first.

Comment 17

[Alessandro Castellani [:aleca]]

(In reply to Magnus Melin [:mkmelin] from comment #16)

Since this is directly about calendar information, the time is critical data so I do think that needs to be first.

I agree, this makes sense.

Comment 18

[Geoff Lankow (:darktrojan)]

I'm not suggesting putting the time after the event name, I'm suggesting aligning the times to the end of the cell they are in, so that any white space is to the left of the time, not between the time and the event name.

Comment 19

[Alessandro Castellani [:aleca]]

Ah, gotcha, I misunderstood, sorry.
I'm not sure, I don't have a strong opinion on that, maybe it might look a bit weird having that text right aligned, but it might also look good.
We can definitely try with that and then push a simple CSS line change if we find it weird.

We could also use this to do some A/B test with our daily users. It would be worth sending a message with request of feedback on tb-daily.

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/0cf0d7c55bce
Refresh the Today Pane agenda. r=mkmelin

Comment 21

[Henry Wilkes (they/them) [:henry-x]]

I think the #agenda-listitem should be wrapping .agenda-listitem-time and .agenda-listitem-title in a <span> rather than the <aside> (https://hg.mozilla.org/comm-central/rev/0cf0d7c55bce#l9.237). These are listbox options, and the time and title are key parts of that, so <aside> seems like the wrong semantics to use. Plus, it separates it from the multi-day event icon.

Also, each <aside> creates a landmark, and these are meant to be used sparingly (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Complementary_role#accessibility_concerns).

The current accessibility tree for a multi-day event is

listbox
  listbox option       "Multiple-day event begins"
    landmark
      text             "13:30 Some Event"
    graphic            "Multiple-day event begins"

Whereas I would expect it to be

listbox
  listbox option       "13:30 Some Event Multiple-day event begins"
    text               "13:30 Some Event"
    graphic            "Multiple-day event begins"

Comment 23

[Anje]

Do I understand this correctly - Can it be confirmed that 'Todays' events are going to be fully displayed ?
That includes Today events that have occurred.
eg: At 2pm the event which occurred at 9am is still visible.

Comment 24

[Alessandro Castellani [:aleca]]

Yes, correct.
I'm planning to add an option to hide past events, only showing the most recently finished (1 or 2 hours ago).