The Motive Web Design Glossary

graphical user interface (GUI)

A graphical user interface allows a user to interact with a computer without entering code. The combination of an input device (such as a mouse or stylus) and visual representations of the workspace and tasks, the user is able to interact with the computer in a manner similar to the physical manipulations available in the real world.

For example, in a GUI, an electronic file is typically represented by a file icon. Data contained in the file can be moved to a new location by simply moving the file icon. Behind-the-scenes this physical interaction is translated into a series of commands, i.e.

1. Access the chosen file
2. Copy the data from the file
3. Navigate to a new location on the computer
4. Insert the file data in the new location
5. Delete the data from the old location

History of the GUI

The communication between human and computer has gone through a number of evolutionary stages. Some of the first electronic computational devices relied on the patterns created by a series of holes (punch cards) as the primary method of interaction.

The next significant step was the ability to formulate requests or create programs using mathematical languages or codes.

In 1973, researchers at Xerox’s Palo Alto Research Centre (PARC) were the first to experiment with the key components of the GUI:

• a mouse
• bitmap display
• graphical windows

Combining these elements allowed a user to interact with the computer without translating the user’s request into machine code.

Apple subsequently capitalised upon the advances made by the Xerox team integrating these key interface elements into its release of Lisa, forerunner to the personal computer.

Related terms: front-end, interface, perceived affordance, wysiwyg

References and further reading

• Apple Human Interface Guidelines
  These guidelines are designed to assist you in developing products that provide Mac OS X users with a consistent visual and behavioral experience across applications and the operating system.
• GUIdebook: Graphical User Interface Gallery (Marcin Wichary)
  Visual references of common interfaces including operating systems (desktops), icons, etc.
• Graphical User Interface Timeline (Nathan’s Toasty Technology)
  Chronology and screen grabs from key points in the evolution of the GUI.
• A history of the GUI (Jeremy Reimer, Ars Technica)
• Microsoft, Apple and Xerox
  An insight to the evolution of the GUI from research to commercialisation.

Motive Web Design Glossary Trivia