UNIT 1

Introduction:

Human–computer interaction (HCI), alternatively man–machine interaction (MMI) or computer

human interaction (CHI) is the study of interaction between people (users) and computers.

Importance of user Interface:

User Interface design is a subset of a field of study called human-computer interaction (HCI).

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.

a) Input is how a person communicates his / her needs to the computer.

– Some common input components are the keyboard, mouse, trackball, one's finger, and one's
voice.

b) Output is how the computer conveys the results of its computations and requirements to the
user.

– Today, the most common computer output mechanism is the display screen, followed by
mechanisms that take advantage of a person's auditory capabilities: voice and sound.

Definition

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.

GOALS

1. A basic goal of HCI is

• to improve the interactions between users and computers
• by making computers more usable and receptive to the user's needs.

2. A long term goal of HCI is

• to design systems that minimize the barrier between the human's cognitive model
of what they want
• to accomplish and the computer's understanding of the user's task
HCI designers must consider a variety of factors:

• what people want and expect, physical limitations and abilities people possess,
• how information processing systems work,
• what people find enjoyable and attractive.
• Technical characteristics and limitations of the computer hardware and software must
also be considered.

The Importance of Good Design

• We don't care?
• We don't possess common sense?
• We don't have the time?
• We still don't know what really makes good design?

Benefits of good design

1. Screens are less crowded

2. Would be less time consuming, 25 percent less time
3. Screen would be 20 percent more productive
4. 25 percent fewer errors
5. Improve decision making time
6. Training cost are lower
7. The organization customers benefit because of improved services

Effects of a bad screen design are:

1. People will have greater difficulty in doing their job

2. More prone to mistakes
3. Chase people away from the system
4. Lead to aggravation, frustration and stress

A Brief History of Screen Design

 1970’s Screen
 1980’s Screen
 1990’s Screen

The Popularity of Graphics

• A graphical screen bore scant resemblance to its earlier text-based colleagues.

• Older text-based screen possessed a one dimensional graphic screen assumed a three
dimensional look.
• Text could be replaced by graphical images called icons.
• These icons could represent objects or actions selection fields such as radio buttons,
check boxes, list boxes, and palettes coexisted with the reliable old text entry field.
The Concept of Direct Manipulation

• 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

Indirect Manipulation

In practice, direct manipulation of all screen objects and actions may not be feasible because
of the following:

• 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.
• 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)

• Which style of interaction-direct manipulation, indirect manipulation, or a combination of

both-is best?

Graphical Systems:

ADVANTAGES

1. Symbols recognized faster than text

2. Faster learning
3. Faster use and problem solving
4. Easier remembering
5. More natural
6. Exploits visual/spatial cues
7. Fosters more concrete thinking
8. Provides context
9. Fewer errors
10. Increased feeling of control
11. Immediate feedback
12. Predictable system responses
13. Easily reversible actions
14. Less anxiety concerning use
 15. More attractive
16. May consume less space
17. Replaces national languages
18. Easily augmented with text displays
19. Smooth transition from command language system

DISADVANTAGES

1. Greater design complexity.

2. Learning still necessary
3. Replaces national languages
4. Easily augmented with text displays
5. Smooth transition from command language system
6. Lack of experimentally-derived design guidelines
7. use a pointing device may also have to be learned
8. Working domain is the present
9. Human comprehension limitations
10. Window manipulation requirements
11. Production limitations
12. Few tested icons exist
13. Inefficient for touch typists
14. Inefficient for expert users
15. Not always the preferred style of interaction
16. Not always fastest style of interaction
17. Increased chances of clutter and confusion
18. May consume more screen space
19. Hardware limitations

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.

2. Pick-and-Click Interaction: The primary mechanism for performing this pick-and-click

is most often the mouse and its buttons. The user moves the mouse pointer to the relevant
element (pick) and the action is signaled (click).

3. Object Orientation: A graphical system consists of objects and actions. Objects are
what people see on screen. They are manipulated as a single unit. Objects can be
composed of sub objects. For example, an object may be a document. The document's
sub objects may be a paragraph, sentence, word, and letter.

4. Restricted Set of Interface Options: The array of alternatives available to the user is
what is presented on the screen or may be retrieved through what is presented on the
 screen nothing less, nothing more. This concept fostered the acronym WYSIWYG.(What
You See Is What You Get)

