MODULE -2

THE INTERACTION
• Trending mobile designs for iOS, Android, and tablet
• UX Diploma
• UI design
• Level up your design game with industry leaders
• Logo Design
• Web design
• Product design
• Animation, Illustration – Branding
Android AlertDialog
 Dialog Design
• dialog is the construction of interaction between two or more
beings or systems. In HCI, a dialog is studied at three levels −
Lexical − Shape of icons, actual keys pressed, etc., are dealt at this
level. Syntactic − The order of inputs and outputs in an interaction
is described at this level.
Design of a mobile application chat
dialog box template
• Choreography
• Transition choreography is a coordinated motion sequence that
holds the user’s focus while an interface adapts.
• Problems in developing dialog box
• confirmation
dialogue box when removing an item from cart in an
e-commerce website?
• dialogue box for confirmation/verification of bank transactions
• A dialogue box to confirm changes in a text area, when user makes
changes
• dialogue box for the main screen of a game
• Dialog box to confirm registration of students
• Dialogue box for no of television channels
• Dialogue box for confirmation of payment in an application
• Dialog box to confirm login of website
• A dilogue box for succesfully connected your phone to car
• Dialogue box for verification of attendance
• Dialogue box for verification of notifications of an app
• Dialogue box for notifications of an app
 CONTENTS
• Learning Outcomes
• Introduction to Interaction
• The terms of Interaction
• The Execution-Evaluation Cycle
• Norman’s Model (Father of UX design: Don Norman )
• Translation
• Accessing overall Interaction
• Models, Framework, HCI
• Interaction Styles: Command Line Interface, Menus, etc.
• Conclusion
• Discussion
Learning Outcomes
In this chapter, we consider the communication between user
and system: the interaction.

We will look at some 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. We will also survey some of the different styles
of interaction that are used and consider how well they support
the user.
Introduction to Interaction
• Interaction involves at least two participants: the user and the
system.
• 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.
• They also provide us with a framework to compare different
interaction styles and to consider interaction problems.
The terms of interaction
•The purpose of an interactive system is to aid a
user in accomplishing goals from some
application domain.

•A domain defines an area of expertise and

knowledge in some real-world activity.

•Some examples of domains are graphic design,

authoring, and process control in a factory.
 The terms of interaction Cont..
•A domain consists of concepts that highlight
its important aspects.

•Ina graphic design domain, some of the

important concepts are geometric shapes, a
drawing surface, and a drawing utensil.
The execution–evaluation cycle

goal

execution evaluation
system

• The interactive cycle can be divided into two major

phases: execution and evaluation.

• These can then be subdivided into further stages, seven in

all. The stages in Norman’s model of interaction are as
follows:
Norman’s Model
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.
Norman’s Model
• It is liable to be imprecise and therefore needs to be translated
into the more specific intention, and the actual actions that will
reach the goal, before it can be executed by the user.
• The user perceives the new state of the system, after execution
of the action sequence, and interprets it in terms of his
expectations.
• If the system state reflects the user's goal then the computer has
done what he wanted and the interaction has been successful;
otherwise the user must formulate a new goal and repeat the
cycle.
Gulf of Evaluation
• The interface should aim to reduce this gulf.

• The gulf of evaluation is the distance between the physical

representation 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 Interaction framework

• The interaction framework attempts a more realistic

description of interaction by including the system
explicitly and breaking it into four main components.
• The nodes represent the four major components in an
interactive system – the System, the User, the Input,
and the Output.
• Each component has its own language.
The Interaction framework Cont.
The Interaction framework Cont.
• The System transforms itself as described by the operations,
the execution phase of the cycle is complete and the
evaluation phase now begins.
• The System is in a new state, which must now be
communicated to the User.
• The current values of system attributes are rendered as
concepts or features of the Output.
• It is then up to the User to observe the Output and assess the
results of the interaction relative to the original goal, ending
the evaluation phase and, hence, the interactive cycle.
Translations

•There are four main translations involved

in the interaction:
• Articulation.

• Performance.

• Presentation.

• Observation.
Assessing overall Interaction

• The interaction framework is presented as a means to

judge the overall usability of an entire interactive
system.
• This is not surprising since it is only in attempting to
perform a particular task within some domain that
we are able to determine if the tools we use are
adequate.
Assessing overall interaction
• For a particular editing task, one can choose the text editor
best suited for interaction relative to the task.

• The best editor, if we are forced to choose only one, is the

one that best suits the tasks most frequently performed.
Therefore, it is not too disappointing that we cannot extend
the interaction analysis beyond the scope of a particular task.
Models : Frameworks and HCI

• The field of ergonomics addresses issues on the user

side of the interface, covering input and output, as well
as the user’s immediate context.
• Dialog design and interface styles can be placed
particularly along the input branch of the framework,
addressing both articulation and performance.
• Propose a framework to design dialog for mobile
application
Models : Frameworks and HCI
Interaction Styles
• Interaction can be seen as a dialog between the computer and the
user. The choice of interface style can have a profound effect on
the nature of this dialog.
• There are several common interface styles including
• Command line interface
• Menus

