The most familiar UI symbols — where do they come from?
PART 1 — MEDIA CONTROLS
As modern consumers, we interact with media controls more often that we’d dare to admit: YouTube, iTunes, Netflix, mobile devices, Google search, your car’s touchscreen display or even your microwave.
We’re now beyond the point at which these symbols have any physical meaning.
Let’s look at where these all-too-familiar symbols come from, and, if possible, when they first rose to prominence.
The Play Arrow
The “Play” arrow — a triangle pointing to the right — is possibly the most ubiquitous modern technology symbol there is. It has become so entrenched in modern culture that the likes of YouTube include the symbol in their primary icon: a red TV screen shape with a white triangle inside:
But where — and when — does the “Play” arrow come from?
On reel-to-reel cassette machines originating first in the 1920’s, transport controls used either identical-looking buttons with the appropriate words written directly beneath (PLAY — PAUSE — STOP etc…), or a small dial which was physically turned to point at the appropriate word and engage the function.
The “Play” arrow was first seen on reel-to-reel cassette machines from the early ’60s, and denotes the direction of tape travel from the left to the right tape reel. The arrow was sometimes contained within a square holding shape (more on this shortly).
The “Play” arrow was first seen around 1963 on portable Philips and Grundig machines.
Stop Symbol
Quite simply, the square “Stop” symbol is the “Play” symbol with the arrow removed — meaning nothing is happening. Occasionally it was an empty circle, as seen in the photograph above — but also sometimes an X, a red circle or just a dot, much like the full stop at the end of a sentence.
Pause Symbol
This is where things get more interesting. On early cassette recorders (not players) when “Stop” was pressed during recording it left a noise as the recording head was physically moved away from the tape. A “Pause” mechanism — which didn’t move the head away — was added and left no unintended noise on the recording.
But what about the symbol itself? In written poetry two vertical lines denote a pause in the middle of a verse — effectively a type of punctuation. These two vertical lines are known as a caesura mark and are also seen in musical notation displayed as oblique lines similar to two // slashes.
The “Pause” symbol may have first been seen in Homers’ “Iliad” from the 8th Century.
Record Symbol
Often a red cylindrical button, or red circle imprinted onto a button, “Record” was a serious function on a cassette recorder. Why?
Back in the day magnetic media could be prohibitively expensive — meaning unintentional recording could be a costly mistake. Therefore the “Record” button needed to be clearly marked, or even separated from other function buttons. Another good fail-safe — and mechanical necessity — was the requirement to press and hold both “Record” and “Play” buttons together at the same time to activate both the Run/Play motor and mechanically force the Record head down onto the tape itself.
So with “Play” already familiar as a triangle and “Stop” as a square, it was only natural that “Record” would inherit its’ own symbol and colour (you could also infer that YouTube used that pillar box red within its’ infamous icon).
Rewind and Fast Forward Symbols
“Fast Forward” and “Fast Rewind” functions on reel-to-reel cassette machines were a practical solution to avoid tedious manual winding (not to mention endangering any recorded material) of the tape between two reels (once again, arrows denote the direction of tape travel).
Next time you tap on one of these familiar symbols within your favourite media players, you’ll have a little more insight into how — and when — they came to be.
And with that, it looks like it’s time to eject ;)
Chris Williams is a Senior Graphic and User Interface Designer at Croomo.
Coming soon:
PART 2 — COMMUNICATION
PART 3 — INTERACTION & NAVIGATION
PART 4 — TECHNOLOGY
