SlideShare a Scribd company logo
Human Computer Interaction
Khalid Mahmood (MSCS)
k.mah.khan@live.com
Outline
 Course Info & Syllabus
 Course Overview
 Introductions
 HCI Overview
 A brief history
2
Course Aims
 Consciousness raising
– Make you aware of HCI issues
 Design critic
– Question bad HCI design - of existing or proposed
 Learn Design Process
– Software interfaces and beyond
 Improve your HCI design & evaluation skills
– Go forth and do good work!
3
Course Overview
 Requirements Gathering
– How do you know what to build?
– Human abilities
 Design
– How do you build the best UI you can?
 Evaluation
– How do you make sure people can use it?
Also cognitive and contextual models, interface
paradigms, design guidelines, web and
visual design, and advanced topics4
HCI
 The interaction and interface between a
human and a computer performing a task
– Tasks might be work, play, learning,
communicating, etc. etc.
– Write a document, calculate monthly budget,
learn about places to live in Charlotte, drive
home…
 …not just desktop computers!
5
Why do we care?
 Computers (in one way or another) now affect every
person in our society
 Tonight - count how many in your home/apt/room
 We are surrounded by unusable and ineffective
systems!
 Its not the user’s fault!!
 Product success may depend on ease of use, not
necessarily power
 You will likely create an interface for someone at some
point
– Even if its just your personal web page
6
Goals of HCI
 Allow users to carry out tasks
– Safely
– Effectively
– Efficiently
– Enjoyably
7
Usability
Combination of
– Ease of learning
– High speed of user task performance
– Low user error rate
– Subjective user satisfaction
– User retention over time
8
Design Evaluation
 Both subjective and objective metrics
 Some things we can measure
– Time to perform a task
– Improvement of performance over time
– Rate of errors by user
– Retention over time
– Subjective satisfaction
9
UI Design / Develop Process
 User-Centered Design
– Analyze user’s goals & tasks
– Create design alternatives
– Evaluate options
– Implement prototype
– Test
– Refine
– IMPLEMENT
10
Know Thy Users!
 Physical & cognitive abilities (& special needs)
 Personality & culture
 Knowledge & skills
 Motivation
 Two Fatal Mistakes:
– Assume all users are alike
– Assume all users are like the designer
11
Design is HARD!
 “It is easy to make things hard. It is hard to
make things easy.” – Al Chapanis, 1982
 Its more difficult than you think
 Real world constraints make this even harder
12
The past…
Time
UserProductivity
Batch
Command
Line
WIMP
(Windows)
1940s – 1950s 1980s - Present1960s – 1970s
?
?
13
Batch processing
 Computer had one task,
performed sequentially
 No “interaction” between
operator and computer after
starting the run
 Punch cards, tapes for input
 Serial operations
14
Paradigm: Networks & time-sharing
(1960’s)
 Command line  teletype
– increased accessibility
– interactive systems, not jobs
– text processing, editing
– email, shared file system
 Need for HCI in the design of programming
languages
15
The Ubiquitous Glass Teletype
Source: http://www.columbia.edu/acis/history/vt100.html
 24 x 80 characters
 Up to 19,200 bps
(Wow - was big
stuff!)
16
Paradigm: Personal Computer
 Small, powerful machine dedicated
to an individual
 Importance of networks and time-
sharing
 Also:
– Laser printer (1971, Gary
Starkweather)
– Ethernet (1973, Bob Metcalfe)
17
Paradigm: WIMP / GUI
 Windows, Icons, Menus, Pointers
 Graphical User Interface
 Multitasking – can do several things simultaneously
 Has become the familiar GUI interface
 Computer as a “dialogue partner”
 Xerox Alto, Star; early Apples
18
Xerox Star - 1981
 First commercial PC designed
for “business professionals”
– desktop metaphor, pointing,
WYSIWYG, high degree of
consistency and simplicity
 First system based on usability
engineering
– Paper prototyping and analysis
– Usability testing and iterative
refinement
19
Apple Macintosh - 1984
 Aggressive pricing - $2500
 Not trailblazer
 Good interface guidelines
 3rd
party applications
 High quality graphics and
