Thanuja M UID Module-1

The User Interface - An Introduction and Overview

● The user interface is the most important part of any computer system- It is the system
to users.
● The goals of interface design are simple: to make working with a computer easy,
productive, and enjoyable.
● Part 1, provides an introduction to the human- computer interface.

User Interface Design Definition

● User interface design is a subset of a field of study called human-computer

interaction (HCI).
● Human-computer interaction is the study, planning, and design of how people and
computers work together so that a person’s needs are satisfied in the most effective
way.
● HCI designers must consider a variety of factors: what people want and expect, what
physical limitations and abilities people possess, how their perceptual and information
processing systems work, & what people find enjoyable & attractive.
● Designers must also consider technical characteristics and limitations of the com-
puter hardware and software.
● The user interface is the part of a computer and its software that people can see,
hear, touch, talk to, or otherwise understand or direct. The user interface has
essentially two components: input and output.
● Input is how people communicate his needs to the system using keyboard or any
pointing device and output is how the system returns processing result to user
through screen or sound.
● The best interface is one which has proper design with combination of effective
input and output mechanisms.

Importance of Good Design

● In Spite of today’s rich technologies and tools we are unable to provide effective
and a usable screen because of lack of time and care.
● A well-designed interface and screen is important to our users. It is their window to
view the capabilities of the system and bridge the capabilities of the software. and it
is also the vehicle through which complex tasks can be performed.
● A screen’s layout and appearance, and system navigation affect a person in a variety
of ways.
● If they are confusing and inefficient, people will have greater difficulty in doing their
jobs and will make more mistakes.
● Poor design may even chase some people away from a system permanently. It can
also lead to aggravation, frustration, and increased stress.
● Poor interface design can also have a huge financial cost to users and organizations.

1
Thanuja M UID Module-1

● A critical system, such as one used in air traffic control or in a nuclear power plant,
may compromise the safety of its users and/or the general public.

Benefits of Good Design

● The benefits of a well-designed screen have also been under experimental scrutiny for
many years. One researcher, for example, attempted to improve screen clarity and
readability by making screens less crowded. The result: screen users of the modified
screens completed transactions in 25 percent less time and with 25 percent fewer
errors than those who used the original screens.
● Another researcher has reported that reformatting inquiry screens following good
design principles reduced decision-making time by about 40 percent, resulting in a
savings of 79 person-years in the affected system.
● Other benefits also accrue from good design (Karat, 1997). Training costs are lowered
because training time is reduced, support line costs are lowered because fewer assist
calls are necessary, and employee satisfaction is increased because aggravation and
frustration are reduced.
● Another benefit is, ultimately, that an organization’s customers benefit because of the
improved service they receive.
● Identifying and resolving problems during the design and development process also
has significant economic benefits.

History Of GUI

● In 1970’s, Research at Xerox’s Palo Alto Research Center provided an alternative to

the typewriter — an interface that uses a form of human gesturing.
● The Xerox systems Altus and STAR introduced the mouse and pointing and selecting
as the primary human-computer communication method. The user simply pointed at
the screen, using the mouse as an intermediary.
● Ivan Sutherland from the Massachusetts Institute of Technology (MIT) is given credit
for first introducing graphics with his Sketchpad program in 1963. Lines, circles, and
points could be drawn on a screen using a light pen.
● Xerox worked on developing handheld pointing devices in the 1960s and patented a
mouse with wheels in 1970. In 1974 Xerox patented today’s mouse, after a researcher
was suddenly inspired to turn a trackball upside down.
● Xerox was never able to market STAR successfully, but Apple quickly picked up the
concept and the Macintosh, released in 1984, was the first successful mass-market
system. A new concept was born that revolutionized the human-computer interface.
This new interface style quickly advanced as other products entered the marketplace.
● In 1985 Microsoft released Windows 1.0 and Commodore introduced the Amiga 100.
● In 1987 Apple introduced Macintosh II, the first color Macintosh, and the X Window
system became widely available.

2
Thanuja M UID Module-1

● IBM’s contribution was the release of their System Application Architecture

(including Common User Access) and Presentation Manager, intended as graphics
operating system replacement for DOS.
● Other developmental milestones include NeXT’s 1988 release of NeXTStep, the first
to simulate a three-dimensional screen.
● Then, in 1989, several UNIX-based GUIs were released, including Open Look by
AT&T and Sun Microsystems, and Motif for the Open Software Foundation by DEC
and Hewlett-Packard.
● Open Look possessed an innovative appearance to avoid legal challenges.Finally,
through the 1990s and 2000s, a succession of products and upgrades from Microsoft
and Apple appeared.

