CHAPTER 2

Characteristics of Graphical
& Web User Interfaces
Interaction Styles
An interaction style is simply the method, or methods, by which the user and a computer system communicate
with one another. Today the designer has a choice of several interaction styles in graphical system or Web
page and application design. They are as follows:
Command line
Menu selection
Form fill-in
Direct manipulation
Anthropomorphic
Command Line
The command-line interface is the oldest and original user interaction style. It requires the user to press a
function key or type a command into a designated entry area on a screen. The commands may be single
characters, abbreviations, words, or multiple words and codes.
Menu Selection
A menu is a set of options or choices from which a user must choose. On screens, the user selects a choice
with a pointing device or keystroke. Typically, some kind of visual feedback is then provided to indicate the
option selected. Menu selections can also be provided by voice as exemplified by the Press 1 to...
encountered after telephone calls to a business or organization. A newer version of telephone voice menus
now appearing asks the caller to speak a request (or command), which, hopefully, the voice recognition
system will understand.
Form Fill-in
The form fill-in style is very useful for collecting information. Todays typical form structured screen
contains a series of controls or fields into which the user either types information or selects an option, or
options, from a listing of choices. (Technically, a listing of choices presented to users is also a menu.) In old
text-based systems, however, screen forms were composed entirely of fields into which the user had to type
information. Screen fill-in forms are derived from their antecedents, paper forms.
Direct Manipulation
A direct manipulation interface, as found in graphical systems, enables the user to directly interact with
elements presented on the screen. These elements (called objects) replace the keyed entry of commands and
menus. Users typically select screen objects and actions by using pointing mechanisms, such as the mouse
or joystick, instead of the traditional keyboard. They navigate the screen and execute commands by using
menu bars and pull-down menus.
Anthropomorphic
An anthropomorphic interface tries to interact with people the same way people interact with each other.
Anthropomorphic interfaces include spoken natural language dialogues, hand gestures, facial expressions,
and eye movements. The development of these kinds of interfaces requires an understanding of human
1

behavior; how people interact with one another, the meaning of gestures and expressions, what people mean
when they look at things, and so forth. Wouldnt it be nice, for example, if the system could track eye
movement across the screen to a menu, and then recognize the blink of an eye to select the choice being
viewed? Or, if a frown elicited the automatic display of a help screen and a smile meant OK?

The Graphical User Interface

A user interface, as recently described, is a collection of techniques and mechanisms to interact with
something. In a graphical interface, the primary interaction mechanism is a pointing device of some kind.
This device is the electronic equivalent to the human hand. What the user interacts with is a collection of
elements referred to as objects. People perform operations, called actions, on objects. The operations include
accessing and modifying objects by pointing, selecting, and manipulating. All objects have standard resulting
behaviors.

The Popularity of Graphics

Graphics revolutionized design and the user interface. Whereas the older text-based screen possessed a onedimensional, text-oriented, form-like quality, graphic screens assumed a three-dimensional look. Information
floated in windows, small rectangular boxes that seemed to rise above the background plane. Windows could
also float above other windows.
Screen navigation and commands are executed through menu bars and pull-down menus. Menus pop up
on the screen. In the screen body, selection fields such as radio buttons, check boxes and list boxes. Increased
computer power and the vast improvement in the display enable a system to react to the users actions
quickly, dynamically, and meaningfully. Graphic presentation of information utilizes a persons informationprocessing capabilities much more effectively than other presentation methods. Properly used, it reduces the
requirement for perceptual and mental information recoding and reorganization, and also reduces the memory
loads. Graphics also can add appeal or charm to the interface and permit greater customization to create a
unique corporate or organization style.

The Concept of Direct Manipulation

The term used to describe graphical systems with this style of interaction was first used by Shneiderman
(1982). He called them direct manipulation systems, suggesting that they possess the following
characteristics:
The system is portrayed as an extension of the real world.
Objects and actions are continuously visible.
Actions are rapid and incremental with visible display of results.
Incremental actions are easily reversible.
Indirect Manipulation
In practice, direct manipulation of all screen objects and actions may not be feasible because of the following:
The operation may be difficult to conceptualize in the graphical system.
The graphics capability of the system may be limited.
The amount of space available for placing manipulation controls in the window border may be limited.
It may be difficult for people to learn and remember all of the necessary operations and actions.
When this occurs, indirect manipulation is provided. Indirect manipulation substitutes words and text, such
as pull-down or pop-up menus, for symbols, and substitutes typing for pointing. Most window systems are a
combination of both direct and indirect manipulation. A menu may be accessed by pointing at a menu icon
and then selecting it (direct manipulation). The menu itself, however, is a textual list of operations (indirect

manipulation). When an operation is selected from the list, by pointing or typing, the system executes it as a
command.

