Graphical User Interfaces (GUI)

Graphical User Interface (GUI)

1.0 Introduction

The Graphical User Interface (GUI) marks a significant shift in computing, moving from character-oriented systems to graphics-oriented ones. This evolution enhances accessibility and usability for the general public. GUIs leverage concepts like the desktop metaphor, catering to novice and non-programmer users.

1.1 Objectives

After studying this unit, you should be able to:

Define GUI and differentiate it from character-oriented systems.
Define GUI-related terms.
Identify key features of various GUIs.

1.2 What is Graphical User Interface?

The term "user interface" emerged in the engineering field in the late 1970s. With the rise of non-programming users, new interaction methods became essential. Apple Computer popularized the GUI with the Macintosh in 1984. Common GUI features include:

Secondary User-Input Devices: Typically a mouse or other pointing device.
Point and Shoot Functionality: Screen menus appear/disappear under device control.
Icons: Represent files, directories, and system entities.
Graphical Metaphors: Dialog boxes, buttons, sliders, and check boxes for user interaction.

Modern GUIs support graphics, dimensions, color, height, video, and dynamic interaction, simulating realistic 3D environments.

1.3 Evolution of Human and Machine Interaction

Early computer communication relied on command-based interfaces, demanding users learn extensive command sets. Initially, paper tapes, cards, and batch jobs were used. Time-sharing systems later enabled interaction via CRT terminals.

Batch and Time-Sharing Systems: Led to command-driven interfaces requiring memorization or manuals.
Early Users: Engineers and experts comfortable with command-line interfaces.
1970s Shift: Introduction of computers to non-technical users (secretaries, managers) who prioritized task completion over technical knowledge. Command-based interfaces led to computer phobia for some.

To improve user experience, devices for control, monitoring, and display were developed. Pointing devices and windowing systems emerged from university research in the late 70s. The mouse and joystick were invented, along with the concept of splitting screens into multiple windows for direct object manipulation.

Workstations with GUIs were designed in the 70s, assuming a dedicated desktop computer per user.

1.4 Common Graphical User Interfaces

GUIs facilitate the creation and manipulation of user interfaces using windows, menus, icons, dialog boxes, mice, and keyboards. Examples include Macintosh Toolbox, Microsoft Windows, and X-Windows.

1. Pointing Devices

Allow users to interact with the screen, invoke commands from menus, manipulate objects, select, move, or merge objects on the screen. Since the 1960s, tools like light pens, joysticks, touch screens, and mice have been used. The mouse is favored for hand coordination and cursor tracking.

2. Pointer

A screen symbol (usually an arrow) used to select objects and commands.

3. Bit-Mapped Displays

Use independently addressable tiny dots (pixels), offering finer resolution than character displays. Key advantage is graphic manipulation capabilities, WYSIWYG (What You See Is What You Get) presentation.

4. Windows

Divides screen into independent regions, allowing simultaneous display of multiple applications. Users can switch or share data between applications. Windowing systems support tiled or overlapped windows. Users organize screens by resizing or moving windows.

5. Menus

Display a list of available commands (File, Edit, Search). Users select operations instead of memorizing commands. Menu items can be words or icons, invoked by cursor movement and mouse click.

When a menu item is selected, it could lead to pull-down menus, which presents related commands or options.

6. Dialog Boxes

Enable complex user-computer interaction using dials, buttons, scroll bars, and editable boxes. Used to collect information from the user or present data to the user.

7. Icons

Symbolic representations of system/user-defined objects (files, folders, etc.). Double-clicking a folder icon opens a window displaying contents.

8. Desktop Metaphor

A physical metaphor paradigm (Alan Kay) that presents computer displays as real physical objects. Dragging unwanted objects to a wastepaper basket icon discards them, mimicking real life. The desktop metaphor presents information as it would appear and behave in an office, using icons for folders, in-baskets, out-baskets, and calendars.

9. The 3D GUI

Traditional desktop metaphor GUIs are $2\frac{1}{2}$ D, visual elements lie in the xy plane and are defined in 2D coordinates. In a 3D GUI, visual elements are in xyz space and defined in 3D coordinates. 3D GUIs offer more scope for metaphors based on our physical 3D environment e.g., starmaps where objects are simply placed somewhere in "cyberspace".

1.5 Functionality of Graphical User Interfaces

GUI development involves:

Windowing System: Allows programs to display multiple applications at once, with tools for building movable, resizable windows, menus, and dialog boxes.
Imaging Model: Defines how fonts and graphics are created on the screen.
Application Program Interface (API): Programming language functions that control menus, scroll bars, and icons.
Toolkits and Frameworks: Often object-oriented.

