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 Managent 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 22x22 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… Folder icons from Apple's operating systems through the agesWay 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: A collection of icons with one lone red icon amongst them 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

Example from Apple's interface guidelines showing how perspective should be applied to iconsIf 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!

null

Is your website accessible?

A large proportion of users cannot gain access to the information and services the Web provides and this represents a dichotomy. The Web was designed to provide universal access to information, however many web sites are inaccessible to people with disabilities. This paper examines web accessibility and provides simple methods for checking a site’s accessibility.

Read blog article
null

How to configure Jaws to optimise the UX

By understanding the ways in which Jaws can be configured, it is possible to easily tailor the Jaws environment to suit your needs. This can make the user experience both more efficient and more enjoyable.

Read blog article
null

When to spend your usability budget?

This article looks at the different stages where usability budget it often spent and offers advice as to which is the most effective.

Read blog article
null

How to configure Jaws voice settings

This is the second paper in the Nomensa Insight series. It looks at one of the most vital areas of the Jaws For Windows (JFW) screen reader software, the Voice Settings. It will also introduce one of Jaws’ most powerful features, the ability to configure Jaws to behave differently in different applications.

Read more

Let's work together

We believe that creating groundbreaking experiences that make measurable differences in the way people live takes a special type of collaboration. Our team designs impactful experiences by leaning on the variety of capabilities and expertise within Nomensa to ensure our solution is bespoke to your needs. We believe collaboration is key, let’s work together.

Contact us