ITIS 6400/8400
Principles of Human
Computer Interaction
Dr. Heather Richter Lipford
Heather.Lipford@uncc.edu
Agenda
 Course Info & Syllabus
 Course Overview
 Introductions
 HCI Overview
 IDEO Video
 Some history
Course Information
 Books


Human Computer Interaction, 3rd edition, by Dix, Finlay,
Abowd, Beale. (DFAB)
The Design of Everyday Things, by Donald Norman, 2002.
(DOET)
 Web

http://www.sis.uncc.edu/~richter/classes/2008/6400/index.html


Overview
Grading and Policies
Syllabus and Lectures
Assignments

Wiki: http://hci.sis.uncc.edu:8080/itis6400-spring08/


Course Information
 Grading for 6400



10 points Participation
10 points Assignments
50 points Project



More details to come…
15 points Midterm
15 points Final
Course Information
 Grading for 8400



10 points Participation
20 points Assignments
50 points Project



More details to come…
15 points Midterm
15 points Final
Assignments
 Design critique and advice
 Evaluation analysis
 8400: additional topic research and
presentation
8400 Assignment
 Additional reading on a more focused theory
or research topic
 Teach or present the topic – 30 minutes in
class

At least 20 minutes of presentation
 2 page (or so) summary and study guide
posted to the Swiki
 See web pages for suggestions
Group project
 3-4 people per group, graded as a group
 3 parts: requirements, design, evaluation
 Original interface design and evaluation
 Each part due by class time on the due date
 Project notebook on Swiki with each write up
 Theme: The environment and sustainability
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!
 Introduction to theory and research topics in
HCI
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 topics
How to do well
 Time and effort



Do the reading and prepare for class
Attend class and participate
Spend time on project
 Attention to detail
 Communication

Tell me what you learned and why you made
decisions
Introductions –
Dr. Heather Richter Lipford
 Ph.D. in C.S. from Georgia Tech in May 2005
 HCI, Ubiquitous Computing, and Software
Engineering focus
 Contact info:


Email preferred, put 6400 or 8400 in title
Office: 305E Woodward
 Office Hours:
 Wednesday 5:30-6:30pm,
 Thursday 11am-12pm
 By appointment
TA- Sahiba Dugal
 Current Masters student in Computer Science
 Computer Engineering undergraduate degree
 Office hours – by appointment
 Email: sdugal@uncc.edu
 Office: 330A Woodward
Introductions – Your Turn
 Name, student status, specialization
 Previous HCI/interface experience?
 A product/device/application you


Love to use and why
Hate to use and why
Now let’s get started
What is Human-Computer Interaction?
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!
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
Goals of HCI
 Allow users to carry out tasks
 Safely

Effectively

Efficiently

Enjoyably
Usability
 Combination of





Ease of learning
High speed of user task performance
Low user error rate
Subjective user satisfaction
User retention over time
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
UI Design / Develop Process
 User-Centered Design







Analyze user’s goals & tasks
Create design alternatives
Evaluate options
Implement prototype
Test
Refine
IMPLEMENT
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
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
Some inspiration: IDEO
http://www.ideo.com/
A brief history
Vannevar Bush, As We May Think, 1945
Innovator: Vannevar Bush
 Faculty at MIT
 Director of Office of Scientific Research &
Development
 Coordinate WWII effort with 6,000 scientists
 “As We May Think” - 1945 Atlantic Monthly
 Postulated Memex device
 Stores all records/articles/communications
 Items retrieved by indexing, keywords, cross
references (now called hyperlinks)
 (Envisioned as microfilm, not computer)

http://www.theatlantic.com/unbound/flashbks/computer/
bushf.htm
Paradigms
 Predominant theoretical frameworks or
scientific world views

e.g., Aristotelian, Newtonian, Einsteinian (relativistic)
paradigms in physics
 HCI paradigm shifts


