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.

Nor did 2.0.

Or 3.0?

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.

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.]

Vi, vim, emacs or edlin?

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/