X to Close
The origins of the use of [x] in UI design.
X’s are everywhere in user interface (UI) design. A powerful symbol, [x] is capable of closing windows and popups, toolbars and tabs and anything else that might otherwise be cluttering up your screen.
Clicking on [x] to close a feature has become an instinctual part of using a computer and a standard in web and software design. Although it may seem like the ubiquitous [x] has always been a part of Graphical User Interfaces (GUI), a quick jaunt through the history of GUIs reveals that this actually isn’t the case.
So where and when did the [x] first enter into the UI lexicon?
To track the [x] back to its origin, let’s start with the status quo: Microsoft.
If you are using Windows then you should be able to spot at least one [x] on your screen right now.
But Windows 1.0 didn’t use an [x] to close.
The [x] button didn’t show up until Windows 95, when the close button was moved to the right hand side, joining minimize and maximize.
There is even evidence that this was a late addition to Windows 95. In this early demo (Codename: Chicago), the minimize and maximize buttons have been redesigned, but the close button remains the same, and to the left as before.
August 1993
So, who was responsible for this last minute change? As far as I can tell, this person is responsible for the proliferation and widespread use of [x] in UI design today.
The intent of Windows 95 was always to get a computer on every desk and in every home. Design changes from Windows 3.0 were made specifically in response to usability feedback. The goal was to ensure that any computer novice would be able to learn Windows 95.
It worked.
Windows 95 eliminated all other OS competition, and was adopted by businesses and for home use worldwide.
But our goal today isn’t to pinpoint when the [x] became popular, but rather to find out when it first entered into UI design.
Can we find an earlier example of [x] in a GUI?
Mac OS didn’t use an [x] to close. Only in OS X did an [x] first appear, and then only when you hover over the red close button.
And Linux GUI’s started to use the [x] symbol only after the release of Windows 95.
We aren’t getting very far this way, so let’s go back to the very beginning. Back before Windows or Linux or Mac OS. Back to the very first GUI to fully utilize the ‘desktop metaphor’ that we are all so familiar with: The 8010 Information System from Xerox.
Also known as “The Xerox Star”, “ViewPoint”, or “GlobalView”, Xerox started the development of the 8101 in 1977 and first sold the system in 1981 as “Dandelion”. This is the GUI that Apple allegedly modeled their Lisa/Mac OS after, inspired by a tour of the Xerox headquarters in December 1979.
No [x], though:
Recall that no [x] appears in early Apple operating systems either:
There is no [x] to be found in the Visi On GUI, the first integrated graphical software environment for IBM PCs, released in 1983:
The GEM user interface, developed by Digital Research for and DOS-based computers in 1984, didn’t have an [x]:
But! What is this? Could it be?
This is a screenshot of Atari TOS 1.0. Built on top of GEM to be ported to the Atari ST in 1985, from the computers division of Atari Corp. It is the earliest example of the [x] button I’ve been able to find.
So why here? Why now?
This may be another example of Atari, an American company, borrowing from Japanese culture. The first example, of course, being the name Atari itself, a Japanese term from the game Go that means “to hit the target”.
The use of [x] for close and [o] for open could come from the Japanese symbols batsu and maru.
Batsu (x) is the symbol for incorrect, and can represent false, bad, wrong or attack, while maru (o) means correct, true, good, whole, or something precious. Batsu and maru are also common hand gestures. Cross your arms over your chest for batsu, circle your arms over your head for maru.
Another familiar example of batsu/maru is in the Playstation controller design, where maru and batsu are used for yes and no.
This is just a theory, however. Not being there myself at the time, I can’t be sure.
For the sake of being thorough let’s see if we can go back any further.
The first line-based text editor was Quick Editor or qed, written by Ken Thompson in 1965, who later helped to develop Unix. Qed uses [q] for the quit command.
Early text editors used a bunch of different escape commands: [q], [e], [c], and [ESC], but [x] was never a popular option. Ed, em and ex, early text editors spawned from qed around 1971, didn’t use [x.]
No [x] to close these 1980's text editors either. X was commonly used to delete characters in-line, but not to close the program.
[x] is a true icon, not representing a letter but representing an action, and only adopted to represent ‘close’ well after the development of graphics-oriented operating systems. The first appearance of [x] in GUI design was likely the Atari TOS, possibly influenced by the Japanese batsu and maru conventions. Thanks to a last minute design change in Windows 95, and the mass adoption of Windows worldwide, [x] has become the standard symbol for ‘close’, a symbol that dominates web, app and software design today.
That’s all for now.
[x]
Screenshots from http://toastytech.com/guis/ and http://whiteandnoisy.org/
UPDATE:
So this little article has travelled pretty far! There were a lot of good tips, comments and insights into the origin of [x] but none as good as this email that I received from Windows 95 team member Daniel Oran.
“Hi Lauren,
A friend forwarded me your Medium piece, “X to Close.” He remembered that I had worked on Windows 95 at Microsoft — I created the Start Button and Taskbar — and thought I’d be amused. I was! :-)
It’s fun to see how history gets written when you actually lived those long-ago events. I joined Microsoft in 1992 as a program manager for the user interface of “Chicago,” which was the code name for what eventually became Windows 95.
So, who was responsible for this last minute change? As far as I can tell, this person is responsible for the proliferation and widespread use of [x] in UI design today.
It wasn’t a last-minute change. During 1993, we considered many variations of the close-button design. And the source wasn’t Atari. It was NeXT, which had an X close button in the upper right, along with the grayscale faux-3D look that we borrowed for Windows 95.
I wanted to put the Windows X close button in the upper left, but that conflicted with the existing Windows Alt-spacebar menu and also a new program icon, which we borrowed fromOS/2, on which Microsoft had originally partnered with IBM.
Attached is the earliest Chicago bitmap I could find that includes an X close button. It’s dated 9/22/1993. (In attaching the file to this email, I just realized that it’s so old that it has only an eight-character name. Before Windows 95, that was the limit.)
Thanks for your very entertaining essay!
Best,
Danny”
I guess you could say case [x]ed.
This story was originally published by Lauren Archer on February 10, and was added to the re:form collection today because we loved Lauren’s smart take on UI design.
You can follow Lauren Archer on Twitter at @laurenarcher. Subscribe to re:form’s RSS feed, sign up to receive our stories by email, and follow the main page here.
