Bits & Bytes: Lesson 5

February 2007

Life before Mice

GUIs to the Rescue

Challenge: Create a tool for completing tasks such as producing a report, balancing a budget, searching and learning, communicating with friends and colleagues, and crafting opportunities for fun and recreation.

Solution 1967: A device that barely gets the job done and requires expert knowledge, patience, and plenty of time.

Solution 2007: A device that meets the challenge and much more by responding to the wishes of the user as if it were an extension of the user.

“The human mind does not work that way. It operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain…Yet the speed of action, the intricacy of trails, the detail of mental pictures, is awe-inspiring beyond all else in nature.”

—As We May Think by Vannevar Bush The Atlantic Monthly July 1945

Before the development of Graphic User Interfaces (GUI)) in operating systems such as Microsoft Windows and programs such as Microsoft Office or Internet Explorer, computer users communicated with computers through unnatural and unfriendly exchanges. The first computers required instructions to be manually wired. Later developments lead to the use of punch cards or tapes to interact with the computer. Even as late as 1980, interfacing with a computer was achieved almost exclusively through the keyboard using obtuse code which required considerable skill, knowledge, and patience on the part of the operator.

Today, it’s pretty much a given that using a computer means interacting with a graphical interface. We launch programs with a click on an icon, arrange the view with click and drag actions, and directly manipulate the contents of our work by pointing and selecting. It hasn’t always been so easy nor felt so natural.

Just for fun—if you know your way around DOS—try to locate a file on your computer or copy a file to your backup folder the old-fashioned way. Use only the keyboard and fight the urge to reach for the mouse. Good luck! If you ever needed proof of the power of graphical interfacing this exercise should provide it.

Similar to the way in which the early foundations of programming were conceived by Ada Lovelace long before the technology was available to build a computer, some of the ideas for a GUI computer were anticipated and dreamed of before it was possible to build such a machine. In the early 1930s, a gentleman named Vannevar Bush described a device he called the "Memex." He envisioned it as a desk with two touch screen graphical displays, a keyboard, and a scanner. His dream machine included connections similar to today’s hyperlinks which could access all human knowledge. The digital computer had not yet been invented, so the “Memex” remained just a dream. While his ideas were not widely read or discussed at the time, he made an impression on Douglas Englebart, who is credited with the invention of the mouse many years later and has become known as the “Father of the GUI.” The trail that has led us to the present state of GUI design has been a long and twisted path. Many enterprising companies and inspired individuals refined the designs of others and added their own unique contributions, and in so doing, paved the way for yet more future innovations.

A few highlights of the GUI heritage

1930 Vannevar Bush describes the Memex as a machine with graphical displays, a keyboard and a scanner.

1950’s Punch cards and rolls are used for input, processing, and data storage.

1956 At MIT, researchers begin experimentation on direct keyboard input.

1968 Douglas Englebart demonstrates technology similar to modern graphical CAD software complete with a mouse.

1973 Palo Alto Research Center (PARC) develops Alto with a display the size and orientation of a printed page and featured full raster-based, bitmapped graphics.

1981 Windows 1.0 showcases a graphical interface and multitasking support.

1984 The Macintosh debuts. The idea of "drag-and-drop" is also invented at this time.

1995 Windows 95 is released. Scrollbars, window control widgets, and menus become common place.

2007 Windows Vista is released with a refined GUI for enhancing the user’s experience.

GUI at Last

A graphical user interface (or GUI, often pronounced "gooey") involves interacting with a computer through the manipulation of graphic elements and text, often with a mouse or touch-screen input device.

Everyday GUIs

Virtually every interaction you have with electronic devices is a GUI interaction. Let’s retrace your steps today to get a sense of the extent and diversity of the GUIs in your life. Think of all of the technological choosing, touching, and clicking you did to get through your day.

6 AM: Turn on your PocketPC to check your email and the local weather.

7 AM: On the way to work, select a “wax” option on the touch screen at the car wash

8 AM: Check the movie schedule for the weekend on your smart watch

10 AM: Check for voice mail on your cell phone and add a new contact

11 AM: Order lunch online from the deli down the street

Noon: Relax with a sandwich and a round of your favorite video game

2 PM: Search with MSN.com for your mother’s birthday gift

3 PM: Get directions to a client through your vehicle navigation system

6 PM: Warm the meatloaf with the Quick-touch mode of the microwave

7 PM: Check your child’s attendance record and homework details on the school website

8 PM: Reprogram the satellite television recording system

10 PM: Change the landscape irrigation

11 PM: Check the home security system before turning in for the night

If it weren’t for the ease and speed of GUIs in the software of nearly everything you touch, you likely would have never made it to lunch!

So how does the wonder of GUI happen?

