COMS W4170 Interaction Devices 3 - cs.columbia.edu€¦ · Feiner, COMS W4170, Fall 2017 1 COMS...

9
Feiner, COMS W4170, Fall 2017 1 COMS W4170 Interaction Devices 3 Steven Feiner Department of Computer Science Columbia University New York, NY 10027 November 2, 2017 2 Keyboard: Hardware Device Issues Keyboard design Keyboard layout CR, BSP, DEL, CTRL, FN Cursor keys Number pad (123 on top vs. bottom) QWERTY, DSK,… Key size/shape Flat vs. contoured top Key type E.g., membrane Scale

Transcript of COMS W4170 Interaction Devices 3 - cs.columbia.edu€¦ · Feiner, COMS W4170, Fall 2017 1 COMS...

Page 1: COMS W4170 Interaction Devices 3 - cs.columbia.edu€¦ · Feiner, COMS W4170, Fall 2017 1 COMS W4170 Interaction Devices 3 Steven Feiner Department of Computer Science Columbia University

Feiner, COMS W4170, Fall 2017

1

COMS W4170Interaction Devices 3

Steven FeinerDepartment of Computer ScienceColumbia University New York, NY 10027

November 2, 2017

2

Keyboard: Hardware Device Issues

Keyboard designKeyboard layout

CR, BSP, DEL, CTRL, FNCursor keysNumber pad (123 on top vs. bottom)QWERTY, DSK,…

Key size/shapeFlat vs. contouredtop

Key typeE.g., membrane

Scale

Page 2: COMS W4170 Interaction Devices 3 - cs.columbia.edu€¦ · Feiner, COMS W4170, Fall 2017 1 COMS W4170 Interaction Devices 3 Steven Feiner Department of Computer Science Columbia University

Feiner, COMS W4170, Fall 2017

3

Keyboard: Hardware Device Issues

Keyboard designKeyboard layout

CR, BSP, DEL, CTRL, FNCursor keysNumber pad (123 on top vs. bottom)QWERTY, DSK,…

Key size/shapeFlat vs. contouredtop

Key typeE.g., membrane

Scale

www.safetype.comwww.microsoft.com

twiddler.tekgear.com

en.wikipedia.org/wiki/Datahand

orbitouch.com

www.kinesis-ergo.com

www.infogrip.com

4

Locator

Specifies a locationCan be used to select, position, orient, specify path, quantify, enter text

Page 3: COMS W4170 Interaction Devices 3 - cs.columbia.edu€¦ · Feiner, COMS W4170, Fall 2017 1 COMS W4170 Interaction Devices 3 Steven Feiner Department of Computer Science Columbia University

Feiner, COMS W4170, Fall 2017

5

Locator: Hardware Device Issues

GripStylus vs. mouse

Time to pick upActive vs. passive stylusMouse tracking technologyCase study: Mouse design

ShapeButtons…

SRI mouse

6

Case Study: Mouse Design

Page 4: COMS W4170 Interaction Devices 3 - cs.columbia.edu€¦ · Feiner, COMS W4170, Fall 2017 1 COMS W4170 Interaction Devices 3 Steven Feiner Department of Computer Science Columbia University

Feiner, COMS W4170, Fall 2017

8

Case Study: Hacking a new deviceSoap Baudisch, P., Sinclair, M, and Wilson, A. Soap: A mouse-like pointing device that works in mid-air. Proc. UIST 2006, 43–46

Wireless optical mouse internals repackaged in lozenge-shaped plastic “core” and surrounded by cloth “hull”Manipulation approaches

“Joystick”Similar to handheld spring-loaded joysticks and “upside-down optical mouse”-like devices

“Belt”Drag hull withcore stationary

“Soap”Filp core withhull stationary

http://www.patrickbaudisch.com/projects/soap/index.html

Joystick Belt Soap

9

Three-State Model W. Buxton, A Three-State Model of Graphical Input. Proc. INTERACT '90, 449–456

MouseTwo states: tracking (button up), dragging (button down)

State names are just examples

Touch Tablet/Pad (separate from display)

Two states: out of range (not touching), tracking (touching)

State 0 is used to designate a state the system cannot senseState 1–State 0 transition = “pen has left the paper”

Does this generate an explicitevent?

Mouse

Touchtablet/pad

Note: Actual devices shown in photos may have a superset of the states listed here

Page 5: COMS W4170 Interaction Devices 3 - cs.columbia.edu€¦ · Feiner, COMS W4170, Fall 2017 1 COMS W4170 Interaction Devices 3 Steven Feiner Department of Computer Science Columbia University

Feiner, COMS W4170, Fall 2017

10

Three-State Model W. Buxton, A Three-State Model of Graphical Input. Proc. INTERACT '90, 449–456

