cs 3724 introduction to human computer interaction
DESCRIPTION
CS 3724 Introduction to Human Computer Interaction. Section 1 CRN 11499 TuTh 5:00-6:14 209 McB. Today’s Agenda. Where is the interface? eXFR tape Attention, Control, Display What can we learn from graphic design and art? Location Format Regularity Reinforcement Information and emotion - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/1.jpg)
CS 3724Introduction to Human Computer Interaction
Section 1 CRN 11499 TuTh 5:00-6:14 209 McB
![Page 2: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/2.jpg)
Today’s Agenda
Where is the interface? eXFR tape Attention, Control, Display
What can we learn from graphic design and art? Location Format Regularity Reinforcement Information and emotion Interface semantics
Midterm Guidance
![Page 3: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/3.jpg)
Today’s Agenda
Where is the interface? eXFR tape Attention, Control, Display
What can we learn from graphic design and art? Location Format Regularity Reinforcement Information and emotion Interface semantics
Midterm Guidance
![Page 4: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/4.jpg)
Where is the interface?
![Page 5: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/5.jpg)
Where is the interface?
In a computer?
![Page 6: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/6.jpg)
Where is the interface?
In a computer? In a car?
![Page 7: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/7.jpg)
Where is the interface?
In a computer? In a car? In a bowling alley?
![Page 8: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/8.jpg)
Where is the interface?
In a computer? In a car? In a bowling alley? In the SiesmoSpin?
![Page 9: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/9.jpg)
Where is the interface?
In a computer? In a car? In a bowling alley? In the SiesmoSpin? In the Tilty Table?
QuickTime™ and aH.263 decompressor
are needed to see this picture.
![Page 10: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/10.jpg)
Where is the interface?
Control What is used to control the system
Attention What the user is paying attention to. Could be looking at, holding, hearing
Display What the system “shows” Visual, auditory, touch, aroma
Notice that user’s attention and system display are closely linked, but not necessarily the same.
![Page 11: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/11.jpg)
Today’s Agenda
Where is the interface? eXFR tape Attention, Control, Display
What can we learn from graphic design and art? Location Format Regularity Reinforcement Information and emotion Interface semantics
Midterm Guidance
![Page 12: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/12.jpg)
Information Design:What can we learn from
Graphic Design?
![Page 13: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/13.jpg)
Information Design
• Very long tradition of graphic design
• Before the book, even!
![Page 14: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/14.jpg)
Location heuristic
Put the beginning at the place where most people start to read.
![Page 15: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/15.jpg)
Wall reading vs. book reading
• Bibliographic: book-based literacy– Last 400 years in European
culture
• Epigraphic: wall-based literacy– Egypt, Rome– Where you read is important part
of communication
![Page 16: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/16.jpg)
Location heuristic
Put the beginning at the place where most people start to read.
• Bibliographic (e.g. windows): Left to right, top to bottom
• Epigraphic (big displays): center
![Page 17: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/17.jpg)
Regularity heuristic
Establishing a discernable pattern makes for easier communication and navigation.
![Page 18: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/18.jpg)
Regularity heuristic
Establishing a discernable pattern makes for easier communication and navigation.
Breaking the pattern is a powerful way to control attention.
![Page 19: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/19.jpg)
Regularity heuristic
Establishing a discernable pattern makes for easier communication and navigation.
Breaking the pattern is a powerful way to control attention. (Or To CoNfUsE.)
![Page 20: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/20.jpg)
Reinforcement heuristic
Use shape and animation to reinforce important ideas. Use sparingly.
![Page 21: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/21.jpg)
Format heuristics
Start by using graphics conventions:
• Fonts (Times or Helvetica)• Spacing (page grid and white space)
• Color (a few, tried and true)
![Page 22: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/22.jpg)
Graphic Design: A few resources
• Principles of Graphic Design: http://www.mundidesign.com/presentation/index2.html
• Basic Graphic Design Theory for web design: http://desktoppub.about.com/cs/designprinciples/
• “Classic Design Theory”: http://desktoppub.about.com/cs/designprinciples
![Page 23: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/23.jpg)
Where does meaning come from?
Interface semantics
![Page 24: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/24.jpg)
• Informational content: – Difficult to completely separate from emotional content
• Emotional content:– Difficult to completely separate from informational content
Interface semantics
![Page 25: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/25.jpg)
![Page 26: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/26.jpg)
This is the painting Vincent van Gogh made just before he killed himself.
![Page 27: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/27.jpg)
Interface semantics
• Structuralism (semiotics)• “Affordances” (gestalt)
![Page 28: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/28.jpg)
Sign = Sr + Sd(Structuralism)
• Linguistics• Saussure
![Page 29: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/29.jpg)
Structuralism
• Admits values and history• All meaning is relative• Used in designing control, display and attention management
• Foundation for:– Post-Modernism– Critical Theory– Post-Structuralism
![Page 30: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/30.jpg)
Gestalt / “Affordances”
• Gestalt psychology– Kurt Lewin– The whole is more than the sum of the parts
• Ecological psychology: a psychology of affordance– JJ Gibson– Door handle “wants” to be grasped
![Page 31: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/31.jpg)
“Affordances”
• Does not admit values or history
• “Universals”• Mostly used for control aspects
![Page 32: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/32.jpg)
![Page 33: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/33.jpg)
Hold me
Pour me
Yank me
“Affordance”
![Page 34: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/34.jpg)
Hold me
Pour me
Yank me
“Affordance”
2-stroke chainsaw engine says “Macho”
BlenderGreen plastic says outdoor power tool
Name says hard-drinkin’ at sporting events
Structuralism
![Page 35: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/35.jpg)
![Page 36: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/36.jpg)
Click this
Type here“Affordance”
Find everything
![Page 37: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/37.jpg)
Click this
Type here“Affordance”
“We care”
“Official”
Structuralism
Find everything
![Page 38: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/38.jpg)
Title or link?
What does this font say?
![Page 39: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/39.jpg)
Semantics heuristic
Establish a consistent interface language.
![Page 40: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/40.jpg)
A Comparative Study of Beauty
What about how it looks?
![Page 41: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/41.jpg)
A Comparative Study of Beauty
• In Math • In Engineering• In Art
– Traditional European– Japanese– Contemporary
![Page 42: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/42.jpg)
Mathematical Beauty
• Elegance• Symmetry• Simplicity• Compactness
![Page 43: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/43.jpg)
Engineering Beauty
• Optimization• Efficiency• Systematicity• Repeatability (sometimes)
![Page 44: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/44.jpg)
European (traditional)
• Transcendent• Narrative (allegorical, etc.)
• Apprehended by the many (“Big WOW”)
• Immediate
![Page 45: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/45.jpg)
Japanese art
• Subtle• Surface appearances• Apprehended by the few, with
patience
![Page 46: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/46.jpg)
Contemporary Art
• Irony (the tension of meanings)
• Abstraction• Provocation• (NOT “Beauty”)
![Page 47: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/47.jpg)
Aspects of user reaction to display
• “Beauty”• Style• Context• Legibility• Message• Details of content
![Page 48: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/48.jpg)
Today’s Agenda
Where is the interface? eXFR tape Attention, Control, Display
What can we learn from graphic design and art? Location Format Regularity Reinforcement Information and emotion Interface semantics
Midterm topics
![Page 49: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/49.jpg)
Mid Term Guidance
Read the Book! Chapters 1-6 Scenario-Based Design
In class stuff Heuristic: if we talked about more than once, it is likely to be
on the test Morphological box Rittle, Vitruvius
Other stuff won’t hurt, too.
![Page 50: CS 3724 Introduction to Human Computer Interaction](https://reader035.vdocuments.us/reader035/viewer/2022081603/568153e7550346895dc1e5e0/html5/thumbnails/50.jpg)
For Thursday:
Due Next Thursday:
Mid Term
Team Report 2
Next Week: Dr. N returns C#