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