GUIs vary in their integration with the operating system (close integration vs. optional setup). While GUI development is complex, commercial developers aim to support multiple environments, despite the absence of standards, particularly in heterogeneous computing platforms. The main GUIs camp include IBM’s System Application Architecture (SAA), UNIX systems (around X Window), and the Macintosh.

1.6 GUI Design Consideration: Psychological Factors

Empirical studies have identified psychological factors for good GUI design:

Visual Acuity: The eye's ability to resolve detail. At a normal viewing distance of 19 inches, 5 degrees translates into about 1.7 inches, meaning that a user can take in roughly 14 characters wide and about 7 lines high. Constant eye movement across the screen causes unnecessary fatigue.
Information Limits: Limit the range of options/choices to five or six. Miller's research suggests recoding as a method people use to store information which has a direct impact on GUI design, especially concerning the number of menu items and icons.
Gestalt Principle: People use a top-down approach to organizing data. Proper grouping ensures redundancy in selection information, aiding the user. The top-down approach also allows for the development of emergent features.

1.7 GUI Design Consideration: Standards

Extrapolating psychological factors to GUI design isn't always straightforward. Key standards are:

Presentation of Information: Display only what the user needs to perform the current operation. Limiting information reduces errors and task completion time (up to 40% reduction with well-designed screens). Ways to conserve screen space are: Appropriate use of abbreviations, avoid unnecessary detail, use concise wording and familiar data formats. Use tabular formats with column headings.
Grouping of Information: Techniques include color (different groups in different colors), graphical boundaries (drawing boundaries around elements in GUI), and highlighting (reverse video, brightness, underlining, and flashing).
Information Sequencing: Adhere to de facto GUI screen standards, such as headings for pull-down menus at the top and disk availability icons at the top right. Place important/frequent commands prominently, and follow conventional usage.

1.8 GUI Examples

The goal of any GUI is to allow the user to work through the computer and application to concentrate on the primary cognitive task.

1.8.1 Microsoft Windows (MS-WINDOWS)

MS-Windows is a popular GUI for IBM PCs. Windows offers:

Common Look and Feel: Consistency across applications.
Device Independence: Applications are not tied to specific hardware.
Multitasking: Non-preemptive multitasking.
Memory Management: Breaks the $640K$ limitation of MS-DOS.
Support for Existing DOS Applications: Runs standard DOS applications directly.
Data Sharing: Shares data via the Clipboard and Dynamic Data Exchange (DDE).

To create screen objects such as windows, the application developer defines a class specifying the necessary properties. To interact with Instances of a window class, messages are sent and received by a special function called the window function. MS Windows presents a pre-defined style for user-defined windows.

Structure of a window:

The caption bar (or title bar) displays the name of application within the window.
- The system menu box contains names of commands available in all applications e.g., minimise, maximize, resize and close the window.
The menu bar contains list of commands In the application.
The client area is the area inside the window, which is under the application control.

Creation and Manipulation of a Window

To create a window the following steps must be taken:

a) Set up a window class structure which defines the attributes of the window class. Attributes that can be defined include:

i) the window function, which handles all messages for this class

ii) the icon and the cursor used for this class of windows

b) Manipulating windows: An application can choose to display the Windows, resize the window, display additional information in the client area, and so on.

Pop-Up and Child Windows

Pop-Up and child windows are special type of windows, and are used to communicate information between the application and the end-user.

MS-Windows provides a collection of predefined child windows. These predefined classes are button, scroll bars, listbox, edit and static class.

Resources

Resources are used to manage windows and user-defined object. MS-WINDOWS provides nine kinds of resources to application developers. These resources are : icons, cursors, menus, dialog boxes, fonts, bitmaps, char strings, user-defined resources, and keyboard accelerators.

Icons and cursors: Windows defines a few types of icons and cursors. A developer can also define an original icon or cursor using the ICONEDIT utility.
Menus: Currently, Windows does not support nesting of pop-up menus within other pop-up menus (Windows 3.0 provides this functionality).
Dialog boxes: Generally, dialog boxes appear as pop-up windows.
Fonts: Windows provides a few families of fonts with different sizes and shapes: Modern, Roman, Swiss, Helvetica, and Script. Application processors and desktop publishingcan define additional fonts as needed.
Bitmaps: Both mono and color bitmaps can be defined.
Character strings: They are handled as resources mainly to provide a manageable solution to internationalisation of a window application.
User-Defined Resources: These can be used for many purposes and support any user-defined data type.

