1

The Affordances of Pens and Paper

CS160: User InterfacesManeesh Agrawala

2

3

• Clean interface• Good defaults (guess meaning of query)

4

Results in context

WikiPut all your discussion thoughts in a single comment

Clearly indicate which reading each thought pertains to

5

ReviewThe Design Cycle

Brainstorming

7. Evaluation 1. Acceptance

2. Analysis

3. Definition

4. Ideation5. Idea selection

6. Implementation

Topics• Affordances• Anoto Digital Pens• PADD• ButterflyNet• Other Applications

6

Affordances

“… the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used.

A chair affords support and therefore affords sitting. A chair can also be carried.”

The Design of Everyday Things. 1988. Don Norman

7

What are the affordances of …

Knobs

Slots

Balls

Glass

Wood

What about pens and paper?Pens

Paper

8

Affordances of pens and paperEasy to draw, write, annotate, …

– Use pens to create ink marks on paperEasy to read

– Dark ink on high contrast white paper– Can see marks in bright light and in low light– High resolution – can pack in lots of information

Easy to manipulate– Two-handed interactions and tactile feedback– Lightweight and flexible – can fold and tear easily

Easy to spread out and share– Large size facilitates collaboration– Can work with multiple document at once

Cheap– Easy to get more (but also easy to waste)

9

Easy to draw, write, annotate, …Easy to readEasy to manipulateEasy to spread out and shareCheap

Paper VS Computer

Easy to draw, write, annotate, …Easy to readEasy to manipulateEasy to spread out and shareCheap

Very difficult to modify and update– Modification requires digital tools– Printing is slow and often not possible

Expensive to distribute and archive– Bits are much easier to move and save

Paper VS Computer

10

Anoto Digital Pens

Captures position (x, y) in absolute coordinates, time (t) and pressure (pen up, down)

11

What the pen sees

Transferring Data to Computer

Manual transfer via dock Automatic transfer via Bluetooth

Pen also provides page ID and pen ID

12

Fly Pentop Computer [www.leapfrog.com]

Adds audio output to Anoto pensDesigned as (educational) toy for children

Paper VS Anoto

13

Anoto VS Computer

PADD: Paper Augmented Digital Documents

Francois Guimbretiere

14

15

16

17

18

ButterflyNet

Ron Yeh, Chunyuan Liao, Scott R. Klemmer, Francois Guimbretiere, Brian Lee, Boyko Kakaradov,

Jeannie Stamberger, Andreas Paepcke

19

Structure Access Transform Share

Field Biologists

Capture- Paper notes- Photographs- Physical specimen

Field tools are…

Mobile

Physical

Flexible

20

Video

Different AdvantagesPaper Notebooks [Robust, ∞ “Battery”, …]

Computers [Search, Storage, Sharing…]

21

Other Uses of Anoto Pens

Teaching Sketching [Cheng et al. 2004]

Compare styles and stages of drawing of different artists

Compare sequence of drawing operations(drew perspective, then section, then plan view)

22

Test for Driver Impairment [Davies et al.]

Tiplady Tracking Test: User follows track with a pen as quickly as possible while avoiding edge of track and obstacles.

Trail-Making Test: Users join dots in numbered sequence as quickly as possible.

Maps [Cohen & McGee 04]

Paper map– large size– high resolution– robust

Anoto allows– Remote collaboration– Connection to digital

information

Other types/uses of maps?

23

Shared Family Calendar [Plaisant et al. 06]

Why is paper calendar useful?How can we facilitate sharing of calendars?

SummaryPens and paper have different affordances than computers

Anoto pens fall somewhere in between

Best to design interfaces and applications that take advantage of best of both worlds

24

Next TimeIndividual project proposal due before class (Sep 11)

The Psychopathology of Everyday Things. The Design of Everyday Things. Chap 1. Norman.

Tangible multimodal interfaces for safety-critical applications. CACM. 2004. Cohen & McGee.