TOPICS HCI

PRESENTATION
 Introduction to HCI
 Goals of HCI
 User Interface
 Good design
 History of HCI
 History of screen design
GROUP ONE
 Graphics
 Direct manipulation
 Indirect manipulation
 Graphical user interface
 Web user interface
 Principles of web design
 Principle of user web design
 Principle of Xerox star
THERESA SYLVESTER EMMANUEL
 General Principle
 Obstacle and pitfalls in ANIEBIET JEREMIAH LAWRENCE
development path PROMISE IDONGESIT ISAAC
 Irritating Characters JUSTICE JUSTICE FRIDAY
 Psychological Response
UBONG EFFIONG EDET
to design
UTIBE FRIDAY UDOH
DEFINITION
Human–computer interaction is research in the design and the use of computer technology, which
focuses on the interfaces between people and computers. HCI researchers observe the ways
humans interact with computers and design technologies that allow humans to interact with
computers in novel ways.
The human–computer interface can be described as the point of communication between the
human user and the computer. The flow of information between the human and computer is
defined as the loop of interaction. The loop of interaction has several aspects to it, including:
Visual Based: The visual-based human–computer interaction is probably the most widespread
human–computer interaction (HCI) research area.
Audio Based: The audio-based interaction between a computer and a human is another important
area of HCI systems. This area deals with information acquired by different audio signals.
GOAL
A basic goal of HCI is
 A long term goal of HCI is
by making computers more usable and receptive to the user's needs.
to improve the interactions between users and computers
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

WHY HCI IS IMPORTANT

HCI is critical since it will be necessary for goods to be more successful, safe, helpful, and
functional. It will make the user's experience more enjoyable in the long term. As a result, having
someone with HCI skills involved in all phases of any product or system development is critical.
DEFINING USER INTERFACE
User interface design is a subset of a field of study called human-computer interaction
what people find enjoyable and attractive.
 Technical characteristics and limitations of the computer hardware and software
 what people want AND expect, physical limitations and abilities people possess,
 Human-computer interaction is the study, planning, and design of how people and
computers work together
Therefore
 HCI designers must consider a variety of factors:
a person need to be satisfied when interacting with computer in a most effective way.
(HCI).
how information processing systems work,
this must also be considered.
The user interface is to
to, or otherwise understand or direct.
Input is how a person communicates his/her needs to the computer.
one's finger, and one's voice.
Output is how the computer conveys the results of its computations and
screen, followed by mechanisms that take advantage of a person's auditory
the part of a computer and its software that people can see, hear, touch, talk
requirements to the user.
Some common input components are the keyboard, mouse, trackball,
The user interface has essentially two components: input and output.
Today, the most common computer output mechanism is the display
capabilities: voice and sound.
The best interface is one that it not noticed, one that permits the user to focus on the
mechanisms that satisfy the user's needs, capabilities, and limitations in the most effective way
THE IMPORTANCE OF GOOD DESIGN
Good design creates meaningful first impressions, helps you differentiate yourself from your
competitors, can solve problems, and boosts brand awareness and the bottom line.
THE IMPORTANCE OF USER INTERFACE
A well-designed interface and screen is terribly important to our users. It is their often have a direct
impact on an organization's relations with its customers, and its confusing and inefficient, people will
have greater difficulty in doing their jobs and window to view the capabilities of the system. will
make more mistakes.
Poor design may even chase some people away from a system permanent, it can also lead to
aggravation, frustration, and increased stress.
The Benefits of Good Design
Conveying clear understanding of product, use, or intention. Simplifying navigation and accessibility.
Setting your brand apart, Increasing sales.
A good design in the field of HCI, hides all the working complications from the user and makes it
straightforward and effortless for them. The user, will hence feel comfortable and find what they
expect to find exactly where they expect to find it, guided by their clear and logical thinking.
A BRIEF HISTORY OF THE HUMAN COMPUTER INTERFACE
The need for people to communicate with each other has existed since we first walked
upon this planet.
The lowest and most common level of communication modes we share are movements and
gestures.
Movements and gestures are language independent, that is, they permit people who do not speak
the same language to deal with one another.
But for those who can, writing is still nowhere near as efficient a means of faster and more efficient
than handwriting, the unskilled may not find this the case.was inversely related to what was easy for
people to do.
COMMUNICATION AS SPEAKING
In modem times, we have the typewriter, another step upward in communication
Significantly fewer people type than write. While a practiced typist can find typing
The computer demanded rigid, typed input through a keyboard;
Through its first few decades, a computer's ability to deal with human
communication
responded slowly using this device and with varying degrees of skill.
WHAT IS A GRAPHICAL USER INTERFACE (GUI)

 A GUI (graphical user interface) is a system of interactive visual components for computer
