Same topic in earlier issue
Issue
Previous article
Article
SIGCHI Bulletin
Vol.30 No.2, April 1998
Next article
Article
Same topic in later issue
Issue

The Graphical User Interface

An Introduction

Bernard J. Jansen

Introduction

There are a variety of university-level human-computer interaction (HCI) programs. Although a few offer breath and diversity, many students graduate from universities that offer only one or two CHI courses. As such, most students have a limited background in the various CHI areas. This article offers a general overview in one area, graphical user interfaces (GUI). A GUI allows a computer user to move from application to application. A good GUI makes an application easy, practical, and efficient to use, and the marketplace success of today's software programs depends on good GUI design. Consider the Macintosh and the IBM-PC. Computer users view Apple's Macintosh computers as having the best GUI. Correspondingly, their positive view of the Macintosh system is almost double that of the Windows users. Correspondingly, brand loyalty among Macintosh users is almost 20% higher than that for Windows users. The development of new software is extremely expense. With success or failure of a product and maybe the entire company dependent on the application's GUI reception in the marketplace, a good GUI design is extremely important. Unfortunately, it is not easy to define if an application's GUI is easy, practical, or efficient. These are attributes that do not lend themselves to counting. The marketplace does attempt to access these attributes, however (Bonsiepe 1993), but even after over 10 years of GUI development, there are still questions concerning what is a good GUI design. For example, the early Macintosh Apple used the Trash can icon as a metaphor for deleting files. However, one can pull items out of a trashcan until the trash person comes. The first trash can icon did not allow this retrieval. This contextual incongruity caused users many problems. As another example, the Windows 95 GUI is the most modern of all GUIs. One would expect it to be fairly well developed and relatively error free. However, of the approximately 90 complaints with Windows 95, none are performance complaints. They are all human factors type complaints, such as how to copy a file and how to get rid of annoying icons (Anonymous 1995). Finally, people have so many complaints about the X-Windowing System, the third major GUI standard, that there is whole book about what is wrong with it (Hopkins 1996). This paper will survey the common definitions of what a GUI is and review the three common GUI standards in the market today. It will then review three of the many human factor concepts underlying good GUI design, which are visual acuity, limits to absolute memory, and the principle of grouping. The paper will then present the effect of these factors on three GUI design areas, the amount of presented information, the grouping of information, and the placement of this information on the screen. Following this section, the ramifications of bad versus good GUI design will be addressed. Areas for research and likely directions of future GUI design conclude the paper.

GUIs

Although there are numerous GUIs in the market today, the exact definition of a GUI is still fuzzy. This may be due to the fact that GUIs are relatively new. There are three de facto GUI-standards that are the basis for all GUIs. This section reviews the common definition of GUIs, the history of GUI development, and GUI standards in the marketplace.

Definition

A GUI is a type of computer human interface on a computer. It solves the blank screen problem that confronted early computer users (Norman 1988). These early users sat down in front of a computer and faced a blank screen, with only a prompt. The computer gave the user no indication what the user was to do next. GUIs are an attempt to solve this blank screen problem. At a conceptual level, a computer human interface is a "means by which people and computers communicate with each other" (Norman 1988). One can make an analogy between a computer system's GUI and a car's steering wheel. The wheel directly binds the driver to the operation and functionality of the vehicle. When driving, a driver should not have to concentrate on the steering wheel. In the same way, the GUI binds the user of the computer system to the operation and potential of the computer system (Bonsiepe 1993). A good GUI design removes the impediment of communication with the computer system and allows the user to work directly on the problem at hand (Norman 1988). In computer science terms, the GUI is a visual operating display that the monitor presents on the monitor to the computer operator (Harding 1989). More specifically, a GUI is a specification for the look and feel of the computer system (Bonsiepe 1993). GUIs usually have common characteristic such as windows, icons, menus, and pointers (WIMP). Collectively, WIMPs are pictures that bring forth a certain action or an action space. The user issues commands via the GUI to computer applications. GUIs usually have three major components. These three components are (Hayes and Barab 1989): a windowing system, an imaging model, and an application program interface (API). The windowing system builds the windows, menus, and dialog boxes that appear on the screen. The imaging model defines the fonts and graphics that appear on the screen. WIMPs are products of both the windowing system and imaging model. Finally, the API is the means in which the user specifies how and what windows and graphics appear on the screen. The historical development of the GUI still impacts the three major GUI paradigms in the market today. Historically, all modern GUIs are offshoots of the Apple Macintosh. This has lead to a great deal of standardization and consistency among GUI design criteria. Therefore, most applications' GUIs adhere to one of the three major GUI paradigms, the Apple Macintosh, the IBM Systems Application Architecture (SAA), or the X-Windowing System. While none of these GUI designs are perfect, the overall design concepts are good enough to make radical departures counterproductive (Norman 1988), unless there are significant performance enhancements.

