Institute of Engineering, Dept.

of Computer Engineering

Course Introduction Session

Third Year, Computer Engineering

310245B-Elective-I -Human Computer Interface

Mr. V. K. Wani
Course Objectives:
❑ To understand the importance of HCI design process in software development
❑ To learn fundamental aspects of designing and implementing user interfaces
❑ To study HCI with technical, cognitive and functional perspectives
❑ To acquire knowledge about variety of effective human-computer-interactions
❑ To co-evaluate the technology with respect to adapting changing user requirements in
interacting with computer

Dept. Computer Engineering, Institute of Engineering 2

Course Outcomes:
On completion of the course, student will be able to –
o Design effective Human Computer Interface for all kinds of users
o Apply and analyze the user-interface with respect to golden rules of interface
oAnalyze and evaluate the effectiveness of a user-interface design
o Implement the interactive designs for feasible data search and retrieval
o Analyze the scope of HCI in various paradigms like ubiquitous computing, virtual reality,
multi-media, World wide web related environments.
oAnalyze and identify user models, user support, and stakeholder requirements of HCI
Systems.

Dept. Computer Engineering, Institute of Engineering 3

Course Contents
Unit III: Interaction Styles and HCI in Software Process
Design, Process of Interaction Design. Interaction styles: Command line, Menu Selection, Form fill-in, Direct
Manipulation. Graphical User Interface: Popularity of Graphics, Concept of direct manipulation, Advantages,
Disadvantages and characteristics of Graphical user interface. Web User Interface: Popularity and Characteristics,
Merging of Graphical business systems and the Web- Characteristics of Intranet versus Internet, Web page versus
application design, Principles for user interface design, Software life cycle, Usability Engineering, Iterative design
and prototyping, Design Rationale

Dept. Computer Engineering, Institute of Engineering 4

 Unit III:

Interaction Styles and HCI in Software Process

Dept. Computer Engineering, Institute of Engineering 5

What is Interaction Design?

➢ Interaction Design (ID) is the design of interactive products and services in

which a designer’s focus goes beyond the item in development to include
the way users will interact with it.

➢ Thus, close scrutiny of users’ needs, limitations and contexts, etc. empowers
designers to customize output to suit precise demands.

Dept. Computer Engineering, Institute of Engineering 6

What Designers Do – with the 5 Dimensions of ID

“Interaction Design is the creation of a dialogue between a person and a product, system, or
service. This dialogue is both physical and emotional in nature and is manifested in the
interplay between form, function, and technology as experienced over time.”
- John Kolko, Author of Thoughts on Interaction Design (2011).

Designers’work in ID involves five dimensions:

1) words (1D),
2) visual representations (2D),
3) physical objects/space (3D),
4) time (4D), and
5) behavior (5D).

Dept. Computer Engineering, Institute of Engineering 7

Interaction design process

scenarios
what is task analysis
guidelines
wanted principles
interviews precise
analysis specification
ethnography

what is there design

vs. dialogue
notations implement
what is wanted and deploy
evaluation
heuristics prototype architectures
documentation
help
Steps …
• Requirements
• what is there and what is wanted …
• Analysis
• ordering and understanding (Scenarios , Rich stories of interaction)
• Design
• Move from what you want to how to do it
• Iteration and Prototyping
• getting it right … and finding what is really needed!
• Implementation and Deployment
• making it and getting it out there
• Requirements techniques:

1. Interviewing people
2. Videotaping them
3. Looking at documents and objects that they work with
4. Observing them directly
• Analysis :The result of observation and interview need to be ordered in
some way to bring out key issues and communicate with later stages of
design
• Design: record our design choices in some way using different methods
and notations
• Its about designing the concept of the system called conceptual design
• Iteration and prototyping
• Deploy and implement
• Iteration and Prototyping:
• getting better …… and starting well

• you never get it right first time

• if at first you don’t succeed …

OK?
design prototype evaluate done!

re-design
pitfalls of prototyping

• moving little by little … but to where

• Malverns or the Matterhorn?

1. need a good start point

2. need to understand what is wrong
• Implementation and deployment :This will involve writing code,
making hardware, writing documentation and manuals-everything that
goes into a real system that can be given to others.
 Interaction styles

dialogue … computer and user…..distinct styles of interaction

