Design Tools. michael bernstein spring cs376.stanford.edu

Transcription

1 Design Tools michael bernstein spring 2013 cs376.stanford.edu

2 Design tools should... [Hartmann, PhD thesis 09] Decrease UI construction time Isolate designers from implementation details Enable designers to explore an interface technology previously reserved to engineers or other technology experts 2

3 Goal: facilitate rapid iteration [Hartmann, PhD thesis 09] Prototypes enable exploration and iteration around concrete artifacts The more fluid the prototyping process is, the more you can learn before you sink time into engineering 3

4 Early stage design 4

5 What tools do designers use? [Myers et al., VLHCC 08] Survey of 259 interaction designers

6 SILK: Sketching Interfaces Like Krazy [Landay, CHI 96] Combine the fluidity of paperbased sketching with the interactivity of interactive tools Technique: sketch recognition of basic UI components 6

7 SILK: Sketching Interfaces Like Krazy [Landay, CHI 96] Combine the fluidity of paperbased sketching with the interactivity of interactive tools Technique: sketch recognition of basic UI components 6

8 SILK: Sketching Interfaces Like Krazy [Landay, CHI 96] Combine the fluidity of paperbased sketching with the interactivity of interactive tools Technique: sketch recognition of basic UI components Led to: Balsamiq 7

9 DENIM: web site storyboarding [Lin et al., CHI 00] Enable fluid, informal interactions for web site design Work at a higher level of abstraction than HTML 8

10 DENIM: web site storyboarding [Lin et al., CHI 00] Enable fluid, informal interactions for web site design Work at a higher level of abstraction than HTML 8

11 Designer s Outpost: fluid interactive brainstorming [Klemmer et al., UIST 01] 9

12 Designer s Outpost: fluid interactive brainstorming [Klemmer et al., UIST 01] 9

13 Design galleries: comparing alternatives [Marks et al., SIGGRAPH 97] Automatically generate perceptuallyvarying alternatives within a design space 10

14 Juxtapose: interactive parameter tuning [Hartmann et al., UIST 09] 11

15 Juxtapose: interactive parameter tuning [Hartmann et al., UIST 09] 11

16 Juxtapose: interactive parameter tuning [Hartmann et al., UIST 09] 12

17 Led to: Inventing on Principle [Victor 2012] 13

18 Led to: Inventing on Principle [Victor 2012] 13

19 Physical prototyping 14

20 The challenge of physical prototyping Prototype the bits, or prototype the atoms? 15

21 The challenge of physical prototyping Prototype the bits, or prototype the atoms? Goal: lower the threshold to prototype interactive systems that depend on electronics and physical materials 15

22 Phidgets [Greenberg and Fitchett, UIST 01] USB plug-andprogram I/O devices servos LEDs buttons sliders Goal: program physical devices like you would a GUI widget 16

23 Phidgets [Greenberg and Fitchett, UIST 01] USB plug-andprogram I/O devices servos LEDs buttons sliders Goal: program physical devices like you would a GUI widget 16

24 Led to: Arduino Maker board for artists, programmers and hobbyists 17

25 Led to: Makey Makey [Silver et al., TEI 12] Alligator clips map onto keystrokes

26 Led to: Makey Makey [Silver et al., TEI 12] Alligator clips map onto keystrokes

27 d.tools: prototyping behavior via statecharts [Hartmann et al., UIST 06] Plug-and-play HW, visual statechart behaviors

28 d.tools: prototyping behavior via statecharts [Hartmann et al., UIST 06] Plug-and-play HW, visual statechart behaviors

29 Authoring sensor-based interaction by demonstration [Hartmann et al., CHI 07]

30 Authoring sensor-based interaction by demonstration [Hartmann et al., CHI 07]

31 Fabricating custom capacitive hardware [Savage et al., UIST 12] Author behaviors; software does circuit layout

32 Fabricating custom capacitive hardware [Savage et al., UIST 12] Author behaviors; software does circuit layout

33 Behavior prototyping 22

34 Prototyping for daily, long-lived activities [Li and Landay, CHI 08] Rather than treating sensors or states as the top-level abstraction, focus on activites 23