The Evolution of the Title Bar Buttons

Was there ever a time when the minimize, maximize, and close buttons on your title bar didn’t exist? Besides that, I bet you can’t even think of who used these specific icons first. For as long as we can remember these have been present. They are instantly recognizable in any interface and usually located on the top right of a window with the X in red. We wanted to discover the complete evolution of the title bar buttons. So we set out on a journey through GUI’s to pinpoint exactly how they started.

Source: binaryfortress.com

1981

This was the year the Xerox Star was released commercially as the first Graphical User Interface. This was the inspiration for the Macintosh and also happens to be where we get several other classic icons from. However, it did not use close, minimize, or maximize. It actually used a drop down menu that appeared on the top right-hand side of a window. They had various menu buttons placed in different areas that gave you options to interact with the corresponding section of the program you were using.

Source: all-the-widgets on Vimeo

1984

Macintosh was introduced by Steve Jobs in 1984. It was the first mass-marketed personal computer that launched Apple. Much of the interface was inspired by Xerox, however they used a different system for closing windows. Instead of have the option to close a window in a drop down menu they created their own button for this. It was, however, a small rectangle on the top right of the window rather than an X. This was the first official close button. The minimize and maximize buttons were yet to come about.

Source: 1984 Macintosh 128K/512K Teardown and Review

1985

The first Amiga, a  brand of personal computer sold by Commodore, came out in 1985. It was a high-end upgrade to the 8-bit systems available at the time and had  graphical, audio and multi-tasking abilities. The Amiga Intuition also made use of a smaller rectangular icon in the top left corner of its windows to close a window. This was very similar to Apples’ Macintosh. The only difference was that the Amigas’ icon had a dot in the center. It did not have options to make a window larger or smaller yet. You could just bring it back and forth between other programs if you had more than one open.

Source: ttps://www.youtube.com/watch?v=IS-NYK-8KL0

The very first version of Windows came out in November of 1985. Though it was considered as a flop by critics it had an important trait that contributed to the evolution of the title bar buttons. While it still used the hamburger icon and a drop down menu like the Xerox Star to close, it had the beginnings of a task bar. Since this was just the start of PCs, they still had many differences in icons and options to open and close windows. Even so, you can clearly see where Apple and Windows drew from each other, and from Xerox.

1985_2_titlebar

One of the options in the drop-down menu “iconized” programs and sent them to the bottom of the screen as an icon instead of closing the window entirely. While the term minimize was still not used, it was the first step in its evolution. The task bar and the minimize option seem to go hand in hand as you will see later on. As computers get better at multitasking, it makes sense to have a taskbar or tray available with programs you are using. Since this was one of the slowest features to evolve, the minimize option was also one of the last buttons to become standard.

The Atari TOS debuted with the Atari 520ST in 1985. It used the GEM (Graphical Environment Manager) licensed from Digital Research as its GUI. This had a few new options when it came to window options. It was the first to have an official maximize title bar button in the shape of a diamond on the upper right. It was also the first to use an X to close a window. It did not have a minimize icon however. The interface was smaller and with the lack of task bar there was not much use for it yet.

Source: https://www.youtube.com/watch?v=PEB_EDE0zHE

1986

The Commodore 64 brought new technology to middle-class households via creative mass-production. It commonly ran GEOS, a 3rd party GUI, for its system. GEOS made use of a line icon instead of a square to close the window, which was the first instance of this particular symbol (-) . It did not make have a minimize or maximize button. You can start to see that the use of a button to close a window has started to become a standard. The icon they use however is still rotating between a dash, an X, and a square.

1987

In 1987, Apple introduced the Apple Macintosh II, the first color Macintosh. However, as far as the title bar buttons went, it did not change much. They continued using the same options to close a window and there was not an option to minimize or maximize a window. It was still a white square on the top left.

Source: https://www.youtube.com/watch?v=KVzSGB4MVcg

Microsoft released the second version of Windows, version 2.03, this same year. It now also had resizable windows. Its drop down menu changed from the hamburger icon to just a line. That line is actually a depiction of the space bar, as the keyboard shortcut for expanding the window menu was to press Alt-Space. They also added a set of handy arrows on the upper right hand corner; the arrow that pointed upwards served to make the window full screen, and the downward facing arrow replaced the ‘Move’ option from the drop down menu. Instead of clicking ‘Move’ from the drop down menu to iconize the window, now you just had to click the down arrow and it would automatically go to the bottom left of the screen.

