3 files changed, 68 insertions(+), 14 deletions(-)

M _includes/head.html
A _posts/2021-12-17-use-text-not-icons.md
M index.md

@@ 12,5 12,5 @@
   <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
   <link rel="shortcut icon" href="{{ site.baseurl }}/favicon.png">
   <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ site.baseurl }}/feed.xml">
-  <style>img{max-width:100%;}pre{overflow:auto}</style>
+  <style>body{font:"Times","Georgia",serif;margin:auto;max-width:75ch;padding:10px;}img{max-width:100%;}pre{overflow:auto}</style>
 </head>

@@ 0,0 1,59 @@
+---
+title: "Icons Should be Complimentary - Text is Always Better"
+layout: post
+summary: "The pitfalls of using only icons to convey information in software design"
+---
+
+Designing[^1] 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 space[^2]. 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 apps[^3]. 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](https://tdarb.org/hamburger-menu-alternative/)
+
+## 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
+[^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.
+[^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.<
\ No newline at end of file

@@ 14,25 14,20 @@ This blog is a place for me to just dump my thoughts, ranging from design patter
 
 Articles written here are more or less for my own reference in the future – don’t take them so seriously. Some of my more popular and “customized” essays are listed below, if that’s your cup of tea.
 
-Enjoy your stay!
-
-## Shipping microSD cards: [micro-os.org](https://micro-os.org)
-
-I run a personal, solo venture at [micro-os.org](https://micro-os.org). It initially started out as a small passion project to help those with less access to tech, but quickly gained more of my focus over time.
-
-More details can be found on the website itself, but the TL;DR: 
-
-> *microSD card(s) preloaded with your operating system of choice for Raspberry Pi devices - packaged and delivered right to your doorstep*.
-
-## Curating website members: [1mb.club](https://1mb.club) / [xhtml.club](https://xhtml.club)
+If you're interested, I also curate the exclusive membership groups [1mb.club](https://1mb.club) and [XHTML.club](https://xhtml.club). The web is a bloated mess and I created these ever-growing directories to showcase websites that care about respecting their users' time and resources. Feel free to submit your own personal sites or projects if they fit within the restrictions of these "exclusive" clubs.
 
 > *Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better*.
 >
 >-- Edsger Wybe Dijkstra
 
-The web is a bloated mess. I created these ever-growing directories to showcase websites that care about respecting their users' time and resources. Feel free to submit your own personal sites or projects if they fit within the restrictions of these "exclusive" clubs.
+## Some of my more popular articles
+
+- [A Reality Where CSS and JavaScript Don't Exist](/css-js-mistake/)
+- [Making Tables Responsive With Minimal CSS](/responsive-tables/)
+- [Write HTML Like It's 1999](/html-like-1999/)
+- [Better Box Shadows](/better-box-shadows/)
 
-## Popular essays & thought experiments:
+## Essays & thought experiments
 
 - [Better Search Results](/better-search-results/) <br>
 A UX experiment and case study re-thinking the design of search result layouts.