World Wide Web

● Internet-1960’s
● J. C. R. Licklider of MIT proposed a global network of computers in 1962 and moved
to the Defense Advanced Projects Research Agency (DARPA) to lead the
development work.
● In 1969 the Internet, then known as Advanced Research Projects Agency Network
(ARPANET), was brought online, which connected the computers at four major
universities.
● One major goal of the Internet was to provide a communications network that would
still function if some of the sites were destroyed by a nuclear attack
● Then in 1974 Bolt, Beranek, and Newman released Telenet, the first commercial
version of ARPANET, and the public was exposed to how computers could be used in
daily life.
● The early Internet was not user-friendly, being used only by computer experts,
engineers, scientists, and librarians
● Through the late 1970s and into the 1980s, the common language of all Internet
computers, TCP/IP, was created.
● The Internet as it is known today came into existence, and in 1982 the term Internet
was formally coined.
● In 1991 Gopher, the first friendly interface, was developed at the University of
Minnesota.
● In 1991 HTML was introduced and released to the Internet, but there was no good
interfaces available.
● The Web was invented by Tim Berners-Lee at CERN in 1989 and opened to the
public in 1991. It was conceived as a "universal linked information system".
● The Web is a service that operates over the Internet.
● The first popular graphics-based hypertext browser was Mosaic, created by the
National Center for Supercomputing Applications (NCSA) at the University of
Illinois in 1993.

3
Thanuja M UID Module-1

● The Netscape Navigator browser, first released in 1994.

● Netscape Navigator was the most successful browser, with its market share
percentage in the 80s, until Microsoft declared war and entered the market with its
Internet Explorer.
● In 1994 The World Wide Web Consortium (W3C) was formed to promote and
develop standards for the Web.
● In 2003 Apple released version 1.0 of Safari, a Web browser for the Macintosh.

Characteristics of Graphical and Web User Interfaces

The following characteristics of GUI and Web interfaces are reviewed:

■ Interaction styles.
■ The concept of direct manipulation
■ The characteristics of graphical interfaces.
■ The characteristics of Web interfaces.
■ Web page versus Web application design.
■ The general principles of user interface design

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

The choice of interaction styles to be considered may be limited based upon the type of
system being developed and the characteristics of the input and output devices to be used for
the interface.

4
Thanuja M UID Module-1

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.
● The command-line style is powerful, offering immediate access to system functions.
● It is also flexible and able to incorporate options or parameters to vary its behavior.
● One problem with command lines is that they must be remembered and they test one’s
power of recall. No clues about what commands are available exist on the screen.
● Another problem is that command lines can be cryptic and obscure with complex
syntax. They are also very prone to, and intolerant of, typing errors that can lead to
user frustration.

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.

5
Thanuja M UID Module-1

● 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. (Is this an auditory command line?)
● Screen menus are advantageous because they utilize a person’s much stronger powers
of recognition, not recall.
● However, menu choice labels must be meaningful and understandable for the menu to
be truly effective. Otherwise, speed of use will be degraded and errors increase.
● Menus can break a complex interaction into small steps, which structure and aid the
decision-making process. This is especially helpful for infrequent users who are
unfamiliar with the system. On the other hand, many small steps may slow the
knowledgeable user. Techniques, however, are available to overcome these problems
for the expert.

Form Fill-in
● The form fill-in style is very useful for collecting information.
● Today’s typical formstructured 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.
● An advantage of a form is its familiarity. If it understands its purpose and allow fast
and easy entry of information.
● Conversely, a poorly designed screen form can be inefficient and aggravating to
complete.

Direct Manipulation
● A direct manipulation interface, 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

6
Thanuja M UID Module-1

● 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
behavior; how people interact with one another, the meaning of gestures and
expressions, what people mean when they look at things, and so forth.
● The most advanced interface is the natural language dialog.

GUI Definition

● In brief, a graphical user interface can be defined as follows. A user interface 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. What the user interacts with is a collection of elements referred to as
objects.
● They can be seen, heard, touched, or otherwise perceived.
● Objects are always visible to the user and are used to perform tasks.
● They are interacted with as entities independent of all other objects.
● People perform operations, called actions, on objects.
● The operations include accessing and modifying objects by pointing, selecting, and
manipulating.

