Interaction design

1. 17CSX11-HCI
UNIT 2
INTERACTION AND INTERFACES

2. INTERACTION
Interaction Design defined as user oriented field of study that focuses on meaningful communication
of media through cyclical and collaborative processes between people and technology.
communication
user system
Interaction Includes:
The Interaction
• interaction models
translations between user and system S U
• ergonomics
physical characteristics of interaction
• interaction styles
the nature of user/system dialog
• Context
social, organizational, motivational
O
I
Presentation
core
observation
task
performance articulation

3. GOALS OF INTERACTION:
1.Develop usable products.
2. Usability means easy to learn, effective to use and provide an enjoyable experience.
3. Involve all stakeholders (end-users +....) in the design process.
MODELS OF INTERACTION
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.
Models of Interaction Communication:
Complex Human - Complex Systems Models of Interaction Help Understand what is going on in the
Interaction Identify the likely root of difficulties.
Two Models:
 Norman's Model (The execution-evaluation cycle)
 Abowd and Beale framework

4. Norman's Model (The execution-evaluation cycle)
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
Abowd and Beale framework
Abowd and Beale's interaction framework with the context of
existing interaction models shown according to their particular
emphasis. A framework for user-interfaces to databases (IDSs)
is proposed which draws from existing research
on human computer interaction (HCI) and database systems.

5. Why Models of Interaction?
Interaction models enable us:-
• To understand exactly what is going on in the interaction and identify the likely root of difficulties
• To compare different interaction styles and to consider interaction problems
• To address the translations between what the user wants and what the system does.
• To identify and evaluate components of the interaction, and at the physical, social and organizational
issues that provide the context for it.
FRAMEWORKS AND HCI
 The ergonomics field addresses issues on the user side of the interface, including input
and output, and the current user context.
 Box design and interaction styles can be placed especially near the input branch of the
frame, dealing with both specificity and functionality.
 Presentation and screen design are related to the output branch of the frame

6.  The whole framework can be incorporated into the social and organizational context that
affects communication.
 Each of these areas has significant implications for building interactive systems and user
performance
About Interaction Framework:
▸ extension of Norman...
▸ their interaction framework has 4 parts
user> input› system> output
▸ each has its own unique language
interaction translation between languages
▸ problems in interaction =problems in translation
Detail about Interaction Framework :
1. Core:
The system language is known as core language which understand by system or its
machine language.
2. Task:
The users language referred as user task language understand by the user.
3. Articulation:
Users produced some input to the system in various forms.
Presentation
performance
observation
articulation

7. 4.Performance:
System performs actions on those input.
5. Presentation:
System present the output to the user.
6. Observation:
User observe those output and perform action core on them
ERGONOMICS
 Ergonomic word derived from Greek work i.e. Ergon [Work] & nomos [Natural Laws].
 Ergonomics is study of people in there working environment.
 Ergonomics is study of psychology and system constraints which is concern in HCI.
"The discipline of science that deals with the
relationship of human being with the system”
"Ergonomics is the science of designing user
interaction with equipment and workplaces to fit
the user”

8. WHAT IS ERGONOMICS?
The International Ergonomics Association defines ergonomics as follows:
"Ergonomics is employed to fulfill the two goals of health and productivity".
• Designing jobs, equipment, and work tasks to fit human physical characteristics and energy
limitations,
• Make the work fit the person, not the person fit the work“
case of Ergonomics:
1. Arrangement of Controls And Display:
It is the set of frequently used controls which arrange logically, so user get easily read it.
Examples:Controls grouped according to function or frequency of use, or sequentially like.MS Word:
Insert-> Picture, Table, Shapes etc.In mobile Notifications stored in Notification Window only etc.
2. Physical environment of interaction:
It is focus on standing, moving and sitting position we used app.
Examples:Seating arrangements adaptable with all sizes of user. Portability of applications.Pedometer
(Step Counter Application).

9. 3. Health Issues:
It includes Physical Postures, Poor Arrangement Of Devices, Back Pain And Eye Strain Etc.
Examples:Physical Position, Environmental Conditions (Temperature, Humidity), Lighting, Noise.Keyboard,
Mouse has good design, Flexible with your body parts.A proper chair rest back comfortable with good hand rest
with adjustable chairs or tables.Maintain Brightness, User observe monitor screen easily without eye strain.
➤Noise level should be maintain at comfortable level.
Time spend on system should be controlled manner.
Excessive interaction with long time may affects issues with back pain, eye strain.
4.Colors:
Every color has there own culture and identity.
Examples:Use of Red for Warning or Inform about emergencies.
➤ Green for Battery sever for laptop.
➤In signals, Red-> Stop, Green-> Go & Yellow-> Stand by.
➤ Some countries have Red is happiness & Good Fortune but in another countries Red is dangerous.

