Designing accessible icons (Part 2 of 2)

This is part two of two looking at creating accessible and usable icons. If you haven’t yet, view part 1: Designing accessible icons (Part 1 of 2). If you remember back, I set myself a short brief for creating icons for our Content Management System, Defacto. They had to be Accessible, Web-based and designed for our CMS. In the first part, we looked at sensory characteristics and cultural differences that can affect an icon design. Today we’ll be looking at the more visual design aspect of the brief, designing web based icons.

Web based icons

Size

These icons are designed for on screen, at very small sizes. The vast majority of icons for our CMS are 22×22 pixels. While it’ll be great to produce art-quality high-resolution icons, they’re going to be scaled down to tiny sizes for screen use. They’re functional, not to be used as artwork anywhere (Although icons in frames do look nice). As they’re for screen, this involves some serious pixel pushing to ensure everything lines up to the pixel base grid. Dave Shea has a brief but great explanation of this: Mezzoblue Icon Design: Anti-Aliasing

Shape

The human eye is great at differentiating shapes, but these icons will be very small. So we’re using bold recognisable shapes where possible. Everyone recognises a file, folder, search etc – so why challenge it? Sometimes icons can be over-styled, leading to confusion. Over confusing shape might take away from conventions that people are used to. An example of shape being used incorrectly can be seen in Apple’s UI past… Way back in 1997 Apple released Mac OS 8, with a new stylised set of icons. In particular there was a new isometric folder design. It worked well with the style, and did the job at small sizes. However, this isometric theme was carried forward into Mac OS X, which used highly polished photo-realistic icons. Here, they shape become lost amongst the other tiny details when scaled down to small sizes. Thankfully this was fixed in Mac OS 10.5 (Leopard). Although the old icon looks great, the newer one conforms to much more recognisable shape, especially at small sizes.

Colour

Using colour is great way to suggest different meaning in an icon, for example red being something of caution (like deletion), but it also helps with recognition of the icon. A quick tester – in the set of icons below find the red alert icon: Perhaps a cheap example as red stands out to those with full colour vision, but if you were looking for the red delete button the colour alone helps you find the icon. In this instance your brain is doing what’s known as a feature-search – scanning the icons by either colour or shape. This is why colour and shape are so important; you ignore all of the details of the icon and quickly scan on these big identifiers. Boxes and Arrows have a fantastic write up of the science behind this if you want more information that you thought possible: Boxes and Arrows: Icon Analysis

Consistency

If you’re making a family of icons they need to be related, else your icons may look out of place, cheapening the design or leading a user to mistrust your design. This is getting into the actual style and design of the icon itself, not just the concept. So this means the viewing angle, shadows, light and general graphic style should be consistent. Microsoft, Apple and certain Linux distributions provide comprehensive guidelines on how to create consistent icons. While they have the luxury and the budget to create these extensive guidelines most of us do not (Although the Linux Tango project is maintained in an awesome open source collaborative way!). Such detail is great when passing on the guidelines for other designers to work off, but even when working in a smaller team it’s good to set some basic ground rules for your icons for consistencies sake.

Putting it all together

So there’s some top level guidance on how I put our icons together. When working on any icon in the family I had to keep all of these considerations fresh in my mind:

• Culture: Is the icon understood by everyone, regardless of culture?
• Size: Will it work at such small sizes? Will fine details add or detract?
• Shape: Is the shape familiar? Are the icons sufficiently different to aid scanning?
• Colour: Are colours used properly? For instance, am I only using red for dangerous operations such as deletion?
• Consistency: Are all icons representative of a family? Do they match in lighting? Is the viewpoint consistent? Are duplicated features (ie: move file versus add file) consistent?

Ok, so it might sounds like a lot just for icons, but in reality all you need is a grasp of these points, then you let your creative brain fill in the blanks 😉 Happy icon creating!