Characteristics of the Graphical User Interface

A graphical system possesses a set of defining concepts. Included are sophisticated visual presentation, pickand-click interaction, a restricted set of interface options, visualization, object orientation, extensive use of a
persons recognition memory, and concurrent performance of functions.
1. Sophisticated Visual Presentation
Visual presentation is the visual aspect of the interface. It is what people see on the screen. The sophistication
of a graphical system permits displaying lines, including drawings and icons. It also permits the displaying
of a variety of character fonts, including different sizes and styles. The display of 16 million or more colors
is possible on some screens. Graphics also permit animation and the presentation of photographs and motion
video.
The meaningful interface elements visually presented to the user in a graphical system include windows
(primary, secondary, or dialog boxes), menus (menu bar, pulldown, pop-up, cascading), icons to represent
objects such as programs or files, assorted screen-based controls (text boxes, list boxes, combination boxes,
settings, scroll bars, and buttons).
2. Pick-and-Click Interaction
Elements of a graphical screen upon which some action is to be performed must first be identified. The motor
activity required of a person to identify this element for a proposed action is commonly referred to as pick,
and the signal to perform an action as click. The primary mechanism for performing this pick-and-click is
most often the mouse and its buttons.
3. Restricted Set of Interface Options
The array of alternatives available to the user is what is presented on the screen or what may be retrieved
through what is presented on the screen nothing less, nothing more.
4. Visualization
Visualization is a cognitive process that enables people to understand information that is difficult to perceive,
because it is either too voluminous or too abstract. It involves changing an entitys representation to reveal
gradually the structure and/or function of the underlying system or process. Presenting specialized graphic
portrayals facilitates visualization. The best visualization method for an activity depends on what people are
trying to learn from the data.
5. Object Orientation
A graphical system consists of objects and actions. Objects are what people see on the screen. They are
manipulated as a single unit. A well-designed system keeps users focused on objects, not on how to carry
out actions. Objects can be composed of sub-objects. For example, an object may be a document. The
documents sub-objects may be a paragraph, sentence, word, and letter.

6. Use of Recognition Memory

Continuous visibility of objects and actions encourages use of a persons more powerful recognition memory.
This eliminates the out of sight, out of mind problem.
7. Concurrent Performance of Functions
Graphic systems may do two or more things at one time. Multiple programs may run simultaneously. When
a system is not busy on a primary task, it may process background tasks (cooperative multitasking). When
applications are running as truly separate tasks, the system may divide the processing power into time slices
and allocate portions to each application (preemptive multitasking).

The Web User Interface

Initially, Web interface design was essentially the design of navigation and the presentation of information.
It was about content, not data. In recent years a second and dual focus has emerged the design of Web
applications. Applications previously developed for use on graphical systems have increasingly migrated to
the Web for their foundation. Content- or information-focused interface design is typically called Web page
design. An application-focused interface is usually referred to as Web application design. Both styles share
many similar features, both being heavily graphical and information rich. Significant differences exist as
well, however. Web page interface design is largely a matter of properly balancing the structure and
relationships of menus, content, and other linked documents or graphics. The design goal is to build a
hierarchy of menus and pages that feels natural, is well structured, is easy to use, and is truthful. The Web
page is a navigation environment where people move frequently between pages of information. A Web
application is usually designed to collect and process data. Applications typically consume most or all of a
screen, and can monopolize the users attention for a long period of time. Applications also may be kept up
and running continuously.
The dividing line between page and application design is not always clear. In general, however, a Web pages
design intent is to mostly provide information. An application is designed to let a person do and save
something.

Characteristics of a Web Interface

A web interface possesses many characteristics, some similar to a GUI interface, and, as has already been
shown, some different. The following paragraphs examine many of these specific commonalities and
differences. GUI and Web interface design are similar. Both are software designs, they are used by people,
they are interactive, they are heavily visual experiences presented through screens, and they are composed
of many similar components. Significant differences do exist, however. The following Table highlights the
most significant differences.

General Principles of User Interface Design

An interface must really be just an extension of a person. This means that the system and its software must
reflect a persons capabilities and respond to his or her specific needs. It should be useful, accomplishing
some business objectives faster and more efficiently than the previously used method or tool. It must also be
easy to learn, because people want to do, not learn to do. Finally, the system must be easy and fun to use,
and evoke a sense of pleasure and accomplishment, not tedium and frustration.
The design goals in creating a user interface are described in the following section. They are fundamental to
the design and implementation of all effective interfaces, including both GUI and Web. These principles are
general characteristics of the interface, and they apply to all aspects.