UNIT II

Characteristics of Graphical
and Web User Interfaces

The
Graphical
User
Interface

A graphical user interface (GUI) is a type of user interface item that allows people to
interact with programs in more ways than typing
Examples:
computers
hand-held devices : MP3 Players, Portable Media Players or Gaming devices;
household appliances and office equipment with images rather than text commands.
A GUI offers graphical icons, and visual indicators, as opposed to text-based
interfaces, typed command labels or text navigation to fully represent the information
and actions available to a user.

WEB USER INTERFACE

Accept input and provide output by generating web pages which

are transmitted via the Internet and viewed by the user using a web
browser program

The Popularity of Graphics

Text-based screen
2D-based screen
3D-based screen

Text could be replaced by graphical images

Screen navigation and commands are executed through menu bars

and pull-downs.
Menus pop up on the screen

Screen body, selection fields such as radio buttons, check boxes,

list boxes, and palettes coexisted with the reliable old text entry

field.

Text entry fields with attached or drop-down menus of alternatives

also became available

Screen objects and actions were selected through use of pointing

mechanisms, such as the mouse or joystick, instead of the

traditional keyboard.

Desktop reffered as WIMP interface: windows, icons, menus, and pointers.

Graphic Presentation:- persons information-processing capabilities much more
effective 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
Faster information transfer between
computers and people by permitting more
visual comparisons of amounts, trends, or
relationships.
More compact representation of information;
and simplification of the perception of
structure.

The Concept of Direct Manipulation by Shneiderman (1982)

style of interaction for graphical systems
The system is portrayed as an extension of the real world

A person has the power to access and modify these objects

focus on the data, not the application and tools.

Continuous visibility of objects and actions

virtual reality by Nelson
WYSIWYG (what you see is what you get). By Hatfield

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.

Incremental actions are easily reversible

Finally, actions, if discovered to be incorrect or not desired, can be
easily undone.

Direct manipulation may not be feasible

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 pulldown or pop-up menus, for symbols, and substitutes typing for
pointing.
When an operation is selected from the list, by pointing or typing,

the system executes it as a command.

Which style of interactiondirect manipulation, indirect manipulation, or a combination of bothis best ???????

Advantages

Disadvantages

Symbols recognized faster than text

Hardware limitations.

Faster learning

Inefficient for expert users.

Faster use and problem solving.

Inefficient for touch typists

Easier remembering

Few tested icons exist.

More natural.

Learning still necessary.

Exploits visual/spatial cues

Greater design complexity.

Provides context.

Lack of experimentally-derived design guidelines.

Fewer errors.

Inconsistencies in technique and terminology.

Increased feeling of control.

Not always familiar.

Immediate feedback.

The futz and fiddle factor(Games,mouse)

Predictable system responses

Human comprehension limitations.

Easily reversible actions

Production limitations (symbols)

Less anxiety concerning use

Not always fastest style of interaction.(ATM)

More attractive

Increased chances of clutter and confusion.

May consume less space.

May consume more screen space.

Replaces national languages

Not always fastest style of interaction

Low typing requirements

Characteristics of the Graphical User Interface

Sophisticated Visual Presentation.
Pick-and-Click Interaction
Restricted Set of Interface Options (WYSIWYG)
Visualization
Object Orientation
Properties or Attributes of Objects
Actions

Application versus Object or Data Orientation

Views
Use of Recognition Memory

Concurrent Performance of Functions

The Web
User
Interface

 Web interface design is essentially the design of navigation and the

presentation of information. It is about content, not data.
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 is a victim of its poor foundation.

Victim of its explosive and haphazard growth.

Web interface design is also more difficult because the main issues concern
information architecture and task flow, neither of which is easy to standardize.
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 users tools so variable
in nature.

Popularity / History of web

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
1984, hosts online exceeded 1,000;
1987, 10,000;
1989, 100,000,
1990,300,000;
1992 hosts exceeded one million
In 1993, Internet traffic was expanding at a 341,634 percent annual growth
rate.
In 1996, there were nearly 10 million hosts online and 40 million connected
people
Slow download times, confusing navigation, confusing page organization,
disturbing animation, or other undesirable site features often results in user
abandonment of the site

Printed Pages versus Web Pages

Page size.
Page rendering.
Page layout.
Page resolution.
User focus
Page navigation
Page independence
Interactivity.
Sense of place.

Differences between Graphical and Web

User Interfaces

Principles of User Interface Design

Aesthetically Pleasing
Clarity
Compatibility
User compatibility
Task and job compatibility.
Product compatibility.
Comprehensibility
Configurability
Consistency
Control
Directness
Efficiency
Familiarity
Flexibility
Forgiveness
Predictability
Recovery
Responsiveness
Simplicity
Transparency
Trade-Offs

Aesthetically Pleasing:
Provide visual appeal by following these
presentation and graphic design principles:
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
Functions
Metaphors
Words and text
Compatibility:
Provide compatibility with the following:
The user
The task and job
The product
Adopt the users perspective.

Comprehensibility:
A system should be easily learned and understood. A user
should know the 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. Similar components
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.

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 the users 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 always providing 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 easily and freely.
Navigation paths should be as short as possible.
Eye movement through a screen should be obvious
and sequential.
Anticipate the users 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 users
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 users knowledge and skills.
Each users experience.
Each users personal preference.
Each users 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.
When an error does occur, provide constructive
messages.
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.

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 users
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 uncommon actions being made harder.
Provide uniformity and consistency.

Transparency:
Permit the user to focus on the task or job,
without concern for the mechanics of the
interface.
Workings and reminders of workings inside the
computer should be invisible to the user.

Trade-Offs:
Final design will be based on a series of tradeoffs balancing often-conflicting design principles.
Peoples requirements always take precedence
over technical requirements.

Principles for the Xerox STAR

The illusion of manipulable objects.

Visual order and viewer focus.
Revealed structure.
Consistency.
Appropriate effect or emotional impact.
A match with the medium.