KPI Icons neatly designed for colour blindness

I was talking with one of our customers about SharePoint branding the other day. They’ve got some neat icons for displaying the status of things. However, the guy I was talking to wasn’t keen on them as they were the same colour (although their shape differs). This sort of led around to a discussion of the use of colour (or ‘color’) in web development.

One of my ‘neat tools to have around’ is the Color Contrast Analyzer (which I think you can get here -I must confess, I’m not sure who exactly wrote it or where exactly you’re supposed to get it from). This little tool lets you check the contrast of colour schemes so that your users will be able to use the site, even if they’re colour blind. Fair enough. The really exciting bit, though, is the ability to take screenshots and then simulate the different types of colour blindness.

I used this to look at the SharePoint KPI icons. Similar icons to this are available in Excel 2007 for conditional formatting. I thought this was pretty interesting. For a start, it turns out that colour blindness is more complicated that just “red-green-blue” colour blindness, not least because the photoreceptors for the different colours overlap in their response to different frequencies of light. Still, this tool give a good view of the effects of the main conditions. For a full description, read this article at Wikipedia.

KPI - Normal
Normal
KPI - Greyscale
GreyScale
KPI - Deuteranopia (Red-Green Colour Blindness)
Deuteranopia (Red-Green Colour Blindness)
KPI - Protanopia (Different Form of Red-Green Colour Blindness)
Protanopia (Different Form of Red-Green Colour Blindness)
KPI - Tritanopia (Blue-Yellow Colour Blindness)
Tritanopia (Blue-Yellow Colour Blindness)

What this shows is pretty obvious – that the icons from red and green are pretty similar for red-green types of colour blindness (what a surprise), but that the shape of the icons still gives a good visual cue to the state of the KPI. Given that (according to Wikipedia) 7-10% of men are Red-green colour blind, this is important. It’s worth noting that women are very rarely colour blind, and that this probably explains my Dad’s dress sense and my Mum’s opinions on it…

Advertisements
KPI Icons neatly designed for colour blindness

TableLayoutPanel – doesn't autosize or autoscroll correctly

I’ve been doing some Windows forms programming lately – not really my thing, but needs must. I’ve got an application which needs to dynamically create a form at run time, and so I’m using a System.Windows.Forms.TableLayoutPanel.

All the controls contained by the TableLayoutPanel resize automatically, and the TableLayoutPanel automatically provides scrollbars. “Great!”, I thought, “This will deal with large forms nicely.” Wrong!

The problem is when form has too many fields – it becomes deeper than the display area of the TableLayoutPanel. This is fine – the TableLayoutPanel should automatically add a vertical scrollbar, and adjust the size of the controls it contains to fit in the smaller area. Except it doesn’t. What I actually get is this:

Problems with TableLayoutPanel

Notice that I’ve got a vertical scrollbar, but it hasn’t resized the child components. This, they overlap some of the fields – and I now have a nice horizontal scrollbar. Arse.

I eventually found that others had had this problem and told Microsoft about it. However, they’ve decided not to fix it. Thanks Microsoft, that cost me an hour and half – it’d be wise to fix it. I found the answer from the same link – add a vertical scrollbar’s width as padding on the right of the TableLayoutPanel.

TableLayoutPanel – doesn't autosize or autoscroll correctly

Nice list of fonts

Nice fonts here. Now if there were some way to push them onto the client…

…actually, why the hell isn’t there? A truetype font is, what, 100-200k? Why aren’t these downloaded to some form of isolated storage, and used for display purposes in the browser. You can even, oh, I don’t know, have a font cache, so you don’t have to download them repeatedly. Perhaps some sort of signing mechanism to avoid version problems.

Comments from my old blog:

Yes – very good list. Myriad is a great font – it manages to strike a balance between being pretty, and practical too. Fonts are one of those areas where I benefit from having a designer for a brother, so was exposed to lots of barracking when I was younger and playing with DTP software… “make the line height 120%”, “make the body text smaller”, “no more than 2 fonts on a page!” and other rules of thumb…

By Jonathan at 18:06:08 Tuesday 5th June 2007

Nice list of fonts

Graphics and Developers

Coding Horror has blogged about developers needing to know graphics programs, and I agree entirely. Jeff’s right, we’re not designers, and never will be (I don’t even wear glasses, let alone ‘cool’ ones). Don’t try and learn how to build beautiful websites if you’re a developer – either, you’re gifted and you already can, or there is simply too much learning involved.

But we can build ‘fair’ sites, and rough mock ups. Every site doesn’t have to be a work of art, just as every ceiling doesn’t have to be the Sistine chapel. As developers, we should make an effort to not build websites that look crap.

And if you need to build the Sistine chapel, remember it’s a team effort. You can build the structure – and get a specialist to make the ceiling pretty.

Link to some tutorials Jeff provided (note to self – take a look)

Graphics and Developers

What the hell are the System.Drawing.Color predefined Colors?

The .NET framework has a number of predefined colours in the System.Drawing.Color class. You ‘d think this would be easy to iterate over – after all, there’s quite a lot of them. I can see that that would be useful for, say, drawing palettes.

Well it ain’t easy. They’re not an enumeration, so you can’t iterate over them. Instead, to get a list of the colours, you’ve got to do something like:

List<Color> colorList = new List<Color>();

Array colorsArray = Enum.GetValues(typeof(KnownColor));
KnownColor[] allKnownColors = new KnownColor[colorsArray.Length];
Array.Copy(colorsArray, allKnownColors, colorsArray.Length);

foreach (KnownColor c in allKnownColors) {
Color col = Color.FromKnownColor(c);
if(( col.IsSystemColor == false) && (col.A > 0)) {
colorList.Add(col);
}
}
That’s a lot of work for something obvious like iterating over colours!

What the hell are the System.Drawing.Color predefined Colors?