Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data...
Transcript of Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data...
![Page 1: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/1.jpg)
Sketching designs using the Five Design-Sheet Methodology
1
http://fds.designJonathan C. Roberts, Christopher Headleand, Panagiotis Ritsos@jcrbrts @ChrisHeadleand @ritsos_p
![Page 2: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/2.jpg)
1. A teaching scenario
2. The FdS methodology
3. Experience with the FdS
2
![Page 3: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/3.jpg)
3
BobFinished CS undergraduate majorCurrently grad student in CSTaking module on Information VisualizationChosen some dataWants to build an interactive visualization
Knows how to write codeUnderstands computer graphicsDone some Processing.js
![Page 4: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/4.jpg)
4
Design Build EvaluateThink
![Page 5: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/5.jpg)
Build
✔
C, C++, Java etc.
AgileUML
PrototypingDivide & ConquerM
ETH
OD
OLO
GIE
S
![Page 6: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/6.jpg)
Build Evaluate
✔ ✔
C, C++, Java etc.
AgileUML
PrototypingDivide & Conquer
Questionnaires
SUSUEQQ&A
Walk throughMET
HO
DO
LOG
IES
![Page 7: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/7.jpg)
Design Build Evaluate
✔? ✔
C, C++, Java etc.
AgileUML
PrototypingDivide & Conquer
Questionnaires
SUSUEQQ&A
Walk through
h
Sketching?Wireframes
Ad hoc sketchWireframe
SQVID
MET
HO
DO
LOG
IES
![Page 8: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/8.jpg)
Design Build Evaluate
✔? ✔
C, C++, Java etc.
AgileUML
PrototypingDivide & Conquer
Questionnaires
SUSUEQQ&A
Walk through
Think
? h
Sketching?Wireframes
Ad hoc sketchWireframe
SQVID
MET
HO
DO
LOG
IES
Just think
6 thinking hatsWebb’s method
![Page 9: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/9.jpg)
Design Build Evaluate
✔? ✔
C, C++, Java etc.
AgileUML
PrototypingDivide & Conquer
Questionnaires
SUSUEQQ&A
Walk through
Think
? h
Sketching?Wireframes
Ad hoc sketchWireframe
SQVID
MET
HO
DO
LOG
IES
Just think
6 thinking hatsWebb’s method
![Page 10: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/10.jpg)
10
We teach little about design thinking, sketching and planning
We teach a lot about implementation
![Page 11: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/11.jpg)
11
![Page 12: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/12.jpg)
The Five Design-Sheet MethodologyFive sheetsFive parts per sheetFive parts to the process
Sheet 1 = IdeasSheets 2,3,4 = Main designsSheet 5 = Realization
12
![Page 13: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/13.jpg)
13
Dataset of degree entrants
Sheets 2,3,4
![Page 14: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/14.jpg)
14
Realization sheet
![Page 15: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/15.jpg)
Sketching• Evolve• Sharable• Disposable• Help you plan• Unfinished ideas• Communicates an idea• Tangible (put on walls)• Quick to change directions• Helps you work through ideas• Demonstrates work in progress
15
![Page 16: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/16.jpg)
Prepare your kit ~ prepare your thoughts
• Task• Data analysis• Components of the
system• Think about the user
16
![Page 17: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/17.jpg)
17
![Page 18: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/18.jpg)
18
![Page 19: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/19.jpg)
19
![Page 20: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/20.jpg)
Use & evaluation• Conference publication 2011 Eurographics Education• Used in courses
– “Information Visualization” grad course– The design chapter of dissertations/project reports– 3rd year graphics module– 3rd year Technologies for internet systems (interactive interface)
• Company (designing websites)• Evaluated
– Modified System Usability Survey (Questionnaire)– Qualitative comments
20
![Page 21: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/21.jpg)
21
![Page 22: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/22.jpg)
22
The five design sheet methodology has contributed to my overall design in multiple positive ways. ... [the] clearly defined stages helped by challenging me to fulfil the requirements. … Without the aid of the method, my ideas would not have been as organized or as well developed.
Without the five design sheet methodology, I feel like my final…would not have been as fleshed out or quite as though-‐through as if it had become through the five design sheet methodology.
I really liked the FdS model. It added a lot of structure to an otherwise unstructured section. Usually my designs lack detail and just end up as a big mess of thoughts.
FdS is a great methodology to use for quick ideation that is also very practical
![Page 23: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/23.jpg)
Summary• Described the FdS• Our experiences• Discussed some of the issues
• More in paper…– Data analysis (pre-consideration)– How a student would implement their sketches– Implications of a design (e.g., legal/ethical/professional etc)
23
![Page 24: Sketching designs using the Five Design-Sheet Methodology€¦ · Chosen+some+data Wants+to+build+an+interactive+visualization ... Prepare your kit ~ prepare your thoughts • Task](https://reader033.fdocuments.us/reader033/viewer/2022050201/5f55353e96b362297c730d80/html5/thumbnails/24.jpg)
Sketching designs using the Five Design-Sheet Methodology
24
http://fds.designJonathan C. Roberts, Christopher Headleand, Panagiotis Ritsos@jcrbrts @ChrisHeadleand @ritsos_p