Computer Interfaces

An "interface" is the connection between a machine and a human being. For example, in a car, the steering wheel, dashboard, gear shift, and foot pedals are the interface. An interface allows you to control a machine. In computers, it is often called the user interface, or UI.

Older User Interfaces

Before the PC, computers were most often used by experts who could dedicate a good deal of time to training, learning how to use complex ways of controlling a computer. These methods were usually closer to "machine language" than they were to human language.

In the 1950's, my father was a college student at MIT. He used their computer, called "Whirlwind." It was a first-generation computer, which used vacuum tubes. And the user interface was punch-hole paper tapes. My father would tell the computer what to do by punching holes into a piece of paper tape. He would then take the program to the computer operator. The operator then put the tape into the computer, which read the holes in the tape. The computer then executed the program, and returned the results on another piece of tape. The operator gave the tape back to my father, who could read the little holes to find his answers.

Later, this system was improved: the 150-year-old idea of punch cards was revived:

Even the Altair 8800, the first affordable computer (only for hobbyists) in 1975, used switches and the classic blinking lights:

Computers for the Rest of Us

These old UIs were workable for experts, but they were not really practical for most people. When the "personal computer" arrived in the 1970's, it was intended for anyone to use, not just experts. So the companies making computers went to work trying to make the UI better.

That is the goal for the user interface: to make the computer easier to use. A well-designed user interface should be "invisible"; the user should be able to understand it naturally, without training or effort.

The CLI: A Computer a Young Person Could Use

Early personal computers used the CLI, or Command Line Interface. These did not use a mouse or other object-oriented controls. You had to learn a hybrid human-computer language in order to operate the computer. If you used the wrong command or made a spelling mistake, the computer would answer with “SYNTAX ERROR” and would not do anything.

The CLI made computers more usable than before, but they were still difficult to use because you had to learn the special language used in the CLI. Non-experts could use this UI, but most found it too difficult or confusing to use.

Before creating the "Windows" OS, Microsoft sold a CLI called "MS-DOS."

If you would like to try using the MS-DOS CLI instead of Windows, then just go to the "Start" menu, go to "All Programs," go up to "Accessories," and select "Command Prompt." This opens a CLI to operate your computer.

Macintosh computers also have a CLI, the UNIX shell used in the program called "Terminal." Do a search for "Terminal" and open the app.

With both of these CLIs, you will probably not be able to do anything unless you have prior experience and training.


The GUI: A Computer Your Mother Could Use

The GUI (Graphics User Interface) began in the 1960's, when Douglas Engelbart developed the mouse, menus, and other GUI elements. These ideas were used, improved upon, and added to by XEROX in a computer called the "Alto," but that computer was never developed for the popular market.

The first popular GUI computers were the "Lisa" and "Macintosh" computers developed by Apple in 1983 and 1984. The 1984 release of the Macintosh computer was the first big release of such an operating system, and changed the way we now use computers. Microsoft followed with the Windows GUI OS in 1985--although the first versions of Windows were really the MS-DOS CLI with a bad imitation-GUI placed on top of it.

A GUI was different from previous interfaces because it used visual metaphors. A "visual metaphor" is a graphic element which makes computer data appear to be an "object" which the user understands. Everybody knows what a "window" is, for example: you look through it to see something. Everyone knows that you work on a desktop. Everyone knows that a folder contains documents. By creating an environment which looks more like the real world, computers became easier to understand.

Important point: The GUI was truly a breakthrough because it allowed almost anyone to use a computer with relative ease. Instead of only computer technicians, now regular people could use a computer without any special training. Your parents probably found it easy to learn, although your grandparents maybe still had difficulty using it.


Multitouch: A Computer Your Grandmother Could Use

Most people consider the GUI to be "the" way to use a computer. It has been used for 25 years ("forever" in computer-time), and most people under 30 have never known anything different.