Common interaction styles
1. command line interface
2. menus
3. natural language
4. question/answer and query dialogue
5. form-fills and spreadsheets
6. WIMP
7. point and click
8. three–dimensional interfaces
1. Command line interface
• Way of expressing instructions to the computer directly
• function keys, single characters, short abbreviations, whole words, or a combination
• suitable for repetitive tasks
• better for expert users than novices
• offers direct access to system functionality
•command names/abbreviations should be meaningful!
Typical example: the Unix system
2. Menus
• Set of options displayed on the screen
• Options visible
• less recall - easier to use
• rely on recognition so names should be meaningful
• Selection by:
• numbers, letters, arrow keys, mouse
• combination (e.g. mouse plus accelerators)
• Often options hierarchically grouped
• sensible grouping is needed
• Restricted form of full WIMP system
3. Natural language
• Familiar to user
• speech recognition or typed natural language
• Problems
• vague
• ambiguous
• hard to do well!
• Solutions
• try to understand a subset
• pick on key words
4. Query interfaces
• Question/answer interfaces
• user led through interaction via series of questions
• suitable for novice users but restricted functionality
• often used in information systems

• Query languages (e.g. SQL)

• used to retrieve information from database
• requires understanding of database structure and language syntax, hence
requires some expertise
5.1 Form-fills and spreadsheets
• Primarily for data entry or data retrieval
• Screen like paper form.
• Data put in relevant place
• Requires
• good design
• obvious correction
facilities
5.2Spreadsheets
• first spreadsheet VISICALC, followed by Lotus 1-2-3
MS Excel most common today

• sophisticated variation of form-filling.

• grid of cells contain a value or a formula
• formula can involve values of other cells
e.g. sum of all cells in this column
• user can enter and alter data spreadsheet maintains consistency
6. WIMP Interface
Windows
Icons
Menus
Pointers

… or windows, icons, mice, and pull-down menus!

• default style for majority of interactive computer systems, especially

PCs and desktop machines
7. Point and click interfaces
• used in ..
• multimedia
• web browsers
• hypertext

• just click something!

• icons, text links or location on map

• minimal typing
8. Three dimensional interfaces
• virtual reality
• ‘ordinary’window systems
• highlighting
• visual affordance
• indiscriminate use flat buttons …
just confusing!
• 3D workspaces click me!
• use for extra virtual space
• light and occlusion give depth … or sculptured
• distance effects
 Direct manipulation
Direct manipulation is a central theme in interface design and is treated in a separate
encyclopedia entry. Below, Direct manipulation is only briefly described.
The term direct manipulation was introduced by Ben Shneiderman in his keynote address at
the NYU Symposium on User Interfaces (Shneiderman 1982) and more explicitly in
Shneiderman (1983) to describe a certain ‘direct’ software interaction style that can be traced
back to Sutherlands sketchpad (Sutherland 1963).
Direct manipulation captures the idea of “direct manipulation of the object of interest”
(Shneiderman 1983: p. 57), which means that objects of interest are represented as
distinguishable objects in the UI and are manipulated in a direct fashion.

Dept. Computer Engineering, Institute of Engineering 26

 Direct manipulation Contin….

➢ Direct manipulation is a style of Human Machine Interaction (HMI) design which features
a natural representation of task objects and actions promoting the notion of people
performing a task themselves (directly) not through an intermediary like a computer.

➢ Virtual Reality can be viewed as a field which can draw upon the principles of direct
manipulation for Human-Computer Interaction (HCI) design or as an example or extension
of direct manipulation itself.

Dept. Computer Engineering, Institute of Engineering 27

 Direct manipulation Contin….

Direct manipulation systems have the following characteristics:

▪ Visibility of the object of interest.

▪ Rapid, reversible, incremental actions.
▪ Replacement of complex command language syntax by direct manipulation of the object
of interest.

Dept. Computer Engineering, Institute of Engineering 28

Direct manipulation Contin….

Dept. Computer Engineering, Institute of Engineering 29

Direct manipulation Contin….

Dept. Computer Engineering, Institute of Engineering 30

Direct manipulation Contin….

Dept. Computer Engineering, Institute of Engineering 31

 Direct manipulation Contin….

Figure: One of the earliest commercially available

direct manipulation interfaces was MacPaint.
Figure: The text-book example of Direct Manipulation, the
Windows File Explorer,

Dept. Computer Engineering, Institute of Engineering 32

 Direct manipulation Contin….
Advantages and disadvantages of Direct Manipulation

