Scribd
Upload
33 views50 pages

01 HCI Introduction

Uploaded by

Tehreem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
33 views50 pages

01 HCI Introduction

Uploaded by

Tehreem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 50

Human Computer Interaction

Introduction
Human Computer Interaction
• The Humans

• The Computers

• The Interaction
INTRODUCTION

1. HCI Introduction
2. Bad Designs are everywhere
3. Psychology of Design
4. Psychopathology of Design
5. Human Computer Interaction
6. History of User Interfaces
7. Course Reference Material
INTRODUCTION

The body of knowledge of Human-Computer Interaction can be


perceived as resulting from the following five interrelated aspects,
depicted in the diagram bellow:
(N) the nature of human-computer interaction;
(U) the use and context of computers;
(H) human characteristics;
(C) computer system and interface architecture; and
(D) the development process.
INTRODUCTION
INTRODUCTION
This course touches the (N) aspect but mainly targets the (H) aspects
illustrated in the diagram above. It comprises seven modules:
• Visibility, Affordances, Mapping, Constraints, Conceptual models
• Seven stages of action, Types of knowledge
• Feedback, Errors, Forcing Functions, Gestalt laws, Responsiveness
• The Human Processor Model, Fitts Law
• Interface Efficiency, KLM, GOMS
• State transition diagrams, Petri nets
• History and vision
INTRODUCTION
After successfully attending this course, students will know how user
interfaces have developed over the past decades, and what constants of
human performance need to be considered when designing user
interfaces.
1. BAD DESIGNS ARE EVERYWHERE
Good and Bad Interfaces!

Computers are every


where

And

Their good design is very


important
Bad Designs are Everywhere
Good and bad design 1
Good and bad design 2
2. PSYCHOLOGY OF DESIGN
Concepts of HCI
• Visibility plays an important role in Human-
Computer Interaction as the mind is excellent
at noticing and interpreting clues in the world.
• Think for instance on the multiple clicks you did
because system doesn’t respond… and then on
the chaos when it did respond…
Concepts of HCI
• Affordances are the actions that the design of
an object suggests to its user.
• Affordances provide strong clues so that no
instructions or labels are needed.
• https://
www.youtube.com/watch?v=NK1Zb_5VxuM
Concepts of HCI
• Mappings connect elements of computing
artifacts to the real world.
• They are the link between what you want to do
and what is perceived possible.
• It is the relationship between moving a control,
and the results in the real world.
Concepts of HCI
Concepts of HCI
• Constraints complement affordances by
indicating the limitations of user actions.
• A grayed-out menu option and an unpleasant
sound (sometimes followed by an error
message) indicate that the user cannot carry
out a particular action.
• They can be designed to non-verbally guide
user behaviors using interfaces and prevent
errors in a complex interface.
Concepts of HCI
• Conceptual Models are mental models of things formed through
experience, training, instructions and
• we build them based on our perceptions, which are influenced by
the previously addressed
• visibility, affordances, constrains and mappings fostered by
whatever we interact with.
• in simpler terms, conceptual models are the ideas we have in our
heads about how things work or how to use them. We create these
ideas based on what we've learned, experienced, or been taught.
Our perceptions, which are shaped by what we see, what we can do
with something (affordances), what limits it has (constraints), and
how it relates to other things (mappings), all play a role in shaping
these mental models.
3. PSYCHOPATHOLOGY OF DESIGN

“ When simple things need pictures, labels, or instructions, the design has
failed. ”
Psychopathology of Everyday Things
• Can you use all the functions of your
– Digital watch
– Mobile phone
– Washing machine
– Video recorder
• The most basic functionality of a video recorder, playing
a tape, is easy to use. However, anything more
advanced, such as programming a recording, can
become rather difficult.
Feature Shock
• Every digital device has more features than its manual
counterpart

• But manual devices easier to use


– Flexibility
– Subtlety (quality of being precise)
– Awareness

