Top Banner
Sketching designs using the Five Design-Sheet Methodology 1 http://fds.design Jonathan C. Roberts, Christopher Headleand, Panagiotis Ritsos @jcrbrts @ChrisHeadleand @ritsos_p
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

Jul 18, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sketching designs using the Five Design-Sheet Methodology

24

http://fds.designJonathan C. Roberts, Christopher Headleand, Panagiotis Ritsos@jcrbrts @ChrisHeadleand @ritsos_p