intro: design and creation - stanford university · 10/04/2013 · intro: design and creation...
TRANSCRIPT
![Page 1: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/1.jpg)
Intro:Design and Creation
michael bernsteinspring 2013cs376.stanford.edu
![Page 2: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/2.jpg)
2
Design
ImplementEvaluate
![Page 3: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/3.jpg)
Design and creation are not static processes.
They can be studied, supported and improved.
3
![Page 4: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/4.jpg)
4
Design
ImplementEvaluate
![Page 5: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/5.jpg)
4
Design
ImplementEvaluate
How might we facilitate and empower this process?
![Page 6: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/6.jpg)
5
Design
ImplementEvaluate
Brainstorming processEarly-stage design tools
Programming toolsWYSIWYG design toolsRapid prototyping tools
Study strategiesCognitive modeling
![Page 7: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/7.jpg)
6
“Enlightened trial and error outperforms the planning of flawless intellect.”- David Kelley
![Page 8: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/8.jpg)
Threshold/Ceiling Tradeo![Myers, Hudson and Pausch, TOCHI 2000]
7
Di!culty of use
Sophistication of what can be created
C++
Balsamiq
Web
Server-side
Client-side
![Page 9: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/9.jpg)
8
Design tools
![Page 10: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/10.jpg)
Goal: facilitate rapid iteration
� 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
9
![Page 11: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/11.jpg)
Sketch the interaction and produce working systems� SILK [Landay, CHI ’96]
10
![Page 12: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/12.jpg)
Sketch the interaction and produce working systems� Led to: Balsamiq
11
![Page 13: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/13.jpg)
d.tools: Prototyping Physical Computing Experiences
� We’ll read this paper next month:
12
![Page 14: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/14.jpg)
Closed-loop parameter tuning
� Juxtapose [Hartmann et al., UIST 2009]�
13
![Page 15: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/15.jpg)
Closed-loop parameter tuning
� Juxtapose [Hartmann et al., UIST 2009]�
13
![Page 16: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/16.jpg)
Closed-loop parameter tuning
� Juxtapose [Hartmann et al., UIST 2009]�
14
![Page 17: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/17.jpg)
Closed-loop parameter tuning
� Led to: Inventing on Principle [Victor 2012]�
15
![Page 18: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/18.jpg)
16
Design process
![Page 19: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/19.jpg)
Improve the process, improve the output� The design process we teach in human-
computer interaction need not be fixed!� Many techniques we use today were once
prototyped in research labs.
17
![Page 20: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/20.jpg)
Wizard-of-Oz Prototypes
� An iterative design methodology for user-friendly natural language o!ce information applications [Kelley, TOIS ’84]� “Central to the methodology is an experimental
simulation which I call the OZ paradigm, in which experimental participants are given the impression that they are interacting with a program that understands English as well as another human would.”
18
![Page 21: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/21.jpg)
Iterate on a design, orcreate parallel alternatives?Dow et al., TOCHI 2010
� Feedback on five iterations or five parallel alternatives
� Quality measured via ad clickthrough
� Designs generated in parallel condition had ~1/3 more clicks
� More next month...19
![Page 22: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/22.jpg)
Participatory Design[Schuler and Namioka ’93]
� Developed in Scandinavia, and later ported to the United States design tradition
� Involve the eventual users deeply in the design process� Initial exploration� Problem definition� Develop and focus ideas� Evaluation
20
![Page 23: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/23.jpg)
21
(End-user) programming
![Page 24: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/24.jpg)
Garbage in, garbage out
� The quality of the interactive systems we build depends on the tools we have at our disposal
� Toolkits and software engineering UIs� Make programming easier to learn and debug,
more powerful and more natural
� End-user programming� Make programming more accessible to
non-engineers
22
![Page 25: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/25.jpg)
Programming toolkits
� Seek to understand programmers’ mental model and task goals
� Then, design better support!� D3: Data-Driven Documents
[Bostock, Ogievetsky and Heer, Visweek ’11]
23
![Page 26: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/26.jpg)
Software engineering interfaces
� Augment the development environment rather than the programming language
� Next month: Whyline [Ko and Myers, CHI ‘08]
24
![Page 27: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/27.jpg)
End-user programming
� Lower the threshold to writing programs� Allow users with little prior programming
skill to edit or author behaviors� e.g., Chickenfoot [Bolin et al., UIST 2008]
25
isbn = find('number just after isbn')with (fetch('libraries.mit.edu')) {
pick('Keywords’);enter(isbn)click('Search')link=find('link just after Location')
}// back to Amazonif (link.hasMatch) {
insert(before('first rule after "Buying"'), link.html)
}
![Page 28: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/28.jpg)
Programming by demonstration
� Induce a program behind the scenese.g., EAGER [Cypher, CHI ’91]
26
![Page 29: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/29.jpg)
Programming by demonstration
� Induce a program behind the scenese.g., EAGER [Cypher, CHI ’91]
26
![Page 30: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/30.jpg)
What’s di"cult about design and creation research?� Design and programming tools:
� Slight accelerations are easy; larger-scale improvements are not
� Design process:� Multidimensional and di!cult to measure
27
![Page 31: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/31.jpg)
What’s exciting about design and creation research?� Existing creation tools are getting better
every day� The design process is now an accepted
practice in industry, but still malleable� Your contributions are generative: they
lead to new designs and programs that others will create tomorrow
28
![Page 32: Intro: Design and Creation - Stanford University · 10/04/2013 · Intro: Design and Creation michael bernstein spring 2013 cs376.stanford.edu. 2 Design ... An iterative design methodology](https://reader034.vdocuments.mx/reader034/viewer/2022051814/6039056f90ba9e2b7a23bf50/html5/thumbnails/32.jpg)
Announcements
� Project abstract draft due Monday� Research question� Hypothesis� (Some) related work� Theoretical contribution� Method� Biggest risk
� We very strongly encourage that you visit o!ce hours for feedback on project ideas!
29