Iconography

What is HTML All The Things?

HTML All The Things is a web development podcast and discord community 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
  • The text test – 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 or checking out our Patreon to get a shoutout on the podcast.

Support us on Patreon

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

Instagram (@htmlallthethings)
Twitter (@htmleverything)
TikTok