Programming of Interactive Systems, Fall 2014

M1 and M1 HCID, Université Paris-Sud


The course focuses on the design and programming of interactive systems. Classes are given by Theophanis Tsandilas and tutorials by Cédric Fleury and Arnaud Prouzeau.

Lectures and lab tutorials take place on Fridays from 2 to 6 pm at PUIO (Bat. 640) in rooms E210 or B107 (lectures) and E201-202 (labs).

You can contact Theophanis, Cédric and Arnaud by email ( Please, don't forget to include the [IS] in your message title!

The first computer mouse as invented
by Douglas Englebart in 1964

The class is partly based on last year's class by Anastasia Bezerianos, as well as older classes by M. Beaudouin-Lafon, N. Roussel, T. Tsandilas, and O. Chapuis. The following people have contributed to the design of the lab exercises: D. Bonnet, C. Fleury, N. Roussel, C. Appert, O. Bau, M. Beaudouin-Lafon, G. Besacier, S. Gueddana, Y. Riche, and M. Nancel.

For more information about the content and schedule of the course see the course syllabus.


- The final exam will be 2.5 hours long. Authorized material: any document in paper form.

Lab tutorials

Tutorials are structured around small programming assignments, primarily in Java. You can find more information here.


Assignments count for 33% of the final mark.


Sept 26. Introduction and definitions. Why are there so many user interface problems? Why is programming user interaction difficult? The brief history of Human-Computer Interaction and future trends.
[Slides] [Slides 4 in 1]

Oct 3. No lecture. The lab tutorial is extended to 4 hours.

Oct 10. UI Programming. Event-based programming. Java Swing. Placement guides and design principles.
[Slides] [Slides 4 in 1]

Oct 17. Model-View-Controller architecture. Direct manipulation. Modeling interaction: state machines. Interaction modes.
[Slides] [Slides 4 in 1]

Oct 31. Shortcuts, gestures, gesture recognition, chunking & phrasing, crossing. Introduction to Java2D & SwingStates.
[Gestures] [Gestures 4 in 1] [Java2D] [Java2D 4 in 1] [SwingStates slides]

In addition to the links provided in the slides, you can check the following articles:

This is some Java code for drawing smooth curves through a list of pre-defined points with cubic Bézier curves. It uses a simple spline-interpolation algorithm. For more sophisticated implementations, you can use specialized libraries such as the Appache Commons Mathematics Library (e.g., see SplineInterpolator).

Nov 7. The psychology of the user interface: perception, visual search, and motor performance. SwingStates (continued).
[Psychology] [Psychology 4 in 1] [SwingStates example]

This is the Java code for the SwingStates example.

Nov 14. Continuing on menus. User-Centered Design: Analysis, Design, Prototyping.
[Design] [Design 4 in 1]

Nov 21. Input: direct vs. indirect, absolute vs. relative, position vs. rate control, CD gain, pointer acceleration, mid-air pointing, direct input problems.
[Input] [Input 4 in 1]

It is hard to find introductory resources for this material. However, the following articles can help you further understand some concepts introduced in the class.

Nov 28. Continuing on input: multi-touch, gesture elicitation, programming for cross-platform interaction. Intro to CSS and JavaScript.
[Input-complete] [Input-complete 4 in 1] [Web Development]

Dec 5. Preparing for the final exam.
[Exam Review] [Exam Review 4 in 1]

Dec 10. Design and usability principles, evaluating interactive systems.
[Design & Usability Principle, Evaluation] [Design & Usability Principle, Evaluation - 4 in 1]

Older exams

These are examples of exams from previous years:
[Exam 2013 - English] [Exam 2013 - French] [Exam 2012]