Advantages Disadvantages
1. Visually presents task concepts. 1. May be more difficult to programme.
2. Easy to learn. 2. Not suitable for small graphic displays.
3. Errors can be avoided more easily. 3. Spatial and visual representation is not always
4. Encourages exploration. preferable.
5. High subjective satisfaction. 4. Metaphors can be misleading since the “the
6. Recognition memory (as opposed to cued or free essence of metaphor is understanding and
recall memory) experiencing one kind of thing in terms of
another” (Lakoff and Johnson 1983: p. 5),
which, by definition, makes a metaphor
different from what it represents or points to.
Compact notations may better suit expert users.

Dept. Computer Engineering, Institute of Engineering 33

 Characteristics of Concept of Direct Manipulation
The term used to describe this style of interaction for graphical systems was first used by
Shneiderman (1982). He called them “direct manipulation” systems, suggesting that they
possess the following characteristics:
• The system is portrayed as an extension of the real world: A person is allowed to work
in a familiar environment and in a familiar way, focusing on the data, not the application
and tools. The physical organization of the system, which most often is unfamiliar, is
hidden from view and is not a distraction.

• Continuous visibility of objects and actions: objects are continuously visible. Reminders
of actions to be performed are also obvious.

Dept. Computer Engineering, Institute of Engineering 34

 Characteristics of Concept of Direct Manipulation
• Actions are rapid and incremental with visible display of results : the results of actions
are immediately displayed visually on the screen in their new and current form. Auditory
feedback may also be provided. The impact of a previous action is quickly seen, and the
evolution of tasks is continuous and effortless.

• Incremental actions are easily reversible: Finally, actions, if discovered to be incorrect

or not desired, can be easily undone.

Dept. Computer Engineering, Institute of Engineering 35

 Direct Manipulation Contine…..
➢ In practice, direct manipulation of all screen objects and actions may not be feasible
because of the following:
▪ The operation may be difficult to conceptualize in the graphical system.
▪ The graphics capability of the system may be limited.
▪ The amount of space available for placing manipulation controls in the window border
may be limited.
▪ It may be difficult for people to learn and remember all the necessary operations and
actions.
➢ When this occurs, indirect manipulation is provided. Indirect manipulation substitutes
words and text, such as pull-down or pop-up menus, for symbols, and substitutes typing
for pointing.

Dept. Computer Engineering, Institute of Engineering 36

 Graphical User Interface(GUI)
GUI Definition
In brief, a graphical user interface can be defined as follows.

▪ A user interface, as recently described, is a collection of techniques and mechanisms to

interact with something. In a graphical interface, the primary interaction mechanism is a
pointing device of some kind.

▪ What the user interacts with is a collection of elements referred to as objects. They can be
seen, heard, touched, or otherwise perceived. Objects are always visible to the user and are
used to perform tasks. They are interacted with as entities independent of all other objects.

▪ People perform operations, called actions, on objects. The operations include accessing
and modifying objects by pointing, selecting, and manipulating.

Dept. Computer Engineering, Institute of Engineering 37

 Popularity of Graphics
➢ Graphics revolutionized design and the user interface. Graphics assumes three
dimensional look whereas text based system assumes one dimensional look.

➢ Information can appear or disappear through floating windows and navigation and
commands can be done through menu or pull downs or screen controls.

➢ Increased computer power and the vast improvement in the display enable the user’s
actions to be reacted to quickly, dynamically, and meaningfully.

➢ If properly used graphics can reduce mental and perceptional load and increases
information transfer between men and machine because of visual comparisons and
simplification of the perception of structure.

Dept. Computer Engineering, Institute of Engineering 38

 Graphical system advantages
➢ Symbols recognized faster than text: symbols can be recognized faster and more
accurately than text. An example of a good classification scheme that speeds up
recognition is the icons. These icons allow speedy recognition of the type of message
being presented.
➢ Faster learning: a graphical, pictorial representation aids learning, and symbols can also
be easily learned.
➢ Faster use and problem solving: Visual or spatial representation of information has been
found to be easier to retain and manipulate and leads to faster and more successful
problem solving.
➢ Easier remembering: Because of greater simplicity, it is easier for casual users to retain
operational concepts.

Dept. Computer Engineering, Institute of Engineering 39

 Graphical system advantages
