8

I have designed a calendar web application at my work, and it has been well recieved. So well that multiple departments of my company has adapted it, and requested their own categories for their respective events. It has also been made available to our customers.

My problem is that what started out as a nice design, with four different colors, has turned in to an orgy of distracting colors, which frankly looks like someone puked up skittles (if skittles had 15 colors). I have tried multiple color schemes, but it always end up looking worse than it did. Here is the calendar as it looks now:

enter image description here

The idea is that all departments can select their relevant categories by choosing visibility from the menu on the left. But I would like the calendar to look good, even with all categories visible.

I tried to create a palette with 20 colors to choose from, but it ended up looking even worse. I'm starting to think that more colors might not be the best options, and that different options, like radial or striped colors, like here, might be the best option. I would however, very much like to get some examples or visualisations on options that might work. I'm also very much open to redesigning the whole table layout, like dropping the black border between columns and/or events.

I have tried finding good examples myself, but I could only find Google calendar-like month views, or empty six month calendar views for printing.

By the way, I am not expecting anyone to design this for me. I just have a feeling that somewhere out there, there are great examples or inspiration, and that I just haven't been able to find it myself.

UPDATE, TWO YEARS LATER:

I now have a brand new design. We accepted the fact that you cannot make this many colors work. Then we grouped the similar categories into a total of 7 colors, inkluding grey and white. Users can still select visibility of individual categories, but now it looks more professional, and less like unicorn barf.

Improve this question
8
  • Colors indicate different categories.. or departments ? why does the user choose a color in the first place ? at any point of time for one user, does the calendar view 'only' show one department related events ?
    – PK2016
    Mar 11, 2016 at 15:36
  • What does a user want to see when they look at this? What is their goal? It seems like you are trying to "do it all" with a single view, but you may now need to branch out into multiple views / lenses. For example, a "free/busy" view, a "personal appointments" view, a "low priority appointments" view...
    – Alex Feinman
    Mar 11, 2016 at 15:39
  • This calendar represents releases of code, or similar events, like service windows (planned downtime) etc. One color for each release type. There are also other events, like frozen zones and holidays. I control all of the colors, so none but me can add categories. The users select which categories they want to be visible, so each user will only see a limited number of events, except for release managers, who need them all. My boss keeps mentioning that he loves the functionality, but would like the design to change, and quite frankly, I am at a loss of how to do it. Maybe it's impossible.
    – jumps4fun
    Mar 11, 2016 at 15:46
  • What questions do people try to answer when they go to this calendar? A manager might ask, "is my team overloaded?" or "are releases too close together?" A developer might ask "what are my deadlines?" or "when can I expect code I depend on?" or "how many days until I have to ship this?" If you write out these questions, you can provide views into the data that help answer them.
    – Alex Feinman
    Mar 11, 2016 at 15:51
  • 1. Planning releases that doesn't interfere with other releases (Release managers' work should be distributed evenly). 2. Provide deadlines for developers (Pack dates). 3. Provide customers with information about when releases arrive. Now details about what the different releases contain, and their progress is also a part of this system. That is however deeper in the page hierarchy, accessed by clicking on the individual events. The main calendar pretty much just needs a single line of text, symboling which release category it is. So far, these are also symbolised by one color each.
    – jumps4fun
    Mar 11, 2016 at 15:53

5 Answers 5

Reset to default
7

There are some improvements you can make without changing much:

  1. Make all the borders of the table white instead of black.
  2. Remove the teal background from headers (it only adds another colour for users to process without adding any extra information). I would revert to black text on a white background.
  3. Change the red row headers to use red numbers on a white background instead of a red background.
  4. Go pick new colours for the calendars, perhaps try looking for colour schemes using Kuler or ColourLovers or other similar sites.
  5. If you can, try rendering the calendar with each day having only a small swatch (square or circular) of colour in front of the label instead of filling the whole cell with colour.
  6. I'm not sure if you have a reason to condense the information so densely, but you would improve the readability if you add extra padding to the bottom of each cell (and vertically align each cell's content to the top).
