This is an article I wrote a long time ago for the Korean HCI Research Society.
Posted on : 1999. 4.12
In 1996, when Netscape 3.0 occupied more than 90% of the web browser market, Microsoft later turned to the Internet and announced Internet Explorer 3.0.
From a user interface point of view, one of the peculiarities of Internet Explorer 3.0 was the toolbar button. These toolbar buttons were new, not the usual ones. The previous button had a square border on the icon to make it look like a real button, and a shadow was added around the border to make it look like a bulge. However, the toolbar buttons in Internet Explorer 3.0 were flat buttons with no borders on the buttons and no convex effect. Also, the icons of other buttons had color, whereas the buttons in Internet Explorer were solid. Even in the era when color monitors were the mainstream.
What was the reason for creating a flat button different from the actual button rather than following the previous button that wanted to look like a real button? Also, what is the reason for not drawing a colorful icon?
The answer can be found by hovering the mouse over the button.
If you hover your mouse over an existing button, the button doesn't show any change. However, only when the mouse is clicked, you can see the action as if the actual button was pressed. However, when you hover your mouse over the button in Internet Explorer, the flat icon suddenly changes to the same bordered and convex shape as the previous button. Also, the color of the icon, which used to be a single color, changes to a colorful one. This button is called an IE button.
So, why did Microsoft make such a button?
As the Internet became common, hypertext became a major component of web content, and this hypertext has usability to move to a linked place by clicking an underlined string or image once. In the case of a string, when a hyperlink is attached, the string is underlined to indicate it. Of course, in general, a string is underlined for emphasis, but in HTML, the underlined string means a hyperlink by default. So how do you know if the underlined string is a hyperlink or just a regular string? Of course, you can tell by clicking, but when you move the mouse over the string, the cursor-shaped mouse usually changes to a hand-shaped one. The mouse changes its shape to indicate its status. The default shapes provided by Windows include an arrow in normal status, an hourglass shape to indicate waiting while working, and a hand shape to indicate that you can choose. In other words, it means that there is a hyperlink so it can be executed, and it changes the shape of a mouse and gives feedback to the user.
In general, objects that can execute a command in relation to a user's mouse action can be broadly divided into one click, which means selection and execution, like a button, and one click, selection, and double-click, meaning execution. When a single click is a selection and a double click is an execution, the mouse actions of selection and execution are clear. However, when one click is execution, the meaning of selection is included, so the user must be fed back two meanings of selection and execution. In web navigation, the user's mouse actions are all performed with one click. Therefore, there is a need for more clear feedback on the meaning of the user's choice. In the end, I think that Internet Explorer, a web navigator, also changed the button to one click, which is the same usage method for the same usability of web content.
Afterwards, in the case of Internet Explorer, for hyperlinks in HTML, in addition to changing the shape of the mouse, a different color was added, and a user interface was added that sometimes appeared without an underline.
The IE button spread like a fad, and in the end, although slightly different, the next version of Netscape adopted the same type of button as the IE toolbar button. In Netscape, a flat button without a button division before moving the mouse is the same as an IE button, except that the color change is different when the mouse is moved in a slightly colored state.
With the great wave of the Internet, computer users around the world came to use Microsoft's Internet Explorer and Netscape Navigator, and naturally became accustomed to one-click on the web. Tool bar buttons of programs were adopted.