Welcome to tdarb.org. Enjoy your visit!

Icons Should be Complementary - Text is Always Better

Posted on


Designing1 software is a complex thing. A great deal of real life testing and user feedback is needed to create the best solution to the problem you are trying to fix. Obvious requirements are to keep things simple, make it easy to understand just by looking at it, and build it to be headache-resistent for updates in the future. All these things are easier said than done, of course. Such is the challenge of a designer’s work.

But with this term of “simplicity”, modern designers tend to take this approach too literally. In my 12+ years involved in UI/UX software design, I have lost count how many initial iterations of interfaces suffer from the same “dumbing down” decision making:

Using only icons to represent an action or function.

If you decide to stop reading the rest of this article, at least take away this one important thing:

Always try to use only text to convey your designs

Only after achieving this should you start reiterating those designs to include iconography. Even then, some UI instances won’t even require you to do that. Most designers will actually find this process quite difficult, which is why it is so important to get right.

Icons make an ass out of u and me

Icons make general assumptions about what the user may or may not understand. Leading with this in your designs will end very poorly for you. Trust me - I’ve learned this through failed designs many times over. A certain visualization might be common knowledge to you, while differing greatly to someone else with an entirely different set of experiences.

I’ve found the only thing you should ever assume is that the user knows absolutely nothing. Please note - I’m not referring to their intelligence but instead their software literacy.

Just take a look at our now “famous” save icon so widely used in almost every piece of software - the floppy disk. Do any software users below the legal drinking age even understand the initial reasoning for using this icon? In all honesty, it was a terrible icon decision even when first introduced. No “hard copy” of the save action is taking place, most software creates this save in a digital space2. Yet, it was widely adopted and people just went with it.

Quality is not measured by mass appeal.

The argument could be made “Well, people learned to associate “Save” with a Floppy Disk icon…” and my response would be “But what alternatives were they given?”

Original software designers (and developers, of course) held all the power in early UI decision making. General users didn’t know any better. Things were still new and fresh. So now our response is simply to shrug our collective shoulders and say, “Oh well! That’s just how the save icon has to be now.”

Hogwash. Make it a button that simply says Save File. I’m not kidding. Oh, it doesn’t work well with your current design? Seems like your initial design wasn’t very future-proof, then was it? I sound snarky here but seriously, so many designers put up imaginary walls around their design systems, making them incredibly rigid and difficult to adapt.

Take the time to do even a small thought / wireframe experiment: redo the layout and flow of your application without using a single piece of iconography. If you can’t achieve this with even limited success, something is wrong with the overall design.

The hamburger menu is the 7th circle of Hell

In most use cases, the inclusion of a hamburger menu is indicative of an overly complex application. Too many cooks and all that jazz. Enterprise applications don’t get a pass here either, as they tend to be the worst culprits of pouring out everything on to the user in some form of software vomit. Apparently sweeping all this interaction under the hamburger “rug” makes for a cleaner design. I assure you - it really doesn’t.

New features are great, but stop dumping so much of it behind hidden, unintuitive sub-navigation. This design is such a “quick fix” and plagues far too many software apps3. Both desktop computers and mobile devices allow users to scroll - so let them.

I’ve discussed this in further detail here: Using Hamburger Menus? Try Sausage Links

But what of the “advanced” users?

I understand most applications will have advanced or “pro” users that have full knowledge of the product and wouldn’t need things spoon fed to them. This is a more difficult problem that I myself haven’t fully been able to solve without approaching each one on a case-by-case basis. Unfortunately, there is no “one size fits all” method to this. But, just because solving for advanced users proves difficult does not mean we should dismiss the merits of avoiding icons as a crutch.

Try for yourself

As I stated above, try doing a quick design experiment by replacing all your existing iconography in your application with simple text. I assure you that at the very least you’ll discover some interesting design flaws in your system.


Footnotes

  1. By “design” I’m referring to visuals - not programming or system engineering [return]

  2. Some very early software programs did in fact save to an external floppy disk. My point still stands that many digital file storage applications still copied this iconography blindly. [return]

  3. Not to mention how rampant it is on plain ol’ regular websites. If you’re hiding five menu items behind a hamburger menu for “mobile users” - you’re doing it wrong. [return]