• Natural language
• Question/answer and query dialog
• Form-fills and spreadsheets
• WIMP

• Point and click

• Three-dimensional interfaces.
Command line interface
• The command line interface was the first interactive dialog style to be
commonly used and, in spite of the availability of menu-driven
interfaces, it is still widely used.
• It provides a means of expressing instructions to the computer directly,
using function keys, single characters, abbreviations, or whole-word
commands.
• In some systems the command line is the only way of communicating
with the system, especially for remote access using telnet.
• Menu-based interfaces, providing accelerated access to the functionality
of the system for experienced users.
Command line interface
• Command line interfaces are powerful in that they offer direct access to
system functionality and can be combined to apply a number of tools to
the same data.

• They are also flexible: the command often has a number of options or
parameters that will vary its behavior in some way, and it can be applied
to many objects at once, making it useful for repetitive tasks.

• Flexibility and power bring with their difficulty in use and learning.
Command line interface Cont.
• Commands must be remembered, as no cue is provided in the
command line to indicate which command is needed.
• They are therefore better for expert users than for novices.
• This problem can be alleviated a little by using consistent and
meaningful commands and abbreviations.
• The commands used should be terms within the vocabulary of
the user rather than the technician.
• Unfortunately, commands are often obscure and vary across
systems, causing confusion to the user and increasing the overhead
of learning.
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.
• Since the options are visible they are less demanding of the user,
relying on recognition rather than recall.
• Menu options still need to be meaningful and logically grouped to
aid recognition.
• Often menus are hierarchically ordered and the option required is
not available at the top layer of the hierarchy.
Menus Cont.
• The grouping and naming of menu options than provide the
only cue for the user to find the required option.

• Such systems either can be purely text-based, with the menu

options being presented as numbered choices, or may have a
graphical component in which the menu appears within a
rectangular box and choices are made, perhaps by typing the
initial letter of the desired selection, or by entering the
associated number, or by moving around the menu with the
arrow keys.
Example
Natural language

• Users, unable to remember a command or lost in a

hierarchy of menus, may long for the computer that is
able to understand instructions expressed in everyday
words!
• Natural language understanding, both speech and written
input is the subject of much interest and research.
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) and so is led through the
interaction step by step. These interfaces are easy to learn and
use, but are limited in functionality and power.
• As such, they are appropriate for restricted domains (particularly
information systems) and for the novice or casual users.
Form-fills and spreadsheets
• Form-filling interfaces are used primarily for data entry but can also
be useful in data retrieval applications.
• The user is presented with a display resembling a paper form, with
slots to fill in.
• Often the form display is based upon an actual form with which the
user is familiar, which makes the interface easier to use.
• The user works through the form, filling in appropriate values.
• The data are then entered into the application in the correct place.
Form-fills and spreadsheets
• Most form-filling interfaces allow easy movement around the form
and allow some fields to be left blank.
• They also require correction facilities, as users may change their
minds or make a mistake about the value that belongs in each field.
• The dialog style is useful primarily for data entry applications and, as
it is easy to learn and use, for novice users.
• Spreadsheets are a sophisticated variation of form filling.
• The spreadsheet comprises a grid of cells, each of which can contain
a value or a formula.
The WIMP interface
• WIMP stands for windows, icons, menus and pointers
(sometimes windows, icons, mice and pull-down menus), and
is the default interface style for the majority of interactive
computer systems in use today, especially in the PC and
desktop workstation arena.
• Examples of WIMP interfaces include Microsoft Windows
for IBM PC compatibles, MacOS for Apple Macintosh
compatibles and various X Windows-based systems for
UNIX.
The WIMP interface
Point-and-click interfaces

• This point-and-click interface style is obviously closely related to the

WIMP style.
• It clearly overlaps in the use of buttons, but may also include other
WIMP elements.
• The philosophy is simpler and more closely tied to ideas of
hypertext. In addition, the point and- click style is not tied to mouse-
based interfaces and is also extensively used in touch screen
information systems.
Three-dimensional interfaces
• There is increasing use of three-dimensional effects in user
interfaces.
• The most obvious example is virtual reality, but VR is only
part of a range of 3D techniques available to the interface
designer.
• 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.
The UI of the Future – 3D User Interfaces –
Current Applications and Potential
• Video Games
• Very Large Displays
• Mobile Applications
3D User interaction
ELEMENTS INTERACTIVITY

• Dialog design is focused almost entirely on the choice and

specification of appropriate sequences of actions and
corresponding changes in the interface state.
• It is typically not used at a fine level of detail and
deliberately ignores the semantic level of an interface: for
example, the validation of numeric information in a forms-
based system.
ELEMENTS INTERACTIVITY
ELEMENTS INTERACTIVITY

• It is worth remembering that interactivity is the defining

feature of an interactive system.
• This can be seen in many areas of HCI.
• For example, the recognition rate for speech recognition
is too low to allow transcription from tape, but 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.
ELEMENTS INTERACTIVITY
• Speech-based input is difficult, speech-based interaction
easier. Also, in the area of information visualization, the
most exciting developments are all where users can
interact with visualization in real-time, changing
parameters and seeing the effect.
• Interactivity is also crucial in determining the feel of a
WIMP environment.
• All WIMP systems appear to have virtually the same
elements: windows, icons, menus, pointers, dialog boxes,
buttons, etc.
Paradigms of Interaction