However, the GUI is far from perfect. The keyboard and the mouse are "disconnected" from what is happening on the screen. To test this, find and run a drawing program on a computer using a mouse. Try to draw a picture using just the mouse, a picture you can draw well by hand. You will find the mouse-drawn image clumsy and childish-looking, as if you drew with the wrong hand. This demonstrates that the mouse is not really a good controller.

The newest OS type is multitouch. "Multitouch" means that you can touch the screen with more than one finger, and the computer "sees" each separate finger. A touch screen can only sense one finger or a "stylus" (pen) touch. "Multitouch" can sense many different contact points at the same time.

a multitouch interface a multitouch interface

A multitouch OS is superior because it allows the user direct access to the computer, giving the most natural way to control a device. A child will take to this naturally, and you will even see videos of animals using a multitouch computer! If an animal can learn how to use a computer, it must be a good interface.


What's Next?

Multi-touch is still very new, and has only come out on a few devices. It could be decades before we jump to the next UI after that one. One possibility is voice control, but that is limited by what can be spoken and, more importantly, what can be understood by the computer; usually it is much easier to "show" the computer using your hands.

Another likely candidate is motion sensors, where the computer watches your actions with a camera, and "sees" where your hands are and what you are trying to do.

For several years, I told me students that their computers of the future would probably be a pair of glasses. The lenses would act as monitors, there would be cameras and radio antennas in the frame, and mic and speakers in the temples. Most of the computing would be done in the "Cloud." In 2012, it came out that Google was thinking along the exact same lines, and introduced Google Glasses!

Farther into the future? Already scientists are working on systems where you can control computers directly with your brain, just by thinking about it. That, however, is much farther off, if it ever comes to pass.


The GUI (pronounced "goo-ee") is a graphical user interface, meaning that the computer presents the user with a graphic environment in which to use the computer. The most significant elements of this environment are the Desktop, windows, and dialog boxes.

The Desktop

The Desktop is the first thing we see after we start up the computer. This metaphor is based upon the idea that when we want to do some work, we sit at a desk, and then we put our work on top of the desk. Beyond that, the desktop metaphor does not mean very much. But it is the name of the starting place for everything on the computer, so it is important to remember and understand.

In the image above, you can see the different parts of the Desktop screen for Windows XP. The elements of the desktop are:

The Desktop
Start Menu
Search Bar (Cortana)
Pinned Applications
System Tray (Notification Area)
Show Desktop Button

The Desktop is the working place for the computer user. When you start your computer, you begin at the Desktop. Right-click on the Desktop to change its appearance (Personalize), the arrangement of icons, or Monitor settings.

Icons are small pictures that represent data files or containers in the computer storage. Icons can be containers: volumes or folders (directories); they can be software (programs) which do things on the computer; or they can be documents, which contain information (like text, photos, audio, movies, etc.).

The Cursor (sometimes called the "pointer") is your "hand" on the desktop. It moves with the mouse, and when you move it over something, a click of the mouse will select it. The cursor is contextual, in that it changes when you move it over different areas and objects.

The Taskbar is the whole stripe at the bottom of the screen which contains various parts. Right-click on it for options, such as turning on and off features. If you want, you can move the taskbar to any side of the screen, unless it is locked.

The Start Menu allows you to access various programs and functions (such as shut down, control panels, find file, etc.). In Windows 8, the Start menu disappeared in favor of a tablet-style interface, but due to user protests, it quickly returned in Windows 8.1. In Windows 10, it includes the Metro interface within the menu, allowing for tiled applications.

Search Bar (Cortana) allows you to search the computer, either by typed or voice input.

Pinned Applications allow you to open programs quickly, with just one click of the mouse, at any time. This is faster than a regular icon because the Pinned Applications are always visible, even when you cannot see the Desktop.

The System Tray (Microsoft calls it the "Notification Area," but most call it the "System Tray") shows the clock, sound control, and possibly other controls (printers, anti-virus, upgrades, etc.). You can click or double-click on any icon in the tray to see the control panel or application window for the utility. For example, if you double-click on the clock, you can see the Date & Time control panel; if you just hold the cursor over the time without clicking, you can see the date. If you single-click on the speaker icon, you can set the volume simply; double-click on the speaker icon to get the detailed control panel.

