Page MenuHomePhabricator

Create a plan for consistent use of icons, colors and text style when rendering Calendar events
Closed, ResolvedPublic

Event Timeline

lpriestley assigned this task to epriestley.
lpriestley raised the priority of this task from to Needs Triage.
lpriestley updated the task description. (Show Details)
lpriestley added a project: Calendar.
lpriestley added a subscriber: lpriestley.

so for newbs catching up, what/where are these?

Few different parts:

Event Status

Until recently, events had an explicit "Status" field, with possible values "Away" and "Sporadic".

In connection with T8183, I removed that field. Some discussion there, but briefly: use case for having "Sporadic" isn't super strong; if we do want to have these statuses they should be properties of the invitee rather than the event itself. So I tossed it for now and we can look at adding it back later if we find a stronger motivation for it. Bob had some other long-term ideas there too.

At HEAD right now, all events basically always count as "Away".

User Availability

Until recently, users and user handles had a "status" property which derived from this field. Specifically, every time we loaded a user we'd load any events they had created and possibly set their status to "Away" or "Sporadic" based on the event status of any current event. When marked "Away", the user rendered with a red dot. When marked "Sporadic", they rendered with a yellow/orange dot. In connection with T7707 and T8183, I updated this logic to: use caching so it's cheap to load; look at non-cancelled events you're attending, not events you created; be slightly smarter about a series of contiguous but not-strictly-overlapping meetings; and only support "Away".

Now user handles have two states: "fully available" (no dot, default) and "not available" (red dot). The "not available"/"away" status uses the correct logic to check for non-cancelled events you're actually attending and should always produce the right result now (unless I messed something up).

So, at HEAD as of right now, users get marked "Away" with a red dot when they're attending any (non-cancelled) event.

Use of Dots on Calendar

At HEAD, Calendar has dots next to events sometimes:

  • (Small Dot) Non-all-day events in Month view.
  • (No Dot) All-day events in Month view.
  • (Big Dot) Non-all-day events in week column on Day view.
  • (No Dot) All-day events in week column on Day view.
  • (No Dot) Events of any kind in hour-by-hour UI in day view.
  • (No Dot) Conpherence widget.

Some of these rules are just how the CSS was set up, and some of them are from mocks -- for example, features dots for non-all-day events and no-dots for all-day-events, although those mocks also use dot color.

Use of Color on Calendar

Until recently, Calendar used the event host to choose from a rainbow of colors. This made sense when events were just user statuses, but I think it is now meaningless at best and horribly confusing at worst, since we have real invitees and the host isn't really relevant anymore. The mocks in M54 reflect this older state of the world.

At HEAD, we no longer use color to indicate event host.

We sort-of use color to indicate "All Day" event, but only on some interfaces.

Path Forward

Going forward, I'd like to:

  • Use color to indicate either something meaningful/useful than host (probably attending status?) (or not use it at all).
  • Use dots more consistently.
  • Personally, I think icons (T7936) are a nice touch, but I don't feel strongly about them, and if we have a better functional use for that slot I'm completely fine with not pursuing this. I just love icons so so so much.

The start of one approach might be:

  • Stop using colors and dots to indicate "All Day". Communicate "All Day" through positioning (at the top of lists), background fill, and the words "All Day". (I think this is already always pretty clear at HEAD.)
  • Replace dots with icons in all UIs (probably?). I love icons.

But that leaves some open questions:

  • What do we use color for? (Do we use it?)
  • Do we use bold or other text style? (What for?)
  • Do we add √ / X / O icons?
  • Generally, what additional information is important to communicate?

One other signal we could use is adding or removing backgrounds from icons, if we add them:

  • Colored icon on a white field.
  • () White icon on a colored circle.

This would sort of make the icon itself have a "bold" mode. That might free up the text style to indicate other things (like strikethru for cancelled events -- I think we should probably do this regardless).

As for what to actually show, here's what I can come up with:

It might be interesting to show events you're hosting differently.

Attending state seems pretty useful. It might be useful to distinguish between all four "invited", "attending", "declined" and "no relationship" states, or maybe between only some of them (at HEAD, we distinguish "invited/attending" from "declined/unrelated").

After T8022, it may be useful to indicate "tentative" events.

We could let users choose event colors, although this seems a little too crazy to me.

After T2334, we might have some kind of "external event", or "synchronized/unsynchronized" state.

After T2896, we might have some kind of "recurring" state.

Maybe we just slap like 5-10 icons in front of every event to resolve this stuff? I LOVE IT.

epriestley renamed this task from Placeholder for the fate of the dots in user handles (previously used for labeling "away" or "sporadic" status of a user, based on Calendar availability) to Create a plan for consistent use of icons, colors and text style when rendering Calendar events.May 15 2015, 12:56 PM

Depending on exactly how T8026 sorts out, we might also have a stronger "public event" vs "private event" state in the future.

User Availability generally feels weird to me in an absolute state, when I think about what is actually useful to convey. Right now, at a corporate level, its mostly useful for me to know if you're out out (vacation, ooo, etc) vs just in a meeting until noon. A red dot should be more indicative of being fully out for that workday, while an orange dot could signify not here at the moment, but around. This is a bit in line with out old feature (which was useful), but done maybe in a more programatic way.

Basically, could red = all day, orange = single event?

Maybe more in-line with that intent would be "orange dot = away for less than X hours". That information is available by clicking through, but not part of the dot. But that doesn't cover "I'm working, but have family in town and will take longer than usual to respond". See more discussion in T8183.

I think most of this is in reasonable shape now, at least for the moment.

We currently replace event icons with specific colored icons to indicate important event states ("Attending", 'Invited", "Cancelled", "Declined"). For "public" sorts of events, you'll usually see the event icon instead.

We now use strikethrough for cancelled events more consistently.

Dots got replaced with icons. (Disregarding user status dots.)

"All Day" gets consistent positioning and background fill.

Other information doesn't currently seem important.