Why do we call it breadcrumbs? Diving into the history of UI components

It started off with a toast. As I was crisping my bread, I wondered why UI notifications were called ‘toasts’. Curious, I started digging into the etymology of UI components.

Toast

✍︎How do you like your toast?

When your toast is ready, it pops up from the toaster to signal that to you. Similarly, toast notifications are time-based UI elements used to display short messages. Like breakfast toast, they also disappear in a few seconds.

Breadcrumbs

✍︎Not a mouse trap

More bread-inspired terms?

“Breadcrumbs” are a metaphor for leaving a trail behind, which is the modern-day term for UI navigation patterns. Breadcrumbs navigation helps a user understand the hierarchy among levels and navigate back through them.

Radio buttons

✍︎Who killed the radio star?

A relic from history, the name “radio button” comes from the actual physical buttons that were used in old radios. Push one in and the others pop out.

This explains why today radio buttons are used when you have a group of mutually exclusive choices and only one selection from the group is allowed.

Sliders

✍︎Sliding in

Like volume sliders on a radio, sliders allow users to increase or decrease a value by moving the handle along a horizontal track.

The UI interpretation of sliders is very similar and enhances the experience by allowing users to input more precise numeric values.

Carousel

✍︎Merry go round we go

Like a merry-go-round, a UI carousel displays images in a cyclic view.

The UI adaption features navigational controls (arrows left and right) to suggest additional content that is not currently visible and encourages users to continue exploring.

Accordion

✍︎Space efficient instruments

Named after the musical instrument, an accordion is a user interface component that hides or reveals content. Its name choice is reflective of its usage.

Accordions can make information processing and discovery more effective. The header title gives the user a high-level overview of the content, allowing the user to decide which sections to read.

Tabs

✍︎Tabs to organize content

As a kid, I went to school with a file folder where I had tabs for each subject to organize my worksheets.

In a similar vein, UI tabs are used today to organize content. They allow the user to navigate between groups of information that appear within the same context.

Toggle

✍︎Flip the switch

Switches came into existence way back in the 80s. They were used to quickly switch between two possible states usually for On-Off purposes. This led to the birth of the toggle component in UI.

Today, toggles are used for binary actions that occur immediately after the user “flips the switch”. Quite a neat interpretation!

Last words before we part

Learning the origins of UI terms can help us understand its purpose and connection with history. In the process, it strengthens our understanding of UI components.

As designers in the digital age, we play a crucial role in helping people transition concepts from physical to digital. As technology continues to modernize more traditional industries, it’s important we give a nod to history. There are physical cues we can learn from and adapt to UI components.

If anything, I hope this was a fun read!