CS 3724 Introduction to Human Computer Interaction

1. CS 3724Introduction to Human Computer Interaction Section 1 CRN 11499 TuTh 5:00-6:14 209 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 and emotion • Interface semantics • 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 and emotion • Interface semantics • 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 and emotion • Interface semantics • 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 heuristic Establishing a discernable pattern makes for easier communication and navigation.

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

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

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

21. Format heuristics 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. Interface semantics Where does meaning come from?

24. Interface semantics • Informational content: • Difficult to completely separate from emotional content • Emotional content: • Difficult to completely separate from informational content

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

27. Interface semantics • Structuralism (semiotics) • “Affordances” (gestalt)

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

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

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

31. “Affordances” • Does not admit values or history • “Universals” • Mostly used for control aspects

33. Pour me Hold me Yank me “Affordance”

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

36. Find everything Click this Type here “Affordance”

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

38. What does this font say? Title or link?

39. Semantics heuristic Establish a consistent interface language.

40. A Comparative Study of Beauty What about how it looks?

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

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

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

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

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

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

47. Aspects of user reaction to display • “Beauty” • Style • Context • Legibility • Message • Details of content

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

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

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