laser printer
“The computer for the rest of
us”
20
Paradigm: WWW
 Hypertext around since the 1960’s…
 Two new components
– URL
– Browser
 Tim Brenners-Lee did both
– 1991 first text-based browser
 Marc Andreesen created Mosaic (first
graphic browser, 1993)
21
New paradigms?
22
And the future?
23
Course ReCap
 To make you notice interfaces, good and
bad
– You’ll never look at doors the same way again
 To help you realize no one gets an
interface right on the first try
– Yes, even the experts
– Design is HARD
 To teach you tools and techniques to help
you iteratively improve your designs
– Because you can eventually get it right
24

More Related Content

PPT
Introducing Human Computer Interaction
PDF
HCI 1st and 2nd sessions
PPTX
HUMAN COMPUTER INTERACTION
PDF
Human-Computer Interaction: An Overview
PPT
Interaction Design
PDF
Basic Principles of Interface design
PPSX
What is interaction design
Introducing Human Computer Interaction
HCI 1st and 2nd sessions
HUMAN COMPUTER INTERACTION
Human-Computer Interaction: An Overview
Interaction Design
Basic Principles of Interface design
What is interaction design

What's hot (19)

PPTX
Challenges in HCI for Mobile Devices
PPTX
Human computer interaction Semester 1
PDF
Design Principles
PPS
User Interface Design @iRajLal
PPT
E3 chap-05
PPTX
Usability engineering
PPTX
SELECT THE PROPER DEVICE BASED CONTROLS
PDF
Designing Firefox
PPTX
Affordance,mapping,constraints and convention in hci
PPTX
Ccst9003 – everyday computing and the internet
PPTX
Ccst9003 – everyday computing and the internet
PPTX
Disruptive Technologies: More Computers, Less Jobs?
PPTX
Ccst9003 – everyday computing and the internet 1
PPTX
Designing Interfaces [TIDWELL] - Resumo do 1º capitulo
PPSX
Symphony Interactive Gallery
PDF
The Future of Designing Human-Technology Interactions /Open lecture CIID/
PDF
User Experience as the Lens
PPTX
Personas for Accessible UX
PPT
Bill Moggridge-Designing interactions-the mouse and the desktop
Challenges in HCI for Mobile Devices
Human computer interaction Semester 1
Design Principles
User Interface Design @iRajLal
E3 chap-05
Usability engineering
SELECT THE PROPER DEVICE BASED CONTROLS
Designing Firefox
Affordance,mapping,constraints and convention in hci
Ccst9003 – everyday computing and the internet
Ccst9003 – everyday computing and the internet
Disruptive Technologies: More Computers, Less Jobs?
Ccst9003 – everyday computing and the internet 1
Designing Interfaces [TIDWELL] - Resumo do 1º capitulo
Symphony Interactive Gallery
The Future of Designing Human-Technology Interactions /Open lecture CIID/
User Experience as the Lens
Personas for Accessible UX
Bill Moggridge-Designing interactions-the mouse and the desktop
Ad

Similar to Lcture 1 (20)

PDF
User Interface Design_Csc2204_lecture 1_-_introduction
PPTX
HCI Presentation
PPTX
Lesson 2 HCI 2.pptx
PDF
01-Introduction to HCI.pdfxzcnkzdcdncnccn
PPT
HCI 66.pptsgsdgdgwdgfsdfgsdfgsdfgsdgsdgsdgsdg
PPT
ahsdjHDHVdjhvHDVSJADHSAVDHVNCDSHVJHVSJHCVASDHVJSAHVJSV
PPTX
Hci lec 1 & 2
PDF
Human Computer Interaction-Chapter one.pdf
PPTX
1.Usability Engineering.pptx
PPTX
Human Computer Interactions Lecture 1.pptx
PPTX
human computer interaction Lecture 1.ppt
PPTX
Being human (Human Computer Interaction)
PPTX
Being Human
PDF
COMP 4026 - Lecture1 introduction
PPT
chapter one Introduction to HCI.ppt
PPT
Introduction to HCI Human Computer Interaction
PPT
Introduction to HCI.ppt
PPT
Introduction to HCI.ppt
PDF
Introduction to User Centred Design
User Interface Design_Csc2204_lecture 1_-_introduction
HCI Presentation
Lesson 2 HCI 2.pptx
01-Introduction to HCI.pdfxzcnkzdcdncnccn
HCI 66.pptsgsdgdgwdgfsdfgsdfgsdfgsdgsdgsdgsdg
ahsdjHDHVdjhvHDVSJADHSAVDHVNCDSHVJHVSJHCVASDHVJSAHVJSV
Hci lec 1 & 2
Human Computer Interaction-Chapter one.pdf
1.Usability Engineering.pptx
Human Computer Interactions Lecture 1.pptx
human computer interaction Lecture 1.ppt
Being human (Human Computer Interaction)
Being Human
COMP 4026 - Lecture1 introduction
chapter one Introduction to HCI.ppt
Introduction to HCI Human Computer Interaction
Introduction to HCI.ppt
Introduction to HCI.ppt
Introduction to User Centred Design
Ad