• Hi-tech companies add more feature to improve product


– Product becomes complicated

• Bad process can’t improve product


Technological Paradox
• It is true that as the number of
options and capabilities of any
device increases, so too must
the number and complexity of
the controls. But the principles
of good design can make
complexity manageable.
• the technological paradox
highlights the tension between
the benefits and drawbacks of
technological progress,
reminding us that while
technology can offer solutions
to problems, it can also create
new ones in the process.
Technological Paradox

No Visibility!
Psychopathology of Everyday Things
Psychopathology of Everyday Things
Fundamental Truths about Computers
• Computers are ubiquitous
– Everything we use is equipped with computer
technology

• and so is their characteristically poor way of


communicating and behaving
– As we saw in plane example
Poor Semiotics
"poor semiotics," we're essentially saying that the signs and symbols used in
communication or design are not doing a good job of conveying their intended
meaning.
Visibility Problems
Visibility Problems
Consistency Problems
Useless Error Messages
Wrong Controls
Poor Feedback
Too Much of Information
A Slight Language Problem
Solutions!

Better Designs!
4. HUMAN COMPUTER
INTERACTION
How do we design good interfaces?
User-Centered Design, Simplicity, Consistency, Feedback, Hierarchy, Flexibility, Error
Handling: Design clear and informative error messages that help users understand what
went wrong and how to fix it.

Requirements

Design

Implement

Test

Not like this! Maintain


Human Computer Interaction
A discipline concerned with the

design implementation

evaluation

of interactive computing systems for human use


Human-Computer Interaction
• What
– the study of interaction between people and
computer-based systems
– concern with the physical, psychological and
theoretical aspects of this process

• Why
– to enable us to design interactive products to
support people in their everyday and working lives
Human-Computer Interaction
• Goals
– Usability
– Pleasurableness
– User experience and emotions
– Satisfaction
– Learnability
– Error reduction
– engagement
HCI: AN Interdisciplinary Area
Why is HCI Important?
• 80% of software lifecycle costs occur after the product is released, in
the maintenance phase - of that work, 80 % is due to unmet or
unforeseen user requirements; only 20 % is due to bugs or reliability
problems (IEEE Software)

• Business Success  User Experience

• Effects on
– Effectiveness
– Productivity
– Morale
– Safety
– Society
– Individuals
– And a lot more
5. HISTORY OF USER INTERFACES
A Brief History of User Interfaces
• Batch-processing
– No interactive capabilities
– All user input specified in advance (punch cards, ...)
– All system output collected at end of program run
(printouts,...)
– Applications have no user interface component
distinguishable from File I/O
– Job Control Languages (example: IBM3090–JCL):
specify job and parameters
A Brief History of User Interfaces
• Time-sharing Systems
– Command-line based interaction with simple terminal
– Similar program structure
– Applications read arguments from the command line,
return results
– Example: still visible in Unix commands
• Full-screen textual interfaces
– Interaction starts to feel "real-time" (example: vi)
– Applications receive UI input and react immediately in
main "loop" (threading becomes important)
A Brief History of User Interfaces
• Menu-based systems
– Discover "Read & Select" over "Memorize & Type"
advantage
– Still text-based!
– Example: UCSD Pascal Development Environment
– Applications have explicit UI component
– But: choices are limited to a particular menu item
at a time (hierarchical selection)
– Application still "in control"
A Brief History of User Interfaces
• Graphical User Interface Systems
– From character generator to bitmap display (Alto/Star/Lisa..)
– Pointing devices in addition to keyboard
-> Event-based program structure
• Most dramatic paradigm shift for application development
• User is "in control"
• Application only reacts to user (or system) events
• Callback paradigm
– Event handling
• Initially application-explicit
• Later system-implicit
Book Reference
• Book: Human Computer Interaction - 3rd
Edition by - ALAN DIX_ JANET FINLAY
Chapter: 1, 2, 3 and 4

You might also like