software. A GUI displays objects that convey information, and represent actions that can be
taken by the user. The objects change color, size, or visibility when the user interacts with them.
 The GUI was first developed at Xerox PARC by Alan Kay, Douglas Engelbart and a group of
other researchers in 1981. Later, Apple introduced the Lisa computer  with a GUI on January
19, 1983.
 GRAPHICAL USER INTERFACE OVERVIEW
A GUI includes GUI objects, like icons, cursors, and buttons. These graphical elements are
sometimes enhanced with sounds, or visual effects like transparency and drop shadows. Using these
objects, a user can use the computer without having to know commands.
An example of a GUI operating system is a windows 7 Desktop
 WHAT ARE THE BENEFITS OF GUI
A GUI is considered to be more user-friendly than a text-based command-line interface, such
as MS-DOS, or the shell of Unix-like operating systems.
Unlike a command-line operating system or CUI, like Unix or MS-DOS, GUI operating systems are
easier to learn and use because commands do not need to be memorized. Additionally, users do
not need to know any programming languages. Because of their ease of use and more modern
appearance, GUI operating systems have come to dominate today's market.

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
Increased feeling of control
DISADVANTAGES OF GUI
Implementation: Implementing a graphical user interface is not an easy process as it seems while
using it.
Cost: The design of graphical user interface makes it more difficult and costly to develop.
Memory Usage: Due to the usage of all graphical representations, a graphical user interface
typically uses more power and computer memory than other types of interfaces.

BRIEF HISTORY ON SCREEN DESIGN
While developers have been designing screens since a cathode ray tube display was first attached
to a computer, more widespread interest in the application of good design principles to screens did
not begin to emerge until the early 1970s, when IBM introduced its 3270 cathode ray tube text-
based terminal.

THE CONCEPT OF DIRECT MANIPULATION ON GUI

The system is portrayed as an extension of the real world. The system simply replicates them and
portrays them on a different medium on the screen for easy understanding
A person has the power to access and modify these objects, among which are windows.
A person is allowed to work in a familiar environment and in a familiar way focusing on the data,
not the application and tools.
 ADVANTAGES OF A GRAPHICAL SYSTEM
Symbols are recognize faster than text
 Graphic is faster to learn
 Graphics is easier to remember
Graphics are more attractive
 It may consume less space

DISADVANTAGES OF A GRAPHICAL SYSTEM

Use of pointing device may required learning
It is not the preferred means of interaction
It is not always the fastest means of interaction
 it may consume more screen space
Hardware limitation

THE CONCEPT OF DIRECT MANIPULATION

What is Direct Manipulation (DM)?
Direct Manipulation (DM) is an interaction style in which users act on displayed objects of
interest using physical, incremented, reversible actions whose effects are immediately visible
on the screen.
Example let’s say that you are looking at an image of yourself on a roller coaster and want to
see if your terrified expression has been caught on camera. The action of using your fingertips
to zoom in and out of the image is an example of a direct manipulation interaction.
 CHARACTERISTICS OF DIRECT MANIPULATION
The system is portrayed as an extension of the real word: A person is allowed to work in a
familiar environment and in a familiar way focusing on the data not the application and tools.
Actions are rapid and incremented with visible display of results: The result of action are
immediately displayed visually on the screen in their new and current form.
Incremented actions are easily reversibly: Finally, actions if discovered to be incorrect or not
desired can be easily undone.
 
INDIRECT MANIPULATION
In practice, direct manipulation of all screen object and action may not be feasible because
of the following:
The operation may be difficult to conceptualize in the graphical system.
The graphic capability of the system may be limited.
The amount of space available for placing 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 these occur, 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.
 
