Artificial Intelligence and Data Science
Human Computer Interface
by
Prof. A.A.Salunke
M.Tech. Computer
Course Code 217521
SEM III
Credit
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
2
Unit III
Interaction Styles and HCI in
Software Process
3
What is Design?
● Achieving goals within constraints
Trade off: Choosing which goals or constraints can be relaxed so that
others can be met.
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.
5
Interaction design process
Requirements
• 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
• 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
• 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
Interaction styles
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 flat buttons
…
use just
confusing! click
• 3D workspaces me!
… or
• use for extra virtual space sculptured
• light and occlusion give
depth
• 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.
21
Direct manipulation (Conti..)
⮚ 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.
22
Direct manipulation (Conti..)
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.
23
Direct manipulation Contin…
24
Direct manipulation (Contin..)
Figure: One of the earliest commercially
available direct manipulation interfaces was
Figure: The text-book example of Direct Manipulation, MacPaint.
the Windows File Explorer,
25
Direct manipulation
Contin….
Advantages and disadvantages of Direct
Manipulation
Advantages Disadvantages
1. Visually presents task concepts. 1. May be more difficult to programmed.
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
4. Encourages exploration. always preferable.
5. High subjective satisfaction. 4. Metaphors can be misleading since the
6. Recognition memory (as opposed to cued or “the essence of metaphor is understanding
free recall memory) and 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 26
users.
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 27
Engineering
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 28
Engineering
Direct Manipulation
⮚ In
Contine…..
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 29
Engineering
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 30
Engineering
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 31
Engineering
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 32
Engineering
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 33
Engineering
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 34
Engineering
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 35
Engineering
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 36
Engineering
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 37
Engineering
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 38
Engineering
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 39
Engineering
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 40
Engineering
Characteristics of Web Design
Characteristics GUI WEB
Devices User hardware User hardware variations
variations limited. enormous. Screen
User hardware appearance
characteristics well influenced by hardware being used.
defined Screens appear exactly
as 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. Source not always trusted. Often not placed onto
Properties the Web by users or
generallyknown. Typicallyplaced known people and organizations. Highly
into system by users or known variable organization.
people and organizations.
Dept. Computer Engineering, Institute of 41
Engineering
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, Two components, browser and page Within page,
toolbars any combination of text, mages, audio, video, and
Presented as specified by animation. May not be presented as specified by the
designer. Generally designer— dependent on browser, monitor, and user
standardized by toolkits and style specifications. Little standardization.
guides.
Navigation Through menus, lists, trees, dialogs, and wizards. Through links, bookmarks, and typed URLs.
Interaction Interactions such as clicking Basic interaction is a single click. This can cause
menu choices, extreme changes in context, which
pressing buttons, selecting list choices, may not be
and noticed.
cut/copy/paste occur within context
of active program.
Dept. Computer Engineering, Institute of 42
Engineering
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 43
Engineering
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 44
Engineering
⮚ 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 Issue Based Information System
(IBIS).
⮚ IBIS is an augmentation -based approach to clarify wicked
problems
Dept. Computer Engineering, Institute of 45
Engineering
⮚ Main Elements of IBIS
46
⮚ Process Oriented Design
Rationale
Dept. Computer Engineering, Institute of 48
Engineering
Example of IBIS
Design Space Analysis
⮚ Design space analysis is an approach to representing design
rationale. It uses a semi formal 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
51
⮚ Design Space Analysis
52