CS 3724 Introduction to Human Computer Interaction

1. CS 3724Introduction to Human Computer Interaction Section 2 CRN 11500 MW 2:30-3:45 126 McB

2. 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

3. 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

4. Where is the interface?

5. Where is the interface? • In a computer?

6. Where is the interface? • In a computer? • In a car?

7. Where is the interface? • In a computer? • In a car? • In a bowling alley?

8. Where is the interface? • In a computer? • In a car? • In a bowling alley? • In the SiesmoSpin?

9. Where is the interface? • In a computer? • In a car? • In a bowling alley? • In the SiesmoSpin? • In the Tilty Table?

10. 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.

11. 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

12. Information Design:What can we learn from Graphic Design?

13. Information Design • Very long tradition of graphic design • Before the book, even!

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

15. 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

16. 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

17. Regularity heurstic Establishing a discernable pattern makes for easier communication and navigation.

18. Regularity heurstic Establishing a discernable pattern makes for easier communication and navigation. Breaking the pattern is a powerful way to control attention.

19. 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.)

20. Reinforcement heurstic Use shape and animation to reinforce important ideas. Use sparingly.

21. Format heursitics Start by using graphics conventions: • Fonts (Times or Helvetica) • Spacing (page grid and white space) • Color (a few, tried and true)

22. 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

23. Where does meaning come from?

24. Information content • Difficult to completely separate from emotional content

25. Emotional content • Difficult to completely separate from informational content

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

28. On Meaning • Structuralism (semiotics) • “Affordances” (gestalt)

29. Sign = Sr + Sd(Structuralism) • Linguistics • Saussure

30. Structuralism • Admits values and history • Foundation for: • Post-Modernism • Critical Theory • Post-Structuralism

31. 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

32. “Affordances” • Does not admit values or history • “Universals” • An implicit foundation of Alexander’s Pattern Language

34. Pour me Hold me Yank me “Affordance”

35. 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”

37. Find everything Click this Type here “Affordance”

38. Find everything “Official” Click this “We care” Type here Structuralism “Affordance”

39. A Comparative Study of Beauty Where does emotional meaning come from?

40. A Comparative Study of Beauty • In Math • In Engineering • In Art • Traditional European • Japanese • Contemporary

41. Mathematical Beauty • Elegance • Symmetry • Simplicity • Compactness

42. Engineering Beauty • Optimization • Efficiency • Systematicity • Repeatability (sometimes)

43. European (traditional) • Transcendent • Narrative (allegorical, etc.) • Apprehended by the many (“Big WOW”) • Immediate

44. Japanese art • Subtle • Surface appearances • Apprehended by the few, with patience

45. Contemporary Art • Irony (the tension of meanings) • Abstraction • Provocation • (NOT “Beauty”)

46. 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

47. 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.

48. For Wednesday: • Mid Term Next Week: • Dr. N returns • C# Due Next Wednesday: • Team Report 2