The Show Desktop Button will hide all windows and show only the Desktop. If you only hover the cursor over this button, the windows will "turn to glass," showing their outlines but being otherwise transparent.

The Mac OS Desktop

The Mac OS Desktop is a little different from the Windows Desktop. Since the Desktop first appeared on the Mac, the Windows desktop actually copies many elements that began with the Mac OS, although Windows gave them slightly different names. For example, the Mac desktop has a "trash" can; Windows has a "recycle bin."

Here is the desktop for a recent version of the Mac OS:

In the image, you can see these parts:

The Desktop
System Tray (not official name)
The Dock
The Cursor
The Menu Bar
Documents & Trash

The (1) Desktop, (2) icons, and (3) cursor are very similar to Windows' version. Notice the icons line up on the right side instead of the left, and the cursor is black instead of white. These are just small, cosmetic differences.

The Menu Bar (4) is much different from Windows. In Windows, every window has its own menu bar. In the Mac OS, there is only one menu bar, and it is always at the top of the screen; it changes depending on what program is active. At the right is what Windows users would call the "System Tray" (5), but on the Mac, it's just part of the menu bar. It might be called the "utility area," but that also is not an official name.

At the bottom of the screen is the "Dock" (6). The Dock serves the same purpose as the Taskbar and Start Menu in Windows. You can open programs, do quick launch, select windows, choose open programs to become active, and much more. On the left side (7) is the area for application (program) icons. You can add or remove icons just by dragging and dropping. On the right (8) is the Document area; you can place any documents or folders you wish here so they can be opened quickly. This also includes the Trash can, which becomes an "eject" button when you have selected a disk or other volume icon.

The Window

Types of Windows

There are two types of windows: file and folder windows, and application windows.

A file and folder window shows what is inside a "container" like a folder or a volume. In this type of window, you can see more files and folders.

A File and Folder Window
1 The Title Bar 5 The Search Bar
2 Minimize, Maximize/Restore Down,
Close buttons
6 The Navigation Pane
3 The Ribbon Tabs 7 The View Toggle
4 The Address Bar    

When you open a program, it also has a window: the application window. This window contains the program's activity.

An Application Window
1 The Title Bar 5 Work Area
2 Minimize, Maximize/Restore Down, Close buttons 6 Status Bar
3 Ribbon Tabs 7 View Bar
4 The Ribbon    

The Title Bar is the blue stripe at the top of the window. It contains the name of the window (left) and the window buttons (right). If you double-click the title bar, it will "restore down" the window (make the window smaller than the screen) or maximize the window (make the window take up the whole screen). If the window is "restored down" (made small), then you can move the window by click-and-dragging on the title bar.

window control buttons

The Minimize, Maximize/Restore Down, and Close Buttons control the appearance of the window.

  • The first (left) button will minimize (also called "hide") the window. This makes the window disappear, but it is not closed. Instead, it is "hiding inside" the window button in the taskbar, and can be brought out again by clicking on the window button.
  • The middle button will maximize or restore down the window; if the window is full-screen, then the button will "restore down" the window so it is smaller than the full screen; if the window is small, the same button will "maximize" the window, expanding it to fill the whole screen.
  • The third (right) button will close the window; if it an application window, it may quit the application.

If the window contains a running program, you may see two sets of these buttons. In that case, the top set controls the window for the program, and the lower set controls an inner window for a document.

Remember those names: (1) minimize, (2) maximize, (3) restore down, and (4) close.

The Menu Bar is no longer universal; some apps have Ribbons instead, some (browsers, for example) have a reduced menu on one side. Menu bars contain menus full of choices. Each menu has a different set of commands, each related to the menu title. Each window can have its own menu bar. (On the Macintosh, there is only one menu bar at the top of the screen which changes when you change the window.)

The Ribbon first appeared in Office 2007, and still is used mostly by Microsoft. As seen in the Application Window above in particular, the Ribbon is a fusion between menus and toolbars.

