Université Paris-Sud 11 HCID 101 / M2R Interaction
Fundamentals of
Human-Computer Interaction

Lectures: Room D203, building 640 (PUIO)

Michel Beaudouin-Lafon
Lectures web site

TA: Room B109, building 640 (PUIO)

David Bonnet

  1. Thursday, October 3, 2013, 9am-12pm
  2. Wednesday, October 9, 2013, 9am-12pm Room D203
  3. Thursday, October 10, 2013, 9am-12pm
  4. Thursday, October 24, 2013, 9am-12pm
  5. Wednesday, November 6, 2013, 9am-12pm Room D203
  6. Thursday, November 7, 2013, 9am-12pm
  7. Thursday, November 14, 2013, 9am-12am
  8. Thursday, November 21, 2013, 9am-12pm

TA 1 — Thursday, October 3, 2013

Basic tasks, Sketchpad, Xerox Star


Mentioned references

Video lectures Important

Modes: Requiring user tension (e.g., holding a button or a pedal down) to stay in a quasi-mode is a way to avoid mode errors

Gestures for selection

Another Sketchpad demo with 3D drawing

TA 2 — Wednesday, October 9, 2013

Long nose of innovation, interaction styles



Select a teammate, an interaction technique and the language/toolkit you wish to use to implement the technique. Send your choice to me (use the email link above).

Mentioned references

Drawing in mid-air

Easing drag-and-drop interactions

Controlling users' balance


TA 3 — Thursday, October 10, 2013

Interaction styles, adapting interfaces



Design an interface for each of the three different devices of a 60-foot long boat. See the slides of the previous session for more details.

Mentioned references

Sharing ideas and opinions

Challenges of interaction design

TA 4 — Thursday, October 24, 2013

Psychology 101


Fitts Law

If not done already, read the paper introducing the Fitts law: Fitts, P. The Information Capacity of the Human Motor System in Controlling the Amplitude of Movement. Journal of Experimental Psychology (1954). Read it at least up to the end of the first experiment and from the discussion to the end.

Adapting interfaces

Adapt the interface of the basic document editor, as described in these slides (section on adapting interfaces). The idea is to draw a storyboard showing how the interface would work when:

Try to leverage as much as possible the capabilities of the provided input/output devices:

You can send me a digitized version (scans or photos) of your storyboards by email.

TA 5 — Wednesday, November 6, 2013

Conceptual modeling


Mentioned references

TA 6 — Thursday, November 7, 2013

Models and theories

TA 7 — Thursday, November 14, 2013

Fitts law

Mentioned references

TA 8 — Thursday, November 21, 2013

State machines

We wrote a state machine for:

Mentioned references and videos

Input sensors







The project consists in implementing one interaction technique based on the description of the related articles. The point is to get familiar with reading scientific articles about HCI and to experience the issues in implementing a particular interaction technique.

Groups and selected interaction techniques

Some rules

What's expected

Submission instructions To do before Sunday, December 15, 2013, midnight

  1. Create a folder containing:
    • the source code, with instructions on how to compile and run it,
    • if appropriate, an executable binary (e.g., jar file, os x application, etc.),
    • the report in PDF format.
  2. Set the name of the folder to your last names (e.g. Beaudouin-Lafon & Bonnet) and compress it into an archive (zip or tar.gz).
  3. Email the archive:

Presentation instructions On Tuesday, December 17, 2013, from 9am to noon

Programming languages (and toolkits)


Interaction techniques

Marking menus and invocation

A marking menu is a circular menu that enables item selection through directional strokes. If done without hesitating, the menu doesn't show up thus supporting quick interactions.

Menus with hierarchy

These menus augment marking menus to provide access to hierarchically arranged commands.

Menus with value control

These menus enable the selection and control of a parameter in a single gesture.

Menus with cursive strokes

These menus use the curvature of a gesture as a discriminating factor to trigger different commands.

Menus that follow the cursor

These menus stay near or under the cursor to tackle the invocation issue.

Bubble cursor

The bubble cursor extends the selection scope of the cursor in order to ease the selection of targets.

Pointing on touch-enabled mobile devices

Techniques aimed at making pointing on mobile devices more precise and easier.

Screen bezel interactions on touch-enabled devices

Techniques that leverage the screen bezel to trigger commands or to enter in explicit modes.


OctoPocus lets users learn gestures performed with the mouse on a desktop computer by providing a real-time feedback and feedforward. To make these more compelling, the gesture recognition algorithm can be refined to support users' gesture scale.

Visualizing off-screen locations

These papers introduce visualization techniques to support spacial localization of off-screen targets.

Drag-and-drop facilities

Techniques aimed at facilitating drag-and-drop operations.

Scrolling techniques

Techniques aimed at facilitating navigation in documents.

Beautification and drawing tools

Set of tools that alter the cursor movement in order to embellish the resulting strokes.

Sliders and navigation

Sliders have a hidden dimension that can be leveraged to ease the navigation between or within documents as proposed in these papers.


Techniques leveraging the lens metaphor to combine selection and edition of objects in a single click.

Drawing GUIs

Techniques transforming drawings into interactive interfaces.

Dynamic Query

Dynamic queries let users explore quickly a multidimensional data space.

Managing the interaction scope

These techniques let users select graphical objects based on their characteristics (shape, property value, etc.) or group them based on a specific rule (parenthood, common property, etc.) to subsequently edit their properties.

Zoomable User Interfaces

Zoomable or Multi-scale User Interfaces provide a third spatial dimension to layout documents.

Alignment tools

Techniques introducing novel graphical object alignment tools.

Window management

These techniques make use of real world metaphors to ease window management.

Disambiguating target selection

These techniques tackle the issue of selecting small, occluded or tightly layered targets.

Crossing techniques

These goal crossing techniques enable fluid selection and combination of commands that point-and-click techniques do not provide.

Polygon detection

These papers introduce algorithms to detect corners from a user input stroke gesture.