Spreadsheets on Interactive Surfaces: Breaking through the Grid with the Pen

Supplemental Material
Vincent Cavez, Caroline Appert, Emmanuel Pietriga
ACM Transactions on Computer-Human Interaction (ToCHI), Volume 31, Issue 2, April 2024
DOI: 10.1145/3630097

Table of Contents

  1. Video
  2. Analysis of Pen + Touch Interaction in Commercial Spreadsheet Program
  3. Elicitation Study
  4. Software Prototype
  5. Semi-structured Qualitative Study

1. Companion Video

2. Analysis of Pen + Touch Interaction in Commercial Spreadsheet Program

Hardware Operating System Program
Apple iPad Pro 11" + Apple Pencil 2 Apple iPadOS 15.5 Apple Numbers 12.1
Apple iPad Pro 11" + Apple Pencil 2 Apple iPadOS 15.5 Microsoft Excel 2.63.1
Apple iPad Pro 11" + Apple Pencil 2 Apple iPadOS 15.5 Google Sheets 1.2022.26200 in Apple Safari
Microsoft Surface Book Microsoft Windows 10 Pro Microsoft Excel 2301
Microsoft Surface Book Microsoft Windows 10 Pro Google Sheets in Google Chrome 103
Apple Macbook Pro + Wacom Cintiq Pro 24" Apple macOS 12.4 Apple Numbers 12.1
Apple Macbook Pro + Wacom Cintiq Pro 24" Apple macOS 12.4 Microsoft Excel 16.63.1
Apple Macbook Pro + Wacom Cintiq Pro 24" Apple macOS 12.4 Google Sheets in Google Chrome 103
PC Workstation + Wacom Cintiq Pro 24" Microsoft Windows 10 Pro Microsoft Excel 2301
PC Workstation + Wacom Cintiq Pro 24" Microsoft Windows 10 Pro Google Sheets in Google Chrome 103

The raw table of all input events and actions triggered, per configuration, is available as an Excel file.

3. Elicitation Study

Apparatus

The experiment ran on a Windows 10 Pro desktop workstation (Intel Xeon CPU/32GB RAM) connected to a Wacom Cintiq Pro display (24", 4K resolution) equipped with a Wacom Pro Pen 2.

It was developed as a Web app. The code is also available for download. Unzip and access through a local Web server.

Statistical Analyses and Plots

Referents tested in the study

All 28 referents tested in the study are detailed below, grouped by category.

4. Software Prototype

The Web-based prototype implementing all interaction techniques and used for the Semi-structured Qualitative Study is developed entirely in JavaScript primarily with D3.js. It runs on the client side, but NodeJS is required for some dependency management at setup time.

To run the prototype, a Web browser fully compatible with the W3C Pointer API (Level 2) is required.

The prototype has been tested extensively with the Chromium Web browser (v96) on a Windows 10 PC connected to a Wacom Cintiq Pro. It also runs for instance on a Microsoft Surface Studio 2+, although some interactions that involve two simultaneous contact points are not supported so far because of input event API compatibility issues (the level of support for the W3C pointer API varies significantly across Web browsers and operating systems).

  1. Download the archive and unzip it.
  2. Run npm install from the main directory to get MyScript iinkjs (this requires NodeJS to be installed on your computer).
  3. Run a local Web server to enable HTTP access from your local browser to the main directory. Simple options include running python3 -m http.server from a Terminal, or running a Live Server from a code editor such as VSCode.
  4. Access http://localhost from your Browser.
screenshot of the prototype

5. Semi-structured Qualitative Study

Apparatus

Same apparatus as the elicitation study.

Participants used our Web-based prototype implementation of the interaction model.

Statistical Analyses and Plots