History

Researchers at the Xerox Palo Alto Research Center designed the first application with a GUI, the Xerox Star, in 1977. The Xerox Star was unique because the researchers carefully designed the computer human interface before they began designing the internal workings of the application. Unfortunately, the Xerox Star was too slow, and it was not commercially successful. However, Steve Jobs visited the Palo Alto Research Center and saw Xerox Star. He returned to Apple Computer and subsequently hired several of the original designers of Xerox Star. They first produced the Apple Lisa. Like the Xerox Star, the Apple Lisa was not commercially successful. In 1984, they developed the commercially successful Apple Macintosh. In the broadest terms, the Macintosh's GUI defined the look and feel of all GUIs today.

De Facto Standards

The Apple Macintosh, the IBM SAA, and X-Windowing System are the paradigms for all modern GUIs. Because of their influence in the standardization of today's GUI design, a brief description of the major features of each standard is necessary.

Apple Macintosh

Apple introduced the Macintosh as a computer "for rest of us." The GUI was a major part of the overall goal of the Macintosh. All graphical applications copied the Macintosh in its design and usage. The Macintosh introduced the first menu, icons, and point-and-click, mouse driven processing. With these menus and icons, the Macintosh was the first computer system that limited the users to contextually correct answers. For example, once the user made a selection via a menu, the menu limited the user's subsequent actions. The user could no longer choose something meaningless. The Macintosh's GUI has all three major components of a GUI, which are the windowing system, an imaging model, and an API.

IBM SAA

Unlike the Apple Macintosh, the IBM-SAA is more than just a GUI. It is a whole system of interfaces that can span machines from personal to mainframe computers. As such, it includes many functions that most GUIs do not, including a suite of networking and database tools. The SAA's GUI portion has all three GUI components. Another unique item of the SAA is that the user does not need a mouse to interact with the application. All actions can be executed from the keyboard, functionality not available in the Macintosh GUI. The most common SAA-type GUIs are Windows 3.11 for DOS and the Program Manger for OS/2.

MIT X-Windows System

Although a separate GUI standard, many X-Window based GUIs, such as Motif and TCL/TK, have copied the look and feel of the IBM SAA. X-Windows is still the underlying library for these GUIs. The X-Windowing System is the most popular GUI for UNIX systems. This is because any X-Windows software can use the X-Windows library, which gives it great portability and standardization across platforms.

X-Windows also works directly with networks, which allows the GUI display to be on one computer and the application that the user needs on another computer. It does not matter if the two computers are in different rooms or on different continents. It addition to the three common GUI components, X-Windows has a collect of application tools and utilities as a built in X-Library.

Theoretical Background

Although GUIs are an integral part of an application, GUIs are not inherently easier to use than command line interfaces. The quality of the design is the overriding issue for all interfaces (Benbasat and Todd 1993; Betts 1995). There are several screen design guidelines. On the other hand, there is shortage of empirical studies substantiating these guidelines. This lack of empirical research is especially apparent for modern GUI designs, such as Windows 95, Quicken 7.0, and Dbase 5. In a narrower sense, there are empirical studies that have identified basic psychological factors that one should consider in the design of good GUIs. This paper will narrow the discussion to three primary contributing human factors, which are:

Visual Acuity

