THE GRAPHICAL USER INTERFACE

AND WEB INTERFACE

N R G K Prasad
Assistant Professor,
Department of CSE,
Sai Ganapathi Engineering College
UNIT 2
The graphical user interface popularity of graphics,
the concept of direct manipulation, graphical system,
Characteristics, Web user Interface popularity,
characteristics- Principles of user interface.
INTRODUCTION
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. This device is the electronic equivalent to the human hand.
What the user interacts with is a collection of elements referred to as objects.
Properties of 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.
The design and the user interface are changed fundamentally with the invasion of
graphics.
The older text-based screen possessed a one-dimensional, text-oriented, form-like
quality were replaced by a three-dimensional appearance graphical screen.
Information floated in windows, small rectangular boxes seemed to rise above the
background plane.
Features of graphical system are
Windows could also float above other windows.
Controls appeared to rise above the screen and move when activated.
Lines appeared to be etched into the screen.
Information could appear, and disappear, as needed, and in some cases text could be
replaced by graphical images called icons.
These icons could represent objects or actions.
THE POPULARITY OF GRAPHICS
Menus pop up on the screen.
In the screen body, selection fields such as radio buttons, check boxes, list boxes,
drop-down menus and palettes coexisted with the reliable old text entry field.
Pointing devices like mouse, joystick were used to choose objects and screen actions.
These features have increased the graphics popularity the graphical interface is also
known as WIMP interface: windows, icons, menus, and pointers.
the graphical screens cause persons information processing capabilities very much
effective in comparison with various methods.
graphic minimizes the content recording and reframing on screen.
it decreases the load on memory.
graphical screens allow quicker content movement between computers and users due
to visual content.
THE CONCEPT OF DIRECT MANIPULATION
Direct manipulation refers to the style of communication for
graphical systems
characteristics:
The system is portrayed as an extension of the real world.
Continuous visibility of objects and actions.
Actions are rapid and incremental with visible display of results.
Incremental actions are easily reversible.

Problems with direct manipulation
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.
INDIRECT MANIPULATION
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.
Example
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.
GRAPHICAL SYSTEMS: ADVANTAGES
Symbols recognized faster than text
Faster learning.
Faster use and problem solving.
Easier remembering.
More natural.
Exploits visual/spatial cues.
Fosters more concrete thinking.
Provides context.
Fewer errors.
oIncreased feeling of control.
oImmediate feedback.
oPredictable system responses.
oEasily reversible actions.
oLess anxiety concerning use.
oMore attractive.
oMay consume less space.
oReplaces national languages.
oEasily augmented with text displays.
oLow typing requirements.
oSmooth transition from command language system.
Greater design complexity.
Learning still necessary.
Lack of experimentally-derived design guidelines.
Inconsistencies in technique and terminology.
Working domain is the present.
Not always familiar.
Human comprehension limitations.
Window manipulation requirements.
GRAPHICAL SYSTEMS: DISADVANTAGES
oProduction limitations.
oFew tested icons exist.
oInefficient for touch typists.
oInefficient for expert users.
oNot always the preferred style of interaction.
oNot always fastest style of interaction.
oIncreased chances of clutter and confusion.
oMay consume more screen space.
oHardware limitations.
CHARACTERISTICS OF THE GRAPHICAL USER INTERFACE
Sophisticated Visual Presentation
Visual presentation is the visual aspect of the interface.
It is what people see on the screen.
The graphical system permits displaying lines, including drawings and icons.
Permits the displaying of a variety of character fonts, including different sizes
and styles.
The display of 16 million or more colors is possible
Permit animation and the presentation of photographs and motion video.
The graphical system provides to its user several useful, simple, meaningful.
Visual elements like windows, Menus files or programs are denoted by icons
screen based controls, cursor

Pick-and-Click Interaction
pick defines the motor activity of a user to pick out an element of a
graphical screen on which an action is to be taken.
click represents the signal to carry out an action.
the pick and clock technique is carried out with the help of the mouse and
its buttons. (mouse pointer for picking and mouse click is clicking).
the keyboard is an another technique.
o Restricted Set of Interface Options
WYSIWYG(What-You-See-Is-What-You-Get).
Visualization
Effective visualizations can facilitate mental insights, increase productivity, and
foster faster and more accurate use of data.
o Object Orientation
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 subobjects.
For example, an object may be a document. The documents subobjects may be
a paragraph, sentence, word, and letter.