Popularity of Graphics

● Graphics revolutionized design and the user interface.

● Graphics assumes three-dimensional look whereas text based system assumes one
dimensional look.
● Information can appear or disappear through floating windows and navigation and
commands can be done through menu or pull downs or screen controls.
● Increased computer power and the vast improvement in the display enable the user’s
actions to be reacted to quickly, dynamically, and meaningfully.
● If properly used graphics can reduce mental and perceptional load and increases
information transfer between men and machine because of visual comparisons and
simplification of the perception of structure.

Concept of Direct Manipulation

The term used to describe this style of interaction for graphical systems was first used by
Shneiderman (1982). He called them direct manipulation systems, suggesting that they
possess the following characteristics:

7
Thanuja M UID Module-1

The system is portrayed as an extension of the real world: A person is allowed to work in
a familiar environment and in a familiar way, focusing on the data, not the application and
tools. The physical organization of the system, which most often is unfamiliar, is hidden from
view and is not a distraction.

Continuous visibility of objects and actions: objects are continuously visible. Reminders of
actions to be performed are also obvious. Nelson (1980) described this concept as ―virtual
reality a representation of reality that can be manipulated. Hatfield (1981) is credited with
calling it ―WYSIWYG (what you see is what you get) and Rutkowski (1982) described it as
transparency

Actions are rapid and incremental with visible display of results: the results of actions are
immediately displayed visually on the screen in their new and current form. Auditory
feedback may also be provided. The impact of a previous action is quickly seen, and the
evolution of tasks is continuous and effortless.

Incremental actions are easily reversible: Finally, actions, if discovered to be incorrect or

not desired, can be easily undone.

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 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
Graphical system advantages

The success of graphical systems has been attributed to a host of factors. The following have
been commonly referenced in literature and endorsed by their advocates as advantages of
these systems.
1. Symbols recognized faster than text: symbols can be recognized faster and more
accurately than text. An example of a good classification scheme that speeds up
recognition is the icons. These icons allow speedy recognition of the type of message
being presented.

8
Thanuja M UID Module-1

2. Faster learning: a graphical, pictorial representation aids learning, and symbols can
also be easily learned.
3. Faster use and problem solving: Visual or spatial representation of information has
been found to be easier to retain and manipulate and leads to faster and more
successful problem solving.
4. Easier remembering: Because of greater simplicity, it is easier for casual users to
retain operational concepts.
5. More natural: symbolic displays are more natural and advantageous because the
human mind has a powerful image memory.
6. Fewer errors: Reversibility of actions reduces error rates because it is always
possible to undo the last step. Error messages are less frequently needed.
7. Increased feeling of control: The user initiates actions and feels in control. This
increases user confidence
8. Immediate feedback: The results of actions furthering user goals can be seen
immediately. If the response is not in the desired direction, the direction can be
changed quickly.
9. Predictable system responses:Predictable system responses also speed learning.
10. Easily reversible actions: This ability to reverse unwanted actions also increases
user confidence
11. More attractive: Direct-manipulation systems are more entertaining, cleverer, and
more appealing.
12. May consume less space: Icons may take up less space than the equivalent in words
but this is not the case always
13. Replaces national languages: Icons possess much more universality than text and
are much more easily comprehended worldwide.
14. Easily augmented with text displays: Where graphical design limitations exist,
direct-manipulation systems can easily be augmented with text displays. The reverse
is not true.
15. Low typing requirements: Pointing and selection controls, such as the mouse or
trackball, eliminate the need for typing skills.

Graphical system disadvantages:

1. Greater design complexity: Controls and basic alternatives must be chosen from a
pile of choices numbering in excess of 50. This design potential may not necessarily
result in better design unless proper controls and windows are selected. Poor design
can undermine acceptance.
2. Learning still necessary: The first time one encounters many graphical systems,
what to do is not immediately obvious. A severe learning and remembering

9
Thanuja M UID Module-1

requirement is imposed on many users because meanings of icons or using pointing