Visual acuity is the ability of the eye to resolve detail. The retina of eye can only focus on a very small portion of a computer screen, or anything for that matter, at any one time (Wickens 1992). This is because, at a distance greater than 2.5 degrees from the point of fixation, visual acuity decreases by half. Therefore, a circle of radius 2.5 degrees around the point of fixation is what the user can see clearly. In the GUI world, this is the Rule of 1.7 (Sarna 1994). At a normal viewing distance of 19 inches, 5 degrees translates into about 1.7 inches. Assuming a standard screen format, 1.7 inches is an area about 14 characters wide and about 7 lines high (Helander 1988). This is the amount of information that a user can take in at any one time, and it limits the effective size of icons, menus, dialogs boxes, etc. If users must constantly move their eyes across the screen to clearly focus, the GUI design is causing a lot of unnecessary and tiring eye movement.

Information Limits

Once the user has a desired fixation point, there is a limit to the amount of information that the person can process at one time. A GUI design rule of thumb is that the range of options or choices should never be more than five or six (Miller 1956; Sarna 1994). Seminal work by Miller is the basis for this rule. Miller (Miller 1956) showed that absolute identification using one-dimensional criteria was about seven items, plus or minus two. He showed that this limitation also held for memory span. Miller introduced the concept of recoding as a method that people use to store information. Miller also pointed out that by expanding the identification criteria from one to more dimensions people could handle more choices and remember more. Later researchers expanded on Miller recoding to develop the concept that people chuck information together in order to remember more information (Baddeley 1994; Shiffrin 1994).This research has direct impact on GUI design, especially concerning the number of menu items and icons.

Gestalt Principle

The Gestalt Principle states that people use a top-down approach to organizing data (Helander 1988; Wickens 1992). This principle can influence how one should organize graphical information on the screen. The Gestalt school of GUI designers has attempted to identify criteria that cause people to group certain items together in a display. Proper grouping results in a necessary redundancy of selection information that aids the user. For example, if users know where one item in a group is on a screen, they will expect other like items to be there also. If one groups the items in line with this expectation, it allows for accurate locating and better transfer of information to the user. The top-down approach also allows for the development of emergent features. An emergent feature is a global property of a set that is not evident when one views each item locally. Since global processing tends to be automatic, one can argue that an emerged feature reduces the attention demand as a user operates a multi-element display. For this performance enhancement, one must use the Gestalt Principle in the initial placement, and the resulting organization must be compatible with the user's cognitive view of the task (Wickens 1992).

GUI Design Considerations

Considering the above psychological factors, one could come to the conclusion that one could easily extrapolate these factors to the design of a good GUI. Empirical studies of GUIs show that this intuition this is not always the case. The Rule of 1.7 directly leads to the conclusion that a good GUI would use a lot of icons. Unfortunately, too many randomly placed icons violate the limits of absolute memory. Using the Gestalt Principle, one can group like items together using factors like color to add more informational dimensions. Too many colors, however, destroy the global visual grouping of the items. The user then begins to concentrates on the GUI. Any primary cognitive task attention devoted to the interface may interfere with the primary task (Norman 1988). One can derive basis GUI standards from basic human factors, however. These standards are the presentation of information, the grouping of information, and information sequencing.

Amount of Information Presented