• Time-sharing systems of the 1960s made programming a truly interactive

venture and brought about a subculture of programmers known as
“hackers”, single-mind masters of detail who took pleasure in
understanding complexity.
Paradigms of Interaction
The paradigms of interaction are:

Time-sharing
• Major contributions to come out of this new emphasis in the research
were the concept of time-sharing, in which a single computer could
support multiple users.
• The human (or more accurately, the programmer) was restricted to
batch sessions, in which complete jobs were submitted on punched
cards or paper tape to an operator who would then run them
individually on the computer.
Paradigms of Interaction
• Rather than rely on a model of interaction as a pre-planned activity that
resulted in a complete set of instructions being laid out for the computer to
follow, truly interactive exchange between programmer and computer was
possible.
• The computer could now project itself as a dedicated partner with each
individual user and the increased throughput of information between user
and computer allowed the human to become a more reactive and
spontaneous collaborator.
Video display units
• In the mid-1950s researchers were experimenting with the possibility of
presenting and manipulating information from a computer in the form of
images on a video display unit (VDU). These display screens could provide
a more suitable medium than a paper printout for presenting vast quantities
of strategic information for rapid assimilation.

• The earliest applications of display screen images were developed in

military applications, most notably the Semi-Automatic Ground
Environment (SAGE) project of the US Air Force.
Personal computing

• Programming toolkits provide a means for those with

substantial computing skills to increase their productivity
greatly.
• One of the first demonstrations that the powerful tools of
the hacker could be made accessible to the computer
novice was a graphics programming language for
children called LOGO
 Personal computing
•A child could quite easily pretend they were inside‗the turtle and
direct it to trace out simple geometric shapes, such as a square or a
circle.
• By typing in English phrases, such as go forward or Turn left, the
child/programmer could teach the turtle to draw more and more
complicated figures.
• By adapting the graphical programming language to a model which
children could understand and use, Paper demonstrated a valuable
maxim for interactive system development – no matter how powerful
a system may be, it will always be more powerful if it is easier to
use.
The metaphor
• Expert used the metaphor of a turtle dragging its tail in the dirt. Children
could quickly identify with the real-world phenomenon and that instant
familiarity gave them an understanding of how they could create
pictures.

• The keyboard of a computer closely resembles that of a standard

typewriter, so it seems like a good metaphor from which to start.
Hypertext
• Hypertext is a text which is not constrained to be linear.
Hypertext is a text which contains links to other texts.
The term was coined by Ted Nelson around 1965.
• Hypermedia is a term used for hypertext that is not
constrained to be text: it can include graphics, video, and
sound, for example.
• Apparently Ted Nelson was the first to use this term too.
Hypertext and Hypermedia are concepts, not products
Multi-modality
• Genuine multi-modal systems rely to a greater extent on the
simultaneous use of multiple communication channels for both input
and output.
• Humans quite naturally process information by simultaneous use of
different channels.
• We point to someone and refer to them as you, and it is only by
interpreting the simultaneous use of voice and touch that our
directions are easily articulated and understood.
The World Wide Web
• WWW or "Web" is a global information medium which users can read and
write via computers connected to the Internet.
• The term is often mistakenly used as a synonym for the Internet itself, but
the Web is a service that operates over the Internet, just as e-mail also does.
• The history of the Internet dates back significantly further than that of the
World Wide Web.
• The internet is simply a collection of computers, each linked by any sort of
data connection, whether it be a slow telephone line and modem or high-
bandwidth optical connection.
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).
• This makes it possible for anyone to read anything from anywhere, in
theory, if it conforms to the protocol.
• The web builds on this with its own layer of network protocol (http), a
standard markup notation (such as HTML) for laying out pages of
information and a global naming scheme (uniform resource locators or
URLs).
Ubiquitous computing

• Ubiquitous computing is a paradigm in which the

processing of information is linked with each activity or
object as encountered.
• It involves connecting electronic devices, including
embedding microprocessors to communicate information.
Devices that use.
• ubiquitous computing have constant availability and are
completely connected.
Ubiquitous computing

• Ubiquitous computing focuses on learning by removing

the complexity of computing and increases efficiency
while using computing for different daily activities.

• Ubiquitous computing is also known as pervasive

computing, every ware and ambient intelligence.
Models of interactions
• Abowed and Beale’s model (Interaction framework)
• Donald Norman model
 Conclusion
The session describes various types of Interaction
styles in detail.
Question?
 Tutorial [Module2]
Note: - Answer all the following questions & submit them
to MS Team, on or before 11.35 pm (26/07/2023) only
handwritten PDF files are considered for credits.

TQ1: If we have two developers, one for Command line interface and
other for GUI interface then which developer knowledge domain is
huge compared to others? Justify your answers with example.

TQ2: Using a real-time situation, explain the importance & application

of Time sharing system?