5. Use of Recognition Memory: Continuous visibility of objects and actions encourages

use of a person's more powerful recognition memory. The "out of sight, out of mind"
problem is eliminated.

6. 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.

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)

Web user –interface

The expansion of the World Wide Web since the early 1990s has been truly amazing. Web
interface design is essentially the design of navigation and the presentation of information. It is
about content, not data.

Popularity of Web user –interface

Web usage has reflected this popularity. The number of Internet hosts has risen dramatically:
• In 1984, hosts online exceeded 1,000;
• in 1987, 10,000;
• in 1989, 100,000,
• in 1990, 300,000;
• in 1992 hosts exceeded one million.

Characteristics of a Web Interface:

A. GUI versus Web Page Design

1. Devices:

In GuI design, the characteristics of the interface devices such as monitors and modems.
In Web design, the user devices may range from handheld mechanism to the high end
work stations; it will be generated by both the hardware and the software.

2. User Focus:
GUI systems are normally well defined applications and the data about transactions and
processes. Web is all about information and navigation.

3.Data and Information:

In GUI system the data is created and used by known and trusted sources.
The web is full of unknown content and web content is highly variable in organizations.

4.User Tasks:
In GUI systems,the user can install,configure,personalize,start use and upgrade the
programs and people become familiar with many of its feature.
Web Users do linking to sites,browsing or reading the pages,filling out forms,register for
services participating in transactions,downloading and saving the pages,etc.,

5.User's Conceptual Space:

In GUI,the user's conceptual space is controlled by the program and application.
In Web,the user's space is infinite and generally unorganized.

6.Navigation:
The GUI,the users navigate through structured menus,lists,trees,dialogs and wizards.
The Web users navigate through links,bookmarks and typed URLS.

7.Context:
GUI systems enable the users to maintain a better sense of context and the restricted
navigation paths.
Web Pages are single entities with almost unlimited navigation paths.

8.Response Time:
GUI response time is nearly instantaneous.
In Web it depends on the transmission speeds,page content and so on.

9.System Capability:
GUI system capabilities are only limited to the capability of hardware and the
sophistication of software.
Web is more constrained,being limited by constraints imposed by hardware,software and
the browser.

10.Task Efficiency:
GUI system are targeted to a specific audience performing specific task,efficiency of
performing task is only limited.
Web systems tasks limited by the browser and the network.Websites are intended for
everyone.

11.Security:
In GUI environment,security and data access can be tightly controlled in proportion to the
willingness to invest resources and effort.
Web is renowned for security exposures,browser-provided security options have not been
well understood by the average web users.

12.Integration:
In GUI,the user assistance is an integral part of the most GUI applications,this assistance
 is accessed through the standard mechanism and help menus.
In Web,it cannot provide with the help system.

B. Printed Pages versus Web Pages

• Page size
• Page rendering
• Page layout
• Page resolution
• Page navigation
• Interactivity
• Page independence

Principles of user interface

A. Principles for the Xerox STAR

• Illusion of manipulable objects

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

B. General Principles

1. 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.

2. Clarity
The interface should be visually, conceptually, and linguistically clear, including
• Visual elements
• Functions
• Metaphors
• Words and Text
3. Compatibility
Provide compatibility with the following:
• The user
 • The task and job
• The Product

4. Configurability
Permit easy personalization, configuration, and reconfiguration of settings.
• Enhances a sense of control
• Encourages an active role in understanding

5. 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
6. Consistency
A system should look, act, and operate the same throughout. Similar components should:
• Have a similar look.
• Have similar uses.
• Operate similarly

7. 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

8. Directness
Provide direct ways to accomplish tasks.
• Available alternatives should be visible.
• The effect of actions on objects should be visible.

9. 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.
10. 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.

11. 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.

12. 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.

13. Predictability

a) 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.
b) All expectations should be fulfilled uniformly and completely.

14. 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
•
15. Responsiveness

The system must rapidly respond to the user's requests Provide immediate acknowledgment
for all user actions:
• Visual.
• Textual
• Auditory.
•
16. 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.
17. Simplicity
Five ways to provide simplicity:

i. 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.
ii. Provide defaults.
iii. Minimize screen alignment points.
iv. Make common actions simple at the expense of uncommon actions being made harder.
v. Provide uniformity and consistency.