The amount of information to present is the most basic of GUI design considerations. H.E. Dunsmore (Helander 1988; Reiterer 1993) showed that making screens less crowded improves screen clarity and readability. As such, GUI designers usually follow the guidance that the interface should display only what the user needs to perform the current operation. Empirical researchers show that limiting the information to that necessary for the user reduces errors and time to perform tasks. Errors and performance time increase as the GUI presents more information. Of course, it requires a thorough analysis of the tasks that the user must perform in order to display only the necessary amount of information. Compared to a randomly placed screen, a well-designed screen can reduce time needed to perform a task by as much as 40% (Helander 1988; Lin and Daly 1994). Ways to conserve screen space are:

  1. Appropriate use of abbreviations: Many design documents recommend using complete words whenever possible. Due to screen sizing constraints, it is not always possible to use complete words. When complete words are not possible, abbreviations should be contextual and consistent. A good contextual example is "h," which is usually a good abbreviation to use for help. The number of abbreviations should not only be contextual but also be keep to a minimum. As a poor example, in the UNIX system, the "ls" command list files in a directory. The "ls" command has 17 different one-letter abbreviations that change the output options of the "ls" command. The one-letter abbreviations have little contextual link to the options they represent. In fact, the UNIX system is a good example of what not to do.
  2. Avoid unnecessary detail: For example, use whole numbers if one does not need decimals. Keep the window and icon designs clear and simple. Even when users prefer more complex icons, elaborate icons add nothing to performance. Studies show that when icon designs are too complex, time to complete a task actually increases (Benbasat and Todd 1993). In studies with 3-D and 2-D graphical displays, users preferred the 3-D displays. There were no differences in performance between the two graphical displays, however (Hubona 1995).
  3. Use concise wording: Screens have limited space. Screen designers should avoid the tendency to place additional data on the screen just because the data is available. More objective limits of screen density vary from thresholds of 25% to 80% (Helander 1988). There is no empirical research that substantiates any performance enhancement with any specific threshold.
  4. Use familiar data formats: With more familiar formats, the user will need less information to complete the task. An example for data entry is the standard USA address format of street, city, state, and zip code. In additional to requiring less instruction, the user will perform the operation faster than if the format is unfamiliar.
  5. Use tabular formats with column headings: Tabular formats allow for efficient labeling of related data. It is especially preferable for data location tasks. Simply splitting items on one long line into a two-line result in productivity improvements of 20% (Sarna 1994). Also, LaLomia and Coovert's research (Helander 1988) showed that locating a data value was quicker in tabular form then in a random or graph format. For trend analysis, a line graph is quicker than raw data (Helander 1988).

Grouping of Information

Given a set of information to display, there are many ways one can display the information. Proper grouping improves the information's readability and can highlight relationships between the information (Helander 1988). Tullis' (Helander 1988)(Sarna 1994) experiments in the mid-1980s showed that the best predictors of search time were the number of and size of the groups. Therefore, one should structure displays with the limits of visual acuity in mind. The user needs to be able to take in the different chunks of information at one glance to improve readability. Overall, the best predictors of ease of use were density and item alignment. Empirical research shows that search time increases as the size of the grouping exceeds 5 degrees of arc and the number of groupings increases above five (Helander 1988)(Wickens 1992). With groupings less than 5 degrees, the search duration is directly a function of the total number of groupings on the screen (Helander 1988). There are several techniques to aid in the grouping of information, which include:

  1. Color: Presenting different groups with different color clearly creates some degree of grouping among the elements of the same color. GUIs that utilize color well increase productivity. If like color items are in close proximity, the visual association is stronger than if the like color items are further apart. In addition to changing the item's colors, one can use different colors for the background and foreground. The effectiveness of this technique decreases as the number of screen colors increases (Helander 1988). Overuse of color degrades performance, however.
  2. Graphical Boundaries: Drawing boundaries around elements is the most common method of grouping elements in GUIs. Although there is no empirical evidence to show that these groupings improve performance, users prefer this type of groupings compared to other methods. This technique is especially popular with the IBM SAA systems. Another method of grouping is to group tasks within icons. Icon grouping is easy because many icons can have common attributes. Icons are also small and therefore use less space (Sears 1993), less than 5 degrees of arc. Another advantage of icons is that recognition is faster for pictures than for text (Benbasat and Todd 1993). This makes it easier for the novice to learn a system. Studies also show that icons have smaller error rates than textual interfaces and the same as for menu interfaces (Sears 1993). Conversely though, empirical studies have shown that, counter intuitively, icons do not lead to greater increases in performance.
  3. Highlighting: Besides color, there are several other methods of highlighting including reverse video, brightness, underlining, and flashing. The most common use of highlighting is reverse video to indicate an item that is currently selected. GUIs usually use brightness to show which items are not active at a given time. Underlining is effective if it does not interfere with the legibility of characters. Flashing will both get attention and annoy if the user can not turn off the flashing. Therefore, one should use flashing only to convey an urgent need. The Apple Macintosh uses flashing to signal only program or data destruction. Regardless of which type of highlighting, one needs to apply it conservatively. Overuse of highlighting causes confusion among users and defeats its purpose. Additionally, if one highlights the wrong information, the user has more difficulty detecting the important information (Helander 1988).

Information Sequencing