The Address Bar allows you to go to various places. You can click on the name of a folder in the path you can see, or explore folders in the path by clicking on the arrows next to the folder names.

The Navigation Pane is in the left side of the file & folder window; it has a number of important locations you can visit in a single click. You can drag and drop folders into the "Favorites" area and they will always appear there, until you remove them.

The Search Bar Allows you to search just that one directory (for a whole-computer search, use the search bar in the Taskbar).

The View Toggle is found in file & folder windows (see "Window Views" below).

Work Area is where the task of an application is carried out; in an Application window, this takes up most of the space.

The Status Bar / Details Pane shows details about the window or what is selected in it. The information changes from window to window. For example, in a window showing the contents of a volume or folder, the status bar will show how many items there are and what size they are. In a window showing a text document, the status bar may show the page number, the total number of pages, spellchecking information, and so on.

The View Bar is common for applications with text or images, allowing you to zoom in or out, or to command different types of views of the work.

Window Views

window view button

When you view a File & Folder window, there are several ways to see the icons in it. In the bottom right corner of the window, there is a toggle button which switches between list and icon view (see right). For more control, go to the window ribbon, and select "View":

Go ahead and try the different views. Extra Large Icons is best with photos. Medium Icons might look the simplest. For a plain view, try List. For more information on each file, try Details.

The Mac Window

The window in the Mac OS is similar, but there are many differences in style and function:

1 The Title Bar 5 The Sidebar
2 Close, Hide, Resize buttons 6 Files
3 The Toolbar 7 The Scroll Bar
4 The Search Window 8 File Path
9 Status Bar

The Title Bar (1) here has the title in the center (not the left); if you Command-click on the title, you will see the folders which this folder is located in. The buttons for the window (2) are different on the Mac: the red button closes the window (but not the program, usually!), the yellow button hides the window into the Dock, and the green button resizes the window—but it does not take up the whole screen, like in Windows.

The Toolbar (3) on the Mac is more powerful, and it is customizable; you can change the toolbar to include whatever you want. You can even put documents in the toolbar, so you can click on them and open them instantly—like a small Quick Launch area. The Search Window (4) on the right will quickly find any document on the computer. Once you type something to search, you can limit the search to this folder only or the whole computer, or you can search for filenames only or choose to search for content.

The left side of the window has the Sidebar (5), which allows you to jump to anywhere on the computer. You can jump to devices (like disks or other volumes), places (any folder you choose to add), network places (open folders on other computers in your network automatically appear in the Sidebar), and "Search" or "Smart" folders, which automatically search for all documents from a certain time or of a certain file type.

The Files area (6), Scroll Bar (7) and Status Bar (9) are very similar to Windows XP. But notice the File Path area (8); this shows the folders which contain the icon you selected; double-clicking on a folder in the path will open it.

Mac Window Views

Just like in Windows, you can change the window view in the Mac OS. For example, the view shown above is "List" view. Below is "Icon" view.

Below you can also see icons in "Cover Flow" view, just like album cover art in iTunes.

The Dialog Box

Having a Conversation with Your Computer

Sometimes your computer needs to talk to you. It might give you a message, ask you a question, or give you choices to make. This kind of communication is usually done with Dialog Boxes.

These are boxes (sometimes small, sometimes large) which will appear differently depending on which version of Windows and which software you are using.

Let's say that you want to print something. You choose the "Print" command. However, the computer needs more information. How many copies do you want to print? Which pages should be printed? What size paper is being used? If the printer has special features, you might need to make choices concerning them.

Dialog boxes look very similar to regular windows in the Windows OS; you can see some important differences, however. First, there are usually only one or two buttons at the right side of the Title Bar; there is no Menu Bar, and no Status Bar.

Dialog boxes are everywhere. There are two basic types: navigation dialog boxes and standard dialog boxes. A "navigation" dialog box requires you to find a file somewhere on the computer; the main area in the dialog box allows you to go up and down folders and look for files. A "standard" dialog box is any dialog box other than a navigation box.