device have to be learned.
3. Lack of experimentally-derived design guidelines: today there is a lack of widely
available experimentally-derived design guidelines. Earlier only few studies to aid in
making design decisions were performed and available for today now. Consequently,
there is too little understanding of how most design aspects relate to productivity and
satisfaction.
4. Inconsistencies in technique and terminology: Many differences in technique,
terminology, and look and feel exist among various graphical system providers, and
even among successive versions of the same system. So the user has to learn or
relearn again while shifting to next terminology.
5. Not always familiar: Symbolic representations may not be as familiar as words or
numbers. Numeric symbols elicit faster responses than graphic symbols in a visual
search task.
6. Window manipulation requirements: Window handling and manipulation times
are still excessive and repetitive. This wastes time.
7. Production limitations: The number of symbols that can be clearly produced using
today’s technology is still limited. A body of recognizable symbols must be produced
that are equally legible and equally recognizable using differing technologies. This is
extremely difficult today.
8. Few tested icons exist: Icons must be researched, designed, tested, and then
introduced into the marketplace. The consequences of poor or improper design will be
confusion and lower productivity for users.
9. Inefficient for touch typists: For an experienced touch typist, the keyboard is a very
fast and powerful device.
10. Not always the preferred style of interaction: Not all users prefer a pure iconic
interface. User will also prefer alternatives with textual captions.
11. Not always fastest style of interaction: graphic instructions on an automated bank
teller machine were inferior to textual instructions.
12. May consume more screen space: Not all applications will consume less screen
space. A listing of names and telephone numbers in a textual format will be more
efficient to scan than a card file.
13. Hardware limitations: Good design also requires hardware of adequate power,
processing speed, screen resolution, and graphic capability.
Characteristics of the Graphical User Interface

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.

10
Thanuja M UID Module-1

 It also permits the displaying of a variety of character fonts, including different sizes
and styles.
 The meaningful interface elements visually presented to the user in a graphical system
include windows (primary, secondary, or dialog boxes), menus (menu bar, pull down,
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), and a mouse pointer and cursor.
 The objective is to reflect visually on the screen the real world of the user as
realistically, meaningfully, simply, and clearly as possible.

2. Pick-and-Click Interaction
 To identify a proposed action is commonly referred to as pick, 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 and the secondary mechanism for performing these selection actions is
the keyboard.

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, and
nothing more. This concept fostered the acronym WYSIWYG.

4. Visualization
 Visualization is a cognitive process that allows people to understand information that
is difficult to perceive, because it is either too voluminous or too abstract.
 The goal is not necessarily to reproduce a realistic graphical image, but to produce
one that conveys the most relevant information.
 Effective visualizations can facilitate mental insights, increase productivity, and foster
faster and more accurate use of data.

5. Object Orientation
 A graphical system consists of objects and actions. Objects are what people see on the
screen as a single unit.
 Objects can be composed of sub objects. For example, an object may be a document
and its sub objects may be a paragraph, sentence, word, and letter.
 Objects are divided into three meaningful classes as Data objects, which present
information, container objects to hold other objects and Device objects represent physical
objects in the real world.
 Objects can exist within the context of other objects, and one object may affect the way
another object appears or behaves. These relationships are called collections, constraints,
composites, containers and persistence.

11
Thanuja M UID Module-1

 A collection is the simplest relationship — the objects sharing a common aspect.

A collection might be the result of a query or a multiple selection of objects.
Operations can be applied to a collection of objects.
 A constraint is a stronger object relationship. Changing an object in a set affects
some other object in the set. A document being organized into pages is an
example of a constraint.
 A composite exists when the relationship between objects becomes so significant
that the aggregation itself can be identified as an object. Examples include a range
of cells organized into a spreadsheet, or a collection of words organized into a
paragraph.
 A container is an object in which other objects exist. Examples include text in a
document or documents in a folder. A container often influences the behavior of
its content. It may add or suppress certain properties or operations of objects
placed within it, control access to its content, or control access to kinds of objects
it will accept. These relationships help define an object’s type. Similar traits and
behaviors exist in objects of the same object type.
 Persistence is the maintenance of a state once it is established. An object’s state
(for example, window size, cursor location, scroll position, and so on) should
always be automatically preserved when the user changes it.
 Properties or Attributes of Objects: Properties are the unique characteristics of an
object. Properties help to describe an object and can be changed by users.  Actions:
People take actions on objects. They manipulate objects in specific ways (commands) or
modify the properties of objects (property or attribute specification).
 The following is a typical property/attribute specification sequence:
 The user selects an object—for example, several words of text.
 The user then selects an action to apply to that object, such as the action BOLD.
 The selected words are made bold and will remain bold until selected and