One needs to lay out a screen in a manner that allows the user to easily find any information on it. Most designers advocate the use of one the de facto GUI screen standards. This is because many users now expect certain modes of operation in all GUIs. For example, most users expect the top of screen to contain the headings for the pull-down menus. The top right is the default location for icons representing the disk availability. In the Macintosh GUI, the bottom right contains the trash icons used for deleting files. Within a window, there are also many standard modes. A window title is usually at the top. Scroll bars are on the right and bottom for vertical and horizontal window movement. A box for closing the window is at the top left. Icons for resizing the window are at the four corners (Helander 1988). Studies show that most users initially scan the screen starting at the upper-left corner. This corner should be the obvious starting point for applications invoked from within the window. This permits a left-to-right and top-to-bottom reading, which is standard for Western cultures. The optimum sequence for screen presentations is a collection of various factors, including:

  1. Sequence of use: One needs to present the user the information in the order that the user will probably utilize it.
  2. Conventional Usage: If a common convention is in general usage, the GUI design should continue using it. For example, in the standard window layout, the file option is usually to the far left of the menubar.
  3. Importance: The designer needs to place the more important information in a prominent location. For example, if several entries are possible, the GUI should lead off with the required ones and end with the optional ones.
  4. Frequency of use: One should place the most frequently utilized commands at the beginning. For example, in a menu list, the most frequently utilized commands should be at the top of the list.
  5. Generality versus Specificity: The more general items should precede the more specific items, especially when there is a hierarchical relationship among the data.
  6. Alphabetical or Chronological: If there is no other rules for ordering data element, then one should adopt some other technique such as an alphabetical or a temporal listing. Card (Helander 1988) showed that selection time was faster for alphabetical than for any other functional grouping. The goal of any GUI is to allow the user to work through the computer and application to concentrate on the primary cognitive task. The user should not be concerned with the user interface. Any attention devoted to the interface interferes with the main task (Benbasat and Todd 1993; Norman 1988).

Ramifications

What are the ramifications of GUI design? One consistent result is that an increased operational knowledge transfer between applications reduces training costs (Harding 1989). Training costs are usually one to three times the cost of the actual software and hardware (Boeri and Martin 1994). A good GUI design reduces required training time to 20-30 hours for a user to learn an application (Comaford 1993). For businesses, this means that a good GUI saves money and time. Additionally, a good GUI improves the user's perception of the application. The user's first 15 minutes of usage formulates the lasting impression of an application.

Conclusion

The primary goal of a GUI is to allow the user to concentrate on the task at hand. To do this, the GUI must make the interface between the human and the computer seamless. Modern GUIs adhere to one of three de facto standards, which are the Apple Macintosh, the IBM SAA, and the MIT X-Windowing System. These standards are not perfect, but they are good enough to preclude major deviation. Future GUIs will probably utilize one or more of these standards unless major performance enhancements result. Utilizing key psychological factors, GUI designers can achieve a seamless computer human interface. The three primary human factors that directly affect GUI design are visual acuity, the limits of absolute memory, and the grouping of information. At about 19 inches from an object, a person's visual acuity is about 5 degrees of arc. There appears to be a limit to absolute memory of about 7 items. Grouping of information based on the Gestalt principle appears to aid in information processing. Use of these factors result in GUI design principles that govern the amount of information to present, the proper way to group this information, and the proper placement and sequencing of this information on the screen. A good GUI should present information that is contextual and consistent. It should avoid unnecessary detail and use concise wording to conserve screen space. If familiar data formats exist, the GUI should utilize them. A GUI needs to group information using color to associate like items. Graphical boundaries are a very effective means to group like items, especially icons. Other highlighting techniques include reverse video, brightness, underlining, and flashing. One needs to sequence information on the screen to facilitate the user. The presentation of information should follow the sequence that the user needs it. Common information needs to be in common locations across windows and GUIs. The most important information needs to precede the lesser important information. Frequently utilized information or commands need to be in the most prominent location. The more general items should precede the more specific items. If no other ordering exists, one should alphabetize. The ramification of good GUI design results in reduced training time and improved performance. Reduced training time means lower costs and improved user perceptions. Bad GUI design prevents the user from concentrating on the primary cognitive task. This results in user frustrations, decreased performance, higher costs, and possibly product and marketplace failure. When designing GUIs, one need to keep the objectives of the GUI in mind and to generally avoid needless complexity (Marcus 1992). One must avoid useless innovation and concentrate on improvements that enhance performance. Future trends in GUIs are toward voice recognition and hypertext formatting language (Hayes and Barab 1989; Horton 1990). The hypertext trend allows the user to move directly from data and concepts in one application to similar data and concepts in other application. These trends will further remove the GUI as an obstacle between the user and the task.