Which are true shifts?
What are the future paradigms?
User Productivity
The basic timeline…
?
WIMP
(Windows)
Command
Line
Batch
1940s – 1950s 1960s – 1970s 1980s - Present
Time
?
In the Beginning –
Computing in 1945
 Harvard Mark I

Picture from http://piano.dsi.uminho.pt/museuv/indexmark.htm
 55 feet long, 8 feet high, 5 tons
Jason Hong / James Landay,
UC Berkeley, Picture from
http://piano.dsi.uminho.pt/m
useuv/indexmark.htm
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
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
The Ubiquitous Glass Teletype
 24 x 80 characters
 Up to 19,200 bps
(Wow - was big
stuff!)
Source: http://www.columbia.edu/acis/history/vt100.html
Innovator: Ivan Sutherland
 Technological advance: Video
display units
 SketchPad - 1963 PhD thesis at
MIT
 Hierarchy - pictures & subpictures
 Constraints
 Icons
 Copying
 Light pen input device
 Recursive operations
Innovator: Douglas Englebart
 Landmark system/demo:
http://sloan.stanford.edu/MouseSite/1968Demo.html


hierarchical hypertext, multimedia,
mouse, high-res display, windows,
shared files, electronic messaging,
groupware, teleconferencing, ...
Invented the mouse
Paradigm: Personal Computer
 Small, powerful machine dedicated
to an individual
 Importance of networks and timesharing
 Also:


Laser printer (1971, Gary
Starkweather)
Ethernet (1973, Bob Metcalfe)
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
PCs with GUIs
 Xerox PARC - mid 1970’s

Alto



local processor, bitmap
display, mouse
Precursor to modern GUI,
windows, menus, scrollbars
LAN - Ethernet
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
Xerox Star - 1981
 Commercial flop



$15k cost
closed architecture
lacking key functionality
(spreadsheet)
Apple Macintosh - 1984
“The computer for the rest of us”
 Aggressive pricing - $2500
 Not trailblazer, smart copier
 Good interface guidelines
 3rd party applications
 High quality graphics and
laser printer
Paradigm: Hypertext
 Think of information not
as linear flow but as
interconnected nodes
 Non-linear browsing
structure
 Around since the 1960’s
Paradigm: WWW
 Two Key Components


URL
Browser
 Tim Brenners-Lee did both
1991 first text-based browser
 Marc Andreesen created Mosaic (first graphic
browser, 1993)
(Some of the) key technological
advances / paradigm shifts








Time-sharing & networks
Video display units
Programming toolkits
Personal computing
Windows
Metaphors
Direct manipulation
Language vs. action
(agents)
 Hypertext / WWW
 Multi-modality
 Ubiquitous computing
 Sensor-based & context-
aware computing
(Some of the) key people & events
 People







Vannevar Bush
Douglas Engelbart
Ivan Sutherland
J.C.R. Licklider
Alan Kay
Ted Nelson
Mark Weiser
 Events


Founding of Xerox
PARC
Lisa / Macintosh
What Next?
 What are the next paradigm shifts?
 What are the next technical innovations?
 Who knows?
 Maybe you do
Paradigm?: Mobile Computing
 Devices used in a variety of contexts
 Laptop, cell phones, PDAs
 How do devices communicate?
 How to get information to each device when
needed?
 How to take advantage of context?
Paradigm?: VR & 3D Interaction
 Create immersion by

Realistic appearance, interaction, behavior
 Draw on spatial memory, two-handed
interaction
Paradigm?: Ubiquitous Computing
 Person is an occupant of a computationally-
rich environment
 Computers with ourselves, on our walls, in
our appliances, etc.
 How to do the “right” thing for the people in
the environment? Can no longer neglect
macro-social aspects
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
Next time
 Skim Chapter 4 in DFAB for paradigm info
 Design process and project information


Read DFAB 5.1-5.4 and chapter 6
Come prepared to do project brainstorming