changed again.

 Application versus Object or Data Orientation

An application-oriented approach takes an action: object approach, like this:
Action> 1. An application is opened (for example, word processing).
Object> 2. A file or other object selected (for example, a memo).

An object-oriented object: action approach does this:

Object> 1. An object is chosen (a memo).
Action> 2. An application is selected (word processing)

The object:action approach permits people to focus more easily on their task and minimizes
the visibility of the operating system and separate applications

12
Thanuja M UID Module-1

Views

 Views are ways of looking at an object’s information.

 IBM’s SAA CUA describes four kinds of views: composed, contents, settings, and
help.
 Composed views present information and the objects contained within an object. They
are typically associated with data objects and are specific to tasks and products being
worked with.
 Contents views list the components of objects.
 Settings views permit seeing and changing object properties.
 Help views provide all of the help functions.

6. Use of Recognition Memory

 Continuous visibility of objects and actions encourages use of a person’s 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).
 Data may also be transferred between programs. It may be temporarily stored on a
clipboard for later transfer or automatically swapped between programs.

The Web User Interface

 Web interface design is essentially the design of navigation and the presentation of
information.
 Proper 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 is a navigation environment where people move between pages of
information, not an application environment. It is also a graphically rich environment.
 Web interface design is difficult for a number of reasons. First, its underlying design
language, HTML. Next, browser navigation retreated to the pre-GUI era.
 Web interface design is also more difficult because the main issues concern
information architecture and task flow, neither of which is easy to standardize.

13
Thanuja M UID Module-1

 It is more difficult because of the availability of the various types of multimedia, and
the desire of many designers to use something simply because it is available.
 It is more difficult because users are ill defined, and the user’s tools so variable in
nature.

The popularity of Web

 While the introduction of the graphical user interface revolutionized the user interface,
the Web has revolutionized computing. It allows millions of people scattered across the
globe to communicate, access information, publish, and be heard. It allows people to
control much of the display and the rendering of Web pages.
 Web usage has reflected this popularity. The number of Internet hosts has risen
dramatically.
 Users have become much more discerning about good design. Slow download times,
confusing navigation, confusing page organization, disturbing animation, or other
undesirable site features often results in user abandonment of the site for others with a
more agreeable interface. Characteristics of Web Design
 A Web interface possesses a number of characteristics, some similar to a GUI interface,
and, as has already been shown, some different.

GUI versus Web Design

14
Thanuja M UID Module-1

15
Thanuja M UID Module-1

16
Thanuja M UID Module-1

Printed Pages versus Web Pages

 Page size: Printed pages are generally larger than their Web counterparts. They are also
fixed in size, not variable like Web pages. The visual impact of the printed page is maintained

17
Thanuja M UID Module-1

in hard-copy form, while on the Web all that usually exists are snapshots of page areas. The
visual impact of a Web page is substantially degraded, and the user may never see some parts
of the page because their existence is not known or require scrolling to bring into view.
Design implications: the top of a Web page is its most important element, and signals to the
user must always be provided that parts of a page lie below the surface.
 Page rendering: Printed pages are immensely superior to Web pages in rendering. Printed
pages are presented as complete entities, and their entire contents are available for reading or
review immediately upon appearance. Web pages elements are often rendered slowly,
depending upon things like line transmission speeds and page content.
Design implications: Provide page content that downloads fast, and give people elements to
read immediately so the sense of passing time is diminished.
 Page layout: With the printed page, layout is precise with much attention given to it. With
Web pages layout is more of an approximation, being negatively influenced by deficiencies
in design toolkits and the characteristics of the user’s browser and hardware, particularly
screen sizes.
Design implication: Understand the restrictions and design for the most common user tools.
 Page resolution: the resolution of displayed print characters still exceeds that of screen
characters, and screen reading is still slower than reading from a document.
Design implication: Provide an easy way to print long Web documents.
 Page navigation: Navigating printed materials is as simple as page turning. Navigating the
Web requires innumerable decisions concerning which of many possible links should be
followed.
Design implications are similar to the above provide overviews of information organization
schemes and clear descriptions of where links lead.
 Interactivity: Printed page design involves letting the eyes traverse static information,
selectively looking at information and using spatial combinations to make page elements
enhance and explain each other. Web design involves letting the hands move the information
(scrolling, pointing, expanding, clicking, and so on) in conjunction with the eyes.
 Page independence: Because moving between Web pages is so easy, and almost any page