CHARACTERISTICS OF THE GRAPHICAL USER INTERFACE
Sophisticated visual presentation
Pick-and-click interaction
Visualization
Use of Recognition memory
Concurrent performance of functions.
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.

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 this selection is the keyboard.
 
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.
 
USE OF RECOGNITION MEMORY: continuous visibility of objects and actions encourages
eliminating “out of sight out of mind” problem.
 
CONCURRENT PERFORMANCE OF FUNCTIONS: Graphic system may do two or a thing at
once that is multiple programs may run simultaneously.
CONCURRENT PERFOMANCE OF FUNCTION

Graphic system may do two or more things at one time.

i.e when a system is not busy on a primary task, it may process background task.

THE GRAPHICAL USERINTERFACE

 a user interface is a collection of techniques and mechanics to interact with something
In a graphical interface the primary interaction mechanism is a pointing device of some kind
They can be touched, seen or otherwise perceived.

THE WEB USER INTERFACE

Web interface is essentially the design of navigation and the presentation of information. it is
about content, not data.
The web is a navigation environment where people moves pages of information, not an
application environment
THE POPULARITY OF THE 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.
User have become much more discerning about good design.
People are quick to vote with their mouse.

GUI VERSUS WEB PAGE DESIGN

GUI and web interface design do have similarities. 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
CONCEPT GUI WEB
Screen appearance influenced by hardware being used.
Screen appear exactly as specified.
User hardware characteristics well defined.

GRAPHICAL USER INTERFACE