Improve this answer
1
  • 1. I did try that. Wasn't pretty. 2. The header is a company standard, unfortunately. 3.I like that idea! 4. Also something I would like to try. 5. Maybe the best suggestion yet. 6. I do not understand what you mean by that one. Half of these suggestions are very very interesting! Thanks!
    – jumps4fun
    Mar 14, 2016 at 14:59
2

I don't believe you can create something that is beautiful or functional with the requirements of a calendar view for 6 months (day by day) with 15+ different event types.

What you should do is use what you know about the use cases to build functional interfaces to the larger event database.

For example, if you want to make sure that when planning releases they don't overlap you should do a few things probably:

  1. Warn people when they try to schedule a release that overlaps with another one in the 'create release' interface
  2. Trigger notifications to the appropriate release owners (and overall admin) when a release is scheduled that overlaps
  3. Have a dashboard that outlines releases that overlap in the near term

You should test this with the users of the system and start building small pieces to make sure it helps their day-to-day. If you are still seeing people using the huge list you are probably missing a needed scenario.

Since this is likely a dashboard for the different users of the system you may want to read through the Information Dashboard Design by O'Reilly. It is an older book, but really stresses how you create interfaces that are useful rather than just beautiful/colorful or contain every little piece of information possible.

Improve this answer
1
  • I believe you might be right about your first statement, but at least I'm going to make it as good as I can. The other things you mention is unfortunately not relevant to me at this point, as most of them are already in place, and I still need the half year view to look as good as possible. Nice little notice about the Dashboard Design book though! I'll have a look at it!
    – jumps4fun
    Mar 14, 2016 at 15:02
2

As pointed out by Kit Grose, the cells should not be entirely filled with the color. In addition to the idea of the square or circle, I often use a stripe along one side. Here's an example from Mingle, which is an ALM tool, but the same idea would work for a calendar.

enter image description here

Improve this answer
0
1

Oh, you have many different strategies at your disposal, but it depends what is your end goal.

I will throw some of ideas, grouped by different types of implementation, and problem they address. It might not help at all, or it might give you some new ideas.

Frequency

Event grouping

You can use same color for every event, but when the events stack, you can use lighter colors (heat map kind of thing) and with that it would be really easy to spot out days with 50 events VS normal days with 2-3.

Alternative representation of events

There are some calendars that show events in minimal manner, see this link, first image.

The number of events during the day is represented by the line length. Some other calendars use dots, since its easier to count them. (.... vs ----)

Filtering

Maybe instead of filtering by people you can start filtering by teams, or some other meaningful unit (you might already do that, but its hard to tell from your screenshot)

Colors

If you want safe colors, go to http://colorbrewer2.org/ , the only downside is that the maximum colors you can pick is 12, but that is also expected, you can't have 300 easily distinguishable colors.

Wild Stuff - Fisheye view

Now, disclaimer, those two examples are UGLY :D

But, you get the idea, not ALL parts of the canvas are of same importance, maybe you could use this to have functionality that you can select one column (month?) or single cell, and expand it bit more, shrink others and show more and detailed data in that column or cell.

Improve this answer
1
  • Thanks. Heat map will not be relevant in this case, unfortunately, as it is the specific events, not the amount of events that is important. Likewise, the alternative representation of events won't work, as I need to be able to print the calendar, and the users also need to be able to get a complete overview. They can do that as it is now, and the functionality of it is working as intended, it is just fairly ugly to look at. Thanks for all the examples anyway. None of them are applicable, but it makes me more convinced that the requirements, not my design, is the main problem of my application
    – jumps4fun
    Mar 14, 2016 at 15:07
0

Depending on how the users use your UI, it might be useful for them, and also embellish the view, to display all of them with a transparent background and allow the user to highlight the departments she is interested in by clicking toggle buttons with the department's name and color.
This could be useful only if the users want to check one or two departments at a time.

Improve this answer
3
  • Already implemented, but a few people still need all elements visible at all times.
    – jumps4fun
    Mar 16, 2016 at 11:38
  • @KjetilNordin you might make those who need to see it all happy by providing an additional "show all" button. And maybe happier by remembering the selection across sessions.
    – Juan Lanus
    Mar 17, 2016 at 15:31
  • Already implemented, @JuanLanus. The layout when showing all, is the issue.
    – jumps4fun
    Mar 17, 2016 at 16:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.