Navigation dialog boxes come up when you need to find a file or location, especially with the Open, Save, and Save As… dialog boxes.

Navigation Dialog Boxes

Here's an image of a navigation dialog box:

  1. Title Bar
  2. Window Control Buttons (notice they are different from windows; there may be only one or two, or perhaps none.)
  3. Navigation Bar and Search window
  4. Toolbar - create new folders, change icon view
  5. Navigation Pane - quickly jump to new locations
  6. File Name and Type - specify what file name and what kind of file you want; not usually used in "Open" dialog boxes
Hey, Wait!

Disappearing Files

Sometimes you will open or save a file using a dialog box; you go to a folder, and you are surprised because files have gone missing!

For example, let's say that you have 8 files in a folder. 4 are Microsoft Word files, and four are pictures. However, when you see the folder in the dialog box, you only see three files! It may look like this:


The reason for this is because of the Save as type setting near the bottom of the dialog box. Note that in the above image, it is set to "Word Document (*.docx)"; when the "Save as type" is set to one file type, then only that file type or folders will be visible.

Here is the same folder, but notice that I changed the "Save as type" to be "Word 97-2003 Document (*.doc)"; here, the remaining MS Word file appears.


None of the pictures appear because no picture file type was selected.

If you are in an "Open..." dialog box, you can choose the file type "All Files (*.*)" which will make all the files visible.

"Standard" Dialog Boxes

There are many dialog box types aside from the Navigation box. They have many forms. For example, some dialog boxes have tabs at the top to increase the space for options:

Many dialog boxes can be much simpler:

For the purposes of any quiz or test, just think of these as "Standard" dialog boxes.

Efficiency Tip

Keyboard Shortcuts

In the next chapter, we will look more closely at keyboard shortcuts, but here's a really quick tip:

In a dialog box, when you see a button outlined and/or shaded in blue, hitting the Enter key will "push" that button.

To dismiss the dialog box, use the Escape ("esc") key, which will "push" the "Cancel" button.

Terms to Know

user interface (UI)the controls for a machine; the way a human being interacts with a computer.
punch cardspieces of paper with holes punched in specific locations which indicate specific values; first used in 1801 in the Jacquard Loom.
CLICommand Line Interface; a text interface where the user types commands which the computer follows.
GUIGraphical User Interface; a visual interface where the computer uses graphical cues to allow users a more natural way to control computer processes.
visual metaphora visual way of representing an abstract computer function in a way a user can naturally understand.
multitoucha multi-point touchscreen interface, allowing a user a more natural way to control computer processes.
Desktopa starting place for working on a computer; before Windows 8, all Windows operating systems would show the Desktop on startup.
windowa frame used to show the content of folders or applications.
scrollto move the content of a window up & down (or right & left) to see items that are not in the frame.
dialog boxa small box which is similar to a window, used to exchange information with the user.
icona small picture which represents a folder or file.
cursorthe arrow pointer which you can move with a mouse or trackpad, and use to select and open items.
Start Menua menu at the left of the taskbar which allows you to open programs, files, and locations; taken away with Windows 8, returning in October 2013 with Windows 8.1.
pinned applicationsprograms which are placed in the taskbar so they can be opened more easily.
taskbarthe bar at the bottom of the Windows screen which has the Start Menu, pinned applications, and system tray.
system traythe part of the taskbar (on the right side) where the clock and other utilities are located.
file and folder windowa window you can see by opening a folder, or pressing the keyboard shortcut "WIN + E"; the window shows icons representing files and folders.
application windowa window you can see by opening a program.
ribbonreplaces the menu bars and toolbars, since Office 2007 / Windows Vista; uses tabs (similar to menu titles) to activate large toolbars.
dialog boxa dialog box appears when the computer needs more information, or perhaps just give a short notification to the user. They can be simple or complex; they can simply tell a user that something has happened, or they can present a wide range of options in various tabs.
navigation dialog boxa dialog box (usually used for Save, Save As, or Open) which allows you to find files and folders.

Previous Chapter Chapter Quiz Next Chapter