in a site can be accessed from anywhere else, pages must be made freestanding. Every page is
independent. Printed pages, being sequential, fairly standardized in organization, and
providing a clear sense of place, are not considered independent.
Design implication: Provide informative headers and footers on each Web page

Merging Graphical business system and Web

Strength of the Web lies in its ability to link databases and processing occurring on a variety
of machines within a company or organization. The graphical business system and the Web
will merge into a common entity. These Web systems are called intranets

18
Thanuja M UID Module-1

Intranet versus the Internet

They differ, however, in some important ways as

1.Users: The users of intranets, being organization employees, know a lot about the
organization, its structure, its products, its jargon, and its culture. Customers use Internet sites
and others who know much less about the organization, and often care less about it.
2.Tasks: An intranet is used for an organization’s everyday activities, including complex
transactions, queries, and communications. The Internet is mainly used to find information,
with a supplementary use being simple transactions.
3.Type of information: An intranet will contain detailed information needed for
organizational functioning. Information will often be added or modified. The Internet will
usually present more stable information: marketing and customer or client information,
reports, and so forth.
4.Amount of information: Typically, an intranet site will be much larger than an
organization’s Internet site. It has been estimated that an intranet site can be ten to one
hundred times larger than its corresponding public site.
5. Hardware and software: Since intranets exist in a controlled environment, the kinds of
computers, monitors, browsers, and other software can be restricted or standardized. The
need for cross-platform compatibility is minimized or eliminated; upgraded communications
also permit intranets to run from a hundred to a thousand times faster than typical Internet
access can. This allows the use of rich graphics and multimedia, screen elements that
contribute to very slow download times for most Internet users.
6.Design philosophy: Implementation on the intranet of current text-based and GUI
applications will present a user model similar to those that have existed in other domains.
This will cause a swing back to more traditional GUI designs—designs that will also
incorporate the visual appeal of the Web, but eliminate many of its useless, promotional, and
distracting features. The resulting GUI hybrids will be richer and much more effective.

Extranets
 An extranet is a special set of intranet Web pages that can be accessed from outside an
organization or company.
 Typical examples include those for letting customers check on an order’s status or letting
suppliers view requests for proposals.
An extranet is a blend of the public Internet and the intranet, and its design should reflect this.

Principles of User Interface Design

 It should be useful, accomplishing some business objectives faster and more efficiently than
the previously used method or tool did. It must also be easy to learn, for people want to do,
not learn to do.
 The interface itself should serve as both a connector and a separator: a connector in that it
ties the user to the power of the computer, and a separator in that it minimizes the possibility

19
Thanuja M UID Module-1

of the participants damaging one another. We will begin with the first set of published
principles, those for the Xerox STAR.

Principles for the Xerox STAR

 The illusion of manipulable objects: Displayed objects that are selectable and
manipulable must be created. A design challenge is to invent a set of displayable objects that
are represented meaningfully and appropriately for the intended application. It must be clear
that these objects can be selected,
 Visual order and viewer focus: Effective visual contrast between various components of
the screen is used to achieve this goal. Animation is also used to draw attention, as is sound.
Feedback must also be provided to the user.
 Revealed structure: The distance between one’s intention and the effect must be
minimized. The relationship between intention and effect must be tightened and made as
apparent as possible to the user.
 Consistency: Consistency aids learning. Consistency is provided in such areas as element
location, grammar, font shapes, styles, and sizes, selection indicators, and contrast and
emphasis techniques.
 Appropriate effect or emotional impact: The interface must provide the appropriate
emotional effect for the product and its market. Is it a corporate, professional, and secure
business system? Should it reflect the fantasy, wizardry, and bad puns of computer games?
 A match with the medium: The interface must also reflect the capabilities of the device
on which it will be displayed. Quality of screen images will be greatly affected by a device’s
resolution and color-generation capabilities.

General Principles

The design goals in creating a user interface are described below. They are fundamental
to the design and implementation of all effective interfaces, including GUI and Web
ones. These principles are general characteristics of the interface, and they apply to all
aspects.
Aesthetically Pleasing
— Provide visual appeal by following these presentation and graphic
designprinciples:
 Provide meaningful contrast between screen elements.
 Create groupings.
 Align screen elements and groups.
 Provide three-dimensional representation.
 Use color and graphics effectively and simply.