In an enterprise setting, building GUI software usually involves a Graphic Designer or Usability Expert who creates a mock-up design of the GUI for a specific application or computer program. Then the developer, who actually builds the application, adds the functionality for the processes required to accomplish the tasks. Modern programming environments called Integrated Development Environments (IDE), such as Visual Studio, streamline the process of adding GUI features such as buttons, menus, and icons to software applications.

Reality Check

1. List 5 GUIs you interacted with today. What other tasks did you perform that you wish were somehow more GUI capable?

Your answers will be likely be different from mine, but today I interacted with technology through a GUI to:

• Check out of a hotel

• Get an airline boarding pass

• Accept a package delivery

• Check on an online purchase delivery

• Download photos from my camera

I wish renting a car and ordering a medical prescription from my pharmacy were more GUI capable.

GUI Dissected

Manipulating objects on the screen is the underlying premise of a GUI and is based upon what we know about how our brain processes communication. Spoken and written language is more abstract than pictures and they require us to interpret the abstractions in order to decipher meaning. The brain works more efficiently with pictures and graphical forms and so these visual elements ease the communication process. GUI design builds upon this knowledge of human cognition.

What makes up a GUI?

Recall back to Lesson 2 when you learned about object-oriented design (OOD). You will remember that abstract objects are created with properties or characteristics, as well as methods or behaviors. GUI is the epitome of OOD; all of the “objects” you see on the computer screen or other display device are indeed “objects” in the sense of OOD. They all have properties and behaviors. It’s easy to think about OOD in the form of GUI because you can “see” most of these objects.

Typically, the objects used to build a GUI are referred to as controls. Let’s examine some of the common GUI control objects by analyzing their role in a GUI application designed to calculate the monthly payment amount for an auto loan. The payment is calculated based upon the amount of the loan, the number of payments to be made, and the interest rate being charged for the loan.

Control - Objects which make up the design of a Graphic User Interface such as buttons, graphics, menus and labels.

Display controls

Display controls are those GUI elements which create the basic structure of the screen design and communicate the organization and processes of the software to the user. These elements include the form and layout of the design, labels, and graphics. It is important to know that many controls can serve several functions within an application. Some, such as an icon, can communicate instructions to the user, as well as respond to instructions when clicked. The chart below lists only the most basic function of each control. With experience and creativity, you will find many additional uses.

Example	Control	Basic use
	Form	The window in which a Windows application is presented is called a Form. It serves as the container to hold all of the controls needed to interact with the user.
	Label	Labels are used to identify other controls and to give instructions to the user. The user cannot directly change the text in a label.
	PictureBox	Graphics can add to the GUI experience and are inserted into the form with a PictureBox.

Here is the beginning design of the Auto Loan Calculator application with its Form, Labels, and a PictureBox.

Input controls

Input controls enable users to interact with the software of device. While there are many controls that communicate the wishes of the user to the application or device, we will look at a few of the more common controls.

Example	Control	Basic use
	Button	Clicking a button triggers an event as a way of saying to the computer ‘Go do something!’
	TextBox	A Textbox is used to get user input or data such as their name, address or phone number. In our example, the loan amount is entered with a TextBox.
Color Grayscale	RadioButton	Radio buttons are used to offer multiple choices from which the user may select only 1. Either/or choices are well represented by radio buttons.
Heated seats Remote locks Sunroof	CheckBox	Check boxes allow the user to make choices and allow for more than one option to be included such as in selecting options for a new car.
	ListBox	A list box allows users to select from a list of choices by clicking on a line. This is ideal for short lists of choices.
	ComboBox	A ComboBox is a combination of a text box and a drop-down list of choices. You’ve encountered a ComboBox when selecting a state or country to complete your address for online shopping.

Here is the Auto Loan Calculator application with the addition of a ListBox, a TextBox, a ComboBox, and a Button.

Output controls

Depending upon the purpose of an application, the output given to the user can be presented in almost unlimited ways using almost any control; pictures can be changed, RadioButtons and Checkboxes can be selected, dialog boxes made to appear, new forms generated, and more. Labels are a common output control for presenting the results of simple applications. They are typically used to report the result of computations such as the payment amount in our example of the Auto Loan Calculator.

Creating a GUI

Software developers or programmers typically create GUI applications by using a development tool such as Microsoft Visual Studio. Microsoft Visual Studio is called an Integrated Development Environment (IDE) because developers can create software through all of the development stages from design and coding to testing and debugging. Developers place these controls on forms by selecting them from a toolbox in the development software tool or IDE. Amazingly, the IDE is also a GUI that allows developers to click and drag in order to select and position the controls needed for the design.

This is what the Microsoft Visual Basic 2005 Express Edition IDE looks like. Notice the Toolbox on the left side of the graphic. You can see that we barely scratched the surface of possible tool choices in the Auto Loan Calculator application. In addition to the tools in the expanded section of “Common Controls,” there are several collapsed sections such as “Containers,” ”Menus and Toolbars,” “Dialogs”, and others.

