1 / 48

Exploring Human-Computer Interaction: Interfaces, Attention, and Graphic Design Insights

In this session of CS 3724, we dive into the fascinating world of Human-Computer Interaction (HCI). We will explore where interfaces exist, from computers to cars and unconventional spaces like bowling alleys. Key topics include the relationship between attention, control, and display, as well as valuable insights from graphic design. We’ll discuss heuristics such as location, regularity, reinforcement, and the crucial distinction between informational and emotional content. Join us for essential midterm guidance and engaging discussions on how design shapes our interactions.

allayna
Télécharger la présentation

Exploring Human-Computer Interaction: Interfaces, Attention, and Graphic Design Insights

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

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

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

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

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

  32. Pour me Hold me Yank me “Affordance”

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

  34. Find everything Click this Type here “Affordance”

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

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

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

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

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

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

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

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

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

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

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

More Related