Clarity
— The interface should be visually, conceptually, and linguistically
clear, including:
 Visual elements

20
Thanuja M UID Module-1

 Functions
 Metaphors
 Words and text
Compatibility
— Provide compatibility with the following:
 The user
 The task and job
 The product
— Adopt the user’s perspective.
Comprehensibility
— A system should be easily learned and understood. A user should
knowthe following:
 What to look at
 What to do
 When to do it
 Where to do it
 Why to do it
 How to do it

— The flow of actions, responses, visual presentations, and information

should be in a sensible order that is easy to recollect and place in
context.
Configurability
— Permit easy personalization, configuration, and reconfiguration of settings.
 Enhances a sense of control.
 Encourages an active role in understanding.
Consistency
— A system should look, act, and operate the same throughout.
Similarcomponents should:
 Have a similar look.
 Have similar uses.
 Operate similarly.
— The same action should always yield the same result.
— The function of elements should not change.
— The position of standard elements should not change.
— In addition to increased learning requirements, inconsistency in design
hasa number of other prerequisites and by-products, including:
— More specialization by system users.
— Greater demand for higher skills.
— More preparation time and less production time.
— More frequent changes in procedures.
— More error-tolerant systems (because errors are more likely).
— More kinds of documentation.
— More time to find information in documents.
— More unlearning and learning when systems are changed.
— More demands on supervisors and managers.
— More things to do wrong.

21
Thanuja M UID Module-1

Control
— The user must control the interaction.
 Actions should result from explicit user requests.
 Actions should be performed quickly.
 Actions should be capable of interruption or termination.
 The user should never be interrupted for errors.
— The context maintained must be from the perspective of the user.
— The means to achieve goals should be flexible and compatible with
theuser’s skills, experiences, habits, and preferences.
— Avoid modes since they constrain the actions available to the user.
— Permit the user to customize aspects of the interface, while
alwaysproviding a proper set of defaults.
Directness
— Provide direct ways to accomplish tasks.
 Available alternatives should be visible.
 The effect of actions on objects should be visible.

Efficiency
— Minimize eye and hand movements, and other control actions.
 Transitions between various system controls should flow
easilyand freely.
 Navigation paths should be as short as possible.
 Eye movement through a screen should be obvious and sequential.
— Anticipate the user’s wants and needs whenever possible.
Familiarity
— Employ familiar concepts and use a language that is familiar to the user.
— Keep the interface natural, mimicking the user’s behavior patterns.
— Use real-world metaphors.
Flexibility
— A system must be sensitive to the differing needs of its users, enabling
a level and type of performance based upon:
 Each user’s knowledge and skills.
 Each user’s experience.
 Each user’s personal preference.
 Each user’s habits.
 The conditions at that moment.
— Forgiveness
 Tolerate and forgive common and unavoidable human errors.
 Prevent errors from occurring whenever possible.
 Protect against possible catastrophic errors.
— Predictability
 The user should be able to anticipate the natural progression of each
task.
• Provide distinct and recognizable screen elements.
• Provide cues to the result of an action to be performed.
 All expectations should be fulfilled uniformly and completely.
 When an error does occur, provide constructive messages.

22
Thanuja M UID Module-1

— Recovery
 A system should permit:
• Commands or actions to be abolished or reversed.
• Immediate return to a certain point if difficulties arise.
 Ensure that users never lose their work as a result of:
• An error on their part.
• Hardware, software, or communication problems.
— Responsiveness
 The system must rapidly respond to the user’s requests.
 Provide immediate acknowledgment for all user actions:
• Visual.
• Textual.
• Auditory.
— Simplicity
 Provide as simple an interface as possible.
 Five ways to provide simplicity:
• Use progressive disclosure, hiding things until they are
needed.
 Present common and necessary functions first.
 Prominently feature important functions.
 Hide more sophisticated and less frequently used functions.
• Provide defaults.
• Minimize screen alignment points.
• Make common actions simple at the expense of
uncommonactionsbeing made harder.
• Provide uniformity and consistency.
— Transparency
 Permit the user to focus on the task or job, without
concernfor themechanics of the interface.
• Workings and reminders of workings inside the
computershouldbe invisible to the user.
— Trade-Offs
 Final design will be based on a series of trade-offs
balancing often-conflicting design principles.
People’s requirements always take precedence over
technical requirements

23