d.note Talk - CHI2010

8/9/2019 d.note Talk - CHI2010

1/58

Bjrn HartmannUniversity of California, Berkeley

EECS, Computer Science Division

Sean Follmer, Antonio Ricciardi,Timothy Cardenas, Scott Klemmer

Stanford University HCI Group

Revising User Interfaces ThroughChange Tracking, Annotations, and Alternatives

d.note


2/58

2

Revision tools forword processing:

Comments Change tracking Change

visualization


3/58

3

Revision toolsfor user interfacedesigns?

Revise:wrongmenu

itemhighlighte

d

4differentmen

u

systems

-confusing!


4/58

Email survey of 10 UI interaction designers

Ad hoc choices of digital, physical media: Printing out screens and sketching on them

Posting digital screenshots to a wiki

Using a bug tracking database and revision control

4


5/58

Designers prefer expressing changes to thecurrent design through sketching

Designers prefer to capture history overtime through digital media

5


6/58

How can revision techniques ofcommenting, change tracking, and change

visualization be applied to the revision ofuser interfaces?

Are there techniques unique to UI design?

How do interactive revision tools changedesigners practices?

6


7/58

Editable Graphical Histories, Kurlander,

IEEE Visual Languages88Co-existence of paper and digital

information for office work

Outpost Design Histories,

Klemmer, CHI02Capture & retrieval for web site design

7


8/58

Capturing Design HistoryEditable Graphical Histories, Kurlander,

IEEE Visual Languages88Co-existence of paper and digital

information for office work

Outpost Design Histories,

Klemmer, CHI02Capture & retrieval for web site design

8


9/58

DENIM, Lin, CHI00Sketch-based prototyping of web siteinformation architecture

Topiary, Li, UIST04Prototyping of mobile, location-awareapplications

9


10/58

DENIM, Lin, CHI00Sketch-based prototyping of web siteinformation architecture

Topiary, Li, UIST04Prototyping of mobile, location-awareapplications

10


11/58

Annotation ToolsPaper Augmented Digital Documents

Guimbretiere, UIST03Digital pen marks on paper change

underlying document

ModelCraft, Song, UIST06Digital pen marks on 3D objects changeCAD model

11


12/58

Annotation ToolsPaper Augmented Digital Documents

Guimbretiere, UIST03Digital pen marks on paper change

underlying document

ModelCraft, Song, UIST06Digital pen marks on 3D objects changeCAD model

12


13/58

Interaction design specifies bothappearance and behavior.

What tools do exist for revising each?

13


14/58

14

Microsoft & Pixar, from Buxton, Sketching User Experiences.


15/58

Diff tools show two versions side-by-side

15


16/58

Goals:

Enable rapid expression of changes,at different levels of representation

Communicate clearly what changed (and how)

16


17/58

Goals:

Enable rapid expression of changes,at different levels of representation

Communicate clearly what changed (and how)

Approach: Use sketching as input

Develop visual revision language

Revision of both design and source

17


18/58

18

d.note: revision techniques for UI prototypes


19/58

19



20/58

20


21/58

21


22/58

22

Adding States Adding Transitions Adding Graphics

Removing States Removing Transitions Adding Comments


23/58

23



24/58

24


25/58

25


26/58

26


27/58

27

Alternatives share:

Incoming transitions

Alternatives define:

Screen graphics Outgoing transitions


28/58

28

Gestures are recognized by Wobbrocks $1recognizer with multiple templates for eachgesture.


29/58

29

How does expressing revisions interactively

compare with sketching on static images?


30/58

30

Within-subjects design, n=12

Each participant revises two prototypes:

one with d.note,one by sketching on a static image

Static condition assigned first,

prototype counterbalanced


31/58

31


32/58

32


33/58

Digital Camera Navigation Prototype

33


34/58

Keychain Photo Viewer Prototype

34


35/58

35


36/58

36


37/58

37


38/58

38


39/58

39


40/58

With d.note, participants: wrote less

(2.3 vs 9.8 mean text comments, p


41/58

Ability to test proposed changes(7 of 12 participants)

Ability to make functional changes (6)

Less cluttered than sketching alone (2)

Notation easier to interpret (1)

41


42/58

Commenting is more difficult(3 participants)

Tool has steeper learning curve (2)Danger of getting stuck on details (2)

42


43/58

It was easier to write/sketch withproduction software than with our tool.

Formal notation reduced the need forexplanations.

43


44/58

Immediate testing enabled discovery oferrors and ambiguities.

44


45/58

Participants focused on single-staterevisions because the tool gave them moreleverage to do so.

45


46/58

46

How well can others interpret

interactively created revisions?


47/58

47

New set of participants (n=8) rates theoutput of the last study

Each participant rates 4 diagrams:camera revised with d.notecamera revised without d.note

keychain revised with d.note

keychain revised without d.note


48/58

48


49/58

49

no significant difference - t(30)=0.25, p=0.15

error bars show standard error

meannumberofrevisionslisted

interactive revision


50/58

50

significant difference - t(30)=1.90, p


51/58

51

Changes are concrete and specific(4 of 8 participants)

Revisions contain proposed solutions (3)


52/58

52

Visual clutter in regions of dense changes(5 participants)

Hard to glean motivation for changes (4)


53/58

53

Reduce visual complexity inrevised diagrams

Encourage capture of rationale


54/58

54


55/58

An operationalization of common revisionoperations for user interfaces.

55


56/58

An operationalization of common revisionoperations for user interfaces.

New revision operationsunique to user interfaces:testing proposed changes immediately

specifying alternatives to existing functionality

56


57/58

57

Interactive revision offer benefits:immediate testing and formal notation lead toincreased clarity of revisions

For a tradeoff:formal notation discouraged broad, conceptual changes;capturing motivation for changes

Future work:encourage revisions at multiple levels of abstraction


58/58

[email protected]
http://hci.berkeley.edu/mailto:[email protected]://hci.berkeley.edu/mailto:[email protected]:[email protected]