IBMs System Application Architecture Common User Access Advanced
Interface Design Reference (SAA CUA) (IBM, 1991) breaks objects into three
meaningful classes: data, container, and device.
Data objects present information. This information, either text or graphics,
normally appears in the body of the screen.
Container objects are objects to hold other objects. They are used to group
two or more related objects for easy access and retrieval. There are three
kinds of container objects: the workplace, folders, and workareas.
The workplace is the desktop, the storage area for all objects.
Folders are general-purpose containers for long-term storage of objects.
Workareas are temporary storage folders used for storing multiple objects
currently being worked on.
Device objects represent physical objects in the real world, such as
printers or trash baskets.
Microsoft Windows specifies the characteristics of objects depending upon the
relationships that exist between them.
These relationships are called collections, constraints, composites, and
containers.
A collection is the simplest relationshipthe objects sharing a common aspect.
A constraint is a stronger object relationship.
A composite exists when the relationship between objects becomes so significant
that the aggregation itself can be identified as an object.
A container is an object in which other objects exist.
These relationships help define an objects type.
Another important object characteristic is persistence.
Persistence is the maintenance of a state once it is established.
An objects state (for example, window size, cursor location, scroll position, and so
on) should always be automatically preserved when the user changes it.
Use of Recognition Memory
Concurrent Performance of Functions
THE WEB USER INTERFACE
A web refers to a pool of information where users can access unlimited amount of data
by means of web interfaces.
Designing of web interfaces involves design of movement of data and presenting the
data in a much understandable way which is easily accessible to the users.
Difficulties in designing web interfaces
html, a commonly used language for designing web interfaces. It is easy for technical
users but not for ordinary users
movement in web browser in the pre-GUI are required command area to be
memorized and movement system and structure were hidden under dark and black
screen. Where as GUIs removed the command area by menus associated with task.
There are two types of movement in browser forward and backward.
The steps involved when dealing with forms like filling, sending and resetting needs
interactive methods.

THE POPULARITY OF THE WEB
Web has completely changed computing.
Web permits users throughout the world to interact, access content, publish
and heard.
The web permits the individual to control display and presentation of web
pages.

