Iconography
Tags: webdev, podcast, design
Published: 2022-05-04 22:18:34

{% spotify spotify:episode:3cQEsVR1kKLi2Slu0HTxwM %}

## What is HTML All The Things?

HTML All The Things is a [web development podcast](https://www.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self-employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.

---

## What's This One About?

This week Matt and Mike tackle the questions "What is iconography" and "What does iconography mean" in a packed episode that covers the basics through the UX of icons. The duo also covers a variety of iconography examples and when text should be used instead of icons, or when text & icons should be used together and why.


## Show Notes

### Iconography UX



* “Iconography is a visual language used to represent features, functionality, or content. Icons are meant to be simple, visual elements that are recognized and understood immediately.”
* Icons are universal (they don’t rely on a specific written/spoken language)
    * Generally this is true, a lot of people have different lived experiences and may not be familiar with some sort of object you’re trying to represent
* Icons are visual metaphors
    * Speed up understanding by transferring properties from something that people already understand
    * Icons communicate to a viewer a metaphorical associations (ie envelope for mail)
    * The metaphor can be…
        * literal (ie alarm icon is an alarm clock)
        * outdated (ie save icon is a floppy disk)
        * Abstract (ie shuffle and refresh are arrows)
        * Original reference lost (ie Mac command icon)
* **Visually**
    * Small symbol that represent an object, action, or idea
    * Usually a square 1:1 aspect ratio
    * If you do need to use custom icons, they should share:
        * Shared thematic style & consistent design elements
        * Icons should look like they are in a set or family
    * By having icons be visually consistent they become:
        * More aesthetically pleasing
        * Removes ambiguity
        * Helps users distinguish if an icon is interactive
    * Having consistent looking icons includes icons having the same height and fill (don’t mix filled and non filled icons). This prevents pulling the users eye disproportionately towards a particular icon
* Device/platform standards exist that users are familiar with
    * Defer to these standard icons where possible for better UX 
* **When to use custom icons instead of standard ones**
    * Use custom (not standard) icons to rep app specific functionality that the standard icons can’t accommodate without causing ambiguity (ie recipe search, movie bookmark, image download)
        * Ambiguity as in the icon can be interpreted as something else
    * Beyond ambiguity custom icons should usually be used if the user is likely to hesitate or expend energy to figure out an icon
* **How to determine if you icon is ambiguous**
    * **<span style="text-decoration:underline;">The text test</span>** – determines if your icon is ambiguous
        * If icon needs title or description to convey its meaning, you may want to use a different icon or no icon
* **Icon Context**
    * Icons gain clarity and meaning through context
    * How and where icons are placed impact how effective they are
    * Layout Impact Clarity
        * Too many icons can overwhelm a viewer
        * Sometimes text labels should be used instead even if they may need to be put through a language translator – especially if you aren’t familiar with what they’re conveying/representing
        * Alignment can impact how icons work. Having text label left aligned-white space-right aligned label creates more work for viewer to scan back and forth to link the elements
    * Culture Impacts Meaning
        * The pretzel icon on a Nordic road sign means place of interest, also means command on Apple keyboard 


### Icon Actionables + Status + Glanceable Explanations



* Navigation
    * Quickly find places in an airport (ie washroom icon with an arrow left means bathrooms are on the left)
    * Help us quickly scan through elements (ie scan a full sign for the bathroom icon, don’t need to read entire sign)
    * Help recall elements when returning to an interface (ie icons + text in Windows 95 start menu)
* Warnings
    * Icons on road signs that warn of dangers (ie construction, deer crossing)
* Triggering Action
    * When used as a button (ie magnifying glass for search, microphone to record)
* Showing status
    * Can show binary status like on/off
    * Can show ranged status like volume level, battery charge
    * Can show compound status like a battery icon that shows battery charge level AND if the battery is actively charging
    * There is typically a part of an OS with a collection of status showing icons (ie Samsung device notification shade)
* Expressing Tone of Voice
    * Communicate tone and expressing brand
    * Firefox 2019 rebrand is bold, vibrant, and optimistic
    * Google Material Design is simple which conveys utilitarian nature


## Thank you!

If you're enjoying the podcast consider giving us a review on [Apple Podcasts](https://podcasts.apple.com/us/podcast/html-all-things-web-development-web-design-small-business/id1412209136) or checking out our Patreon to get a shoutout on the podcast. 

**[Support us on Patreon](https://www.patreon.com/htmlallthethings)**


You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[TikTok](Html All The Things)