CS 3724 Introduction to Human Computer Interaction Section 1 CRN 11499 TuTh 5:00-6:14 209 McB
Jan 26, 2016
CS 3724Introduction 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 Interface semantics
Midterm Guidance
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
Where is the interface?
Where is the interface?
In a computer?
Where is the interface?
In a computer? In a car?
Where is the interface?
In a computer? In a car? In a bowling alley?
Where is the interface?
In a computer? In a car? In a bowling alley? In the SiesmoSpin?
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.
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.
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
Information Design:What can we learn from
Graphic Design?
Information Design
• Very long tradition of graphic design
• Before the book, even!
Location heuristic
Put the beginning at the place where most people start to read.
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
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
Regularity heuristic
Establishing a discernable pattern makes for easier communication and navigation.
Regularity heuristic
Establishing a discernable pattern makes for easier communication and navigation.
Breaking the pattern is a powerful way to control attention.
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.)
Reinforcement heuristic
Use shape and animation to reinforce important ideas. Use sparingly.
Format heuristics
Start by using graphics conventions:
• Fonts (Times or Helvetica)• Spacing (page grid and white space)
• Color (a few, tried and true)
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
Where does meaning come from?
Interface semantics
• Informational content: – Difficult to completely separate from emotional content
• Emotional content:– Difficult to completely separate from informational content
Interface semantics
This is the painting Vincent van Gogh made just before he killed himself.
Interface semantics
• Structuralism (semiotics)• “Affordances” (gestalt)
Sign = Sr + Sd(Structuralism)
• Linguistics• Saussure
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
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
“Affordances”
• Does not admit values or history
• “Universals”• Mostly used for control aspects
Hold me
Pour me
Yank me
“Affordance”
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
Click this
Type here“Affordance”
Find everything
Click this
Type here“Affordance”
“We care”
“Official”
Structuralism
Find everything
Title or link?
What does this font say?
Semantics heuristic
Establish a consistent interface language.
A Comparative Study of Beauty
What about how it looks?
A Comparative Study of Beauty
• In Math • In Engineering• In Art
– Traditional European– Japanese– Contemporary
Mathematical Beauty
• Elegance• Symmetry• Simplicity• Compactness
Engineering Beauty
• Optimization• Efficiency• Systematicity• Repeatability (sometimes)
European (traditional)
• Transcendent• Narrative (allegorical, etc.)
• Apprehended by the many (“Big WOW”)
• Immediate
Japanese art
• Subtle• Surface appearances• Apprehended by the few, with
patience
Contemporary Art
• Irony (the tension of meanings)
• Abstraction• Provocation• (NOT “Beauty”)
Aspects of user reaction to display
• “Beauty”• Style• Context• Legibility• Message• Details of content
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
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.
For Thursday:
Due Next Thursday:
Mid Term
Team Report 2
Next Week: Dr. N returns C#