HCID 101 / M2R Interaction
Lectures: Room D203, building 640 (PUIO)
Lectures web site
TA: Room B109, building 640 (PUIO)
- Thursday, October 3, 2013, 9am-12pm
- Wednesday, October 9, 2013, 9am-12pm Room D203
- Thursday, October 10, 2013, 9am-12pm
- Thursday, October 24, 2013, 9am-12pm
- Wednesday, November 6, 2013, 9am-12pm Room D203
- Thursday, November 7, 2013, 9am-12pm
- Thursday, November 14, 2013, 9am-12am
- Thursday, November 21, 2013, 9am-12pm
TA 1 — Thursday, October 3, 2013
Basic tasks, Sketchpad, Xerox Star
Video lectures Important
- Kay, A. Doing With Images Makes Symbols: Communicating With Computers Part 1 & Part 2
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
- Sellen, A., Kurtenbach, G. & Buxton, W. The Prevention of Mode Errors Through Sensory Feedback. Human Computer Interaction, (1992), 141-164.
- Baudel, T. and Beaudouin-Lafon, M. Charade: Remote Control of Objects Using Free-Hand Gestures. Communications of the ACM 36, (1993), 28–35.
Gestures for selection
- Li, Yang Gesture Search: a Tool for Fast Mobile Data Access. Proc. UIST, (2010), 87–96. + Video
- Lü, Hao and Li, Yang Gesture Avatar: a Technique for Operating Mobile User Interfaces Using Gestures. Proc. HCI, ACM (2011), 207–216.
- Holz, C. and Wilson, A. Data Miming: Inferring Spatial Object Descriptions from Human Gesture. Proc. CHI '11, ACM (2011), 811–820. + Video
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).
Drawing in mid-air
Easing drag-and-drop interactions
Controlling users' balance
- Maeda, T., Ando, H., Amemiya, T., Nagaya, N., Sugimoto, M., and Inami, M. Shaking the world: galvanic vestibular stimulation as a novel sensation interface. ACM SIGGRAPH 2005 Emerging technologies, ACM (2005). + Video
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.
Sharing ideas and opinions
Challenges of interaction design
TA 4 — Thursday, October 24, 2013
- Fitts law experiment
- Perceptive experiments
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.
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:
- adapted to pen input and
- on a wall-size display, with any input device (from mice to mid-air gesture detection).
Try to leverage as much as possible the capabilities of the provided input/output devices:
- For example, one can easily scribble, strike through or circle objects of interest with a pen.
- In front of a wall-size display, the location of the user can be used to restrain the interaction scope: if far away, it could consider the entire display and, when close-up, only a portion of it.
You can send me a digitized version (scans or photos) of your storyboards by email.
TA 5 — Wednesday, November 6, 2013
TA 6 — Thursday, November 7, 2013
Models and theories
- Applying predictive models: Fitts law, GOMS.
- Applying interface design heuristics
TA 7 — Thursday, November 14, 2013
- Download the results file of the Fitts experiment.
- Soukoreff and MacKenzie's article (referenced below) provide an excellent Fitts analysis tutorial.
TA 8 — Thursday, November 21, 2013
We wrote a state machine for:
- a button
- a slider
- a draggable icon and a droppable area
Mentioned references and videos
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
- Francesco Bonadiman & Craig Kershaw, Bubble Cursor
- Dimitrios Tsiodoulos & Borce Stojkovski, OctoPocus
- Guilherme Carneiro & Walter Ferreira de Lima Filho, Drag-and-drop facilities
- Stella Christodoulaki & Thanasis Taousakos, Menus that follow the cursor
- Luca Pesavento & Yue Sun, Menus with hierarchy
- Olutosin Oduwole & Salah-Eddine Belouanas, Crossing techniques
- Argyro Moraiti & Mara Dumitru, Scrolling techniques
- Miguel Andres Rodriguez & Maria Gabriela Villalobos, Disambiguating target selection
- Ye Xiang & Chen Wang, Menus with value control
- Amira Chalbi & Paola Pàstor, Polygon detection
- Manfred Micaux & Cédric Foucault, Screen bezel interactions on touch-enabled devices
- Tianchi Li & Xin Guo, Window management
- Julien Christophe, Beautification and drawing tools
- Linkai Shang & Duc Van Nguyen, Zoomable User Interfaces
- Thomas Rum, Menus with hierarchy
- You should work in pairs.
- Each group chooses a different technique from the list below (you can also suggest an interaction technique inspired from another set of articles).
- You should check with us first what technique you plan implementing by either telling us directly or by sending us an email.
- the interaction technique as described in the article (you can add your own improvements or propose variations),
- a simple application that demonstrates the use of the technique.
- Write a small report (6 pages at most) with:
- a related work (new interaction techniques may have been introduced since),
- a summary of the article describing the technique (do not copy-paste the abstract),
- a description of the interaction technique you implemented (feel free to mention technical issues and limitations of the technique that were omitted in the paper).
- Make a presentation that:
- lasts no more than 8 minutes,
- introduces the context and motivation of the interaction technique,
- shows a running demo of your implementation.
Submission instructions To do before Sunday, December 15, 2013, midnight
- 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.
- 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).
- Email the archive:
Presentation instructions On Tuesday, December 17, 2013, from 9am to noon
- Presentations will take place on Tuesday, December 17, from 9am to noon in room E107.
- Each group presents in the order according to this schedule.
- Bring your own computer that you can connect to a projector with a VGA cable:
- make sure your computer is properly configured beforehand to handle the projector properly,
- get the demo of your application ready (avoid compilation/execution tasks during presentation),
- if you do not have a computer, ask the group before or after you in the schedule if they can lend you theirs.
- Make sure your presentation stays within the time limit (8 minutes). Our tight schedule forces us to be very strict about that.
- After your presentation, email us your slides:
- in PDF format,
- with the following subject:
[FHCI] Project slides.
Programming languages (and toolkits)
- Source code managers (SCM):
- Repository hosts:
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.
- Hinckley, K., Baudisch, P., Ramos, G., and Guimbretiere, F. Design and Analysis of Delimiters for Selection-Action pen Gesture Phrases in Scriboli. Proc. CHI, ACM (2005), 451–460. + Video
- Kurtenbach, G. and Buxton, W. Issues in Combining Marking and Direct Manipulation Techniques. Proc. UIST, (1991), 137–144.
- Kurtenbach, G. and Buxton, W. User Learning and Performance With Marking Menus. Proc. CHI, ACM (1994), 258–264.
Menus with hierarchy
These menus augment marking menus to provide access to hierarchically arranged commands.
- Zhao, S. and Balakrishnan, R. Simple vs. Compound Mark Hierarchical Marking Menus. UIST, (2004), 33–42. + Video
- Bailly, G., Lecolinet, E., and Nigay, L. Wave Menus: Improving the Novice Mode of Hierarchical Marking Menus. Proc. 11th IFIP TC 13 international conference on Human-computer interaction, (2007), 475–488. + Video
Menus with value control
These menus enable the selection and control of a parameter in a single gesture.
- McGuffin, M., Burtnyk, N., and Kurtenbach, G. FaST Sliders: Integrating Marking Menus and the Adjustment of Continuous Values. Proc. Graphics Interface, (2002), 35.
- Guimbretière, F. and Winograd, T. FlowMenu: Combining Command, Text, and Data Entry. Proc. UIST, (2000), 213–216. + Video
- Pook, S., Lecolinet, E., Vaysseix, G., and Barillot, E. Control Menus: Excecution and Control in a Single Interactor. Proc. CHI EA, (2000), 263–264.
Menus with cursive strokes
These menus use the curvature of a gesture as a discriminating factor to trigger different commands.
- Delaye, A., Sekkal, R., and Anquetil, E. Continuous Marking Menus for Learning Cursive pen-Based Gestures. Proc. Intelligent User Interfaces, (2011), 319–322. + Video
- Bailly, G., Lecolinet, E., and Nigay, L. Flower Menus: a new Type of Marking Menu With Large Menu Breadth, Within Groups and Efficient Expert Mode Memorization. Proc. AVI, (2008), 15–22. + Video
Menus that follow the cursor
These menus stay near or under the cursor to tackle the invocation issue.
- Fitzmaurice, G., Khan, A., Pieké, R., Buxton, B., and Kurtenbach, G. Tracking Menus. Proc. UIST, (2003), 71–79. + Video
- Trailing widgets: Forlines, C., Vogel, D., and Balakrishnan, R. HybridPointing: Fluid Switching Between Absolute and Relative Pointing With a Direct Input Device. Proc. UIST, (2006), 211–220. + Video
- Grossman, T., Hinckley, K., Baudisch, P., Agrawala, M., and Balakrishnan, R. Hover Widgets: Using the Tracking State to Extend the Capabilities of pen-Operated Devices. Proceedings of the SIGCHI conference on Human Factors in computing systems, ACM (2006), 861–870.
The bubble cursor extends the selection scope of the cursor in order to ease the selection of targets.
- Grossman, T. and Balakrishnan, R. The Bubble Cursor: Enhancing Target Acquisition by Dynamic Resizing of the Cursor’s Activation Area. Proc. CHI, ACM (2005), 281–290. + Video + Demo
- Tsandilas, T. and schraefel, m. c. Bubbling Menus: a Selective Mechanism for Accessing Hierarchical Drop-Down Menus. Proc. CHI, (2007), 1195–1204. + Video
- Chapuis, O., Labrune, J.-B., and Petriga, E. DynaSpot: speed-dependent area cursor. Proc. CHI, ACM (2009), 1391–1400. + Video
Pointing on touch-enabled mobile devices
Techniques aimed at making pointing on mobile devices more precise and easier.
- Roudaut, A., Huot, S., and Lecolinet, E. TapTap and MagStick: Improving one-Handed Target Acquisition on Small Touch-Screens. Proc. AVI, ACM (2008), 146–153.
- Kim, S., Yu, J., and Lee, G. Interaction Techniques for Unreachable Objects on the Touchscreen. Proceedings of the 24th Australian Computer-Human Interaction Conference, ACM (2012), 295–298.
Screen bezel interactions on touch-enabled devices
Techniques that leverage the screen bezel to trigger commands or to enter in explicit modes.
- Roth, V. and Turner, T. Bezel Swipe: Conflict-Free Scrolling and Multiple Selection on Mobile Touch Screen Devices. Proceedings of the 27th international conference on Human factors in computing systems, (2009), 1523–1526. + Video
- Wagner, J., Huot, S., and Mackay, W. BiTouch and BiPad: Designing Bimanual Interaction for Hand-Held Tablets. Proceedings of the 2012 ACM annual conference on Human Factors in Computing Systems, ACM (2012), 2317–2326.
- Jain, M. and Balakrishnan, R. User Learning and Performance With Bezel Menus. Proceedings of the 2012 ACM annual conference on Human Factors in Computing Systems, ACM (2012), 2221–2230.
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.
- Gustafson, S., Baudisch, P., Gutwin, C., and Irani, P. Wedge: Clutter-Free Visualization of off-Screen Locations. Proc. CHI, ACM (2008), 787–796. + Video
- Baudisch, P. and Rosenholtz, R. Halo: a Technique for Visualizing off-Screen Objects. Proc. CHI, ACM (2003), 481–488.
- Javed, W., Ghani, S., and Elmqvist, N. Polyzoom: Multiscale and Multifocus Exploration in 2d Visual Spaces. Proc. CHI, ACM (2012), 287–296. + Video
Techniques aimed at facilitating drag-and-drop operations.
- Baudisch, P., Cutrell, E., Robbins, D., et al. Drag-and-Pop and Drag-and-Pick: Techniques for Accessing Remote Screen Content on Touch-and pen-Operated Systems. Proc. INTERACT, (2003), 57–64. + Video
- Kobayashi, M. and Igarashi, T. Boomerang: Suspendable Drag-and-Drop Interactions Based on a Throw-and-Catch Metaphor. Proc. UIST, ACM (2007), 187–190. + Video
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.
- Fung, R., Lank, E., Terry, M., and Latulipe, C. Kinematic Templates: end-User Tools for Content-Relative Cursor Manipulations. Proc. UIST, (2008), 47–56. + Video
- Cheema, S., Gulwani, S., and LaViola, J. Quickdraw: Improving Drawing Experience for Geometric Diagrams. Proc. CHI, ACM (2012), 1037–1064.
- St. Amant, R. and Horton, T.E. Characterizing Tool use in an Interactive Drawing Environment. Proc. Smart Graphics, ACM (2002), 86–93.
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.
- Smith, R.B. and Taivalsaari, A. Generalized and Stationary Scrolling. Proc. UIST, ACM (1999), 1–9.
- Masui, T., Kashiwagi, K., and Borden,IV, G.R. Elastic Graphical Interfaces to Precise Data Manipulation. Conference companion on Human factors in computing systems, ACM (1995), 143–144.
Techniques leveraging the lens metaphor to combine selection and edition of objects in a single click.
- Bier, E.A., Stone, M.C., Pier, K., Buxton, W., and DeRose, T.D. Toolglass and Magic Lenses: the see-Through Interface. Proc. Computer Graphics and Interactive Techniques, (1993), 73–80. + Video
- Terry, M. and Mynatt, E.D. Side Views: Persistent, on-Demand Previews for Open-Ended Tasks. Proc. UIST, ACM (2002), 71–80. + Video
Techniques transforming drawings into interactive interfaces.
Dynamic queries let users explore quickly a multidimensional data space.
- Williamson, C. and Shneiderman, B. The Dynamic HomeFinder: eValuating Dynamic Queries in a Real-Estate Information Exploration System. Proc. ACM SIGIR conference on Research and development in information retrieval, ACM (1992), 338–346.
- Ahlberg, C., Williamson, C., and Shneiderman, B. Dynamic Queries for Information Exploration: an Implementation and Evaluation. Proc. CHI, ACM (1992), 619–626. + Video
- Ahlberg, C. and Shneiderman, B. Visual Information Seeking: Tight Coupling of Dynamic Query Filters With Starfield Displays. Proc. CHI, ACM (1994), 313–317.
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.
- Perlin, K. and Fox, D. Pad: an Alternative Approach to the Computer Interface. Proc. Computer Graphics and Interactive Techniques, ACM (1993), 57–64.
- Bederson, B.B. and Hollan, J.D. Pad++: a Zooming Graphical Interface for Exploring Alternate Interface Physics. Proc. UIST, ACM (1994), 17–26. + Video
- Bederson, B.B., Meyer, J., and Good, L. Jazz: an Extensible Zoomable User Interface Graphics Toolkit in Java. Proc. UIST, ACM (2000), 171–180.
Techniques introducing novel graphical object alignment tools.
- Raisamo, R. and Räihä, K.-J. A new Direct Manipulation Technique for Aligning Objects in Drawing Programs. Proc. UIST, ACM (1996), 157–164.
- Raisamo, R. An Alternative way of Drawing. Proc. CHI, ACM (1999), 175–182.
- Baudisch, P., Cutrell, E., Hinckley, K., and Eversole, A. Snap-and-go: Helping Users Align Objects Without the Modality of Traditional Snapping. Proc. CHI, (2005), 301–310.
These techniques make use of real world metaphors to ease window management.
- Beaudouin-Lafon, M. Novel Interaction Techniques for Overlapping Windows. Proc. UIST, (2001), 153–154.
- Dragicevic, P. Combining Crossing-Based and Paper-Based Interaction Paradigms for Dragging and Dropping Between Overlapping Windows. Proc. UIST, (2004), 193–196. + Video + Demo
- Faure, G., Chapuis, O., and Roussel, N. Power Tools for Copying and Moving: Useful Stuff for Your Desktop. Proc. CHI, ACM (2009), 1675–1678.
Disambiguating target selection
These techniques tackle the issue of selecting small, occluded or tightly layered targets.
- Ramos, G., Robertson, G., Czerwinski, M., et al. Tumble! Splat! Helping Users Access and Manipulate Occluded Content in 2d Drawings. Proc. AVI, ACM (2006), 428–435. + Video
- Moscovich, T. Contact Area Interaction With Sliding Widgets. Proc. UIST, (2009), 13–22. + Video
- Yatani, K., Partridge, K., Bern, M., and Newman, M.W. Escape: a Target Selection Technique Using Visually-Cued Gestures. Proc. CHI, (2008), 285–294. + Video
These goal crossing techniques enable fluid selection and combination of commands that point-and-click techniques do not provide.
- Apitz, G. and Guimbretière, F. CrossY: A Crossing-Based Drawing Application. Proc. UIST, ACM (2004), 3–12. + Video
- Dixon, M., Guimbretière, F., and Chen, N. Optimal Parameters for Efficient Crossing-Based Dialog Boxes. Proc. CHI, ACM (2008), 1623–1632.
These papers introduce algorithms to detect corners from a user input stroke gesture.
- Agar, P. and Novins, K. Polygon Recognition in Sketch-Based Interfaces With Immediate and Continuous Feedback. Proc. Computer graphics and interactive techniques in Australasia and South East Asia, ACM (2003), 147–150.
- Wolin, A., Eoff, B., and Hammond, T. ShortStraw: A Simple and Effective Corner Finder for Polylines. Eurographics Association (2008), 33–40.
- Xiong, Y. and LaViola,Jr., J.J. Revisiting ShortStraw: improving corner finding in sketch-based interfaces. Proc. Eurographics Symposium on Sketch-Based Interfaces and Modeling, ACM (2009), 101–108.
- Wolin, A., Paulson, B., and Hammond, T. Sort, Merge, Repeat: an Algorithm for Effectively Finding Corners in Hand-Sketched Strokes. Proc. Eurographics Symposium on Sketch-Based Interfaces and Modeling, (2009), 93–99.
- Wolin, A., Field, M., and Hammond, T. Combining corners from multiple segmenters. Proceedings of the Eighth Eurographics Symposium on Sketch-Based Interfaces and Modeling, ACM (2011), 117–124.