References

Baddeley, Alan. 1994. The Magical Number Seven: Still Magic After All These Years? Psychological Review. Vol. 101. No. 2:353-356.

Benbasat, Izak and Peter Todd. 1993. An Experimental Investigation of Interface Design Alternatives: Icon vs. Text and Direct Manipulation vs. Menus. International Journal of Man-Machine Studies. Vol. 38:369-402.

Betts, Mitch. Standard GUIs Make Sense. Computerworld. Vol. 28. No. 11:75-76.

Bonsiepe, Gui. 1993. Interpretations of Human User Interface. Visible Language. Vol. 24. No. 3:262-285.

Boeri, Roberts J. and Martin Hensel. 1994. Mar Human Factors in Business CD-ROM Titles. CD-ROM Professional. Vol. 8. No. 2:107-108.

Comaford, Christine. Graphical User Interfaces: Keep Them Sleek and Simple. Computerworld. Vol. 25. No. 16:37-40.

Harding, Bruce A. Windows & Icons & Mice, Oh My! The Changing Face of Computing. Frontiers in Education Conference 1989: 19th Annual: 337-342.

Hayes, Frank and Nick Baran. A Guide to GUIs. Byte Vol. 4. (July 89):250-257.

Helander, Martin ed. Handbook of Human-Computer Interaction. New York: 1988.

Hopkins, Don. Paper from The X-Windows Disaster. Undated from the UNIX Haters Web-Site. Accessed May 1996.

Horton, William. 1990. Visual Rhetoric for On-line Documents. IEEE Transactions on Professional Communication. Vol. 33. No. 3:108-114.

Hubona, Geoffrey S. Evaluating. 1995. User Interface Design with Belief Constructs. Systems Sciences, 1995 Annual Hawaii International Conference. Vol. 4:700-709.

Lin, Yi Bing and Dan Daly. 1994. A Flexible Graphical User Interface for Performance Modeling. MASCOTS 1994: Modeling, Analysis, and Simulation International Workshop: 193-199.

Marcus, Aaron. The Future of Advanced User Interfaces in Product Design. TRON Project, 1992 Symposium: 14-20.

Miller, George A. 1956. The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information. Psychological Review. Vol. 101. No. 2:343- 352.

Norman, Donald. The Psychology of Everyday Things. New York: Basic Books: 1988.

Reiterer, Harold. The Development of Design Aid Tools for a Human Factor Based User Interface Design. Systems, Man, and Cybernetics, 1993 International Conference: 361-366.

Sarna, David E. and George J. Febish. What Makes a GUI Work? Datamation Vol. 4. (July 15 1994):29f.

Sears, Andrew. 1993. Layout Appropriateness: A Metric for Evaluating User Interface Widget Layout. IEEE Transactions on Software Engineering. Vol. 19. No. 7:707-720.

Shiffrin, Richard M. and Robert M. Nosofsky. 1994. Seven Plus or Minus Two: A Commentary On Capacity Limitations. Psychological Review. Vol. 101. No. 2: 357-361.

Wickens, Christopher D. Engineering Psychology and Human Performance. 2d ed. Harpers: New York: 1992. p. 24-109, and 116-160.

Anonymous. 1995. Windows 95 Annoyances. http://www.creativelement.com/win95ann. Dated 15 November 1995.

Author's Address

Department of Electrical Engineering and Computer Science
United States Military Academy
West Point, New York, 10997, USA
jansen@exmail.usma.edu

Same topic in earlier issue
Issue
Previous article
Article
SIGCHI Bulletin
Vol.30 No.2, April 1998
Next article
Article
Same topic in later issue
Issue