Clear Design: Icons, part two
by Ben Thompson
Creative Director/VP, The Lux Group

Although the icon is capable of doing a great deal of heavy lifting in an interface, the more complex the action or concept it represents is, the less effective it becomes. Moreover, the designer’s skill in representing and rendering the concept also affects its usefulness.

Let’s use the ‘delete’ function as an example. If your ‘delete’ icon is a button with a big, clear ‘X’ on it, it will work as an excellent indicator of what will happen if you hit that button. Using the program or the website becomes easy—just look for the big ‘X’ to delete a file. Binary concepts like stop and go tend to be the easiest to illustrate, and by extension, the most intuitive to use.

Now say that you work as a designer for the company across the road that makes a competing interface. One spec requirement is a ‘delete’ button, and what could be clearer than a big ‘X’? Nothing, except that your competitor’s product already has a big ‘X’. Moreover, perhaps someone on the marketing team thinks that an ‘X’ is too negative, and suggests a wastebasket. Wastebasket renderings follow…

Icon design is one of those things (like logo design) that look easy, but which challenges the illustration and technical skills of even the best designers. When an icon falls short of indicating its function to the user, it decreases the effectiveness and functionality of the interface. The problem is that with a generation of users who have grown up with GUIs, many people assume that their project needs icon-based controls, rather than a simple and easy to use text-based solution.

Back to our wastebasket—after going through rounds of design revisions (What kind of wastebasket? Wire? Does that look too much like a bucket? What does a bucket mean to the user?) the team has decided that a tiny picture of a wastebasket is not clear enough, and that it will be more clear if a little ‘X’ is included in the corner. Each step that’s been taken from the easily recognizable and easily understood has made it more difficult for the end user to use the interface.

Here’s the upshot—when you depart from words into the realm of concept, you run the risk of compromising clarity. When you’re working with your web designer (or designers, when you’re working with your clients) it’s always worth a moment to ask the stakeholders why an illustrative icon is being used, rather than plain language. In the absence of issues involving translation into other languages, the most effective user design solution can be good old legible text.

As someone who’s spent time art directing designers working on creating a simple icon illustration for a complex concept like “litigation,” I can confidently say that sometimes the client’s design money is better spent elsewhere, and it’s the job of a good web agency to make that known early on in a project.