User hardware characteristics well defined.
Screens appear exactly as specified.
Typically created and used by known and trusted sources.
Properties generally known.
Controlled and constrained by program.
Typically placed into system by users or known people and organization.
Typically organized in a meaningful fashion.
Multiple viewable windows interactions(clicking menu choices, pressing buttons etc
Personal support desk also usually provided.
E.g. open, use, close and windows, menu, controls, tools bars….etc
User hardware variations enormous
Screen appearance influenced by hardware being used.
Information and navigation
Source not always trusted
Privacy often suspect
Infinite and generally unorganized.
Full of unknown content
 CHARACTERISTICS OF WEB
Device: User hardware variations enormous. Screen appearance influenced by hardware
being used.

Data / Information: Full of unknown content. Source not always trusted. Often not placed
onto the web by users or known people and organizations and highly variable organization.

User Tasks: 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.

Response Time: Quite variable depending on transmission speeds, page content, and so on.
Long time can upset the user.

Interaction: Basic interaction is a single click. This can cause extreme changes in context,
which may not be noticed.

Task Efficiency: Limited by browser and network capabilities. Often intended for anyone and
everyone.

System Capability: Limited by constraints imposed by the hardware, browser, software,

client support.
 
PRINCIPLES OF USER INTERFACE DESIGN

Simplicity − the user interface should not be complex. It should always be designed simple
and elegant. it must be easy to learn for people that want to use it.  
Consistent − the user interface should be consistent. The design should be consistent.
Increasing consistency increases the familiarity, and hence increases the usability.

Clarity − Content should provide the user with clarity. There should not be anything which
confuses the user, as it becomes an obstacle for the user in interacting with the product

Minimize actions − Minimize action means steps per screen. The tasks and actions are
streamlined so that they can be done in as few steps as possible. The interface should be
designed keeping in mind to maintain the steps as few as possible for performing any tasks.

Proving useful feedback – the system and its software should be able to respond and
return feedback for every action. This keeps the user informed and helps them to know
whether some action was successful or not.

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.

Aesthetically Pleasing: Provide visual appeal by following these presentation and graphic
design principles like provide meaningful contrast between screen elements, Provide three-
dimensional representation and Use color and graphics effectively and simply.

Clarity: The interface should be visually, conceptually, and linguistically clear such as the Visual
elements, Functions, Metaphors, Words and text 

Compatibility: compatibility should be provided to the user, task /job and the product and also
adopt the user’s perspective.
Comprehensibility: A system should be easily learned and understood. A user should know what,
when, where, why, how to do it.
Configurability: Permit easy personalization, configuration, and reconfiguration of settings.

Consistency: A system should look, act, and operate the same throughout. For example have
similar look, have similar uses and operate similarly, same actions should yield same result.
Inconsistency causes the need for more specialization by system users, greater demand for higher
skills, more preparation time and less production time, more unlearning and learning when
systems are changed. 

Control: The user must control the interaction, i.e. action should be performed quickly and result
from explicit requests, actions should never be interrupted by errors or termination

Directness: Provide direct ways to accomplish tasks and available alternatives should be visible. 

Efficiency: Minimize eye and hand movements, and other control actions i.e. transitions between
various system controls should flow easily and freely, navigation paths should be as short as
possible. Much should be accomplished with little movement.

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 on each user’s knowledge and skills experience, habits personal
preferences etc.
 
 Predictability: The user should be able to anticipate the natural progression of each task.
Recovery: A system should permit commands or actions to be abolished or reversed and
immediate return to a certain point if difficulties arise.
Responsiveness: The system must rapidly respond to the user’s requests like Visual, textual and
auditory
Simplicity: Provide as simple an interface as possible. 
Transparency: Permit the user to focus on the task/job, without concern for the mechanics of the
interface, i.e. workings and reminders of workings inside the computer should be invisible or hidden
to the user.

OBSTACLES AND PITFALLS IN DEVELOPMENT PATH

Nobody ever gets it right for the first time

Development is chock full of surprises.
Good design requires living in a sea of changes
Performance design goals
People may make mistakes while using a good system also
 
COMMON PITFALLS
No early analysis and understanding the users needs and expectations.
A focus on using design features or components.
No usability testing.
No common design team vision.
Poor communication
COMMON USABILITY PROBLEMS
Ambiguous menus and icons.
Complex linkage.
Inadequate feedback.
Lack of system anticipation.
Inadequate error messages.
IRRITATING CHARACTERS
Impaired information readability
Annoying distractions
Confusing navigation.
Inefficient operations
HUMAN INTERACTION WITH COMPUTERS
 Understanding How People Interact with Computers Characteristics of computer systems, past
and present, that have caused, and are causing, people problems. We will then look at the effect
these problems have
Why People Have Trouble with Computers
Extensive technical knowledge but little behavioral training.
With its extensive graphical capabilities.
Poorly designed interfaces.
What makes a system difficult to use in the eyes of its user?
Use of jargon
Non-obvious design
Disparity in problem-solving strategies
an "error-preventing" strategy
Incomprehensible components
Design inconsistency
PSYCHOLOGICAL
Typical psychological responses to poor design are:
 Confusion: Detail overwhelms the perceived structure. Meaningful patterns are difficult to
ascertain, and the conceptual model or underlying framework cannot be understood or
established.
 Annoyance: Roadblocks that prevent a task being completed, or a need from being satisfied,
promptly and efficiently lead to annoyance. Inconsistencies in design, slow computer reaction
times, difficulties in quickly finding information, outdated information, and visual screen
distractions are a few of the many things that may annoy users.
 Frustration: An overabundance of annoyances, an inability to easily convey one's intentions to
the computer, or an inability to finish a task or satisfy a need can cause frustration. Frustration
is heightened if an unexpected computer response cannot be undone or if what really took
place cannot be determined: Inflexible and unforgiving systems are a major source of
frustration.
 Panic or stress: Unexpectedly long delays during times of severe or unusual pressure may
introduce panic or stress. Some typical causes are unavailable systems or long response times
when the user is operating under a deadline or dealing with an irate customer.
 Boredom: Boredom results from improper computer pacing (slow response times or long
download times) or overly simplistic jobs.
These psychological responses diminish user effectiveness because they are severe blocks to
concentration.
Thoughts irrelevant to the task at hand are forced to the user’s attention, and necessary
concentration is impossible.
The result, in addition to higher error rates, is poor performance, anxiety, and dissatisfaction
Physical.
Psychological responses frequently lead to, or are accompanied by, the following physical
reactions.

Abandonment of the system: The system is rejected and other information sources are relied
upon. These sources must, of course, be available and the user must have the discretion to perform
the rejection.