this is public demand HCI data...

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

13. The past…
Time
UserProductivity
Batch
Command
Line
WIMP
(Windows)
1940s – 1950s 1980s - Present1960s – 1970s
?
?
13

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

22. New paradigms?
22

23. And the future?
23

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