Stylus with Tip SwitchThree states: out of range (not touching), tracking (touching, with switch open), dragging(touching, with switch closed)

Stylus with tip switch

11

Three-State Model W. Buxton, A Three-State Model of Graphical Input. Proc. INTERACT '90, 449–456

Note: State names (tracking, dragging) are just examples. E.g., state 2 could instead be drawing, interacting with a menu,…Note: Tracking is sometimes known as hovering (esp. when the device doesn’t change position for some set amount of time)

Multi-button MouseThree states: tracking(buttons up), dragging a (button a down), dragging b (button bdown)

Could use double clicking on a one-button mouse to distinguish among states 2a/bCould also have state 2ab (both buttons down)

Example tasks

Page 6: COMS W4170 Interaction Devices 3 - cs.columbia.edu€¦ · Feiner, COMS W4170, Fall 2017 1 COMS W4170 Interaction Devices 3 Steven Feiner Department of Computer Science Columbia University

Feiner, COMS W4170, Fall 2017

12

Three-State Model W. Buxton, A Three-State Model of Graphical Input. Proc. INTERACT '90, 449–456

How to support selection in 0–1 state device?

Use state 1–state 0 transition (liftoff)Use double tap/clickUse timeout cue (point at object for time t ≥ tselect)Use pressure threshold (if device can detect >1 level of pressure)Use number of fingers or area of touch (if device can detect)

Use other hand on other device(e.g., to push a button)Add a button to device

Touchtablet/pad

13

Three-State Model W. Buxton, A Three-State Model of Graphical Input. Proc. INTERACT '90, 449–456

Direct input devices (e.g., touch screen)

Out of range state 0 actually supports passive tracking since unsensed pointing device/finger can act as its own cursor

Not state 1, since system cannot sense it

Directinput device(e.g., touchscreen)

Indirectinput device(e.g., touchtablet/pad)

In contrast, compare with the [indirect] touch tablet/pad (in which finger on tablet/pad cannot be viewed incontext of screen in state 0)

Same gesture, different context

Page 7: COMS W4170 Interaction Devices 3 - cs.columbia.edu€¦ · Feiner, COMS W4170, Fall 2017 1 COMS W4170 Interaction Devices 3 Steven Feiner Department of Computer Science Columbia University

Feiner, COMS W4170, Fall 2017

14

Analyzing Input Devices S. Card, J. Mackinlay, and G. Robertson. A morphological analysis of the design space of input devices. ACM TOIS, 9(2), 1991, 99–122.

Mouse

Legacy AM/FMradio

15

Fitts’s Law P. Fitts, 1954

Predictive model of time MT to move a distance A to target of width W.

MT increases with increasing A, decreases with increasing WFarther/smaller target longer time to reachCloser/bigger target shorter time to reachMT = C1 + C2 ID

ID = Index of Difficulty (function of A and W)C1 = Device/appendage-dependent constantC2 = Device/appendage-dependent constant

A

W

Page 8: COMS W4170 Interaction Devices 3 - cs.columbia.edu€¦ · Feiner, COMS W4170, Fall 2017 1 COMS W4170 Interaction Devices 3 Steven Feiner Department of Computer Science Columbia University

Feiner, COMS W4170, Fall 2017

16

Fitts’s Law P. Fitts, 1954

Original task used electrical contactsParameters varied from A = 1”, W = 1” toA = 16”, W = .25”ID = log2 (2A / W)

Conventionallymeasured in bits,after Shannon

ID = log2 (A / W + 1)Later formulationhas slightly better fit,and assures positive ID (Mackenzie) A

W

In original reciprocal tapping task, participant alternated between tapping two bars

17

Fitts’s Law P. Fitts, 1954

MT = C1 + C2 IDwhere ID measured in bits

C2 measured in secs/bit, ca. .1 sec/bit (range ca. 83 msec/bit – 430 msec/bit)

E.g., higher for button-down draggingIP (Index of Performance) = 1 / C2

Measured in bits/sec (ca. 12 – 2.3 bits/sec)Also known as throughput or bandwidth

MT = C1 + ID / IP

Page 9: COMS W4170 Interaction Devices 3 - cs.columbia.edu€¦ · Feiner, COMS W4170, Fall 2017 1 COMS W4170 Interaction Devices 3 Steven Feiner Department of Computer Science Columbia University

Feiner, COMS W4170, Fall 2017

18

Fitts’s Law P. Fitts, 1954

MT = … + C2 IDC2 = slope

Higher C2 means steeper curve, corresponding to lower IP (1/C2)

MT = C1 + C2 IDC1 accounts for intercept offset from 0

Easy

Hard

ID (bits)

MT(secs)

MT = C1 + C2 log2 (A / W + 1)