cs 3724 introduction to human computer interaction l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
CS 3724 Introduction to Human Computer Interaction PowerPoint Presentation
Download Presentation
CS 3724 Introduction to Human Computer Interaction

Loading in 2 Seconds...

play fullscreen
1 / 50

CS 3724 Introduction to Human Computer Interaction - PowerPoint PPT Presentation


  • 366 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CS 3724 Introduction to Human Computer Interaction' - paul


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
cs 3724 introduction to human computer interaction

CS 3724Introduction to Human Computer Interaction

Section 1 CRN 11499 TuTh 5:00-6:14 209 McB

today s agenda
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 agenda3
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 interface6
Where is the interface?
  • In a computer?
  • In a car?
where is the interface7
Where is the interface?
  • In a computer?
  • In a car?
  • In a bowling alley?
where is the interface8
Where is the interface?
  • In a computer?
  • In a car?
  • In a bowling alley?
  • In the SiesmoSpin?
where is the interface9
Where is the interface?
  • In a computer?
  • In a car?
  • In a bowling alley?
  • In the SiesmoSpin?
  • In the Tilty Table?
where is the interface10
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 agenda11
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
Information Design
  • Very long tradition of graphic design
  • Before the book, even!
location heuristic
Location heuristic

Put the beginning at the place where most people start to read.

wall reading vs book reading
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 heuristic16
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
Regularity heuristic

Establishing a discernable pattern makes for easier communication and navigation.

regularity heuristic18
Regularity heuristic

Establishing a discernable pattern makes for easier communication and navigation.

Breaking the pattern is a powerful way to control attention.

regularity heuristic19
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
Reinforcement heuristic

Use shape and animation to reinforce important ideas. Use sparingly.

format heuristics
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
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
slide24

Interface semantics

  • Informational content:
    • Difficult to completely separate from emotional content
  • Emotional content:
    • Difficult to completely separate from informational content
interface semantics
Interface semantics
  • Structuralism (semiotics)
  • “Affordances” (gestalt)
structuralism
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 / “Affordances”
  • Gestalt psychology
    • Kurt Lewin
    • The whole is more than the sum of the parts
  • Ecological psychology: a psychology of affordance
    • JJGibson
    • Door handle “wants” to be grasped
affordances
“Affordances”
  • Does not admit values or history
  • “Universals”
  • Mostly used for control aspects
slide33

Pour me

Hold me

Yank me

“Affordance”

slide34

Structuralism

Pour me

Hold me

Green plastic says outdoor power tool

Blender

2-stroke chainsaw engine says “Macho”

Yank me

Name says hard-drinkin’ at sporting events

“Affordance”

slide36

Find everything

Click this

Type here

“Affordance”

slide37

Find everything

“Official”

Click this

“We care”

Type here

Structuralism

“Affordance”

semantics heuristic
Semantics heuristic

Establish a consistent interface language.

a comparative study of beauty
A Comparative Study of Beauty

What about how it looks?

a comparative study of beauty41
A Comparative Study of Beauty
  • In Math
  • In Engineering
  • In Art
    • Traditional European
    • Japanese
    • Contemporary
mathematical beauty
Mathematical Beauty
  • Elegance
  • Symmetry
  • Simplicity
  • Compactness
engineering beauty
Engineering Beauty
  • Optimization
  • Efficiency
  • Systematicity
  • Repeatability (sometimes)
european traditional
European (traditional)
  • Transcendent
  • Narrative (allegorical, etc.)
  • Apprehended by the many (“Big WOW”)
  • Immediate
japanese art
Japanese art
  • Subtle
  • Surface appearances
  • Apprehended by the few, with patience
contemporary art
Contemporary Art
  • Irony (the tension of meanings)
  • Abstraction
  • Provocation
  • (NOT “Beauty”)
aspects of user reaction to display
Aspects of user reaction to display
  • “Beauty”
  • Style
  • Context
  • Legibility
  • Message
  • Details of content
today s agenda48
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
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
For Thursday:
  • Mid Term

Next Week:

  • Dr. N returns
  • C#

Due Next Thursday:

  • Team Report 2