SlideShare ist ein Scribd-Unternehmen logo
1 von 114
UNIT II : Interaction and Interface
22CDT11 – Human Computer Interaction
Thanks to and Resource from : Alan Dix, Janet Finlay, Gregory D.Abowd and Russell Beale. Human-Computer Interaction, Pearson education , 3ed, 2009
Unit Wise Syllabus – HCI
3/28/2023 Unit 2 _ Interaction and Interface 2
Unit 2 : Contents
• The Interaction
– Introduction
– Models of interaction
– Frameworks and HCI
– Ergonomics
– Interaction styles
– Elements of the
• WIMP interface
– Interactivity
– The context of the interaction
– Experience
– Engagement and fun
• Paradigms
– Introduction
– Paradigm for interaction
3/28/2023 Unit 2 _ Interaction and Interface 3
Interaction - Overview
• Interaction models help us to understand what is going on
in the interaction between user and system.
• This models addresses the translation between what the
user wants and what the system does.
• Ergonomics looks at the physical characteristics of the
interaction and how these influence its effectiveness.
• The dialog between user and system is influenced by the
style of the interface.
• The interaction takes place within a social and
organizational context that affects both user and system.
3/28/2023 Unit 2 _ Interaction and Interface 4
Introduction
• communication between user and system:
the interaction.
3/28/2023 Unit 2 _ Interaction and Interface 5
Introduction
• models of interaction that enable us to
identify and evaluate components of the
interaction, and at the physical, social and
organizational issues that provide the context
for it
3/28/2023 Unit 2 _ Interaction and Interface 6
Models of Interaction
• Interaction involves at least two participants: the
user and the system. Both are complex.
• The interface must therefore effectively translate
between them to allow the interaction to be
successful.
• This translation can fail at a number of points and
for a number of reasons.
• The use of models of interaction can help us to
understand exactly what is going on in the
interaction and identify the likely root of
difficulties.
3/28/2023 Unit 2 _ Interaction and Interface 7
Norman’s Model
• Norman’s execution–evaluation cycle.
3/28/2023 Unit 2 _ Interaction and Interface 8
Interaction Terms
• The purpose of an interactive system is to aid
a user in accomplishing goals from some
application domain.
– Domain – AOEK (Area of Expertise and
Knowledge)
– Example:
• Domain : Graphic Design
• Task : Operation to Manipulate
• Goal : Desire Output
• Intention : Specific action to meet Goal
3/28/2023 Unit 2 _ Interaction and Interface 9
Interaction Terms
• Task Analysis – Identification Problem Space
in terms of domain, task, goal, intention.
• Two different components:
– System
• Core Language
• Computational Attributes of Domain
– User
• Task Language
• Psychological Attributes of the Domain
3/28/2023 Unit 2 _ Interaction and Interface 10
Norman’s Interactive Cycle and Stages
• Interactive cycle can be divided into two major phases.
1. Execution
2. Evaluation
• These can then be subdivided into further stages, seven in
all.
1. Establishing the goal.
2. Forming the intention.
3. Specifying the action sequence.
4. Executing the action.
5. Perceiving the system state.
6. Interpreting the system state.
7. Evaluating the system state with respect to the goals and
intentions.
3/28/2023 Unit 2 _ Interaction and Interface 11
The execution–evaluation cycle
3/28/2023 Unit 2 _ Interaction and Interface 12
User Formulates
Plan
Execution
Observations
Evaluations
Further Action
1, 2, 3
4
5, 6
7
Norman’s execution–evaluation cycle
3/28/2023 Unit 2 _ Interaction and Interface 13
Gulf of Execution and Evaluation
3/28/2023 Unit 2 _ Interaction and Interface 14
• Two Challenges:
– Execution: Taking action to accomplish a specific goal
– Evaluation: Understanding the state of the system
• These challenges are described as the “gulf of
evaluation” and the “gulf of execution”
gulfs of execution
• The gulf of execution is the difference
between the user’s formulation of the actions
to reach the goal and the actions allowed by
the system.
– If the actions allowed by the system correspond to
those intended by the user, the interaction will be
effective.
– The interface should therefore aim to reduce this
gulf.
3/28/2023 Unit 2 _ Interaction and Interface 15
gulfs of evaluation
• The gulf of evaluation is the distance between
the physical presentation of the system state
and the expectation of the user.
– If the user can readily evaluate the presentation in
terms of his goal, the gulf of evaluation is small.
– The more effort that is required on the part of the
user to interpret the presentation, the less
effective the interaction.
3/28/2023 Unit 2 _ Interaction and Interface 16
Norman’s Interaction Framework
3/28/2023 Unit 2 _ Interaction and Interface 17
Translations between components
3/28/2023 Unit 2 _ Interaction and Interface 18
Example
• Consider the MS Word processor.
– The user using short keys to select a command might press
crtl-alt-del accidentally; definitely an articulation error.
– The user may not be able to find the correct formatting
commands in the menus; performance coverage error. Or
the user may type :) truly desiring colon and closed
parenthesis but Word makes a smiley face; wrong
performance.
– Comparing the printed document with the monitor
displayed document the user finds discrepancies. This is a
presentation error.
– The user does not realize that the blue background text is
meant to indicate selection (and should not appear in the
printed version) – this is an observation error.
3/28/2023 Unit 2 _ Interaction and Interface 19
FRAMEWORKS AND HCI
• The ACM SIGCHI Curriculum Development
Group presents a framework for HCI.
• ACM SIGCHI - Association for Computing
Machinery Special Interest Group on
Computer–Human Interaction
– Ergonomics issues are user side of interface
(Input + Output = Articulation + Observation)
– Dialog Design + Interface Style = Articulation +
Performance
– Screen Design = Presentation
3/28/2023 Unit 2 _ Interaction and Interface 20
A framework for human–computer interaction. Adapted from
ACM SIGCHI Curriculum Development Group
3/28/2023 Unit 2 _ Interaction and Interface 21
ERGONOMICS
3/28/2023 Unit 2 _ Interaction and Interface 22
The study of the physical characteristics of the
interaction: how the controls are designed, the
physical environment in which the interaction takes
place, and the layout and physical qualities of the
screen.
Arrangement of controls and displays
• In addition to these cognitive aspects of
design, physical aspects are also important.
• Sets of controls and parts of the display
should be grouped logically to allow rapid
access by the user .
• Example:electronic newsreader
3/28/2023 Unit 2 _ Interaction and Interface 23
3/28/2023 Unit 2 _ Interaction and Interface 24
• We have already touched on the importance
of grouping controls together logically and
keeping opposing controls separate.
• functional controls-functionally related are
placed together.
• sequential controls -organized to reflect the
order of their use in a typical interaction.
• frequency controls -displays are organized
according to how frequently they are used
Industrial interfaces
• Connection between networks over which
the control of all connected devices is
managed. All data between the devices but
also with the control is exchanged through
this interface.
3/28/2023 Unit 2 _ Interaction and Interface 25
Glass interfaces vs. dials and knobs
• The traditional machine interface consists of
dials and knobs directly wired or piped to the
equipment.
3/28/2023 Unit 2 _ Interaction and Interface 26
Direct and Indirect manipulation
3/28/2023 Unit 2 _ Interaction and Interface 27
The physical environment of the
interaction
• The physical environment in which the system is
the health and safety of its users. It should
therefore be considered in all design.
• First consideration here is the size of the users.
• In any system the smallest user should be able to
reach all the controls (this may include a user in a
wheelchair), and the largest user should not be
cramped in the environment.
• The user should be seated for comfort and
stability.
3/28/2023 Unit 2 _ Interaction and Interface 28
Health issues
• Physical position
• Temperature
• Lighting
• Noise
• Time-The time users spend using the system
should also be controlled-excessive use of
CRT displays is harmful
3/28/2023 Unit 2 _ Interaction and Interface 29
The use of color
• The use of color in displays is an ergonomics
issue.
• A relatively high proportion of the population
suffers from a deficiency in color vision.
• Color should not be affected by changes in
contrast.
• Not be the only cue, additional coding
information should be included.
3/28/2023 Unit 2 _ Interaction and Interface 30
• red may be used to indicate emergency and
alarms
red is associated with danger and warnings in
most western cultures
China it symbolizes happiness and good
fortune.
• Green- normal activity;
• Yellow- standby and auxiliary function
Awareness of the cultural associations of
color is particularly important in designing
systems and websites for a global market.
3/28/2023 Unit 2 _ Interaction and Interface 31
Ergonomics and HCI
• Ergonomics is a huge area, which is distinct
from HCI but sits alongside it.
• Ergonomic factors are in general well
established and understood and are therefore
used as the basis for standardizing hardware
designs.
3/28/2023 Unit 2 _ Interaction and Interface 32
INTERACTION STYLES
• Interaction can be seen as a dialog between the
computer and the user.
There are a number of common interface styles including:
• command line interface
• menus
• natural language
• question/answer and query dialog
• form-fills and spread sheets
• WIMP
• point and click
• three-dimensional interfaces.
3/28/2023 Unit 2 _ Interaction and Interface 33
command line interface
• It provides a means of expressing instructions to
the computer directly
• Command line interfaces are powerful in that
they offer direct access to system functionality.
Problems:
• Commands must be remembered, as no cue is
provided in the command line to
• indicate which command is needed.
• Better for expert users.
• Causing confusion to the user and increasing the
overhead of learning.
3/28/2023 Unit 2 _ Interaction and Interface 34
Menus
• In a menu-driven interface, the set of options
available to the user is displayed on the
screen, and selected using the mouse, or
numeric or alphabetic keys.
3/28/2023 Unit 2 _ Interaction and Interface 35
Natural language
• Natural language understanding, both of
speech and written input, is the subject of
much interest and research.
• Language is ambiguous at a number of levels.
First, the syntax, or structure, of a phrase
may not be clear.
Example: The boy hit the dog with the stick
3/28/2023 Unit 2 _ Interaction and Interface 36
• The user still has to learn which phrases the
computer understands and may become
frustrated if too much is expected.
3/28/2023 Unit 2 _ Interaction and Interface 37
Question/answer and query dialog
• Question and answer dialog is a simple
mechanism for providing input to an
application in a specific domain.
• The user is asked a series of questions (mainly
with yes/no responses, multiple choice, or
codes)
3/28/2023 Unit 2 _ Interaction and Interface 38
Query dialog
• Query languages, on the other hand, are used
to construct queries to retrieve information
from a database. They use natural-language-
style phrases, but in fact require specific
syntax, as well as knowledge of the database
structure.
3/28/2023 Unit 2 _ Interaction and Interface 39
Form-fills and spreadsheets
• Form-filling interfaces are used primarily for
data entry but can also be useful in data
retrieval applications.
3/28/2023 Unit 2 _ Interaction and Interface 40
spreadsheets
• The spreadsheet comprises a grid of cells,
each of which can contain a value or a
formula.
3/28/2023 Unit 2 _ Interaction and Interface 41
The WIMP interface
• WIMP interface style, often simply called windowing
systems.
• WIMP stands for windows, icons, menus and pointers
(sometimes windows, icons, mice and pull-down menus).
• Examples:
WIMP interfaces include
• Microsoft Windows for IBM PC compatibles
• MacOS for Apple Macintosh compatibles
• various X Windows-based systems for UNIX.(windows
11 common for bitmap displays, common on Unix-like
operating systems)
3/28/2023 Unit 2 _ Interaction and Interface 42
Point-and-click interfaces
• In most multimedia systems and in web
browsers, virtually all actions take only a
single click of the mouse button.
• point-and-click interface style is obviously
closely related to the WIMP style.
-hypertext
• Extensively used in touchscreen information
systems.combined with a menu-driven
interface
3/28/2023 Unit 2 _ Interaction and Interface 43
Three-dimensional interfaces
• There is an increasing use of three-dimensional effects in user
interfaces.
• Ex:Virtual Reality
• The simplest technique is where ordinary WIMP elements,
buttons, scroll bars, etc., are given a 3D appearance using
shading, giving the appearance of being sculpted out of
stone.
3/28/2023 Unit 2 _ Interaction and Interface 44
WebBook – using 3D to make more
space
3/28/2023 Unit 2 _ Interaction and Interface 45
ELEMENTS OF THE WIMP INTERFACE
• Together, these elements of the WIMP interfaces are
called widgets, and they comprise the toolkit for
interaction between user and system.
3/28/2023 Unit 2 _ Interaction and Interface 46
Windows
• Windows are areas of the screen that behave as if
they were independent terminals in their own
right.
contain text or graphics
can be moved or resized
More than one window can be on a screen at
once
separate tasks to be visible at the same time
windows as they switch from one thread of work
to another.
3/28/2023 Unit 2 _ Interaction and Interface 47
• Overlapping windows can cause problems by obscuring vital
information, so windows may also be tiled, when they adjoin
but do not overlap each other.
• windows may be placed in a cascading fashion, where each
new window is placed slightly to the left and below the
previous window.
• Scrollbars
3/28/2023 Unit 2 _ Interaction and Interface 48
• There is usually a title bar attached to the top of a window,
identifying it to the user, and there may be special boxes in the
corners of the window to aid resizing, closing, or making as
large as possible.
3/28/2023 Unit 2 _ Interaction and Interface 49
Icons
• A small picture is used to represent a closed window, and this
representation is known as an icon.
• By allowing icons, many windows can be available on the
screen at the same time, ready to be expanded to their full size
by clicking on the icon. Shrinking a window to its icon is
known as iconifying the window.
MacOS Icon->
3/28/2023 Unit 2 _ Interaction and Interface 50
Pointers
• WIMP relies very much on pointing and selecting things such
as icons.
• The mouse provides an input device capable of such tasks,
although joysticks and trackballs are other alternatives.
• When designing your own cursors, make sure the image has
an obvious hot-spot.
3/28/2023 Unit 2 _ Interaction and Interface 51
Menus
• A menu presents a choice of operations or services that
can be performed by the system at a given time.
• As the pointer moves to the position of a menu item, the
item is usually highlighted .
• Selection usually requires some additional user action,
such as pressing a button on the mouse that controls the
pointer cursor on the screen.
3/28/2023 Unit 2 _ Interaction and Interface 52
• The main menu can be visible to the user all the
time, as a menu bar and submenus can be pulled
down or across from it upon request.
• Websites use a variety of menu bar locations,
including top, bottom and either side of the screen.
• These pop-up menus are often used to present
context sensitive options
3/28/2023 Unit 2 _ Interaction and Interface 53
• Menu selection is to arrange the options in a circular fashion.
• Remembering Fitts’ law
• The pointer appears in the center of the circle, and so there is
the same distance to travel to any of the selections.
• Easier to select items
• pie menus take up more screen space and are therefore less
common in interfaces.
3/28/2023 Unit 2 _ Interaction and Interface 54
Keyboard accelerators
• Menus often offer keyboard accelerators, key
combinations that have the same effect as
selecting the menu item.
• When the user presses function key F3
nothing happens. F3 only works when the
menu is not displayed – when the menu is
there you must press ‘F’ instead! This is an
example of an interface is dishonest
3/28/2023 Unit 2 _ Interaction and Interface 55
Buttons
• Buttons are individual and isolated regions within a display
that can be selected by the user to invoke specific operations.
• ‘Pushing’ the button invokes a command.
• Buttons can also be used to toggle between two states.
• Toggle buttons can be grouped together to allow a user to
select one feature from a set of mutually exclusive options.
3/28/2023 Unit 2 _ Interaction and Interface 56
Toolbars
• Many systems have a collection of small buttons, each with
icons, placed at the top or side of the window and offering
commonly used functions.
• Toolbar is fixed, but often users can customize it.
3/28/2023 Unit 2 _ Interaction and Interface 57
Palettes
• A palette is the set of available colors from which
an image can be made.
• An example in a drawing package would be a
collection of icons to indicate the pixel color or
pattern that is used to fill in objects.
• In the case of pull-down menus, the user may be
able ‘tear off ’ the menu.
3/28/2023 Unit 2 _ Interaction and Interface 58
Dialog boxes
• Dialog boxes are information windows used by the
system to bring the user’s attention to some
important information, possibly an error or a
warning used to prevent a possible error and to
save file etc..
3/28/2023 Unit 2 _ Interaction and Interface 59
INTERACTIVITY
• Looking at an interface, it is easy to focus on the
visually distinct parts (the buttons, menus, text
areas) but the dynamics, the way they react to a
user’s actions, are less obvious.
Example: Ignores the ‘semantic’ level of an interface:
The validation of numeric information in a forms-
based system.
3/28/2023 Unit 2 _ Interaction and Interface 60
• Interactivity is the defining feature of an interactive
system.
• Speech-based input is difficult, speech-based
interaction easier.
• speech recognition is too low to allow transcription
from tape
• In an airline reservation system, so long as the
system can reliably recognize yes and no it can
reflect back its understanding of what you said and
seek confirmation.
3/28/2023 Unit 2 _ Interaction and Interface 61
• Interactivity is also crucial in determining the ‘feel’ of
a WIMP environment.
• These elements differs both within a single
environment and between environments.
• Discussed different behavior of pull-down and fall-
down menus.
• Fall-down menus are more easily invoked by
accident.
3/28/2023 Unit 2 _ Interaction and Interface 62
• Menus are a major difference between the MacOS
and Microsoft Windows environments.
• In WIMP environments, the user takes the initiative,
with many options and often many applications
simultaneously available.
3/28/2023 Unit 2 _ Interaction and Interface 63
• Exceptions to this are pre-emptive parts of the
interface-it needs information in order to continue.
Ex:modal dialog boxes.
• Not allow you to do anything else until the dialog box
has been completed or cancelled.
• Modern systems suggests that one should minimize
the use of pre-emptive elements, allowing the user
maximum flexibility.
3/28/2023 Unit 2 _ Interaction and Interface 64
• Interactivity is also critical in dealing with
errors.
• The other way to deal with errors is to make
sure that the user or the system is able to tell
when errors have occurred. If users can detect
errors then they can correct them.
• So, even if errors occur, the interaction as a
whole succeeds.
3/28/2023 Unit 2 _ Interaction and Interface 65
THE CONTEXT OF THE INTERACTION
• Interaction does not occur within a vacuum.
We have already noted some of the physical
factors in the environment that can directly
affect the quality of the interaction.
• In reality, users work within a wider social and
organizational context.
• It is important to be aware of such influences
to understand the user and the work domain
fully.
3/28/2023 Unit 2 _ Interaction and Interface 66
Bank managers don’t type...
• Example:ATM machine opening
• The presence of other people in a work environment
affects the performance of the worker in any task.
• In the case of peers, competition increases performance.
• In order to perform well, users must be motivated- fear,
allegiance, ambition and self-satisfaction.
• If a system makes it difficult for the user to perform
necessary tasks, or is frustrating to use, the user’s job
satisfaction, and consequently performance, will be
reduced.
3/28/2023 Unit 2 _ Interaction and Interface 67
• Often systems are chosen and introduced by
managers rather than the users themselves.
• In some cases the manager’s perception of the
job may be based upon observation of results
and not on actual activity.
• If this happens there may be three results:
the system will be rejected,
the users will be resentful and unmotivated,
the user will adapt the intended interaction to
his own requirements. This indicates the
importance of involving actual users in the design
process.
3/28/2023 Unit 2 _ Interaction and Interface 68
Half the picture?
• When systems are not designed to match the way
people actually work, then users end up having to
do ‘work arounds’.
• Integrated student records systems are
becoming popular in universities in the UK.
• In many cases staff are therefore supplementing
the official records system with their own
unofficial spreadsheets to provide this
information – making additional work for staff
and increased opportunity for error.
3/28/2023 Unit 2 _ Interaction and Interface 69
• The introduction of new technology may prove to
be a motivation to users, particularly if it is well
designed, integrated with the user’s current
work, and challenging.
• Providing adequate feedback is an important
source of motivation for users.
• If no feedback is given during a session, the user
may become bored, unmotivated or, worse,
unsure of whether the actions performed have
been successful.
• Feedback can be used to prevent frustration on
the part of the user – the user is then aware of
what is happening.
3/28/2023 Unit 2 _ Interaction and Interface 70
EXPERIENCE, ENGAGEMENT AND FUN
• Even from a pure economic standpoint, your
employees are likely to work better and more
effectively if they enjoy what they are doing!
3/28/2023 Unit 2 _ Interaction and Interface 71
Understanding experience
• Shopping is not about an efficient financial
transaction, it is an experience.
• But experience is a difficult thing to pin down;
we understand the idea of a good experience,
but how do we define it and even more
difficult how do we design it?
3/28/2023 Unit 2 _ Interaction and Interface 72
• Extreme experiences such as climbing a rock face in
order to understand that feeling of total engagement
that can sometimes happen.
• This sense of flow occurs when there is a balance
between anxiety and boredom.
• Alternatively, if you do something completely outside
your abilities you may become anxious and, if you
are half way up a rock face, afraid.
• Flow comes when you are teetering at the edge of
your abilities, stretching yourself to or a little
beyond your limits.
3/28/2023 Unit 2 _ Interaction and Interface 73
zone of proximal development
• Things that you cannot quite do yourself, but
you can do with some support, whether from
teachers, fellow pupils, or electronic or
physical materials.
3/28/2023 Unit 2 _ Interaction and Interface 74
Designing experience
• These are rather like electronic greetings cards, but
are based on crackers.
• Christmas crackers are small tubes of paper between
8 and 12 inches long (20–30 cm). Inside there are a
small toy, a joke or motto and a paper hat. A small
strip of card is threaded through, partly coated with
gunpowder.
• When two people at a party pull the cracker, it bursts
apart with a small bang from the gunpowder and the
contents spill out.
3/28/2023 Unit 2 _ Interaction and Interface 75
The crackers experience
3/28/2023 Unit 2 _ Interaction and Interface 76
Virtual cracker
3/28/2023 Unit 2 _ Interaction and Interface 77
Physical design and engagement
Designers are faced with many constraints:
• Ergonomic: You cannot physically push buttons if they
are too small or too close.
• Physical: The size or nature of the device may force
certain positions or styles of control, for example, a dial
like the one on the washing machine would not fit on
the MiniDisc controller; high-voltage switches cannot
be as small as low-voltage ones.
•
3/28/2023 Unit 2 _ Interaction and Interface 78
• Legal and safety: Cooker controls must be far
enough from the pans that you do not burn
yourself, but also high enough to prevent small
children turning them on.
• Context and environment :The microwave’s
controls are smooth to make them easy to clean
in the kitchen.
• Aesthetic :The controls must look good.
• Economic: It must not cost too much.
• Fluidity: The extent to which the physical
structure and manipulation of the device
naturally relate to the logical functions it
supports.
Related closely to the idea of affordances.
3/28/2023 Unit 2 _ Interaction and Interface 79
• Imagine a design where turning the knob to
clockwise cycled through the display options and
turning it anti-clockwise cycled through the sound
options. This would be a compact design satisfying
all the ergonomic, physical and aesthetic constraints,
but would not have led to as fluid an interaction.
• The twist knob is used to move backwards and
forwards through the tracks of the MiniDisc – that is,
opposite physical movements produce opposite
logical effects.
3/28/2023 Unit 2 _ Interaction and Interface 80
Managing value
• If we want people to want to use a device or
application we need to understand their
personal values.
• In economics, businesses use a measure called
‘net present value’ to calculate what a future
gain is worth today.
Ex:£100 today is worth the same as perhaps
£200 in five years’ time.
3/28/2023 Unit 2 _ Interaction and Interface 81
• When we were preparing the website for the second edition
of this book we thought very hard about how to give things
that were of value to those who had the book, and also to
those who hadn’t.
• One option we thought of was to put the text online, which
would be good for people without the book.
• The search mechanism was the result of this process .It gives
value to those who have the book because it is a way of
finding things.
3/28/2023 Unit 2 _ Interaction and Interface 82
PARADIGMS
• Examples of effective strategies for building
interactive systems.
• The evolution of these usability paradigms
also provides a good perspective on the
history of interactive computing.
• These paradigms range from the introduction
of timesharing computers, through the WIMP
and web, to ubiquitous and context-aware
computing.
3/28/2023 Unit 2 _ Interaction and Interface 83
INTRODUCTION
why study paradigms?
– how can an interactive system be developed to
ensure its usability?
– how can the usability of an interactive system be
demonstrated or measured?
– by means of example
– We believe that we now build interactive systems that
are more usable than those built in the past.
– New computing technologies arrive, creating a new
perception of the human—computer relationship to
accommodate and augment the power of the human.
3/28/2023 Unit 2 _ Interaction and Interface 84
“Where are We Now?”
Time
User
Productivity
Batch
Command
Line
WIMP
(Windows)
1940s – 1950s 1980s - Present
1960s – 1970s
?
?
PARADIGMS FOR INTERACTION
Time sharing
• 1940s and 1950s – explosive technological growth
• 1960s – need to channel the power
• J.C.R. Licklider , director of the Information Processing
Techniques Office of the US Department of Defense’s
Advanced Research Projects Agency (ARPA).
• single computer supporting multiple users
• Couple human brains
and computing machines
tightly to revolutionize
information handling
3/28/2023 Unit 2 _ Interaction and Interface 86
• Time-sharing systems of the 1960s made
programming a truly interactive venture and
brought about a subculture of programmers
known as ‘hackers’ – single-minded masters of
detail who took pleasure in understanding
complexity.
• So,truly interactive exchange between
programmer and computer was possible.
• Increased throughput of information between
user and computer allowed the human to
become a more reactive and spontaneous
collaborator.
3/28/2023 Unit 2 _ Interaction and Interface 87
Video display units
• More suitable medium than paper.
• 1962 – Ivan Sutherland's Sketchpad
• computers for visualizing and manipulating data
• one person's contribution could drastically change the
history of computing.
3/28/2023 Unit 2 _ Interaction and Interface 88
•Sketchpad - ‘63 PhD thesis at MIT
Hierarchy - pictures & sub pictures
Master picture with instances (i.e., OOP)
Constraints
Icons
Copying
Light pen as input device
Recursive operations
Sketchpad demonstrated two important ideas:
• First, computers could be used for more than just data
processing.
• Secondly, Sutherland’s efforts demonstrated how important the
contribution of one creative mind could be to the entire
history of computing.
3/28/2023 Unit 2 _ Interaction and Interface 89
About Doug Engelbart
• Graduate of Berkeley (EE '55)
– "bi-stable gaseous plasma digital devices"
• Stanford Research Institute (SRI)
– Augmentation Research Center
• 1962 Paper "Conceptual Model for
Augmenting Human Intellect"
– Complexity of problems increasing
– Need better ways of solving problems
Programming toolkits
• Douglas Engelbart’s -- ambition since the early
1950s was to use computer technology as a means
of complementing human problem-solving activity.
• 1963 – augmenting man's intellect
• word processing and the mouse – only attained
mass commercial success decades after their
invention.
• A live demonstration of his oNLine System (NLS,
also later known as NLS/Augment)-1968.
• The right programming toolkit provides building
blocks to producing complex interactive systems.
3/28/2023 Unit 2 _ Interaction and Interface 91
Personal computing
• 1970s –graphics programming
language for children called
LOGO
• A system is more powerful as
it becomes easier to user
• Future of computing in small,
powerful machines dedicated
to the individual.
• Kay at Xerox Palo Alto Research
Center (PARC), – the Dynabook
as the ultimate personal
computer
Alan Kay
Dynabook - Notebook sized
computer loaded with multimedia
and can store everything
Alan Kay= Engelbart + Papert
3/28/2023 Unit 2 _ Interaction and Interface 93
Window systems and the WIMP
interface
• Humans can pursue more than one task at a
time.
• If the personal computer is to be an effective
dialog partner, it must be as flexible in its ability
to ‘change the topic’ as the human is.
• context of each thread of dialog so that the user
can distinguish them.
• The window is the common mechanism
associated with these physically and logically
separate display spaces.
3/28/2023 Unit 2 _ Interaction and Interface 94
• 1981 – Xerox Star first commercial windowing
system
• windows, icons, menus and pointers now
familiar interaction mechanisms.
3/28/2023 Unit 2 _ Interaction and Interface 95
The metaphor
• Relating computing to other real-world activity is
effective teaching technique
– LOGO's turtle dragging its tail
– file management on an office desktop
– word processing as typing
– financial analysis on spreadsheets
– virtual reality – user inside the metaphor
• Problems
– some tasks do not fit into a given metaphor
– cultural bias
3/28/2023 Unit 2 _ Interaction and Interface 96
LOGO's turtle
3/28/2023 Unit 2 _ Interaction and Interface 97
Direct manipulation
• As long as the user–system dialog remained largely
unidirectional – from user command to system
command line prompt.
• In a standard command line interface- feedback on
the results of previous interaction is to know that you
have to ask for it and to know how to ask for it.
3/28/2023 Unit 2 _ Interaction and Interface 98
• Rapid visual and audio feedback on a high-
resolution display screen or through a high-
quality sound system makes it possible to
provide evaluative information for every
executed user action.
• Rapid feedback -> direct manipulation.
3/28/2023 Unit 2 _ Interaction and Interface 99
• 1982 – Shneiderman describes appeal of graphically-based
interaction
– visibility of objects
– incremental action and rapid feedback
– reversibility encourages exploration
– syntactic correctness of all actions
– replace language with action
3/28/2023 Unit 2 _ Interaction and Interface 100
1984 – Apple
Macintosh
pricey Lisa
computer
• An operation such as moving a file from one
directory to another is mirrored-‘picked up and
dragged’--mirrored
• In constructing the command line for a move
operation would result in a syntactically incorrect
command.
• model-world metaphor
3/28/2023 Unit 2 _ Interaction and Interface 101
• In model-world metaphor-from the user’s
perspective, the interface is the system.
• Rather, widgets embody both input and
output languages, so we consider them as
interaction objects.
• Direct manipulation is the WYSIWYG
paradigm, which stands for ‘what you see is
what you get’.
Ex:word processor
3/28/2023 Unit 2 _ Interaction and Interface 102
Language versus action
• Whereas it is true that direct manipulation
interfaces make some tasks easier to perform
correctly?
• Actions performed at the interface replace any
need to understand their meaning at any
deeper, system level.
Ex:Image Input
3/28/2023 Unit 2 _ Interaction and Interface 103
Two meaningful interpretations
• user understands how the underlying system
functions and the interface as interlocutor
need not perform much translation-direct
manipulation.
• Interpretation does not require the user to
understand the underlying system’s structure.
Interface as an agent in these circumstances.
Ex:What are the speed limits on different
roads?’
3/28/2023 Unit 2 _ Interaction and Interface 104
• The action and language paradigms need not
be completely separate.
• Generic and repeatable procedures in the
language paradigm and not in the action
paradigm.
• User can perform some routine tasks in the
action paradigm and the system records this
as a generic procedure. In a sense, the system
is interpreting the user’s actions as a
language script which it can then follow.
3/28/2023 Unit 2 _ Interaction and Interface 105
Hypertext
• 1945 – Vannevar Bush and the memex- aimed at
increasing the human capacity to store and retrieve
connected pieces of knowledge by mimicking our
ability to create random associative links .
• Published an article entitled ‘As We May Think’ in
The Atlantic Monthly
https://www.youtube.com/watch?v=pW4SS_9nXyo
3/28/2023 Unit 2 _ Interaction and Interface 106
• Nelson coined the phrase hypertext in the
mid-1960s to reflect this non-linear text
structure.
• Hypermedia, an extension of the term
hypertext, is a nonlinear medium of
information that includes graphics, audio,
video, plain text and hyperlinks.
• The term hypermedia (or multimedia) is used
for non-linear storage of all forms of
electronic media.
3/28/2023 Unit 2 _ Interaction and Interface 107
Multi-modality
• Each of these input and output devices can be considered as
communication channels for the system and they correspond
to certain human communication channels.
• A multi-modal interactive system is a system that relies on
the use of multiple human communication channels.
• Emphasis on simultaneous use of multiple channels for input
and output.
3/28/2023 Unit 2 _ Interaction and Interface 108
Computer-supported cooperative
work
• Reconnect the computer themselves to the
rest of the workstations in their immediate
working environment, and even throughout
the world.
• Reconnection was the emergence of
collaboration between individuals via the
computer–called computer-supported
cooperative work, or CSCW.
3/28/2023 Unit 2 _ Interaction and Interface 109
Main distinction between CSCW systems and
interactive systems
• single user is that designers can no longer
neglect the society within which any single
user operates.
• CSCW systems are built to allow interaction
between humans via the computer and so the
needs of the many must be represented in
the one product.
• Electronic mail is most prominent success.
3/28/2023 Unit 2 _ Interaction and Interface 110
The world wide web
• The computers of the internet all
communicate using common data
transmission protocols (TCP/IP) and
addressing systems (IP addresses and domain
names).
• https-Hypertext Transfer Protocol Secure
• HTML-HyperText Markup Language
• URLs-Uniform Resource Locator
3/28/2023 Unit 2 _ Interaction and Interface 111
Agent-based interfaces
• Original interfaces
– Commands given to computer
– Language-based
• Direct Manipulation/WIMP
– Commands performed on “world” representation
– Action based
• Agents - return to language by instilling proactivity and
“intelligence” in command processor
– Avatars, natural language processing
Ex:If Sender: is bank manager Then Urgency: is high
3/28/2023 Unit 2 _ Interaction and Interface 112
Ubiquitous Computing
• “The most profound technologies are those that disappear”
 Mark Weiser, 1991
• Late 1980’s: computer was very apparent
How to make it disappear?
• Shrink and embed/distribute it in the physical world
• Design interactions that don’t demand our intention
3/28/2023 Unit 2 _ Interaction and Interface 113
Sensor-based and context-aware
interaction
• Humans are good at recognizing the “context”
of a situation and reacting appropriately
• Automatically sensing physical phenomena
(e.g., light, temp, location, identity) becoming
easier
• How can we go from sensed physical
measures to interactions that behave as if
made “aware” of the surroundings.
3/28/2023 Unit 2 _ Interaction and Interface 114

Weitere ähnliche Inhalte

Was ist angesagt?

Introduction to Solution Architecture Book
Introduction to Solution Architecture BookIntroduction to Solution Architecture Book
Introduction to Solution Architecture BookAlan McSweeney
 
Talend Introduction by TSI
Talend Introduction by TSITalend Introduction by TSI
Talend Introduction by TSIRemain Software
 
Ooad (object oriented analysis design)
Ooad (object oriented analysis design)Ooad (object oriented analysis design)
Ooad (object oriented analysis design)Gagandeep Nanda
 
Introduction to Enterprise architecture and the steps to perform an Enterpris...
Introduction to Enterprise architecture and the steps to perform an Enterpris...Introduction to Enterprise architecture and the steps to perform an Enterpris...
Introduction to Enterprise architecture and the steps to perform an Enterpris...Prashanth Panduranga
 
Driving Business Agility & Innovation with Enterprise Architecture
Driving Business Agility & Innovation with Enterprise ArchitectureDriving Business Agility & Innovation with Enterprise Architecture
Driving Business Agility & Innovation with Enterprise ArchitectureCorso
 
Togaf – architecture development method (adm)
Togaf – architecture development method (adm)Togaf – architecture development method (adm)
Togaf – architecture development method (adm)Vinod Wilson
 
Software architecture
Software architectureSoftware architecture
Software architecturenazn
 
SYSTEM ANALYSIS AND DESIGN Assignment help
SYSTEM ANALYSIS AND DESIGN Assignment helpSYSTEM ANALYSIS AND DESIGN Assignment help
SYSTEM ANALYSIS AND DESIGN Assignment helpjohn mayer
 
Enterprise Information Systems
Enterprise Information SystemsEnterprise Information Systems
Enterprise Information SystemsGoutama Bachtiar
 
Software architecture design ppt
Software architecture design pptSoftware architecture design ppt
Software architecture design pptfarazimlak
 
IT Enterprise architecture ppt
IT Enterprise architecture pptIT Enterprise architecture ppt
IT Enterprise architecture pptMonsif sakienah
 
Introduction to Management Information System
Introduction to Management Information SystemIntroduction to Management Information System
Introduction to Management Information SystemAbdul Motaleb
 
How to Articulate the Value of Enterprise Architecture
How to Articulate the Value of Enterprise ArchitectureHow to Articulate the Value of Enterprise Architecture
How to Articulate the Value of Enterprise Architecturecccamericas
 
What is software engineering
What is software engineeringWhat is software engineering
What is software engineeringJennifer Polack
 
Introduction to the Java(TM) Advanced Imaging API
Introduction to the Java(TM) Advanced Imaging APIIntroduction to the Java(TM) Advanced Imaging API
Introduction to the Java(TM) Advanced Imaging APIwhite paper
 

Was ist angesagt? (20)

Introduction to Solution Architecture Book
Introduction to Solution Architecture BookIntroduction to Solution Architecture Book
Introduction to Solution Architecture Book
 
Talend Introduction by TSI
Talend Introduction by TSITalend Introduction by TSI
Talend Introduction by TSI
 
Ooad (object oriented analysis design)
Ooad (object oriented analysis design)Ooad (object oriented analysis design)
Ooad (object oriented analysis design)
 
Introduction to Enterprise architecture and the steps to perform an Enterpris...
Introduction to Enterprise architecture and the steps to perform an Enterpris...Introduction to Enterprise architecture and the steps to perform an Enterpris...
Introduction to Enterprise architecture and the steps to perform an Enterpris...
 
Lecture 1 Information System
Lecture 1  Information SystemLecture 1  Information System
Lecture 1 Information System
 
Case tools
Case tools Case tools
Case tools
 
Driving Business Agility & Innovation with Enterprise Architecture
Driving Business Agility & Innovation with Enterprise ArchitectureDriving Business Agility & Innovation with Enterprise Architecture
Driving Business Agility & Innovation with Enterprise Architecture
 
System integration
System integrationSystem integration
System integration
 
Togaf – architecture development method (adm)
Togaf – architecture development method (adm)Togaf – architecture development method (adm)
Togaf – architecture development method (adm)
 
Software architecture
Software architectureSoftware architecture
Software architecture
 
Case tools
Case toolsCase tools
Case tools
 
UML
UMLUML
UML
 
SYSTEM ANALYSIS AND DESIGN Assignment help
SYSTEM ANALYSIS AND DESIGN Assignment helpSYSTEM ANALYSIS AND DESIGN Assignment help
SYSTEM ANALYSIS AND DESIGN Assignment help
 
Enterprise Information Systems
Enterprise Information SystemsEnterprise Information Systems
Enterprise Information Systems
 
Software architecture design ppt
Software architecture design pptSoftware architecture design ppt
Software architecture design ppt
 
IT Enterprise architecture ppt
IT Enterprise architecture pptIT Enterprise architecture ppt
IT Enterprise architecture ppt
 
Introduction to Management Information System
Introduction to Management Information SystemIntroduction to Management Information System
Introduction to Management Information System
 
How to Articulate the Value of Enterprise Architecture
How to Articulate the Value of Enterprise ArchitectureHow to Articulate the Value of Enterprise Architecture
How to Articulate the Value of Enterprise Architecture
 
What is software engineering
What is software engineeringWhat is software engineering
What is software engineering
 
Introduction to the Java(TM) Advanced Imaging API
Introduction to the Java(TM) Advanced Imaging APIIntroduction to the Java(TM) Advanced Imaging API
Introduction to the Java(TM) Advanced Imaging API
 

Ähnlich wie [PPT] _ UNIT 2 _ Interaction-1.pptx

WINSEM2021-22_SWE2004_ETH_VL2021220500570_2022-03-09_Reference-Material-I.ppt
WINSEM2021-22_SWE2004_ETH_VL2021220500570_2022-03-09_Reference-Material-I.pptWINSEM2021-22_SWE2004_ETH_VL2021220500570_2022-03-09_Reference-Material-I.ppt
WINSEM2021-22_SWE2004_ETH_VL2021220500570_2022-03-09_Reference-Material-I.pptVivekananda Gn
 
WINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.ppt
WINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.pptWINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.ppt
WINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.pptVivekananda Gn
 
WINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.ppt
WINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.pptWINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.ppt
WINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.pptVivekananda Gn
 
Local Service Search Engine Management System LSSEMS
Local Service Search Engine Management System LSSEMSLocal Service Search Engine Management System LSSEMS
Local Service Search Engine Management System LSSEMSYogeshIJTSRD
 
Design Model & User Interface Design in Software Engineering
Design Model & User Interface Design in Software EngineeringDesign Model & User Interface Design in Software Engineering
Design Model & User Interface Design in Software EngineeringMeghaj Mallick
 
Requirement Analysis & Specification sharbani bhattacharya
Requirement Analysis & Specification sharbani bhattacharyaRequirement Analysis & Specification sharbani bhattacharya
Requirement Analysis & Specification sharbani bhattacharyaSharbani Bhattacharya
 
Software Architecture and Design
Software Architecture and DesignSoftware Architecture and Design
Software Architecture and DesignRa'Fat Al-Msie'deen
 
DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...
DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...
DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...AM Publications
 
Requirement Engineering.pdf
Requirement Engineering.pdfRequirement Engineering.pdf
Requirement Engineering.pdfMuhammad Imran
 
Ambient Intelligence Design Process
Ambient Intelligence Design ProcessAmbient Intelligence Design Process
Ambient Intelligence Design ProcessFulvio Corno
 
Human Computer Interaction
Human Computer InteractionHuman Computer Interaction
Human Computer InteractionIRJET Journal
 
Unit 7 performing user interface design
Unit 7 performing user interface designUnit 7 performing user interface design
Unit 7 performing user interface designPreeti Mishra
 
Interactive Design Coursework (ID Coursework)
Interactive Design Coursework (ID Coursework)Interactive Design Coursework (ID Coursework)
Interactive Design Coursework (ID Coursework)Aung Hein Htet
 
TM112 Meeting5-Crossing boundaries.pptx
TM112 Meeting5-Crossing boundaries.pptxTM112 Meeting5-Crossing boundaries.pptx
TM112 Meeting5-Crossing boundaries.pptxMohammedYusuf609377
 

Ähnlich wie [PPT] _ UNIT 2 _ Interaction-1.pptx (20)

WINSEM2021-22_SWE2004_ETH_VL2021220500570_2022-03-09_Reference-Material-I.ppt
WINSEM2021-22_SWE2004_ETH_VL2021220500570_2022-03-09_Reference-Material-I.pptWINSEM2021-22_SWE2004_ETH_VL2021220500570_2022-03-09_Reference-Material-I.ppt
WINSEM2021-22_SWE2004_ETH_VL2021220500570_2022-03-09_Reference-Material-I.ppt
 
WINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.ppt
WINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.pptWINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.ppt
WINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.ppt
 
WINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.ppt
WINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.pptWINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.ppt
WINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.ppt
 
College 2 18-2014
College 2 18-2014College 2 18-2014
College 2 18-2014
 
Local Service Search Engine Management System LSSEMS
Local Service Search Engine Management System LSSEMSLocal Service Search Engine Management System LSSEMS
Local Service Search Engine Management System LSSEMS
 
Design Model & User Interface Design in Software Engineering
Design Model & User Interface Design in Software EngineeringDesign Model & User Interface Design in Software Engineering
Design Model & User Interface Design in Software Engineering
 
Requirement Analysis & Specification sharbani bhattacharya
Requirement Analysis & Specification sharbani bhattacharyaRequirement Analysis & Specification sharbani bhattacharya
Requirement Analysis & Specification sharbani bhattacharya
 
Software Architecture and Design
Software Architecture and DesignSoftware Architecture and Design
Software Architecture and Design
 
SE UNIT-3.pdf
SE UNIT-3.pdfSE UNIT-3.pdf
SE UNIT-3.pdf
 
Marta de la Cruz-Informe Final
Marta de la Cruz-Informe FinalMarta de la Cruz-Informe Final
Marta de la Cruz-Informe Final
 
DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...
DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...
DESIGN PATTERNS IN THE WORKFLOW IMPLEMENTATION OF MARINE RESEARCH GENERAL INF...
 
Sjaq
SjaqSjaq
Sjaq
 
Requirement Engineering.pdf
Requirement Engineering.pdfRequirement Engineering.pdf
Requirement Engineering.pdf
 
Report_Internships
Report_InternshipsReport_Internships
Report_Internships
 
Ambient Intelligence Design Process
Ambient Intelligence Design ProcessAmbient Intelligence Design Process
Ambient Intelligence Design Process
 
Human Computer Interaction
Human Computer InteractionHuman Computer Interaction
Human Computer Interaction
 
Unit 7 performing user interface design
Unit 7 performing user interface designUnit 7 performing user interface design
Unit 7 performing user interface design
 
Interactive Design Coursework (ID Coursework)
Interactive Design Coursework (ID Coursework)Interactive Design Coursework (ID Coursework)
Interactive Design Coursework (ID Coursework)
 
Davis repertory grid
Davis repertory gridDavis repertory grid
Davis repertory grid
 
TM112 Meeting5-Crossing boundaries.pptx
TM112 Meeting5-Crossing boundaries.pptxTM112 Meeting5-Crossing boundaries.pptx
TM112 Meeting5-Crossing boundaries.pptx
 

Kürzlich hochgeladen

FILIPINO PSYCHology sikolohiyang pilipino
FILIPINO PSYCHology sikolohiyang pilipinoFILIPINO PSYCHology sikolohiyang pilipino
FILIPINO PSYCHology sikolohiyang pilipinojohnmickonozaleda
 
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...Postal Advocate Inc.
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxiammrhaywood
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management SystemChristalin Nelson
 
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfGrade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfJemuel Francisco
 
Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Celine George
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptxmary850239
 
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxBarangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxCarlos105
 
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfSpandanaRallapalli
 
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYKayeClaireEstoconing
 
Science 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxScience 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxMaryGraceBautista27
 
Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxKarra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxAshokKarra1
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptxmary850239
 
Judging the Relevance and worth of ideas part 2.pptx
Judging the Relevance  and worth of ideas part 2.pptxJudging the Relevance  and worth of ideas part 2.pptx
Judging the Relevance and worth of ideas part 2.pptxSherlyMaeNeri
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4MiaBumagat1
 
Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Celine George
 

Kürzlich hochgeladen (20)

FILIPINO PSYCHology sikolohiyang pilipino
FILIPINO PSYCHology sikolohiyang pilipinoFILIPINO PSYCHology sikolohiyang pilipino
FILIPINO PSYCHology sikolohiyang pilipino
 
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management System
 
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfGrade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
 
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptxLEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
 
Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17
 
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptxYOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
 
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptxFINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
 
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx
 
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxBarangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
 
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdf
 
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
 
Science 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxScience 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptx
 
Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxKarra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptx
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx
 
Judging the Relevance and worth of ideas part 2.pptx
Judging the Relevance  and worth of ideas part 2.pptxJudging the Relevance  and worth of ideas part 2.pptx
Judging the Relevance and worth of ideas part 2.pptx
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4
 
Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17
 

[PPT] _ UNIT 2 _ Interaction-1.pptx

  • 1. UNIT II : Interaction and Interface 22CDT11 – Human Computer Interaction Thanks to and Resource from : Alan Dix, Janet Finlay, Gregory D.Abowd and Russell Beale. Human-Computer Interaction, Pearson education , 3ed, 2009
  • 2. Unit Wise Syllabus – HCI 3/28/2023 Unit 2 _ Interaction and Interface 2
  • 3. Unit 2 : Contents • The Interaction – Introduction – Models of interaction – Frameworks and HCI – Ergonomics – Interaction styles – Elements of the • WIMP interface – Interactivity – The context of the interaction – Experience – Engagement and fun • Paradigms – Introduction – Paradigm for interaction 3/28/2023 Unit 2 _ Interaction and Interface 3
  • 4. Interaction - Overview • Interaction models help us to understand what is going on in the interaction between user and system. • This models addresses the translation between what the user wants and what the system does. • Ergonomics looks at the physical characteristics of the interaction and how these influence its effectiveness. • The dialog between user and system is influenced by the style of the interface. • The interaction takes place within a social and organizational context that affects both user and system. 3/28/2023 Unit 2 _ Interaction and Interface 4
  • 5. Introduction • communication between user and system: the interaction. 3/28/2023 Unit 2 _ Interaction and Interface 5
  • 6. Introduction • models of interaction that enable us to identify and evaluate components of the interaction, and at the physical, social and organizational issues that provide the context for it 3/28/2023 Unit 2 _ Interaction and Interface 6
  • 7. Models of Interaction • Interaction involves at least two participants: the user and the system. Both are complex. • The interface must therefore effectively translate between them to allow the interaction to be successful. • This translation can fail at a number of points and for a number of reasons. • The use of models of interaction can help us to understand exactly what is going on in the interaction and identify the likely root of difficulties. 3/28/2023 Unit 2 _ Interaction and Interface 7
  • 8. Norman’s Model • Norman’s execution–evaluation cycle. 3/28/2023 Unit 2 _ Interaction and Interface 8
  • 9. Interaction Terms • The purpose of an interactive system is to aid a user in accomplishing goals from some application domain. – Domain – AOEK (Area of Expertise and Knowledge) – Example: • Domain : Graphic Design • Task : Operation to Manipulate • Goal : Desire Output • Intention : Specific action to meet Goal 3/28/2023 Unit 2 _ Interaction and Interface 9
  • 10. Interaction Terms • Task Analysis – Identification Problem Space in terms of domain, task, goal, intention. • Two different components: – System • Core Language • Computational Attributes of Domain – User • Task Language • Psychological Attributes of the Domain 3/28/2023 Unit 2 _ Interaction and Interface 10
  • 11. Norman’s Interactive Cycle and Stages • Interactive cycle can be divided into two major phases. 1. Execution 2. Evaluation • These can then be subdivided into further stages, seven in all. 1. Establishing the goal. 2. Forming the intention. 3. Specifying the action sequence. 4. Executing the action. 5. Perceiving the system state. 6. Interpreting the system state. 7. Evaluating the system state with respect to the goals and intentions. 3/28/2023 Unit 2 _ Interaction and Interface 11
  • 12. The execution–evaluation cycle 3/28/2023 Unit 2 _ Interaction and Interface 12 User Formulates Plan Execution Observations Evaluations Further Action 1, 2, 3 4 5, 6 7
  • 13. Norman’s execution–evaluation cycle 3/28/2023 Unit 2 _ Interaction and Interface 13
  • 14. Gulf of Execution and Evaluation 3/28/2023 Unit 2 _ Interaction and Interface 14 • Two Challenges: – Execution: Taking action to accomplish a specific goal – Evaluation: Understanding the state of the system • These challenges are described as the “gulf of evaluation” and the “gulf of execution”
  • 15. gulfs of execution • The gulf of execution is the difference between the user’s formulation of the actions to reach the goal and the actions allowed by the system. – If the actions allowed by the system correspond to those intended by the user, the interaction will be effective. – The interface should therefore aim to reduce this gulf. 3/28/2023 Unit 2 _ Interaction and Interface 15
  • 16. gulfs of evaluation • The gulf of evaluation is the distance between the physical presentation of the system state and the expectation of the user. – If the user can readily evaluate the presentation in terms of his goal, the gulf of evaluation is small. – The more effort that is required on the part of the user to interpret the presentation, the less effective the interaction. 3/28/2023 Unit 2 _ Interaction and Interface 16
  • 17. Norman’s Interaction Framework 3/28/2023 Unit 2 _ Interaction and Interface 17
  • 18. Translations between components 3/28/2023 Unit 2 _ Interaction and Interface 18
  • 19. Example • Consider the MS Word processor. – The user using short keys to select a command might press crtl-alt-del accidentally; definitely an articulation error. – The user may not be able to find the correct formatting commands in the menus; performance coverage error. Or the user may type :) truly desiring colon and closed parenthesis but Word makes a smiley face; wrong performance. – Comparing the printed document with the monitor displayed document the user finds discrepancies. This is a presentation error. – The user does not realize that the blue background text is meant to indicate selection (and should not appear in the printed version) – this is an observation error. 3/28/2023 Unit 2 _ Interaction and Interface 19
  • 20. FRAMEWORKS AND HCI • The ACM SIGCHI Curriculum Development Group presents a framework for HCI. • ACM SIGCHI - Association for Computing Machinery Special Interest Group on Computer–Human Interaction – Ergonomics issues are user side of interface (Input + Output = Articulation + Observation) – Dialog Design + Interface Style = Articulation + Performance – Screen Design = Presentation 3/28/2023 Unit 2 _ Interaction and Interface 20
  • 21. A framework for human–computer interaction. Adapted from ACM SIGCHI Curriculum Development Group 3/28/2023 Unit 2 _ Interaction and Interface 21
  • 22. ERGONOMICS 3/28/2023 Unit 2 _ Interaction and Interface 22 The study of the physical characteristics of the interaction: how the controls are designed, the physical environment in which the interaction takes place, and the layout and physical qualities of the screen.
  • 23. Arrangement of controls and displays • In addition to these cognitive aspects of design, physical aspects are also important. • Sets of controls and parts of the display should be grouped logically to allow rapid access by the user . • Example:electronic newsreader 3/28/2023 Unit 2 _ Interaction and Interface 23
  • 24. 3/28/2023 Unit 2 _ Interaction and Interface 24 • We have already touched on the importance of grouping controls together logically and keeping opposing controls separate. • functional controls-functionally related are placed together. • sequential controls -organized to reflect the order of their use in a typical interaction. • frequency controls -displays are organized according to how frequently they are used
  • 25. Industrial interfaces • Connection between networks over which the control of all connected devices is managed. All data between the devices but also with the control is exchanged through this interface. 3/28/2023 Unit 2 _ Interaction and Interface 25
  • 26. Glass interfaces vs. dials and knobs • The traditional machine interface consists of dials and knobs directly wired or piped to the equipment. 3/28/2023 Unit 2 _ Interaction and Interface 26
  • 27. Direct and Indirect manipulation 3/28/2023 Unit 2 _ Interaction and Interface 27
  • 28. The physical environment of the interaction • The physical environment in which the system is the health and safety of its users. It should therefore be considered in all design. • First consideration here is the size of the users. • In any system the smallest user should be able to reach all the controls (this may include a user in a wheelchair), and the largest user should not be cramped in the environment. • The user should be seated for comfort and stability. 3/28/2023 Unit 2 _ Interaction and Interface 28
  • 29. Health issues • Physical position • Temperature • Lighting • Noise • Time-The time users spend using the system should also be controlled-excessive use of CRT displays is harmful 3/28/2023 Unit 2 _ Interaction and Interface 29
  • 30. The use of color • The use of color in displays is an ergonomics issue. • A relatively high proportion of the population suffers from a deficiency in color vision. • Color should not be affected by changes in contrast. • Not be the only cue, additional coding information should be included. 3/28/2023 Unit 2 _ Interaction and Interface 30
  • 31. • red may be used to indicate emergency and alarms red is associated with danger and warnings in most western cultures China it symbolizes happiness and good fortune. • Green- normal activity; • Yellow- standby and auxiliary function Awareness of the cultural associations of color is particularly important in designing systems and websites for a global market. 3/28/2023 Unit 2 _ Interaction and Interface 31
  • 32. Ergonomics and HCI • Ergonomics is a huge area, which is distinct from HCI but sits alongside it. • Ergonomic factors are in general well established and understood and are therefore used as the basis for standardizing hardware designs. 3/28/2023 Unit 2 _ Interaction and Interface 32
  • 33. INTERACTION STYLES • Interaction can be seen as a dialog between the computer and the user. There are a number of common interface styles including: • command line interface • menus • natural language • question/answer and query dialog • form-fills and spread sheets • WIMP • point and click • three-dimensional interfaces. 3/28/2023 Unit 2 _ Interaction and Interface 33
  • 34. command line interface • It provides a means of expressing instructions to the computer directly • Command line interfaces are powerful in that they offer direct access to system functionality. Problems: • Commands must be remembered, as no cue is provided in the command line to • indicate which command is needed. • Better for expert users. • Causing confusion to the user and increasing the overhead of learning. 3/28/2023 Unit 2 _ Interaction and Interface 34
  • 35. Menus • In a menu-driven interface, the set of options available to the user is displayed on the screen, and selected using the mouse, or numeric or alphabetic keys. 3/28/2023 Unit 2 _ Interaction and Interface 35
  • 36. Natural language • Natural language understanding, both of speech and written input, is the subject of much interest and research. • Language is ambiguous at a number of levels. First, the syntax, or structure, of a phrase may not be clear. Example: The boy hit the dog with the stick 3/28/2023 Unit 2 _ Interaction and Interface 36
  • 37. • The user still has to learn which phrases the computer understands and may become frustrated if too much is expected. 3/28/2023 Unit 2 _ Interaction and Interface 37
  • 38. Question/answer and query dialog • Question and answer dialog is a simple mechanism for providing input to an application in a specific domain. • The user is asked a series of questions (mainly with yes/no responses, multiple choice, or codes) 3/28/2023 Unit 2 _ Interaction and Interface 38
  • 39. Query dialog • Query languages, on the other hand, are used to construct queries to retrieve information from a database. They use natural-language- style phrases, but in fact require specific syntax, as well as knowledge of the database structure. 3/28/2023 Unit 2 _ Interaction and Interface 39
  • 40. Form-fills and spreadsheets • Form-filling interfaces are used primarily for data entry but can also be useful in data retrieval applications. 3/28/2023 Unit 2 _ Interaction and Interface 40
  • 41. spreadsheets • The spreadsheet comprises a grid of cells, each of which can contain a value or a formula. 3/28/2023 Unit 2 _ Interaction and Interface 41
  • 42. The WIMP interface • WIMP interface style, often simply called windowing systems. • WIMP stands for windows, icons, menus and pointers (sometimes windows, icons, mice and pull-down menus). • Examples: WIMP interfaces include • Microsoft Windows for IBM PC compatibles • MacOS for Apple Macintosh compatibles • various X Windows-based systems for UNIX.(windows 11 common for bitmap displays, common on Unix-like operating systems) 3/28/2023 Unit 2 _ Interaction and Interface 42
  • 43. Point-and-click interfaces • In most multimedia systems and in web browsers, virtually all actions take only a single click of the mouse button. • point-and-click interface style is obviously closely related to the WIMP style. -hypertext • Extensively used in touchscreen information systems.combined with a menu-driven interface 3/28/2023 Unit 2 _ Interaction and Interface 43
  • 44. Three-dimensional interfaces • There is an increasing use of three-dimensional effects in user interfaces. • Ex:Virtual Reality • The simplest technique is where ordinary WIMP elements, buttons, scroll bars, etc., are given a 3D appearance using shading, giving the appearance of being sculpted out of stone. 3/28/2023 Unit 2 _ Interaction and Interface 44
  • 45. WebBook – using 3D to make more space 3/28/2023 Unit 2 _ Interaction and Interface 45
  • 46. ELEMENTS OF THE WIMP INTERFACE • Together, these elements of the WIMP interfaces are called widgets, and they comprise the toolkit for interaction between user and system. 3/28/2023 Unit 2 _ Interaction and Interface 46
  • 47. Windows • Windows are areas of the screen that behave as if they were independent terminals in their own right. contain text or graphics can be moved or resized More than one window can be on a screen at once separate tasks to be visible at the same time windows as they switch from one thread of work to another. 3/28/2023 Unit 2 _ Interaction and Interface 47
  • 48. • Overlapping windows can cause problems by obscuring vital information, so windows may also be tiled, when they adjoin but do not overlap each other. • windows may be placed in a cascading fashion, where each new window is placed slightly to the left and below the previous window. • Scrollbars 3/28/2023 Unit 2 _ Interaction and Interface 48
  • 49. • There is usually a title bar attached to the top of a window, identifying it to the user, and there may be special boxes in the corners of the window to aid resizing, closing, or making as large as possible. 3/28/2023 Unit 2 _ Interaction and Interface 49
  • 50. Icons • A small picture is used to represent a closed window, and this representation is known as an icon. • By allowing icons, many windows can be available on the screen at the same time, ready to be expanded to their full size by clicking on the icon. Shrinking a window to its icon is known as iconifying the window. MacOS Icon-> 3/28/2023 Unit 2 _ Interaction and Interface 50
  • 51. Pointers • WIMP relies very much on pointing and selecting things such as icons. • The mouse provides an input device capable of such tasks, although joysticks and trackballs are other alternatives. • When designing your own cursors, make sure the image has an obvious hot-spot. 3/28/2023 Unit 2 _ Interaction and Interface 51
  • 52. Menus • A menu presents a choice of operations or services that can be performed by the system at a given time. • As the pointer moves to the position of a menu item, the item is usually highlighted . • Selection usually requires some additional user action, such as pressing a button on the mouse that controls the pointer cursor on the screen. 3/28/2023 Unit 2 _ Interaction and Interface 52
  • 53. • The main menu can be visible to the user all the time, as a menu bar and submenus can be pulled down or across from it upon request. • Websites use a variety of menu bar locations, including top, bottom and either side of the screen. • These pop-up menus are often used to present context sensitive options 3/28/2023 Unit 2 _ Interaction and Interface 53
  • 54. • Menu selection is to arrange the options in a circular fashion. • Remembering Fitts’ law • The pointer appears in the center of the circle, and so there is the same distance to travel to any of the selections. • Easier to select items • pie menus take up more screen space and are therefore less common in interfaces. 3/28/2023 Unit 2 _ Interaction and Interface 54
  • 55. Keyboard accelerators • Menus often offer keyboard accelerators, key combinations that have the same effect as selecting the menu item. • When the user presses function key F3 nothing happens. F3 only works when the menu is not displayed – when the menu is there you must press ‘F’ instead! This is an example of an interface is dishonest 3/28/2023 Unit 2 _ Interaction and Interface 55
  • 56. Buttons • Buttons are individual and isolated regions within a display that can be selected by the user to invoke specific operations. • ‘Pushing’ the button invokes a command. • Buttons can also be used to toggle between two states. • Toggle buttons can be grouped together to allow a user to select one feature from a set of mutually exclusive options. 3/28/2023 Unit 2 _ Interaction and Interface 56
  • 57. Toolbars • Many systems have a collection of small buttons, each with icons, placed at the top or side of the window and offering commonly used functions. • Toolbar is fixed, but often users can customize it. 3/28/2023 Unit 2 _ Interaction and Interface 57
  • 58. Palettes • A palette is the set of available colors from which an image can be made. • An example in a drawing package would be a collection of icons to indicate the pixel color or pattern that is used to fill in objects. • In the case of pull-down menus, the user may be able ‘tear off ’ the menu. 3/28/2023 Unit 2 _ Interaction and Interface 58
  • 59. Dialog boxes • Dialog boxes are information windows used by the system to bring the user’s attention to some important information, possibly an error or a warning used to prevent a possible error and to save file etc.. 3/28/2023 Unit 2 _ Interaction and Interface 59
  • 60. INTERACTIVITY • Looking at an interface, it is easy to focus on the visually distinct parts (the buttons, menus, text areas) but the dynamics, the way they react to a user’s actions, are less obvious. Example: Ignores the ‘semantic’ level of an interface: The validation of numeric information in a forms- based system. 3/28/2023 Unit 2 _ Interaction and Interface 60
  • 61. • Interactivity is the defining feature of an interactive system. • Speech-based input is difficult, speech-based interaction easier. • speech recognition is too low to allow transcription from tape • In an airline reservation system, so long as the system can reliably recognize yes and no it can reflect back its understanding of what you said and seek confirmation. 3/28/2023 Unit 2 _ Interaction and Interface 61
  • 62. • Interactivity is also crucial in determining the ‘feel’ of a WIMP environment. • These elements differs both within a single environment and between environments. • Discussed different behavior of pull-down and fall- down menus. • Fall-down menus are more easily invoked by accident. 3/28/2023 Unit 2 _ Interaction and Interface 62
  • 63. • Menus are a major difference between the MacOS and Microsoft Windows environments. • In WIMP environments, the user takes the initiative, with many options and often many applications simultaneously available. 3/28/2023 Unit 2 _ Interaction and Interface 63
  • 64. • Exceptions to this are pre-emptive parts of the interface-it needs information in order to continue. Ex:modal dialog boxes. • Not allow you to do anything else until the dialog box has been completed or cancelled. • Modern systems suggests that one should minimize the use of pre-emptive elements, allowing the user maximum flexibility. 3/28/2023 Unit 2 _ Interaction and Interface 64
  • 65. • Interactivity is also critical in dealing with errors. • The other way to deal with errors is to make sure that the user or the system is able to tell when errors have occurred. If users can detect errors then they can correct them. • So, even if errors occur, the interaction as a whole succeeds. 3/28/2023 Unit 2 _ Interaction and Interface 65
  • 66. THE CONTEXT OF THE INTERACTION • Interaction does not occur within a vacuum. We have already noted some of the physical factors in the environment that can directly affect the quality of the interaction. • In reality, users work within a wider social and organizational context. • It is important to be aware of such influences to understand the user and the work domain fully. 3/28/2023 Unit 2 _ Interaction and Interface 66
  • 67. Bank managers don’t type... • Example:ATM machine opening • The presence of other people in a work environment affects the performance of the worker in any task. • In the case of peers, competition increases performance. • In order to perform well, users must be motivated- fear, allegiance, ambition and self-satisfaction. • If a system makes it difficult for the user to perform necessary tasks, or is frustrating to use, the user’s job satisfaction, and consequently performance, will be reduced. 3/28/2023 Unit 2 _ Interaction and Interface 67
  • 68. • Often systems are chosen and introduced by managers rather than the users themselves. • In some cases the manager’s perception of the job may be based upon observation of results and not on actual activity. • If this happens there may be three results: the system will be rejected, the users will be resentful and unmotivated, the user will adapt the intended interaction to his own requirements. This indicates the importance of involving actual users in the design process. 3/28/2023 Unit 2 _ Interaction and Interface 68
  • 69. Half the picture? • When systems are not designed to match the way people actually work, then users end up having to do ‘work arounds’. • Integrated student records systems are becoming popular in universities in the UK. • In many cases staff are therefore supplementing the official records system with their own unofficial spreadsheets to provide this information – making additional work for staff and increased opportunity for error. 3/28/2023 Unit 2 _ Interaction and Interface 69
  • 70. • The introduction of new technology may prove to be a motivation to users, particularly if it is well designed, integrated with the user’s current work, and challenging. • Providing adequate feedback is an important source of motivation for users. • If no feedback is given during a session, the user may become bored, unmotivated or, worse, unsure of whether the actions performed have been successful. • Feedback can be used to prevent frustration on the part of the user – the user is then aware of what is happening. 3/28/2023 Unit 2 _ Interaction and Interface 70
  • 71. EXPERIENCE, ENGAGEMENT AND FUN • Even from a pure economic standpoint, your employees are likely to work better and more effectively if they enjoy what they are doing! 3/28/2023 Unit 2 _ Interaction and Interface 71
  • 72. Understanding experience • Shopping is not about an efficient financial transaction, it is an experience. • But experience is a difficult thing to pin down; we understand the idea of a good experience, but how do we define it and even more difficult how do we design it? 3/28/2023 Unit 2 _ Interaction and Interface 72
  • 73. • Extreme experiences such as climbing a rock face in order to understand that feeling of total engagement that can sometimes happen. • This sense of flow occurs when there is a balance between anxiety and boredom. • Alternatively, if you do something completely outside your abilities you may become anxious and, if you are half way up a rock face, afraid. • Flow comes when you are teetering at the edge of your abilities, stretching yourself to or a little beyond your limits. 3/28/2023 Unit 2 _ Interaction and Interface 73
  • 74. zone of proximal development • Things that you cannot quite do yourself, but you can do with some support, whether from teachers, fellow pupils, or electronic or physical materials. 3/28/2023 Unit 2 _ Interaction and Interface 74
  • 75. Designing experience • These are rather like electronic greetings cards, but are based on crackers. • Christmas crackers are small tubes of paper between 8 and 12 inches long (20–30 cm). Inside there are a small toy, a joke or motto and a paper hat. A small strip of card is threaded through, partly coated with gunpowder. • When two people at a party pull the cracker, it bursts apart with a small bang from the gunpowder and the contents spill out. 3/28/2023 Unit 2 _ Interaction and Interface 75
  • 76. The crackers experience 3/28/2023 Unit 2 _ Interaction and Interface 76
  • 77. Virtual cracker 3/28/2023 Unit 2 _ Interaction and Interface 77
  • 78. Physical design and engagement Designers are faced with many constraints: • Ergonomic: You cannot physically push buttons if they are too small or too close. • Physical: The size or nature of the device may force certain positions or styles of control, for example, a dial like the one on the washing machine would not fit on the MiniDisc controller; high-voltage switches cannot be as small as low-voltage ones. • 3/28/2023 Unit 2 _ Interaction and Interface 78
  • 79. • Legal and safety: Cooker controls must be far enough from the pans that you do not burn yourself, but also high enough to prevent small children turning them on. • Context and environment :The microwave’s controls are smooth to make them easy to clean in the kitchen. • Aesthetic :The controls must look good. • Economic: It must not cost too much. • Fluidity: The extent to which the physical structure and manipulation of the device naturally relate to the logical functions it supports. Related closely to the idea of affordances. 3/28/2023 Unit 2 _ Interaction and Interface 79
  • 80. • Imagine a design where turning the knob to clockwise cycled through the display options and turning it anti-clockwise cycled through the sound options. This would be a compact design satisfying all the ergonomic, physical and aesthetic constraints, but would not have led to as fluid an interaction. • The twist knob is used to move backwards and forwards through the tracks of the MiniDisc – that is, opposite physical movements produce opposite logical effects. 3/28/2023 Unit 2 _ Interaction and Interface 80
  • 81. Managing value • If we want people to want to use a device or application we need to understand their personal values. • In economics, businesses use a measure called ‘net present value’ to calculate what a future gain is worth today. Ex:£100 today is worth the same as perhaps £200 in five years’ time. 3/28/2023 Unit 2 _ Interaction and Interface 81
  • 82. • When we were preparing the website for the second edition of this book we thought very hard about how to give things that were of value to those who had the book, and also to those who hadn’t. • One option we thought of was to put the text online, which would be good for people without the book. • The search mechanism was the result of this process .It gives value to those who have the book because it is a way of finding things. 3/28/2023 Unit 2 _ Interaction and Interface 82
  • 83. PARADIGMS • Examples of effective strategies for building interactive systems. • The evolution of these usability paradigms also provides a good perspective on the history of interactive computing. • These paradigms range from the introduction of timesharing computers, through the WIMP and web, to ubiquitous and context-aware computing. 3/28/2023 Unit 2 _ Interaction and Interface 83
  • 84. INTRODUCTION why study paradigms? – how can an interactive system be developed to ensure its usability? – how can the usability of an interactive system be demonstrated or measured? – by means of example – We believe that we now build interactive systems that are more usable than those built in the past. – New computing technologies arrive, creating a new perception of the human—computer relationship to accommodate and augment the power of the human. 3/28/2023 Unit 2 _ Interaction and Interface 84
  • 85. “Where are We Now?” Time User Productivity Batch Command Line WIMP (Windows) 1940s – 1950s 1980s - Present 1960s – 1970s ? ?
  • 86. PARADIGMS FOR INTERACTION Time sharing • 1940s and 1950s – explosive technological growth • 1960s – need to channel the power • J.C.R. Licklider , director of the Information Processing Techniques Office of the US Department of Defense’s Advanced Research Projects Agency (ARPA). • single computer supporting multiple users • Couple human brains and computing machines tightly to revolutionize information handling 3/28/2023 Unit 2 _ Interaction and Interface 86
  • 87. • Time-sharing systems of the 1960s made programming a truly interactive venture and brought about a subculture of programmers known as ‘hackers’ – single-minded masters of detail who took pleasure in understanding complexity. • So,truly interactive exchange between programmer and computer was possible. • Increased throughput of information between user and computer allowed the human to become a more reactive and spontaneous collaborator. 3/28/2023 Unit 2 _ Interaction and Interface 87
  • 88. Video display units • More suitable medium than paper. • 1962 – Ivan Sutherland's Sketchpad • computers for visualizing and manipulating data • one person's contribution could drastically change the history of computing. 3/28/2023 Unit 2 _ Interaction and Interface 88 •Sketchpad - ‘63 PhD thesis at MIT Hierarchy - pictures & sub pictures Master picture with instances (i.e., OOP) Constraints Icons Copying Light pen as input device Recursive operations
  • 89. Sketchpad demonstrated two important ideas: • First, computers could be used for more than just data processing. • Secondly, Sutherland’s efforts demonstrated how important the contribution of one creative mind could be to the entire history of computing. 3/28/2023 Unit 2 _ Interaction and Interface 89
  • 90. About Doug Engelbart • Graduate of Berkeley (EE '55) – "bi-stable gaseous plasma digital devices" • Stanford Research Institute (SRI) – Augmentation Research Center • 1962 Paper "Conceptual Model for Augmenting Human Intellect" – Complexity of problems increasing – Need better ways of solving problems
  • 91. Programming toolkits • Douglas Engelbart’s -- ambition since the early 1950s was to use computer technology as a means of complementing human problem-solving activity. • 1963 – augmenting man's intellect • word processing and the mouse – only attained mass commercial success decades after their invention. • A live demonstration of his oNLine System (NLS, also later known as NLS/Augment)-1968. • The right programming toolkit provides building blocks to producing complex interactive systems. 3/28/2023 Unit 2 _ Interaction and Interface 91
  • 92. Personal computing • 1970s –graphics programming language for children called LOGO • A system is more powerful as it becomes easier to user • Future of computing in small, powerful machines dedicated to the individual. • Kay at Xerox Palo Alto Research Center (PARC), – the Dynabook as the ultimate personal computer Alan Kay Dynabook - Notebook sized computer loaded with multimedia and can store everything
  • 93. Alan Kay= Engelbart + Papert 3/28/2023 Unit 2 _ Interaction and Interface 93
  • 94. Window systems and the WIMP interface • Humans can pursue more than one task at a time. • If the personal computer is to be an effective dialog partner, it must be as flexible in its ability to ‘change the topic’ as the human is. • context of each thread of dialog so that the user can distinguish them. • The window is the common mechanism associated with these physically and logically separate display spaces. 3/28/2023 Unit 2 _ Interaction and Interface 94
  • 95. • 1981 – Xerox Star first commercial windowing system • windows, icons, menus and pointers now familiar interaction mechanisms. 3/28/2023 Unit 2 _ Interaction and Interface 95
  • 96. The metaphor • Relating computing to other real-world activity is effective teaching technique – LOGO's turtle dragging its tail – file management on an office desktop – word processing as typing – financial analysis on spreadsheets – virtual reality – user inside the metaphor • Problems – some tasks do not fit into a given metaphor – cultural bias 3/28/2023 Unit 2 _ Interaction and Interface 96
  • 97. LOGO's turtle 3/28/2023 Unit 2 _ Interaction and Interface 97
  • 98. Direct manipulation • As long as the user–system dialog remained largely unidirectional – from user command to system command line prompt. • In a standard command line interface- feedback on the results of previous interaction is to know that you have to ask for it and to know how to ask for it. 3/28/2023 Unit 2 _ Interaction and Interface 98
  • 99. • Rapid visual and audio feedback on a high- resolution display screen or through a high- quality sound system makes it possible to provide evaluative information for every executed user action. • Rapid feedback -> direct manipulation. 3/28/2023 Unit 2 _ Interaction and Interface 99
  • 100. • 1982 – Shneiderman describes appeal of graphically-based interaction – visibility of objects – incremental action and rapid feedback – reversibility encourages exploration – syntactic correctness of all actions – replace language with action 3/28/2023 Unit 2 _ Interaction and Interface 100 1984 – Apple Macintosh pricey Lisa computer
  • 101. • An operation such as moving a file from one directory to another is mirrored-‘picked up and dragged’--mirrored • In constructing the command line for a move operation would result in a syntactically incorrect command. • model-world metaphor 3/28/2023 Unit 2 _ Interaction and Interface 101
  • 102. • In model-world metaphor-from the user’s perspective, the interface is the system. • Rather, widgets embody both input and output languages, so we consider them as interaction objects. • Direct manipulation is the WYSIWYG paradigm, which stands for ‘what you see is what you get’. Ex:word processor 3/28/2023 Unit 2 _ Interaction and Interface 102
  • 103. Language versus action • Whereas it is true that direct manipulation interfaces make some tasks easier to perform correctly? • Actions performed at the interface replace any need to understand their meaning at any deeper, system level. Ex:Image Input 3/28/2023 Unit 2 _ Interaction and Interface 103
  • 104. Two meaningful interpretations • user understands how the underlying system functions and the interface as interlocutor need not perform much translation-direct manipulation. • Interpretation does not require the user to understand the underlying system’s structure. Interface as an agent in these circumstances. Ex:What are the speed limits on different roads?’ 3/28/2023 Unit 2 _ Interaction and Interface 104
  • 105. • The action and language paradigms need not be completely separate. • Generic and repeatable procedures in the language paradigm and not in the action paradigm. • User can perform some routine tasks in the action paradigm and the system records this as a generic procedure. In a sense, the system is interpreting the user’s actions as a language script which it can then follow. 3/28/2023 Unit 2 _ Interaction and Interface 105
  • 106. Hypertext • 1945 – Vannevar Bush and the memex- aimed at increasing the human capacity to store and retrieve connected pieces of knowledge by mimicking our ability to create random associative links . • Published an article entitled ‘As We May Think’ in The Atlantic Monthly https://www.youtube.com/watch?v=pW4SS_9nXyo 3/28/2023 Unit 2 _ Interaction and Interface 106
  • 107. • Nelson coined the phrase hypertext in the mid-1960s to reflect this non-linear text structure. • Hypermedia, an extension of the term hypertext, is a nonlinear medium of information that includes graphics, audio, video, plain text and hyperlinks. • The term hypermedia (or multimedia) is used for non-linear storage of all forms of electronic media. 3/28/2023 Unit 2 _ Interaction and Interface 107
  • 108. Multi-modality • Each of these input and output devices can be considered as communication channels for the system and they correspond to certain human communication channels. • A multi-modal interactive system is a system that relies on the use of multiple human communication channels. • Emphasis on simultaneous use of multiple channels for input and output. 3/28/2023 Unit 2 _ Interaction and Interface 108
  • 109. Computer-supported cooperative work • Reconnect the computer themselves to the rest of the workstations in their immediate working environment, and even throughout the world. • Reconnection was the emergence of collaboration between individuals via the computer–called computer-supported cooperative work, or CSCW. 3/28/2023 Unit 2 _ Interaction and Interface 109
  • 110. Main distinction between CSCW systems and interactive systems • single user is that designers can no longer neglect the society within which any single user operates. • CSCW systems are built to allow interaction between humans via the computer and so the needs of the many must be represented in the one product. • Electronic mail is most prominent success. 3/28/2023 Unit 2 _ Interaction and Interface 110
  • 111. The world wide web • The computers of the internet all communicate using common data transmission protocols (TCP/IP) and addressing systems (IP addresses and domain names). • https-Hypertext Transfer Protocol Secure • HTML-HyperText Markup Language • URLs-Uniform Resource Locator 3/28/2023 Unit 2 _ Interaction and Interface 111
  • 112. Agent-based interfaces • Original interfaces – Commands given to computer – Language-based • Direct Manipulation/WIMP – Commands performed on “world” representation – Action based • Agents - return to language by instilling proactivity and “intelligence” in command processor – Avatars, natural language processing Ex:If Sender: is bank manager Then Urgency: is high 3/28/2023 Unit 2 _ Interaction and Interface 112
  • 113. Ubiquitous Computing • “The most profound technologies are those that disappear”  Mark Weiser, 1991 • Late 1980’s: computer was very apparent How to make it disappear? • Shrink and embed/distribute it in the physical world • Design interactions that don’t demand our intention 3/28/2023 Unit 2 _ Interaction and Interface 113
  • 114. Sensor-based and context-aware interaction • Humans are good at recognizing the “context” of a situation and reacting appropriately • Automatically sensing physical phenomena (e.g., light, temp, location, identity) becoming easier • How can we go from sensed physical measures to interactions that behave as if made “aware” of the surroundings. 3/28/2023 Unit 2 _ Interaction and Interface 114