Recently uploaded (20)

PDF
Wio LTE JP Version v1.3b- 4G, Cat.1, Espruino Compatible\202001935, PCBA;Wio ...
PDF
High-frequency high-voltage transformer outline drawing
PPTX
areprosthodontics and orthodonticsa text.pptx
PPT
unit 1 ppt.ppthhhhhhhhhhhhhhhhhhhhhhhhhh
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PDF
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
PPTX
6- Architecture design complete (1).pptx
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
PPTX
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
PDF
The Advantages of Working With a Design-Build Studio
PPTX
mahatma gandhi bus terminal in india Case Study.pptx
PDF
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
PDF
SEVA- Fashion designing-Presentation.pdf
DOCX
actividad 20% informatica microsoft project
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
PDF
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
PDF
Africa 2025 - Prospects and Challenges first edition.pdf
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
PPTX
Implications Existing phase plan and its feasibility.pptx
PPTX
Wisp Textiles: Where Comfort Meets Everyday Style
Wio LTE JP Version v1.3b- 4G, Cat.1, Espruino Compatible\202001935, PCBA;Wio ...
High-frequency high-voltage transformer outline drawing
areprosthodontics and orthodonticsa text.pptx
unit 1 ppt.ppthhhhhhhhhhhhhhhhhhhhhhhhhh
AD Bungalow Case studies Sem 2.pptxvwewev
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
6- Architecture design complete (1).pptx
pump pump is a mechanism that is used to transfer a liquid from one place to ...
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
The Advantages of Working With a Design-Build Studio
mahatma gandhi bus terminal in india Case Study.pptx
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
SEVA- Fashion designing-Presentation.pdf
actividad 20% informatica microsoft project
DOC-20250430-WA0014._20250714_235747_0000.pptx
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
Africa 2025 - Prospects and Challenges first edition.pdf
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
Implications Existing phase plan and its feasibility.pptx
Wisp Textiles: Where Comfort Meets Everyday Style

