There’s a crucial part of interface design that vexes me and it’s iconography, the discipline of crafting highly communicative, aesthetically efficient pictorial symbols in miniature. It takes a special combination of artistry, patience and visual economy in order to get it right, and I’m in awe of everyone who has this skill. (I’ll say also that there are many folks who are competent at this art form, but exceedingly few who are truly good at it.)
What confounds me about iconography, though, is only partly the fact that I’m astoundingly no good at it. It’s also the idea that the idiom of icons, at least in its current state, stands at a polar opposite to my own sensibility. To be specific: the majority of commonly accepted and commercially functional icons in use today are visually literal — they represent objects or combinations of objects, even if they are intended to stand in for abstract concepts — and they’re almost exclusively dimensional.
By contrast, I like incredibly abstract and minimal graphical elements. For me, a simple, one-pixel straight line is practically a revival of the Rococo style. If I had my way, the only pictorial components of my design work would be the pictures: photographs or illustrations. Everything else would be simple and elementally native to the browser, or whatever other rendering mechanism I’m working with. Which is to say, you’d only ever see lines and boxes — and flat ones at that. No shading, please, and no three-dimensional modeling.
I Can᾿t Icon
Still, it’s hard to get around some very fundamental truths of early 21st Century interaction design. Particularly the idea that usability is a criterion that will not be ignored. In this Alertbox-fueled orthodoxy, the fiat of usability says that icons intended to cue actions must be pictorially unambiguous and spatially representational. An arrow needs to look exactly like an arrow, and it also needs to be beveled, shaded and/or evocative of a physical object from the real world.
During business hours, when I’m charged with providing design services in as commercially viable a manner as possible, I accept this premise. A button’s gotta shout out “I’m a button and I will do exactly what you think I will do when you click on me so why not click on me!” loudly and unabashedly to a user. And if it needs a little shading to help it do so, I can’t justifiably ignore that mandate simply because it offends my own artsy-fartsy rule book. This is the Web.
About Those Icons You See…
On the other hand, I’m free to flaunt those rules — or more accurately, to wrestle with them more fitfully — in my personal projects. Which explains the strangely out-of-place, aesthetically inconsistent arrow and plus-sign icons that you see accompanying each post at the Subtraction.com home page. They’re weird, I know; they don’t belong there. I created them a long time ago in a first draft of this current design with the thought that I’d one day replace them with something more aesthetically and usably satisfying. Never happened.
Which is my point. In the post-Aqua world where dimensionality, shading and pictorial space are mainstays of iconography, what’s a minimalist, wannabe retro-Modernist like myself to do? Short of harkening back to the nostalgia of the Susan Kare school of pixelated icons, if there’s a style of icons out there that is visually flat and pictorially restrained while also being impeccably usable, I haven’t seen it yet.
+
Wow. Absolutely well written 😉 I can’t icon either.
Yes, I totally agree with you, I’ve been thinking the same thing for a while now.
The icons in the OsX dock is quite a pain for my eyes. There should be a Flat option to make all these icons calm down a bit. And the 10.5 dock is even more 3D-like, oh my god.
I wish I had an app with a nice 2D/2 colors icon, it would stay in the dock whatever the use of it I make.
It is kinda strange that a company so much focused on the design of its products (on a very ’60s-german-modernist style, as we all know) can be so common when it’s about the design of the interface.
But the big wheel keeps on turning, vive Susan Kare, vive la reine!
What about the Chameleon icons? Are they suitably minimalist?
The CS3 icons aren’t quite what you’re looking for but they are more in that direction than most OSX icons. I’ve been tempted on more than one occasion to mimic the look and expand it out to all the others in my dock.
An interesting point about icons is that in order for them to be useful to people a degree of familiarity is required. Users have to learn what an icon is for, at which point it becomes a useful (and space saving) pictorial cue. If you look at the icons in your Mac’s dock most of them mean absolutely nothing when seen for the first time. For this reason icons on websites have to be treated with care – often a text link can be a lot more useful and explicit.
Pseudo 3D nonsense online is all to often a crutch to hide poor basic design skills.
Wasn’t it Susan Kare who took the two colour Windows 3.1 buttons and added shades of grey?
Anyway, who needs buttons? You can always use underlined (blue) links!
I never had any confusion over whether your “Continue Reading” and “Add Remarks” buttons are buttons. The thing that confused me when I came to this site is that the buttons reminded me very strongly of buttons made in Flash. I expected some kind of Flash thing to happen/pop up when I clicked on them. I’m probably subconsciously remembering some often-visited Flash-based site with similar buttons, but I can’t think what site that might be at the moment. Now that I think about it, I’m probably thinking of some video player, because the “Continue Reading” button looks like a Play button.
Pretty much in the same boat. I’ve been searching for a designer that specializes in icon design for the longest time so I could contract them out for big projects.
Something about being constrained to 16×16 kind of cripples me. Do you reccomend any icon designers or shops that specialize in it?
Khoi,I think you missed a set of functional icons that fit your desired aesthetic, and it’s really easy to miss because it works so well: the NYC subway icons. They have become such a recognizable part of so many lives that they fade into obscurity. It’s an ironic fate but an appropriate one as well: they were designed to be understood at a glance, but not so much that they stand out or command a strong position in the visual hierarchy of their environment.
To prove my point, I’ll bashfully admit that when I first found my way to Subtraction, I thought it was a subway-themed blog. My brain has been trained to associate the prefix “Sub” set in Helvetica Bold (or Arial Bold) with a subway station, and ignores any letters following the prefix. And I don’t live in New York or travel to it very frequently.
Sean: I don’t mean to say that there are no icons anywhere that map to my personal aesthetic taste. Rather that in Web design/interface design, I’ve been hard pressed to find iconography that I like. You’re absolutely right, the icons developed for the New York City Subway are very functional and attractive.
As George Smith mentioned, Dan Cederholm’s Chameleon icons are probably the closest I’ve seen to to what you’re describing.
Have you considered using textual elements in lieu of icons? Although I won’t claim to have an aesthetic as advanced as yours, I do think it’s in the same direction as yours, and I’ve used the ╗ and + as placeholder icons. Frequently, I decide to leave them in.
I know they don’t carry the same visual weight or power as illustrated figures, but they do maintain the vernacular of HTMinimaLism, and, with judicious CSS, can have altered states (hover et al.) that set them apart nicely.
Scott: Dan’s icons are nice, for sure, but they’re not my taste, really. They’re too close to the pixelated aesthetic that ruled iconography a decade ago. I admit have a retro sensibility but I’d rather be true to the medium, which allows for much smoother visual details without succumbing to the pixel grid. Yes, in this case, I want to go off the grid.
Charlie: I fully advocate using text where text makes sense and icons may be superfluous. Still, there are some times when a visual cue — an icon — is in fact the most appropriate solution. It’s not really possible to get by completely without icons, I don’t think, though one can come close with effort.
@ Charlie + Khoi : we’ve tried using text-only action elements at our new music licensing site, but have been dealing with many international (potential) clients who end up confused.
I say some universal symbols are often necessary, and we’re now incorporating flat (non-drop-shadow!) icons in the 2.0 revision of BurstLabs.com – should be up in the next month or so.
Hi Khoi,
It’s always hard to find the right style in icons, one thing I’m totally sure of however is: for max. usabilty a totally realistic depiction of a real-world item is rarely the best choice..
We always try to find middle ground between simplicity, association with real-world objects, scalabilty and recognitability of the icon (as in, letting the end-user find it quickly when it’s amongst its peers in a toolbar).
I’ve posted an example of where this approach is taking us (and how we weigh each of those aspects) over here.
Cheers,
Dirk
What about the Dresden sets?:
Dresden
Dresden Buzz
I share your minimal sensibility when it comes to icons. I think these come close to the “nearly flat but still interesting and modern” look that I personally am after.
I believe icons should be created to match the interface for a more integrated look. Obviously this is not possible most of the time because of resource issues. I guess you could think of icons as fonts in that you try to find the best fit for your design. With all icons there’s a learning curve. Some easier than others. You have to decide how important the look is.
The Subtraction icons look integrated to me. I wouldn’t change a thing. What would Josef MЧller-Brockmann do?
“An arrow needs to look exactly like an arrow, and it also needs to be bevelled, shaded and/or evocative of a physical object from the real world”
What exactly does a physical arrow look like — aren’t they exclusive to the realm of 2D? (Extrusions don’t count)
Looking at your Subtraction continue icon, the icon itself is flat – however the button its on is bevelled.
In this case the icons need not be shiny, bevelled and real-world; a flat arrow and cross get across the idea much better than any physical representation could.
Buttons do need to look physical though; this is because people recognise buttons by their buttony raised look, they need to feel as though they can be pressed.
Unfortunately not all icons can be flat – If you had an icon for mobile phones for example, a realistic representation would work much better than a flat iconic form. The art is in getting something to look real, yet in a restrained style that fits with the surroundings.
I also thought of the NYC subway icons (letters and numbers in circles) as ideally minimal but still visually distinct from all other typographic elements on a page.
And therein, I think, is your objective: to create something that is harmonious with your type but does not look quite like type. When a button is next to type, it should feel like the interactive, data-processing part of the page.
An example of what I mean by not-quite-type is Tufte’s sparklines.
Anyway, maybe articulating the challenge in that way will help.
The closest thing on this page that I see to being a solution to this problem is your single-letter captcha graphic. The almost-but-not-black dark gray of it makes it just enough different from body texts without being so different that it looks like an alien design element.
Of course, this is a non-icon based solution, really just a hair away from being just another blue-underline text link. But I think that’s okay: the only design element in your site that isn’t essentially typographic, besides the buttons you’re not happy with, is the Subtraction logo. If you really want to use icons and not just text treatments, you’re going to need (I think) to reconsider your whole art direction pretty fundamentally.
That all being said, nothing about the UI elements has ever bothered me here. The comment text box’s use of the unstyled OS or browser-standard scrollbar is far more egregious an offense to the Subtraction aesthetic than any of your custom stuff, and really even that is no big deal.
Check out the interface on Sugar, the OS running the OLPC XO laptops. The icons, and interface in general, is a really great exercise in visual economy. Some folks think it looks boring, but I fired it up in VMWare Fusion and it’s really quite beautiful.
A quick Flickr search found this.
I wrote about my icons a while ago. There’s one set that, I think, looks like what you seem to be talking about: second illustration.
In fact, it was one of your posts that inspired mine.
Cheers!
-systemsboy
It’s not the web, but it is interesting to note that in Safari and iTunes where the “button” aesthetic of the buttons is emphasized to the point that you have full borders and shading and gradients, the actual icons have gone to very-slight-embossed-but-mostly-flat silhouettes.
“slighty”, I mean
Ironically, those two icons, where you have made concessions of drop-shadows and gradients, that “shout out “I’m a button””, are not actually buttons at all…
I love making icons. I spent years in the e-learning industry where creating icons to represent UI concepts and to distinguish between kinds of information and activities was de rigeur. I think it’s a sensibility you can develop, but it’s similar to designing type in that you have to imagine the whole icon set in its entirety before you start, or like comic book illustration where you have to envision the whole *universe* the icons occupy, which takes practice but is ultimately rewarding.
Still, I don’t think Subtraction needs any icons. I enjoy it that it’s a place of lines, boxes and type.
(Oh, and you might want to change the captcha font – is that an ‘I’ or an ‘l’ I see?)
Khoi, you say the ‘+’ are an accident, something you never got round to sorting out… But your logo itself is a central full plus sign and half an S as an aside! I propose that it was intentional from the beginning — crucial (hahaha get it? crucial?) — and is perhaps a play on the title of your blog?
Interface elements that are reminiscent of physical objects are called ‘metaphors.’ The desktop is a metaphor for a real desktop, the window is (well, was, not so much anymore) a metaphor for a document on that desktop. This extends to icons, as well; icons or buttons that are evocative of their purpose are likely to be more successful than those that are not. The ‘junk mail’ folder in OS X’s Mail application is a great example of this, at least for me; I happen to keep my recycling (including junk mail) in paper grocery bags, so I immediately grasp (without looking at the label) that it’s a junk mail folder. If the icon were less defined, it would probably be a more opaque metaphor.
Generally, metaphors help orient people in an unfamiliar user interface. I think it’s a bit unfair to say that icons that mimic physical objects are bad design. Like all things in design, there are responsible uses for metaphorical icons and there are irresponsible uses.
Nick: I agree, it would be unfair to say that icons that mimic physical objects are bad design. That’s why I didn’t say it. You did.
Great post! As visually rich as OS X is, I’ve always felt like it was a bit over-the-top. I’ve never used Vista, but from what I’ve read and the screenshots I’ve seen, it’s a fairly blatant rip-off of OS X. Wouldn’t it have been revolutionary if Windows decided to go completely in the other direction and created a minimal-ly beautiful interface?
Great post! As visually rich as OS X is, I’ve always felt like it was a bit over-the-top. I’ve never used Vista, but from what I’ve read and the screenshots I’ve seen, it’s a fairly blatant rip-off of OS X. Wouldn’t it have been revolutionary if Windows decided to go completely in the other direction and created a minimal-ly beautiful interface?
Apologies, but I was inferring from the general tone of your post that you thought that iconography, particularly dimensional iconography, was a poor (or at least flawed) design choice. Particularly, I was responding to,
“…It’s also the idea that the idiom of icons, at least in its current state, stands at a polar opposite to my own sensibility. To be specific: the majority of commonly accepted and commercially functional icons in use today are visually literal — they represent objects or combinations of objects, even if they are intended to stand in for abstract concepts — and they’re almost exclusively dimensional.
“…If I had my way, the only pictorial components of my design work would be the pictures: photographs or illustrations. …No shading, please, and no three-dimensional modeling.”
That seems to indicate that, from an artistic standpoint, you don’t like using real-world objects as metaphors for abstract concepts in human-computer interactions. I am of the opposite opinion; if a real-world object provides a clear metaphor for interacting with a complex piece of software, developing a software representation of that metaphor is among the best pracitices a interface designer can engage in. Of course, sometimes these concepts fall flat on their face; I have little faith in the usability of the ‘drawer’ concept in OS X, for instance.
I am just a design student, so bare with me if what I’m saying sounds dumb, but:
Can’t all agree that the use of explicit iconography is strictly necessary sometimes? When,for example, your target audience is such that a lack of a more literal form of abstraction makes the design fail. Let me put it this way: If I sat my dad in front of subtraction, it would probably take him a good 15 minutes to understand what’s going on. Now, I personally think this design is brilliant, but the lack of more in-your-face, click-here kind of graphics certainly don’t hurt this site at all. He would be looking for underlined words to click on (preferably Times New Roman and blue).
My dad won’t be coming to this site anytime soon.
The way I see it, it’s the target audience that drives the goal, which in turn drives the design, which drives all elements in it. Even it it looks ‘ugly’ to the designer himself.
I also suck at icons too.
Just an FYI, Khoi, someone forgot to close their link tag and it’s throwing off the meticulous design of this page.
“…a simple, one-pixel straight line is practically a revival of the Rococo style”.
How, exactly?
Omar: thanks, I think I’ve fixed it.
Mat: I was exaggerating for effect.
The fascinating thing about your very button-looking buttons is that they infact aren’t buttons – I mean nothing happens when I click them, I have to click the text.
Regarding Aqua I think it’s the way to go for OS X as long as it has a windowed gui. Shadows and a perceived 3dimensionality really does help when dealing with objects that you supposedly can stack on top of each other. However, just getting rid of the windows all together would be a much better way to go.
Poppi by Emigre is the best Modernist-style icon set I’ve seen:
Poppi
http://emigre.com/EF.php?fid=198
For those who also like clean lines and simple designs, you may enjoy the NonStep minimalistic desktop theme.