P-Tab A Multidisciplinary Participatory Design Environment
description
Transcript of P-Tab A Multidisciplinary Participatory Design Environment
![Page 1: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/1.jpg)
P-TabA Multidisciplinary Participatory
Design Environment
Human-Centered Software Engineering Group
Concordia University
http://hci.cs.concordia.ca/www/hcse/
Jonathan BennB.Eng. Software Engineering
M.Sc. Computer Science (in progress)
![Page 2: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/2.jpg)
2
Outline
• Introduction to Design• Introduction to HCD• Introduction to P-Tab• P-Tab and the Design Process
– Brainstorming– Design Patterns– Interactivity– Metaphors
• Conclusion
![Page 3: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/3.jpg)
3
Introduction to Design
• What is software design?– Tradeoffs, constraints and stakeholders– Describes how “software is decomposed and
organized into components.”– Describes the “interfaces between those
components… at a level of detail that [enables] their construction.”
Source: Software Engineering Body of Knowledge (SWEBOK). http://www.swebok.org/
![Page 4: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/4.jpg)
4
Importance of S/W Design
• Work distribution
• Maintenance
• All domains and disciplines
![Page 5: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/5.jpg)
5
The Design Process
2Analyze needsand build blackbox model of
problem
1Clarify
nature ofrequirements
3Postulate awhite box
designsolution
4Validate solution
(including useof prototypes)
5Implementation
of the design planusing a suitable
form ofsoftware
External requirements
Source: D. Budgen. Software Design. 2nd Ed. Addison-Wesley, 2003.
![Page 6: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/6.jpg)
6
Why is Design Difficult?
“The fundamental problem is that designers are obliged to use current information to predict a future state that will not come about unless their predictions are correct.”
--J. Christopher Jones
Source: J.C. Jones. Design Methods: Seeds of Human Futures. 1970.
![Page 7: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/7.jpg)
7
Outline
• Introduction to Design• Introduction to HCD• Introduction to P-Tab• P-Tab and the Design Process
– Brainstorming– Design Patterns– Interactivity– Metaphors
• Conclusion
![Page 8: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/8.jpg)
8
Introduction to HCD
• Human Centered Design– User focus– Multi-disciplinary– Iterative development
![Page 9: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/9.jpg)
9
Peanut Butter Theory
• Peanut Butter Theory Approach– UI is a thin spread– User is an afterthought
– Focus is on system functionalities
• Human-Centered Approach– UI has a major focus– User is a primary
stakeholder– Focus is on user tasks
![Page 10: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/10.jpg)
10
The Problem
• HCD is a good thing, but…
• Challenges– User communication– Team communication– Supportive environment
• A solution
![Page 11: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/11.jpg)
11
Outline
• Introduction to Design• Introduction to HCD• Introduction to P-Tab• P-Tab and the Design Process
– Brainstorming– Design Patterns– Interactivity– Metaphors
• Conclusion
![Page 12: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/12.jpg)
12
Introduction to P-Tab
• Participatory Tangible Board– Concordia University– HCSE group & OBX
lab
• What is it?
• The P-Tab Group– Dr. Ahmed Seffah– Antoine Morris– James Maciukenas– Prof. Jason Lewis– Jonathan Benn– Rozita Naghshin
![Page 13: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/13.jpg)
13
Artist’s Conception
![Page 14: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/14.jpg)
14
P-Tab Characteristics
• Two distinct user groups– Software engineers– Digital media artists and designers
• Additional features/constraints– Network access– Interoperability
![Page 15: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/15.jpg)
15
Challenges
• P-Tab– Research, not engineering
• How to enable participatory design– Brainstorming– Design Patterns– Interactivity– Metaphors
• Studies
![Page 16: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/16.jpg)
16
Outline
• Introduction to Design• Introduction to HCD• Introduction to P-Tab• P-Tab and the Design Process
– Brainstorming– Design Patterns– Interactivity– Metaphors
• Conclusion
![Page 17: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/17.jpg)
17
Back to the Design Process
2Analyze needsand build blackbox model of
problem
1Clarify
nature ofrequirements
3Postulate awhite box
designsolution
4Validate solution
(including useof prototypes)
5Implementation
of the design planusing a suitable
form ofsoftware
External requirements
![Page 18: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/18.jpg)
18
Back to the Design Process
1Clarify
nature ofrequirements
5Implementation
of the design planusing a suitable
form ofsoftware
External requirements
Interactivity
Brainstorming Design Patterns
4Validate solution
(including useof prototypes)
2Analyze needsand build blackbox model of
problem
3Postulate awhite box
designsolution
Interactivity + Metaphors
![Page 19: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/19.jpg)
19
Brainstorming
• Supporting brainstorming– Freeform tools– Flexible visualization tools
• Annotation– Audio/visual
![Page 20: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/20.jpg)
20
Freeform Tools
Source: Smart Technologies. Smart Ideas Concept-Mapping Software. http://www2.smarttech.com/st/en-US/Products/SMART+Ideas/Features.htm
![Page 21: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/21.jpg)
21
Design Patterns
• Reuse solutions
• Common terminology
• High-level perspective
Source: A. Shalloway and J. R. Trott. Design Patterns Explained: A New Perspective on Object-Oriented Design. Addison-Wesley, 2001.
![Page 22: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/22.jpg)
22
Carpentry Example
• Carpenter 1: “How do you think we should build these drawers?”
• Carpenter 2: “Well, I think we should make the joint by cutting straight down into the wood, and then cut back up 45 degrees, and then going straight back down, and then back up the other way 45 degrees, and then going straight back down, and then…”
Source: A. Shalloway and J. R. Trott. Design Patterns Explained: A New Perspective on Object-Oriented Design. Addison-Wesley, 2001.
![Page 23: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/23.jpg)
23Source: A. Shalloway and J. R. Trott. Design Patterns Explained: A New
Perspective on Object-Oriented Design. Addison-Wesley, 2001.
![Page 24: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/24.jpg)
24
Patterns Are High-Level
• Question: Should we use a dovetail joint or a miter joint?
• Translation: Should we use an expensive and durable joint, or should we make a cheaper but less durable joint?
Source: A. Shalloway and J. R. Trott. Design Patterns Explained: A New Perspective on Object-Oriented Design. Addison-Wesley, 2001.
![Page 25: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/25.jpg)
25
Interactivity
• Audio/visual annotation
• Software agents
• Digital libraries
• Prototypes
• Design Visualization– Zoom levels– Fisheye views– Customizable views
![Page 26: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/26.jpg)
26Source: A. Repenning and A. Ioannidou. Agent-Based End-User Development.
Communications of the ACM, September 2004.
The Bridge Builder
![Page 27: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/27.jpg)
27Source: O. Turetken, D. Schuff, R. Sharda, and T. T. Ow. Supporting systems
analysis and design through fisheye views. Com. of the ACM, September 2004.
![Page 28: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/28.jpg)
28Source: O. Turetken, D. Schuff, R. Sharda, and T. T. Ow. Supporting systems
analysis and design through fisheye views. Com. of the ACM, September 2004.
![Page 29: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/29.jpg)
29Source: O. Turetken, D. Schuff, R. Sharda, and T. T. Ow. Supporting systems
analysis and design through fisheye views. Com. of the ACM, September 2004.
![Page 30: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/30.jpg)
30
UI Design Metaphor
• Design metaphor
• Tangible objects
• Impacts– Learnability– Comprehension– Satisfaction
• Metaphors and P-Tab
![Page 31: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/31.jpg)
31
![Page 32: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/32.jpg)
32Source: Black & White game. Courtesy of Strategy Informer.
http://www.strategyinformer.com/screenshots/blackwhite.shtml
![Page 33: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/33.jpg)
33Source: Black & White game. Courtesy of Strategy Informer.
http://www.strategyinformer.com/screenshots/blackwhite.shtml
![Page 34: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/34.jpg)
34
Outline
• Introduction to Design• Introduction to HCD• Introduction to P-Tab• P-Tab and the Design Process
– Brainstorming– Design Patterns– Interactivity– Metaphors
• Conclusion
![Page 35: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/35.jpg)
35
P-Tab Applications
• Software design
• User-interface design
• User-interface testing
• PMix
![Page 36: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/36.jpg)
36
Some Existing Research
• P-Tab vs. other research• IBM’s Rational Rose• AIRE group and DRG at MIT
– http://www.ai.mit.edu/projects/aire/projects.shtml– http://www.rationale.csail.mit.edu/projects.shtml
• HCII at Carnegie Mellon– http://www-2.cs.cmu.edu/~NatProg/
• GUIR at Berkeley– http://guir.berkeley.edu/projects/denim/
![Page 37: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/37.jpg)
37
floating.numbers
Source: Jewish Museum, Berlin, Germany. http://www.artcom.de/
![Page 38: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/38.jpg)
38Source: Walker Art Center, Minneapolis, USA. http://dialogtable.com/
Dialog Table
![Page 39: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/39.jpg)
39
Hmm… Looks Like Fun
Source: Walker Art Center, Minneapolis, USA. http://dialogtable.com/
![Page 40: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/40.jpg)
40
How It Works
Source: Walker Art Center, Minneapolis, USA. http://dialogtable.com/
![Page 41: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/41.jpg)
41
Acknowledgements
• Many images:– Rozita Naghshin
• Constructive criticism and ideas:– Dr. Ahmed Seffah– James Maciukenas– Prof. Jason Lewis– Rozita Naghshin
![Page 42: P-Tab A Multidisciplinary Participatory Design Environment](https://reader036.fdocuments.us/reader036/viewer/2022062809/56815971550346895dc6b408/html5/thumbnails/42.jpg)
42
Any Questions?
Human-Centered Software Engineering Group
Concordia University
http://hci.cs.concordia.ca/www/hcse/
Jonathan BennB.Eng. Software Engineering
M.Sc. Computer Science (in progress)
http://www.cs.concordia.ca/~benn/publications/