Event-based programming

A GUI would be of no value whatsoever without events and event handlers. It is the interaction between users and the controls on the forms which create events in the form of mouse clicking, dragging, or hovering actions. All Windows applications are event-driven. This means that every time you click a button or highlight text or choose a menu item, you create an event within the program or within the system. The entire time your computer is on, it is running what is called an “infinite event-loop;” it’s just waiting for an event to occur. When the computer perceives an event—one of those “Ah-ha, something happened” moments—it passes the event along to any event handler that has been programmed in the software to process that specific event. There are even events that are created by external sources. You have experienced the creation of an event on your computer from an external source during a chat with a friend in MSN Messenger. A message, sent by your friend over the Internet to you, creates an event on your computer.

In the Auto Loan Calculator program, the user indicates the length of the loan by clicking on one of the choices in the ListBox, entering the amount of the loan in the TextBox, and selecting the interest rate from the list of choices in the ComboBox. The Calculate button has been coded with an event handler to intercept a mouse click on the button. The event handler gathers the details entered in the ListBox, ComboBox, and TextBox, and performs the calculations to determine the payment amount of a loan of $20.500 for 5 years at 6.75%.

Design principles for Effective GUI

A graphical user interface in and of itself does not create a user-friendly experience however. Just as in other media, a GUI is most efficient when it follows good design principles that lead the user toward completing his or her work in the most intuitive manner and with as little frustration as possible.

Here are a few guidelines to follow when designing a GUI:

1. Make the actions required of the user as obvious and intuitive as possible. Use icons that are easily recognized. Give complete directions as necessary. Using Visa or MasterCard logos on buttons for users to indicate a payment method is a good example of this.

2. Choose icons and words carefully so that they express the exact meaning you intend. Be consistent. Create a comfortable setting with no surprises.

3. Avoid sounds and animation unless they are critical to the function of your program. Cute sounds and flashing icons become annoying very quickly.

4. Line up the buttons, textboxes and other controls in rows and columns or group related items together in group boxes to create order and control.

5. Place buttons and other controls in the order, from left to right and top to bottom, in which users will likely read or use them, or by order of importance and frequency of use. Avoid unnecessary hunting for the user.

6. Create a color palette that is pleasing. Limit the colors to 3 or 4.

7. Be consistent in the size of the controls and fonts you select.

8. Most of all, remember that cute and clever are seldom synonyms for easy and efficient.

Reality Check

1. Using controls described in this lesson, sketch a design for a sandwich shop GUI that allows users to select from a menu of 5 different basic sandwiches, choose a small or large sandwich size, and select additional fixings such as lettuce, tomato, mustard, onion, relish, and mayonnaise.

2. Describe how your design implements the design principles for effective GUIs.

Your sketch might be different, but this is one possible design.

A Combobox is used to list the sandwich fillings, RadioButtons are used for the choice of either small or large, and CheckBoxes permit the user to select as many fixings as desired. The cost of the sandwich is calculated as the choices are made and the button to place the order is the last control on the form.

This design follows the design principles by:

• The controls being arranged in the order to be used.

• Colors are limited to just a few.

• Fonts and sizes are consistent.

Summary

Graphic User Interface (GUI) is a manner of interacting with a computer through manipulation of graphic elements, often with the use of a mouse. In the 1930s, Vannevar Bush envisioned a GUI which he described in a futuristic device called the "Memex."

Douglas Englebart is credited with the invention of the mouse and has become known as the “Father of the GUI.” Many enterprising companies and inspired individuals refined the designs of others and added their own unique contributions to create today’s GUI designs.

Building GUI software usually involves a Graphic Designer or Usability Expert who creates a mock-up design of the GUI for an application. The developer creates the GUI and adds the code required. Modern programming environments called Integrated Development Environments (IDE) streamline the process of adding features such as buttons, menus, and icons.

GUI is an example of object-oriented design (OOD). The objects you see on the computer screen or other display device are “objects” in the sense of OOD with properties and behaviors.

The elements of GUI are called controls and can serve several functions within an application. While there are many, many controls, these are a few of the common controls:

• Forms

• Labels

• Picture boxes

• Various types of buttons

• Textboxes

• List boxes

• Menus

All Windows applications are event-driven. Every action by the user, or sometimes from external sources, creates an event. If the computer finds an event handler that matches the event, some action occurs within the program.

Follow simple design principles to create clean and more intuitive interfaces.

• Make the actions required of the user obvious and intuitive.

• Be consistent with designs, fonts, and instructions to the user.

• Avoid unnecessary sounds and animation.

• Create order with the arrangement of controls.

• Limit the colors to 3 or 4.

You’re probably ready to learn more about programming GUI and you may even be ready to create your very first Windows application! Check out the other lessons on the Beginner Developer Learning Center to continue your journey!