CONCEPT GUI WEB
Devices
User hardware variations limited
User hardware characteristics well defined.
Screens appear exactly as specified.
User hardware variations enormous.
Screen appearance influenced by hardware
being used.
User Focus
Data and applications Information and navigation
Data
Information
Typically created and used by known and
trusted sources.
Properties generally known.
Typically placed into system by users or
known people and organizations.
Typically organized in a meaningful
fashion.
A notion of private and shared data exists.
Full of unknown content.
Source not always trusted.
Often not placed onto the Web by users or
known people and organizations.
Highly variable organization.
Privacy often suspect
CHARACTERISTICS OF A WEB INTERFACE
CONCEPT GUI WEB
User Tasks
Install, configure, personalize, start, use,
and upgrade programs.
Open, use, and close data files.
Fairly long times spent within an
application. Familiarity with applications
often achieved.
Link to a site, browse or read pages, fill out
forms, register for services, participate in
transactions, download and save things.
Movement between pages and sites very
rapid. Familiarity with many sites not
established.
User's
Conceptual
Space
Controlled and constrained by program. Infinite and generally unorganized.
Presentation
Elements
Windows, menus, controls, data, tool
bars, messages, and so on.
Many transient, dynamically appearing
and disappearing.
Presented as specified by designer.
Generally standardized by toolkits and
style guides
Two components, browser and page.
Within page, any combination of text,
images, audio, video, and animation.
May not be presented as specified by the
designer dependent on browser, monitor,
and user specifications.
Little standardization
CONCEPT GUI WEB
Navigation
Through menus, lists, trees, dialogs, and
wizards. Not a strong and visible concept.
Generally standardized by toolkits and style
guides.
Through links: bookmarks, and typed URLs.
Significant and highly visible concept.
Few standards.
Context
Enables maintenance of a better sense of
context. Restricted navigation paths.
Multiple viewable windows.
Poorer maintenance of a sense of context.
Single-page entities.
Unlimited navigation paths.
Interaction
Interactions such as clicking menu choices,
pressing buttons, selecting list choices, and
cut/copy/paste occur within context of active
program.
Basic interaction is a single click. This can
cause extreme changes in context, which
may not be noticed.
Response
Time
Nearly instantaneous. Quite variable
CONCEPT GUI WEB
Visual Style
Typically prescribed and constrained by
toolkit.
Visual creativity allowed but difficult.
Little significant personalization.
a more artistic, individual, and unrestricted
presentation style.
Complicated by differing browser and
display capabilities, and bandwidth
limitations.
System
Capability
Unlimited capability proportional to
sophistication of hardware and software.
Limited by constraints imposed by the
hardware, browser, software, client support.
Integration
Seamless integration of all applications into
the platform environment a major objective.
Toolkits and components are key elements in
accomplishing this objective
Apparent for some basic functions within
most Web sites (navigation, printing, and so
on.)
Sites tend to achieve individual distinction
rather than integration.
Reliability
Tightly controlled in business systems,
proportional to degree of willingness to invest
resources and effort
Susceptible to disruptions caused by user,
telephone line and cable providers, Internet
service providers,.
PRI NTED PAGES VERSUS WEB PAGES
CONCEPT Printed pages Web pages
Page size
large and fixed in size.
Web pages are small and variable
varies according to the users browser,
monitor.
Page rendering
(availability)
Printed pages are presented as complete
entities, and their entire contents.
Web pages elements are often rendered
slowly.
Dozens of seconds may be consumed
waiting for a page to completely appear.
Page layout
The format of printed page is precise
keeping. The user focused on it.
The format of web page is estimated with
less designing principles and features of
users technologies.
Page resolution
The intent of print characters is fast and
useful as we can read the document fast.
The purpose of screen character is not much
useful and is rendered slowly.
CONCEPT Printed pages Web pages
User focus
The printed pages provides well
furnished complete information
The web page provide separate information
in pieces to the users.
Page navigation
Navigating printed materials is as simple
as page turning
Navigating the Web requires innumerable
decisions concerning
Interactivity
Design allows the users to move their
eyes over fixed content
Web page design permits the users to use
their hands for scrolling, pointing, etc.,
Page independence
The pages are dependent on one another.
independent
THE MERGING OF GRAPHICAL BUSINESS
SYSTEMS AND THE WEB
Characteristics Intranet internet
Users
The users of intranets, being
organization employees
Internet sites are used by customers
Tasks
An intranet is used for an
organizations everyday activities
The Internet is mainly used to find
information.
Type of
information
An intranet will contain detailed
information needed for organizational
functioning
The Internet will usually present more
stable information
Amount of
information
an intranet site will be much larger than
an organizations Internet site.
an internet site will be much larger than an
organizations Intranet site.
EXTRANETS
An extranet is similar to the intranet which is partially accessed by the authorized
users.
The main server is placed behind a firewall, which helps in providing a controlled
access between the intranet and internet.
Only the authorized people are allowed to access intranet.
Various levels of access are provided to individuals and outside users.
Depending upon the username password the access can be made.
PRINCIPLES OF USER INTERFACE DESIGN
Principles for the Xerox STAR
The illusion of manipulable objects according to this principle selection and
manipulable displayed objects must be created.
Visual order and viewer focus
Revealed structure
Consistency
Appropriate effect or emotional impact
A match with the medium
GENERAL PRINCIPLES OF USER INTERFACE DESIGN
Pleasing appearance
Understanding
Compatibility
Clearness
Control (control is the ability of the system to reply to the actions of the users).
Configurability (settings).
Exactness( the system should possess the quality of determining simple and exact
procedure for fulfilling its task).
Uniformity.
Versatility
Efficiency
Awareness of concept
Recovery
Transparent
Quick reaction
Easiness