2

I had some problem deciding if this should go here or in Graphic Design site. I hope I got it right!

So I'm redesigning a schedule application. It looks something like this: schedule example

Each activity has a different color.

The customer wants to integrate it with another product which mostly uses grayscale and only has colors for alarms and such.

Does anybody have a good idea how to approach this? I was thinking of using different icons for the different activities but sometimes the activities are really short and then the icon wouldn't fit inside the block.

There is also a lot of different activities (around 15-20) that you want to distinguish.

Any help would be much appreciated!

*Edit: A good point by @dan1111, this is a desktop application so it's possible to use tooltips and such.

  • Could you provide a mockup of your idea? This would make things easier. – msp Oct 10 '14 at 9:47
  • What I did was make a more modern version of the existing application, still using different colors for the different activities. Later on they told me that it would be good if it didn't use many colors. So, my design is basically the same as the one above (although that one is of course very simplified). – bjornlof Oct 10 '14 at 11:27
  • I have to say, other than having an organisational subdivision axis (here place, often task or package) and a time axis, this is not very "gantt like". – O. R. Mapper Oct 10 '14 at 19:12
2

Remember that "color blindness" is not the complete absence of color. That is called Achromatopsia and it is only seen in 1 in every 33,000 people. What humans typically suffer from is a deficiency in the development of the cones in the eyes, making it difficult to decipher differences in colors such as red and green, or blue and green.

As mentioned above, patterns are a great way to separate different items visually. However, too many patterns will create a lot of noise. This noise has the potential to negatively impact the user experience by making the comprehension time longer, rather than making it shorter. A good rule of thumb is that if you consider the elements to have "too much color" in an area, it would also be "too many patterns".

This being said, of course, we're still left trying to decide how to make this EASIER to understand (IE: Faster to comprehend). So... let's start by figuring out exactly what we need.

1. Multiple, sizeable areas to denote different activities.

2. Visible separation of these activities so users can scan and comprehend their subject / meaning within 800MS (.8 seconds).

Ok, well let's consider these areas will probably be rectangular in shape. Also, we CAN have tool-tips as it is a desktop application, however; it's a realistic expectation that tool-tips or other added "features" are erroneous items and that the information could be better delivered in another way.

Ok, with shape in mind it's easier to employ the Gestalt Principles in order to better group the activities to make it easy to mentally scan the information. Ok, understanding that, let's see what we can do with these clusters of information.

  • Utilize contrast to denote different activities (useful whether greyscale or not). Contrast should have a 15% increase or decrease in brightness between items. This is because if it is less than 10% difference in brightness, those with color deficiencies will have a more difficult time scanning.
  • Utilize spacing to denote different activities. This also gives items more breathing room to help it look cleaner (if done correctly). This may be more difficult to utilize since you have columns of time to show which time the activity occurs.
  • Law of Common Fate may be very helpful here. You may be able to utilize this psychology principle to help denote either the time of which the activity occurs or "Place 1", "Place 2" etc as you have it on your current mock up. (IE: You can have the groupings create perceived lines, instead of actually "showing" lines here.)

I could go on forever but instead, I'll close with a few more items to keep in mind as you wireframe or mock up your new version:

The Law of Good Gestalt and Law of Past Experience are very helpful. IE: Take out anything that doesn't HAVE to be there or that is over complicated (IE: Tooltips). Also, look at pre-existing items in every day life that have the same function and figure out WHY they work and how people utilize them effectively (or why they AREN'T effective).

Lastly, if your new project doesn't work in greyscale it won't work in color. I hear a lot of push back against that guideline but it is used by the best logo designers (which is where I learned it) and I have successfully utilized it in Level Design (for 16-bit games), logo creation, pixel art and web design. I've never had that simple guideline not hold true.

Anyway, best of luck in your endeavor and I hope this answer was helpful.

  • Thanks for a thorough answer. I'll definitely look more into the gestalt principles. It might be hard to use different contrasts here, since there so many different activities. Maybe I'll try to see if it's possible to group the activities and have different contrast for different groups. – bjornlof Oct 14 '14 at 8:48
  • No problem @bjornlof :) Hope it was helpful. I think the group thing you mentioned may be a good solution. Perhaps along with that, some can be light-on-dark and others dark-on-light. That would be up to you. Best of luck to you! – AzKai Nov 4 '14 at 13:41
3

To start with it's a good idea not to solely rely upon colors (because of color blindness).

  • Colors can maybe still be kept, if they in the gray scale will result in different gray shades - which can help the user to scan the area.
  • Selecting Activity 1 could highlight all Activity 1 areas in the schedule.
  • Add an abbreviation of what activity each block is.
  • Experiment with patterns. Check out how Stat Counter shows "Others" with a dotted line. No color is needed for that.
  • I was trying to use color blindness "safe colors", but it was a bit problematic since there are so many different activities. Then they told me that they don't want colors at all. Or rather, colors should only be used to show alarms, errors and such (e.g a schedule conflict). Selecting to highlight is a good idea but you want to get a good overview without having to click anything. Abbreviations might work, I'll try to make something of it... I was thinking of using patterns, but it might be tricky to find 15 different good patterns that are distinguishable. – bjornlof Oct 10 '14 at 11:32
1

Colors are not going to be a good way to distinguish 15-20 activities, period. There are too many, and colors will look similar.

Besides the very good points made by Henrik Ekblom,:

  • I would display the activity name or the first part of it whenever there is room.
  • If there is a tooltip feature such as mouse-over (not clear if this is a desktop application), also use that to display the activity name.
  • Letting the user filter which activities are shown may be useful.
  • You could offer a view that changes the scale of the time axis, so that events are wider, and more of them have room for a label.
  • I agree that colors will make it hard to distinguish all the different activities, it doesn't look good either. Using name when possible and abbreviations otherwise is a good idea. It's a desktop application so tooltips is not a bad idea. Filters and scaling are nice features (which will probably be implemented) but they don't really help when you want a overview of all the activities. – bjornlof Oct 10 '14 at 11:58
  • +1 for displaying the name. I wrote that as an answer myself before I noticed that you mentioned it as your first point. – Nzall Oct 10 '14 at 12:15
1

You can use hashing, for example :

enter image description here

  • 3
    Would maybe work with only a few different activities but since there are so many of them I think it would be difficult. – bjornlof Oct 10 '14 at 12:02
  • 2
    This approach will work for at least the 5 shown in the Question's example. You can use wavy lines, bricks and other patterns. In the old days computers such as the Lisa, Macintosh, and NeXT lacked color and so made frequent use of this technique. – Basil Bourque Oct 10 '14 at 17:32
0

Here are some suggestions I leaned for designing a scheduling system based off of a gantt chart for a large client in St. Louis.

Modes - possibly a drop down selector

  • A everything mode because the user wants to see items in context with one another. If your icons do not fit then I suggest using a hover state for the smaller times.
  • Modes that allow the use to see one or more of the alarms or actives. For example you may make the other gantt items appear greyed out while the highlighted items become more apparent.

Depending on the other activities and the types of alerts you may want to distinguish a hierarchy of priority. This would allow you to develop a graphical theme that makes the most important actionable items stand out to the user.

  • 1
    Good idea using different modes. – bjornlof Oct 14 '14 at 8:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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