10. INTERACTION STYLES
Interaction styles can be defined as dialogue between user and system.
Common used Interaction Styles are:
1. Command-line interfaces
2. Menu-based interfaces
3. Natural Language interfaces
4. Form-fills and spreadsheets interfaces
5. Point-and-Click interfaces
6. 3D Interfaces
7. The WIMP interfaces
8. Questions/Answers and Query Dialog interfaces

11. 1.COMMAND LINE INTERACTION :
 First Interaction Dialog Style to be commonly used.
 Command must be remembered. No hint is provided in Command line to indicate which command is
needed.
 Provide instruction to computer directly using:
Single characters
Whole words
Abbreviations (e.g. cd, ftp)
Function keys
Advantages
1. Flexible
2. appeals to "power" users
3. allows user initiative
4. allows convenient creation of macros
5. Cheap
Disadvantages
1. low visibility
2. requires substantial training and memorization
3. not useful for "novice" users
4. poor error handling (relative)

12. 2.MENU STYLE INTERACTION
 Set of options available to the user is display on screen.
 Selected using Mouse, Typing letter or number & Short cuts keys.
 Menu options are meaningful & logically group together.
 Offer only those actions that make sense in the current situation.
 Use based on recognition not remembering Item names and icon must be carefully chosen.
 Menu may take up screen space, solution:
 Pull-down, Pop-up, Cascading Menus, Iconic Menus etc.
Advantages:
1. reduces learning
2. Time reduces
3. keystrokes structures
4. decision making easy to support error handling
Disadvantages:
1. too many menus for complex tasks can be slow for frequent users
2. consumes screen space

13. 3.NATURAL LANGUAGE INTERFACES
 Most attractive language for communication with computers.
 It's difficult to understand by machine.
 Familiar to user.
Examples:
1. Programming Languages like C, C++, JAVA, Query languages etc.
2. Speech Recognition. (Audio, Video calls etc.)
3. Chatter Bot, Alexa etc.
Advantages :
1. natural to specify
2. Fits mobile devices
Disadvantages :
1. requires clarification dialog
2. can not be applied generally yet
3. may require more keystrokes
4. unpredictable results

14. 4.FORM FILLS & SPREADSHEETS INTERFACE
• It Includes spreadsheets.
• The data entered into the application to correct place.
• Designed for clerical workers with little experience allow flexible entry, form-filling. Advance operation etc. Good
Navigation for entering valid data.
• Structured way of gathering info Should be possible. Example:MS-Excel, Google Forms, Open Office, Lotus etc. Go-
faster Travel Agency Booking Fields.
• Finance, Bank, Educational Academic, Stock Management etc.

15. 5.POINT & CLICK INTERFACE
Point & Click Interface Messenger has used point and click interfaces as the main interaction style.
• It used in
1. Multimedia System
2. Web Browser
3. Hypertext etc.
Clickable items Icons In touch sensitive devices. It is rather touch and click. ButtonsList items Menu items
Action takes place only single click of mouse button. You may point any Icon, Folder, Location, Maps and file
etc.
6.Three-dimensional interfaces
There is an 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.
7.WIMP interfaces
WIMP Interfaceelements of the wimp interface windows, icons, menus, pointers +++ buttons, toolbars,
palettes, dialog boxes
8.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 bystep.
An example of this would be web questionnaires.

16. ELEMENTS OF THE WIMP INTERFACE
The WIMP (Windows, Icons, Menus, Pointer) interface is a graphical user interface (GUI) that is widely used in
modern computer systems. It consists of four primary elements:
1. Windows:
A window is a rectangular area on the screen that displays information or controls. Windows can be
resized, minimized, maximized, or closed, and they can be moved around the screen as needed.
2. Icons:
An icon is a small graphical representation of an object, such as a file or folder, that can be clicked on
to open or access the object. Icons are typically arranged on the desktop or in a folder or menu.
3. Menus:
A menu is a list of options that appears when the user clicks on a menu bar or a menu button. Menus
can contain sub-menus, and they can be customized to include commands or options specific to an
application. pop-up Menus: is a menu in a graphical user interface (GUI) that appears upon user interaction,
such as a right-click mouse operation. Expanding Menus: Expanding menus make some information invisible.
4. Pointer:
A pointer is a graphical element that represents the position of the mouse or other pointing device
on the screen. The pointer is used to select objects, click buttons, and interact with other elements of the
interface.

17. Together, these elements provide a rich and flexible interface for users to interact with their computer
systems. The WIMP interface has become ubiquitous in modern computing, and it has been adapted and
extended to include many additional features and capabilities, such as touch screens,
gesture recognition, and voice control.
Advantages of WIMP:
1. Easy to use, especially for a beginner
2. You do not have to learn complicated commands
3. User friendly
4. Increased speed of learning.
5. Provide greater productivity and efficiency in a wide
6. variety of applications.
Disadvantages of WIMP :
1. They use more processing power than other types of interface
2. They can be slow for experienced programmers to use.
3. Pure WIMP doesn't use other senses: hearing, touch
4. It takes more RAM and storage space on the disc.