➢ More natural: symbolic displays are more natural and advantageous because the human
mind has a powerful image memory.
➢ Fewer errors: Reversibility of actions reduces error rates because it is always possible to
undo the last step. Error messages are less frequently needed.
➢ Increased feeling of control: The user initiates actions and feels in control. This increases
user confidence
➢ Immediate feedback: The results of actions furthering user goals can be seen
immediately. If the response is not in the desired direction, the direction can be changed
quickly.
➢ Predictable system responses: Predictable system responses also speed learning. Easily
reversible actions: This ability to reverse unwanted actions also increases user confidence

Dept. Computer Engineering, Institute of Engineering 40

 Characteristics of the Graphical User Interface
1. Sophisticated Visual Presentation

✓ Visual presentation is the visual aspect of the interface. It is what people see
on the screen. The sophistication of a graphical system permits displaying
lines, including drawings and icons. It also permits the displaying of a variety
of character fonts, including different sizes and styles.

✓ The meaningful interface elements visually presented to the user in a

graphical system include windows (primary, secondary, or dialog boxes),
menus (menu bar, pulldown, pop-up, cascading).

Dept. Computer Engineering, Institute of Engineering 41

 Characteristics of the Graphical User Interface
2. Pick-and-Click Interaction
✓ To identify a proposed action is commonly referred to as pick, the signal to
perform an action as click.
✓ The primary mechanism for performing this pick-and-click is most often the
mouse and its buttons and the secondary mechanism for performing these
selection actions is the keyboard.
3. Restricted Set of Interface Options
✓ The array of alternatives available to the user is what is presented on the
screen or what may be retrieved through what is presented on the screen,
nothing less, and nothing more. This concept fostered the acronym
WYSIWYG (What u see is what u get)

Dept. Computer Engineering, Institute of Engineering 42

 Characteristics of the Graphical User Interface
4. Visualization
✓ Visualization is a cognitive process that allows people to understand information that is
difficult to perceive, because it is either too voluminous or too abstract.
✓ The goal is not necessarily to reproduce a realistic graphical image, but to produce one
that conveys the most relevant information. Effective visualizations can facilitate mental
insights, increase productivity, and foster faster and more accurate use of data.
5. Use of Recognition Memory
✓ Continuous visibility of objects and actions encourages to eliminate “out of sight, out of
mind” problem
6. Concurrent Performance of Functions
✓ Graphic systems may do two or more things at one time. Multiple programs may run
simultaneously.
✓ It may process background tasks (cooperative multitasking) or preemptive multitasking.

Dept. Computer Engineering, Institute of Engineering 43

 Characteristics of the Graphical User Interface
7. Object Orientation
✓Application versus Object or Data Orientation An application-oriented
approach takes an action: object approach, like this:
Action> 1. An application is opened (for example, word processing).
Object> 2. A file or other object selected (for example, a memo).

✓ Views : Views are ways of looking at an object’s information. IBM’s SAA

CUA
describes four kinds of views: composed, contents, settings, and help.

Dept. Computer Engineering, Institute of Engineering 44

 The Web User Interface
❖ Web interface design is essentially the design of navigation and the presentation of
information.
❖ Proper interface design is largely a matter of properly balancing the structure and
relationships of menus.
❖ The Web is a navigation environment where people move between pages of information,
not an application environment. It is also a graphically rich environment.
❖ Web interface design is difficult for a number of reasons. First, its underlying design
language, HTML. Next, browser navigation retreated to the pre-GUI era.
❖ Web interface design is also more difficult because the main issues concern information
architecture and task flow, neither of which is easy to standardize.

Dept. Computer Engineering, Institute of Engineering 45

 The popularity of Web

▪ While the introduction of the graphical user interface revolutionized the user interface, the
Web has revolutionized computing. It allows millions of people scattered across the globe
to communicate, access information, publish, and be heard. It allows people to control
much of the display and the rendering of Web pages.
▪ Web usage has reflected this popularity. The number of Internet hosts has risen
dramatically.
▪ Users have become much more discerning about good design. Slow download times,
confusing navigation, confusing page organization, disturbing animation, or other
undesirable site features often results in user abandonment of the site for others with a
more agreeable interface.

Dept. Computer Engineering, Institute of Engineering 46

 Characteristics of Web Design

A Web interface possesses a number of characteristics, some similar to a GUI interface, and,
as has already been shown, some different.

Dept. Computer Engineering, Institute of Engineering 47

 Characteristics of Web Design
