IAT 351 Building User Interfaces - Advanced HCI Spring 2007

General information

• Course Goals:
• Historical understanding of the architectural and algorithmic principles behind the development of the 2-dimensional graphical user interface
• Experience in modern GUI toolkits and development environments
• Exposure to a variety of advanced topics for developing interactive systems, including "off the desktop"
• Meeting Logistics
• Lecture: Wednesday, 10:30 - 11:50, SUR 5080
• Workshop: Friday 10:30 - 11:50, SUR 3100
• Instructor: Lyn Bartram
• lyn@sfu.ca
• MSN: lyn@cs.sfu.ca
• 778 782 7439/778 782 8009 (lab)
• 14-745 or SUR 3760 (you need card access to get in here, so make an appointment)
• Office hours : Wednesdays 12:00 - 1:00 or by appointment
• TA: Shahin Sheidaei
• ssheidae@sfu.ca
• Office hours: Mondays 1:30 pm - 3:20 pm
• Office location: SUR 5304

---

Class Policies and Grading

How Grades Will Be Computed. Final grades will be calculated based on the following weighting scheme. It is possible that the weighting formula may be adjusted as the semester progresses. Any such changes will be announced to the class.

Policies

Weightingfont>

• Homework. Details on the requirements for successfully completing the assignments will be given in the assignment on the Web. The assignment is due by the workshop on the announced due date. The grade for a late assignment will be marked down 25% for each day it is late.<br>
• Midterm Exam. Exam will be based on assigned readings, lectures, and homework.
• I expect all students to show up for exams and submit homeworks in a timely manner. No make-up exams will be given without written notice of an emergency (doctor's notice if in the hospital, for example), and IN ADVANCE if possible.
• Project. Students will be expected to complete a multi-part project during the second half of the course. The project structure will be presented in an overview lecture approximately halfway through the semester. The project consists of four separate milestones, including a project definition phase, architecture design, implementation, and demo.

Assignment 1	12%
Assignment 2	12%
Assignment 3	12%
Assignment 4	12%
Assignment 5	12%
Course project	40%

The course project is a team project: all others are individual.

Individual and Team work. With the exception of the final project, the work is expected to be completed by individuals and not in collaboration with others. IF we detect that two assignments are identical or close enough that it is clear that copying was involved, BOTH assignments will receive a grade of 0. Helping each other learn is part of university but just copying someone else's work is not acceptable. The final project will involve a team of 2. Any team diasagreements that cannot be resolved by the team and an initial consult with the professor will result in the team being split. Further elaboration will be posted partway through the term.

Other Policies. A good portion of the learning in any upper level or graduate class comes from intelligent discussion during the class. If you don't attend class, you cannot participate, and your performance may reflect that. I expect that each student will make an effort to attend all lectures and contribute constructively to the discussion.

Students are expected to follow SFU's code of academic honesty. I am required to forward all suspected cases of academic misconduct to the Dean of Students, where they will be pursued to resolution. This is a very unpleasant process for all involved, so please do not put us in this situation.

---

Reading Materials

Interaction Technologies

There is no single textbook for this class, but we will be using articles from three collections:

1. The Human-Computer Interaction Handbook: Fundamentals, Evolving technologies and Emerging Applications., Jacko and Sears, eds. This is an electronic texbook available from the library.

2. Human Input to Computer Systems: Theories, Techniques and Technology, Bill Buxton. A manuscript-in-progress on input technologies.

3. The Collected Readings for the course, available from the bookstore.

Programming

• Programming is done in Java using the Eclipse IDE.
• As we will be doing programming assignments using the Java Swing GUI toolkit, understanding the nuts and bolts of Swing programming may be useful. Thus, I'm recommending Java Swing, Second Edition (Loy, Eckstein, Wood, Elliot, and Cole; O'Reilly Press) as a good book on Swing with broad coverage of the toolkit. If you don't want/need the book, you still may want to take a look at some of the links and documents in the Resources section of this page.
• An excellent Java book is Thinking in Java by Bruce Eckel. Free electronic versions of this v4 book are available here, complete with code snippets.
• Another good book (also not required, but useful if you want to do fancy Swing stuff either in class or later on your own) is Swing Hacks (Marinacci and Adamson; O'Reilly Press). Lots of nifty tricks. Another, more recent book in a similar vein that I haven't yet checked out in as much detail is Filthy Rich Clients by Haase and Guy.
• Additional required readings for each class will be provided electronically and posted on the course syllabus. In addition, some supplemental readings will be provided. These readings will not be required but may prove useful as background material for students.

---

Resources, Documents, and Software

• Sun's site for all things Swing
• JDK download
• Java Desktop site. Another portal with links to components, projects, etc., for people doing rich GUIs on the desktop. There are some links to cool stuff here.
• The Swing Connection. Links to Swing propaganda, bug databases, etc.
• Extra components and resources (open source or free):
• Swing Labs. Sun's open source incubator for some very cool Swing components and libraries. Good site.
• Java Desktop Integration Components. A bunch of nifty components to make Java apps integrate better onto the desktop. There's some cool stuff here.
• Swing/AWT tutorials and books (let me know if you come across other good ones)
• Nice Swing tutorial
• Free AWT book on the web! This is actually a great resource for basic event and layout materials.
• Official Sun Swing Tutorial
• Quick Tutorial for AWT Programmers

---

Tentative Class Schedule and Syllabus

(Please check the class schedule periodically, as it may be updated as necessary.)

Week	Date	Topic	Materials/resources	Assignments & Readings
Fundamentals of the 2D User Interface
1	9.01	Lecture: Introduction Introductions Course goals Grading, policies, admininistrivia. Motivation: why are UIs hard to build?	Slides: Introduction
	11.01	Workshop: Research labs tour!	Links: interesting videos on history Doug Engelbart demo Early Smaltalk 80 Video Xerox Star video SIAT Research projects Learning the Java language
2	16.01	UI Software Organization Separation of concerns Basic UI toolkit functionality Some Swing examples	Slides: History and Organisation of UI Software Supplemental Readings/downloads: Creating a GUI with JFC/Swing www.eclipse.org	Assignments: Assignment 1 out Readings: A Brief History of Human Computer Interaction Technology, Brad Myers Evolution of Human–Computer Interaction: From Memex to Bluetooth and Beyond. The Human-Computer Interaction Handbook.
	18.01	Workshop: Introduction to the Java Swing UI libraries	Slides: Introduction to Swing Supplemental Readings: Java API documentation Creating a GUI with JFC/Swing	Readings: User Interface Software Tools, Brad Myers (ONLY Sections 1, 2, 4, 6) Java Swing tutorial : introduction
3	23.01	Lecture: Output Basic devices (CRTs, LCDs) Framebuffers, color palettes, and gamma correction Imaging models (raster, vector, stencil-and-paint) Drawing abstractions Computer typography	Slides :2D devices and human optics Supplemental Readings: Painting in AWT and Swing Java 2D Graphics Tutorial Another Java 2D Graphics Tutorial Getting Started with Java 2D Java 2D Graphics (book chapter) Performing custom painting in Swing	Readings: H. Luczak, M. Roetting, O. Oehme. Visual Displays. The human-computer interaction handbook. Environment, Optics and Display: Ware, in Collected Readings
	25.01	Workshop: using Swing components Drawing and painting and writing with Swing	Supplemental Readings: The ImageIcon class is the easiest way to load and display an image in Swing Custom painting in Swing, the Java tutorial	Assignments:
4	30.01	Lecture cancelled: lyn recuperating.	Supplemental readings: Chap. 28 (esp. Creating Your Own Component) in Java Swing	Readings MVC Meets Swing A Swing architecture overview
	1.02	Lecture/ workshop: Toolkits and Window Systems What's a window system? Toolkit responsibilities The MVC architecture creating custom UI components in Swing extending Swing	Slides: Windows and Layouts Readings Tutorial on creating a custom Swing layout manager Tutorial on doing without a layout manager Some hints on solving common layout problems	Tutorial on how layout works in Swing The ImageIcon class is the easiest way to load and display an image in Swing Custom painting in Swing, the Java tutoria Assignment 1 DUE Assignment 2 out
5	6.02	Input: Devices Keyboards Buttons Valuators Locators Input hardware	Supplemental Readings: The Design Space of Input Devices, Card, Mackinlay, and Robertson How a Computer Keyboard Works How a Computer Mouse Works How an Optical Mouse Works Crazy input device: The Handykey Twiddler	Readings: ß Bill Buxton. “Taxonomies of Input”. Chapter 4 of Human Input to Computer Systems: Theories, Techniques and Technology Foley and Van Dam. Chapter 8, Fundamentals of Computer Graphics.
	8.02	Workshop: Toolkits and Window Systems The event model as unifying abstraction Implementing event systems and writing listeners writing event listeners	Slides Supplemental Readings: Tutorial on using the Swing focus subsystem	Readings: Tutorial on writing event listeners
6	13.02	Lecture: Interaction Techniques What's an interaction technique? Design of interaction techniques Fitts' law Case studies	Slides: Input 3 (Interaction Techniques) Supplemental Readings Article on visualizing Fitts' Law	Readings: Mackenzie Buxton
	15.02	Workshop: reviewing Swing painting	Tutorial on Swing drag-and-drop	Assignments: Assignment 2 DUE
7	20.02	Implementing interaction techniques Model-View-Controller	A bit of history on where the Java "delegated" event model came from
	22.02	Workshop : MVC MVC	How to use tables in Swing Creating Interactive GUIs with Swing's MVC Architecture	Assignment 3 out
Moving off the desktop: new interface environments
8	27.02	Ubicomp and Pervasive Computing mobile, context and location awareness large and small scale SENSORS		Assignments: Project Proposal (by email to Lyn and Shahin)
	29.02	Workshop: MVC revisited		Assignments: Assignment 3 due
9	3.03	Lecture: exploring simple sensors with Phidgets!	www.phidgets.com www.arduino.com
	5.03	Workshop: sensors and actuators		Assignments: Project Overview due 4 out Readings: Phidgets docs
10	10.03	Lecture: Pervasive 2, Sensors and Networks	Slides	Assignments Assignment 4 due
	12.03	Workshop: RFID demo Assignment 4
11	17.03	Lecture: CSCW and Groupware	Supplemental Readings and sample code: · java.sun.com/docs/books/tutorial/networking/sockets/examples/KnockKnockServer.java · Good example of 2-port server · http://williams.comp.ncat.edu/Networks/JavaSocketExample.htm · http://www.cs.unc.edu/Courses/jbs/lessons/java/java_client_server1/ · http://www.cs.utexas.edu/~chris/cs378/resources/sockets.html · Java networking tutorial about servers	Assignment 5 out
	19.03	No Workshop: Good Friday. Have a good long weekend!
12	24.03	Lecture: Threading and GUIs	Supplemental Readings: Threading in Swing Swing Hacks, hacks #8, 18, and 42 especially
	26.03	Workshop: project
13	31.03	Lecture: Speech and sound Basics of sound Speech versus non-speech audio Using audio in interfaces How audio interaction is different from graphical interaction Case study: Mercator Audio input Low-level properties of speech Challenges of speech-based interfaces Features of speech Menu systems versus SpeechActs Case studies: Suede, PAL, Family Intercom	Supplemental Readings: Sun's site for JavaSound Other JavaSound resources Auditory illusions entry at Wikipedia Sound localization article at Wikipedi JavaSpeech API FreeTTS	Readings: Mapping GUIs to Auditory Interfaces, Mynatt and Edwards
	2.04	Workshop: TBD
14	7.04	Final project demonstrations ...... but Lyn is out of town.	T B D!
	9.04