Source: https://www.youtube.com/watch?v=lqWrij9Ts2k

1988

There were no changes for the evolution of the title bar buttons in 1988. Everyone´s GUIs were still largely working with drop down menus and Apple’s square icon to close a window. That being said, you can see some options becoming popular, such as the ability to make the window you are working on bigger and being able to close a program with a single click. In 1988, Commodore released Amiga Workbench 2 for the A3000.

Source: https://www.youtube.com/watch?v=rWMHiFvO02E

Windows 3.0 was released by Microsoft the same year. It included many early versions of the programs we are familiar with today. It was still using the dash on the upper left as a drop down menu with options on what you wanted to do with the window. The colors they were using were much cleaner than the version before this. It looked a lot more grown up. It also continued to use the minimize and maximize options in the form of arrows on the top left.

Source: https://www.youtube.com/watch?v=xaD8RpnNrM8

1992

The IBM OS/2 2.1 was created by Microsoft for IBM exclusively. This gave it many similarities with Windows. This interface would also minimize and maximize programs with the use of an icon on the top right hand corner of each window. They were now represented by a square icon to maximize and the corners of a square to minimize. They also changed the drop down menu from a dash to a folder icon. It was essentially Windows with an IBM logo.

Source: https://www.youtube.com/watch?v=oz3YuWfaKvI

The Windows 3.11 was also released in 1992 . It continued use the same up and down arrows on the top right hand corner of it’s windows to expand and minimize a program. It also kept the dash icon for the drop down menu.

Source: https://www.youtube.com/watch?v=oz3YuWfaKvI

1995

Windows 95 was released in 1995 and was a huge success. It quickly became the most popular desktop operating system. It was suggested that its success drove out other major players. It was also the first to use all the X icon, – icon, and window icon, together for the use of closing, maximizing, and minimizing a window. As we have seen, the options had been around for a while but not throughout all interfaces. The icons had also yet to be standardized. Windows 95 made a huge leap forward in the evolution of the title bar icons.

Source: https://www.youtube.com/watch?v=BdbzoucXrqo

1996

On seeing the success of Windows 95 other operating systems started adopting the same title bar buttons for their interface. They made more sense than many of the other icons used in previous years. They were also easily recognized and made for a much more user friendly experience. In 1996, NewDeal Office 3.2a, which was once GEOS, came out and it used the title bar buttons just a year after Windows 95 brought them out.

Source: http://toastytech.com/

1997

In 1997, the long awaited OS 8 for Macintosh was finally released. It sold 1.25 million copies in less than 2 weeks and it became the best-selling software of the 90s. However, it still used most of its old icons and had not adopted the Windows 95 title bar buttons. It was, however, getting close. It was using something similar to a hamburger icon to minimize windows into a bar instead of an icon on a task bar.

Source: https://www.youtube.com/watch?v=Px727NPdcto

1999

1999 brought us the MacOS 9.2.2. However they were still stuck with the same icons that had been using for years now. Apple and Windows now dominate the market and are mostly competing against each other. Apple was in need of another update to come into the new millennium.

Source: https://www.youtube.com/watch?v=hZ7flFyohV8

Source: https://www.youtube.com/watch?v=hZ7flFyohV8

2000

After the turn of the century Apple finally switched to an X icon to close the window for Aqua, a minus sign to minimize a program to a tray, and, because it had to have something different from Windows, they used a plus sign to maximize a window. They also started a a new trend and added color to these icons. Using Red, Yellow, and Green, like a stoplight, to highlight each button and represent it’s use.

Source: https://www.youtube.com/watch?v=uGMQLfi0kGc

2001

In 2001, Microsoft released Windows XP which adopted the red X symbol from Apples’ Aqua as well as a similar design style. Switching from it’s old grey icons and task bar to fit the new colorful version for the new century. And so we come to the end of evolution of the title bar buttons for now.

Source: https://www.youtube.com/watch?v=nt2oxjlBIWk

We can see how as time went on each interface kept building on what past ones had done. Taking bits of what worked well for the users and making it better as time went on. Until a sweet spot was reached that could become a constant. Something easily understood that created the best user experience. The final version of the evolution of the title bar icons stayed because even someone who had never used a computer before could interpret it. We now see this as a standard for just about everyone.

Source: Toastytech.com

Do you remember the first time you used a close,minimize, or maximize button?

Let us know in the comments below.