MA C128 Interactivity & Interface Design

CATALOG COURSE DESCRIPTION

This course provides an in-depth study of Web site interactivity, including the psychology of user interaction and methods for designing and developing effective navigational interfaces. Students will also learn the fundamentals of Web animation and interactivity with Macromedia Flash. Combining their previous knowledge of Web site design and digital imaging with the concepts in this class, students will create portfolio-quality interactive web content.

COURSE OBJECTIVES

Upon successful completion of the course, the student will be able to

1. identify different types of navigation and explain how navigation categories emerge from information architecture.
2. design interfaces that provide an accurate conceptual model of the organization of content throughout the site.
3. describe the action cycle of user interaction and explain what techniques minimize the gulfs of evaluation and execution.
4. create vector and raster interface controls that imply usage through affordances and constraints.
5. arrange interface elements according to Gestalt principles to establish relationships and differentiation.
6. critique Web site interfaces for usability and accessibility.
7. analyze the effectiveness of a sign or symbol according to semiotic principles
8. animate object position and appearance over time.
9. write simple Actionscripts to implement Flash interactivity.
10. edit simple Javascripts to implement HTML interactivity.
11. write a media production plan.

DETAILED TOPICAL OUTLINE

1. Definitions (B, C)
   1. User, System, Interface
   2. Conceptual Model
2. Information Architecture (A, B)
   1. Content objectives
   2. Audience
   3. Content units
   4. Classification and hierarchy
   5. Content relationships
   6. Common site structures
3. The User/Interface Action Cycle (C)
   1. Gulf of Evaluation
   2. Gulf of Execution
   3. Principles to minimize gulfs
4. Knowing What to Do (C)
   1. “Knowledge in the Head”
   2. “Knowledge in the World”
   3. Affordances
   4. Constraints
   5. Mappings
5. Slips and Mistakes (C)
   1. Feedback
   2. Error Recovery
6. Interface Usability (F)
   1. Criteria
      1. Where am I?
      2. Where can I go?
      3. Where am I in relationship to where I can go?
   2. Visibility
   3. Feedback
   4. Accessibility
   5. Globalization/Localization
7. Semiotics (G)
   1. Components
      1. Object
      2. Representamen
      3. Interpretant
   2. Principles
      1. Immediacy
      2. Generality
      3. Characterization
      4. Communicability
      5. Cohesiveness
   3. Common Errors
8. Art Direction (B, D)
   1. Vector and raster drawing tools
   2. Light source
   3. Curved and angled surfaces
   4. Quality control
9. Unity and Contrast with Gestalt Principles (E)
   1. Proximity
   2. Similarity: Bertin’s Retinal Variables
      1. Size
      2. Value
      3. Hue
      4. Orientation
      5. Texture
      6. Shape
      7. Position
      8. Types of Perception
   3. Continuity
   4. Closure
   5. Area
   6. Symmetry
10. Flash Animation (D, H)
    1. Symbol Types
    2. Motion and Shape Tweens
    3. Motion Guides
    4. Layer Masks
11. Fundamentals of Actionscript (I)
    1. Understanding Objects
    2. The TextField Object
    3. Creating a Custom Object Based upon the Object Class
    4. Using “for” Loops
    5. Building Arrays
    6. Manipulating Flash UI Components
    7. ActionScript Best Practices
12. HTML Interactivity (J)
    1. Fundamentals of Javascript
    2. Form Interactivity
    3. Form Validation
    4. Hiding/Showing Layers
    5. Custom Browser Windows
    6. Popup menus
13. Media Production Plan Development (K)
    1. Overview
    2. Information/Interface Design
    3. Content
    4. Art Direction
    5. Research
    6. Technical Plan
    7. Production Plan

METHODS OF PRESENTATION

Course instructional methods may include but are not limited to

1. Lectures
   Example: A text-based online lecture explains how gestalt principles (and their opposites) create unity or contrast and provides examples.
   
2. Asynchronous Discussions
   Example: Instructor responds to student questions about controlling the Flash timeline with Actionscript.
   
3. Critique and Feedback
   Example: Instructor provides feedback on projects with explanation on how the project did or did not fulfill requirements according to rubric provided.
   
4. Optional synchronous demonstrations
   Example: Instructor hosts optional synchronous meetings in Macromedia Breeze in which software is demonstrated to students.

ASSIGNMENTS AND METHODS OF EVALUATION

Assessment of student performance may include but is not limited to

1. Tutorials (D, H, I, J)
   Example: Students complete exercises in textbook or handouts, which provides necessary files and step-by-step instructions.
   
2. Discussions (A, B, C, E, F, G)
   Example: Students select a game, Web, or application interface and evaluate whether the Gulfs of Evaluation and Execution are large or small and explain why.
   
3. Quizzes (A-K)
   Example: Multiple choice quizzes assess students’ knowledge of topics throughout the semester.
   
4. Creative Projects (A-K)
   Example: Students design and develop an interactive console implementing principles of semiotics, gestalts, and user interaction,

REQUIRED TEXTS

Reading assignments are required and may include but are not limited to

1. Norman, Donald. The Design of Everyday Things. Basic Books, 2002. ISBN 0465067107
2. deHaan, Jen. Macromedia Flash MX 2004: Training from the Source. Macromedia Press, 2003. ISBN 0321213424

7.12.2005

  Courses Index