CS 3724Introduction to Human Computer Interaction

Section 2 CRN 11500 MW 2:30-3:45 126 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 content Emotional content

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 content Emotional content

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 systemAttention

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 content Emotional content

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 heurstic

Establishing a discernable pattern makes for easier communication and navigation.

Regularity heurstic

Establishing a discernable pattern makes for easier communication and navigation.

Breaking the pattern is a powerful way to control attention.

Regularity heurstic

Establishing a discernable pattern makes for easier communication and navigation.

Breaking the pattern is a powerful way to control attention. (Or To CoNfUsE.)

Reinforcement heurstic

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

Format heursitics

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?

Information content

• Difficult to completely separate from emotional content

Emotional content

• Difficult to completely separate from informational content

This is the painting Vincent van Gogh made just before he killed himself.

On Meaning

• Structuralism (semiotics)• “Affordances” (gestalt)

Sign = Sr + Sd(Structuralism)

• Linguistics• Saussure

Structuralism

• Admits values and history • 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”• An implicit foundation of Alexander’s Pattern Language

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

A Comparative Study of Beauty

Where does emotional meaning come from?

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”)

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 content Emotional content

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 Wednesday:

Due Next Wednesday:

Mid Term

Team Report 2

Next Week: Dr. N returns C#