I recently read a Layer Vault post regarding progressive reduction. I love this concept, especially since I've always pushed to use "icon only" buttons when possible for interfaces. It works sometimes and other times, not so much.
Coming from a background of painting and drawing - I'm very much into fine arts and care deeply about composition, color, contrast, focal points, and more. So when I began crafting websites, usability was of no concern to me in the early days. I was creating art! This led to a slew of bad websites created with poor usability. One of my early pride and joys featured the main navigation as a row of 10 big icons along the top with no text labels (I was later forced into adding labels on hover). I did this because I thought it was sexy, but it was not usable. It was obnoxious and gratuitous as it only served me and not user.
Sexy and Usable
Nowadays, I still want to make things sexy, but they have to be usable as well. I ran a quick test on dribbble the other day for a potential "check in" icon on an iPhone app. Only about 20% of the people guessed the function correctly. I made another post with a properly labeled icon and voila, no confusion. There are a number of apps using a check-in-type button - some of them like foursquare are using a "pin" icon only. This does make sense to a certain degree because you are pin pointing a location, but it's also not 100% clear what it does until you tap on it. To many people the "pin" icon means "location" but not necessarily "check in."
Icon Only Threshold
There seems to be this threshold of when it's safe to use "icon only" buttons and when it's not. Take Four Square for instance. You may not know what the pin icon does until you tap it, but once you do for the first time, maybe out of curiosity, you're likely to remember the function it performs since this is the main function of the app. This can be an effective method as long as the rest of your interface doesn't have a multitude of multiple icon only buttons that are not yet engrained into a user's preconceptions. This method is still risky because it's not guaranteed that a user will remember what the icon does.
Facebook's Progressive Reduction
Facebook is another example of using "icon only' interface bits. Both desktop and mobile versions of the site have evolved to have the same consistent icons along the top - Friend Requests, Messages, and Notifications. It would be virtually impossible to elegantly include those functions (especially on mobile) by including long text labels with each icon. Facebook has evolved, or should I say "progressively reduced," into this. This would have been quite confusing for first time users who had no reference to what those icons might mean. But over time users began to expect friend requests, messages sent, and notifications. Facebook was able to evolve into a simpler interface because the users became more familiar with the content and where to find it. The same now is true for the 3-line nav icon. The nav icon still may not be universally accepted by all, but I believe this simple solution will become a usability standard very soon. It's simpler and sexier to have 3 lines than the word "Menu" or "Navigation," plus this gives more room for a title on mobile. But again you've got to consider your audience to know whether that is going to be sufficient.
Remember Tweetie?
Tweetie was the first solid Twitter app for the iPhone and the Mac. Unlike Twitter's mobile app today, Tweetie used an icon only navigation. Since Twitter has a relatively simple content set, it's a good example of when it works to use an icon only navigation. Tweetie used 5 icons on the mobile app - timeline, mentions, direct messages, search, and more. (Not unlike Tweetbot today.) Timeline and Mentions are the two of the most used areas on Twitter for so it's easy to recognize them in an icon only line up, especially since the @ symbol has become very much associated with Twitter. The search and "more" icon are easily recognized as well. The icons were sexy and were an easy shoe in for more seasoned users. Even the less explanatory icons, revealed when swiping a tweet, became quickly apparent after using the app a few times. Since Twitter has a limited feature set it provides a nice scenario to explore an icon only approach.
I can imagine though, Twitter didn't want to alienate users who were new to the service with icons only on their apps. Shortly after Twitter acquired Tweetie, they rebranded the app, changed a few things up and added the text labels to the nav bar. Not as sexy per se, but the labels are of huge value for new users and from a general usability perspective.
Final Thoughts
The truth is, it's easier to design with icons only within an interface because you can nail them down to a fit within a square grid that doesn't fluctuate in width or height. Icons with text labels becomes a whole new story. Icons with text labels are harder to deal with - enter copywriting, nomenclature, varying widths, typography, text color, text size, etc. This opens a whole new can of worms and can be difficult to deal with. As a designer, I urge you to take the challenge. Don't just come up with beautiful icons and call it a day. Think about the use of labels. If they're needed what should each one be called? Can they all be reduced to one word? What is the longest possible text label? Keep all of these in mind, in addition to making the icons look sexy.
Think of scenarios that lend themselves to progressive reduction and push for simpler interfaces, but don't forgo usability.