Characteristics GUI WEB
Devices User hardware variations limited. User hardware variations enormous. Screen
User hardware characteristics well appearance
defined Screens appear exactly as influenced by hardware being used.
specified.
User Focus Data and applications. Information and navigation.
Data Typically created and used by known Full of unknown content.
and trusted
Information Sources are trusted. Properties Source not always trusted. Often not placed onto
generally known. Typically placed the Web by users or known people and
into system by users or known organizations. Highly variable organization.
people and organizations.

Dept. Computer Engineering, Institute of Engineering 48

 Characteristics of Web Design
Characteristics GUI WEB
User Tasks Install, configure, personalize, start, use, and Link to a site, browse or read pages, fill out forms,
Open, use, and close data files. Familiarity with upgrade programs. Register for services, participate
applications often achieved. in transactions, download and save things.
Familiarity with many sites not established.

Presentation Windows, menus, controls, data, toolbars Two components, browser and page Within page,
Presented as specified by designer. Generally any combination of text, mages, audio, video, and
standardized by toolkits and style specifications. animation. May not be presented as specified by the
guides. designer— dependent on browser, monitor, and user
Little standardization.
Navigation Through menus, lists, trees, dialogs, and wizards. Through links, bookmarks, and typed URLs.

Interaction Interactions such as clicking menu choices, Basic interaction is a single click. This can cause
pressing buttons, selecting list choices, and extreme changes in context, which may not be
cut/copy/paste occur within context of active noticed.
program.

Dept. Computer Engineering, Institute of Engineering 49

 Usability Engineering
➢ Usability engineering is a professional discipline that focuses on improving the usability of interactive systems.
➢ It draws on theories from computer science and psychology to define problems that occur during the use of such a
system.
➢ Usability engineering involves the testing of designs at various stages of the development process, with users or
with usability experts.

➢ Learnability
➢ Throughput
➢ Flexibility
➢ Attitude

Dept. Computer Engineering, Institute of Engineering 50

 Design Rationale
➢ Design rationale is about explaining why a product has been designed the way it has.
➢ For each decision made there must a set of reasons why that particular decision was Design rationale is about
recording those decisions and the reasons why they were made.
➢ A design rationale is a useful design tool because it explicitly lays out the reasoning a design process and it
forces designers to be explicit about what they are doing an they are doing it.
➢ In particular a design rationale can be used after a product has been completed in analyse why a product was
a success or failure.
➢ If a similar product is being designed subsequently then its designers can refer to a rationale to discover why
earlier products were designed the way they were, and benefit of hindsight judge whether the earlier design
decisions were successful and repeating.

Dept. Computer Engineering, Institute of Engineering 51

 ➢Benefits of Design Rationale
➢ Communication throughout life cycle
➢ Reuse of design knowledge across products
➢ Enforces design discipline
➢ Presents arguments for design trade-offs
➢ Organizes potentially large design space
➢ Capturing contextual information.

Dept. Computer Engineering, Institute of Engineering 52

 ➢Process Oriented Design Rationale
➢ Process-oriented design rationale is interested in recording an historically accurate description of a design
team making some decision on a particular issue for the design.
➢ It preserves order of deliberation and decision making.
➢ Design rationale is based on Rittels Issue Based Information System (IBIS).
➢ IBIS is best known for its use in dialogue mapping, a collaborative approach to tackling wicked problems but
it has a range of other applications as well

Dept. Computer Engineering, Institute of Engineering 53

 ➢Process Oriented Design Rationale
➢ IBIS consists of three main elements:
➢ 1. Issues (or questions): These are issues that need to be addressed
➢ 2. Positions (or ideas): These are responses to questions. Typically the set of ideas respond to an issue
represents the spectrum of perspectives on the issue.
➢ 3. Arguments: These can be Pros (arguments supporting) or Cons (arguments against issue).

Dept. Computer Engineering, Institute of Engineering 54

➢Process Oriented Design Rationale

Dept. Computer Engineering, Institute of Engineering 55

 Design Space Analysis
➢ Design space analysis is an approach to representing design rationale. It uses a semififormal notation, called
QOC (Questions, Options, and Criteria), to represent the design space.
➢ The main constituents of QOC are questions identifying key design issues, options providing possible answers
to the questions and criteria for assessing and comparing the Option

Dept. Computer Engineering, Institute of Engineering 56

➢Design Space Analysis

Dept. Computer Engineering, Institute of Engineering 57

Software Life Cycle

Dept. Computer Engineering, Institute of Engineering 58