Lcture 1

  • 1. Human Computer Interaction Khalid Mahmood (MSCS) k.mah.khan@live.com
  • 2. Outline  Course Info & Syllabus  Course Overview  Introductions  HCI Overview  A brief history 2
  • 3. Course Aims  Consciousness raising – Make you aware of HCI issues  Design critic – Question bad HCI design - of existing or proposed  Learn Design Process – Software interfaces and beyond  Improve your HCI design & evaluation skills – Go forth and do good work! 3
  • 4. Course Overview  Requirements Gathering – How do you know what to build? – Human abilities  Design – How do you build the best UI you can?  Evaluation – How do you make sure people can use it? Also cognitive and contextual models, interface paradigms, design guidelines, web and visual design, and advanced topics4
  • 5. HCI  The interaction and interface between a human and a computer performing a task – Tasks might be work, play, learning, communicating, etc. etc. – Write a document, calculate monthly budget, learn about places to live in Charlotte, drive home…  …not just desktop computers! 5
  • 6. Why do we care?  Computers (in one way or another) now affect every person in our society  Tonight - count how many in your home/apt/room  We are surrounded by unusable and ineffective systems!  Its not the user’s fault!!  Product success may depend on ease of use, not necessarily power  You will likely create an interface for someone at some point – Even if its just your personal web page 6
  • 7. Goals of HCI  Allow users to carry out tasks – Safely – Effectively – Efficiently – Enjoyably 7
  • 8. Usability Combination of – Ease of learning – High speed of user task performance – Low user error rate – Subjective user satisfaction – User retention over time 8
  • 9. Design Evaluation  Both subjective and objective metrics  Some things we can measure – Time to perform a task – Improvement of performance over time – Rate of errors by user – Retention over time – Subjective satisfaction 9
  • 10. UI Design / Develop Process  User-Centered Design – Analyze user’s goals & tasks – Create design alternatives – Evaluate options – Implement prototype – Test – Refine – IMPLEMENT 10
  • 11. Know Thy Users!  Physical & cognitive abilities (& special needs)  Personality & culture  Knowledge & skills  Motivation  Two Fatal Mistakes: – Assume all users are alike – Assume all users are like the designer 11
  • 12. Design is HARD!  “It is easy to make things hard. It is hard to make things easy.” – Al Chapanis, 1982  Its more difficult than you think  Real world constraints make this even harder 12
  • 14. Batch processing  Computer had one task, performed sequentially  No “interaction” between operator and computer after starting the run  Punch cards, tapes for input  Serial operations 14
  • 15. Paradigm: Networks & time-sharing (1960’s)  Command line  teletype – increased accessibility – interactive systems, not jobs – text processing, editing – email, shared file system  Need for HCI in the design of programming languages 15
  • 16. The Ubiquitous Glass Teletype Source: http://www.columbia.edu/acis/history/vt100.html  24 x 80 characters  Up to 19,200 bps (Wow - was big stuff!) 16
  • 17. Paradigm: Personal Computer  Small, powerful machine dedicated to an individual  Importance of networks and time- sharing  Also: – Laser printer (1971, Gary Starkweather) – Ethernet (1973, Bob Metcalfe) 17
  • 18. Paradigm: WIMP / GUI  Windows, Icons, Menus, Pointers  Graphical User Interface  Multitasking – can do several things simultaneously  Has become the familiar GUI interface  Computer as a “dialogue partner”  Xerox Alto, Star; early Apples 18
  • 19. Xerox Star - 1981  First commercial PC designed for “business professionals” – desktop metaphor, pointing, WYSIWYG, high degree of consistency and simplicity  First system based on usability engineering – Paper prototyping and analysis – Usability testing and iterative refinement 19
  • 20. Apple Macintosh - 1984  Aggressive pricing - $2500  Not trailblazer  Good interface guidelines  3rd party applications  High quality graphics and laser printer “The computer for the rest of us” 20
  • 21. Paradigm: WWW  Hypertext around since the 1960’s…  Two new components – URL – Browser  Tim Brenners-Lee did both – 1991 first text-based browser  Marc Andreesen created Mosaic (first graphic browser, 1993) 21
  • 24. Course ReCap  To make you notice interfaces, good and bad – You’ll never look at doors the same way again  To help you realize no one gets an interface right on the first try – Yes, even the experts – Design is HARD  To teach you tools and techniques to help you iteratively improve your designs – Because you can eventually get it right 24

Editor's Notes

  • #17: Construction: Monitor + detachable keyboard Display: 24x80 or 14x132 character cells, optional 24x132 Character matrix: 7x9 with descenders Screen size: 12" diagonal (8" x 4.5" active display) Character set: Complete US ASCII (128 codes) Keys: 65 keys in ANSI X4.14-1971 typewriter layout http://www.columbia.edu/acis/history/vt100.html Auxiliary keypad: 18 keys (digits, arrows, function keys) Visual indicators: 7 LEDs Interface: RS-232/V.24, optional 20mA Current Loop Flow control: Xon/Xoff Communication Speeds: 75,110,150,300,600,1200,2400,4800,9600,19200 bps Dimensions: 14.5"x18"14.25" (monitor), 3.5"x18"x8" (keyboard) Minimum table depth: 20.25" Weight: 41 pounds
  • #20: But it was a flop – too expensive, closed architecture, no spreadsheet