Graphics Device Interface
Graphics in Windows are handled by the Graphics Device Interface (GDI). Both vector and raster color graphics are supported by GDI. GDI supports only two-dimensional graphics. Vector graphics are supported by a set of vector drawing functions such as drawing a line, point, and polygon etc. Metafiles take up less disk space than a bit-mapped representation since they do not represent each pixel directly on disk.

1.8.2 Macintosh Toolbox

The Macintosh GUI, called the Toolbox, offers utilities to manipulate resources. Key Functions are:

Fonts manager which allows manipulation of system and user defined fonts.
Event manager which provides monitoring of events generated by keyboard and keypad.
Text edit which provides simple text editing capabilities such as cut and paste.
Toolbox utilities provides a set of general routines to manipulate strings, fixed point arithmetic and so forth.

The Toolbox can be manipulated either from the assembly language or Macintosh Programmer's Workshop (MPW) language (Pascal, C, C++). One of the major features of the Toolbox is that most of the Toolbox utilities reside in ROM. This provides a very responsive user interface.

From this point on, we will concentrate on the user components of the Macintosh Toolbox such as the Window Manager, the Manager, the Menu Manager, the Dialog Manager, the Scrap Manager, the Draw, and the Resource Manager.

Functional Overview
The Tool box provides a collection of utilities to access and manipulate Macintosh hardware and software resources.

Object-Oriented Features of Toolbox
Just like Microsoft Windows, the Macintosh Toolbox design is object-oriented. When a window needs to be drawn or resized, a message is sent to the window definition function to perform the appropriate action.

The Window Manager

The Window Manager allows the application developer to manipulate windows on the screen. By clicking and holding the mouse within the region, the window can be dragged to a different screen.

New types of windows can be created through either the Window Manager or the Resource Manager.

The Resource Manager
The Resource Manager provides access to various resources such as the windows, fonts, icons and menus

The Menu Manager
The Menu Manager provides a set of routines to create and manipulate menus. A menu bar can contain a list of one or more menu items. Each menu item highlights itself when clicked with the mouse; this item is selected.

The Control Manager
The Control Manager provides a set of routines to define objects like buttons, check boxes and scroll bars. Most often controls are defined as part of a dialog or an alert box.

The Dialog Manager
The Dialog Manager provides a set of routines and data structures to manipulate dialogs and alert boxes. Dialog boxes are used to get additional information from the end-user of an application.

The Scrap Manager

The Scrap Manager allows the user to move data from one application to another. The user can paste the contents of the clipboard into another window.

1.8.3 X-Windows

The X Window system supports many interface styles. It is also network-based. The X architecture is based on the premise that an application can run one computer, while the graphical presentation of the application's output and responses from the user can occur on another computer. Exactly how the packets will be displayed (i.e. will look) on a workstation depends on the set of pre-designed window elements called widgets that are unique to the particular workstation in the system environment.

The X application programmer is likely to use a combination of a higher-level toolkit (e.g., theToolkit's Xt Intrinsic), Xlib, and a widget set.

A typical widget consists of two basic parts: a class record and an instance record. All widgets belonging to a class share a copy of common data methods for that class. The application has a pointer to the widget structure but does not have access to the real definition of the data that it represents. Another object-oriented technique promoted in X Windows is to extract some general functionality from two or more new widget classes and create a metaclass.

1.8.4 NeXT

The NeXT computer features a three-dimensional user interface. The NeXT system software comprises three major pieces: the Mach operating system, applications and the NeXT user interface.

NeXT User Interface

The NeXT user interface, is composed of four components namely Workspace Manager, Interface Builder, Application Kit, and NeXT Window Server.

The Mach operating system, developed at Carnegie Mellon University, is a re-designed UNIX with a reduced kernel size.

Application Kit

The Application Kit provides an extensive library of predefined classes. Each class within the hierarchy defines the behaviour of its objects.

Designing User Interfaces with Interface Builder

a) Define layout of screen: The lnterface Builder palettes include objects such as windows, menus, buttons, fields radio buttons and more.

b) Define the user-defined classes: The developer defines a new class definition using the Classes Window. Methods and outlets (see next step) are defined for this new class definition.

c) Making connections: The Inspector is used to connect user interface objects with methods of classes within the application.

1.9 GUI Development

GUI development is at the vanguard of creativity. There remains much to be done in terms of increasing the GUI functionality.

1.10 Further Readings

Suggested resources for further study:

Communication of ACM, April 1993.
Object Orientation: Concepts, Languages, Databases. User Interfaces, Khosafian, Setrag & Razmik Abnours, New York; Wiley & Sons, 1990.