sketching and toolkits - department of computer science · what do prototyping tools provide? many...

10/02/2017

1

Sketching and Toolkits

February 9, 2017

Today

Finishing coding activity

Sketching

Toolkits

Winter 2017 COMP 4020 2

Announcements

A1/MSI marks are available on UM Learn

Feedback is in an attached word file

Marking inquiries:

Volodymyr (TA):[email protected]


Questions?


10/02/2017

2

Coding Activity

Get together with project groups to review results of individual coding

Similarities? Differences?


Sketching

Why sketching?

Sketching attributes

10 plus 10 idea generation and refinement


Why Sketch?

Sketching is about design


Why Sketch?Create

early ideationforces you to visualize how things come togetherbrainstorming: generate abundant ideas without worrying about qualityinvent and explore concepts

Recordideas you developideas that you come acrossarchive ideas for later reflection

Reflect, share, critique, decidecommunicate ideas to others invite responses, criticisms, and alternatives;choose ideas worth pursuing

Greenberg et al: Sketching User Interfaces: The Workbook


10/02/2017

3

Exploring an idea

Getting the Design RightGenerate an idea Iterate and develop it



Exploring an idea

Getting the Design RightGenerate an idea Iterate and develop it

But is it the best idea?Winter 2017 COMP 4020 10


Exploring an idea

Getting the Design RightThe Problem

fixates on first idealocal hill climbing issue did you reach local vs. global maxima?

Winter 2017 COMP 4020 11Greenberg et al: Sketching User Interfaces: The Workbook

Exploring alternatives

Getting the Right Design

… a designer that pitched three ideas would probably be fired. I'd say 5 is an entry point for an early formal review (distilled from 100's) … if you are pushing one you will be found out, and also fired … it is about open mindedness, humility, discovery, and learning. If you aren't authentically dedicated to that approach you are just doing it wrong!

Alistair HamiltonVP Design

Symbol Technologies


10/02/2017

4

Exploring alternativesGetting the Right Design

– generate many ideas and variations– reflect on all ideas– choose the ones that look most promising– develop them in parallel– add new ideas as they come up– then iterate your final choice


Elaboration and ReductionElaborate - generate solutionsReduce - decide on the ones worth pursuing

Laseau,P. (1980) Graphic Thinking for Architects & Designers. John Wiley and Sons

Reductiondecision-making

Elaborationopportunity seeking

Design process


The attributes of sketchesQuick

– to make




Timely– provided when needed


10/02/2017

5


Timely

Disposable– investment in the process and

concept, not the execution– if you can’t afford to throw it

away, it’s not a sketch




Timely

Disposable

Plentiful– they make sense in a

collection or series of ideas– meaning & relevance in

context

Image source: Baskinger, M. (2008) Pencils before Pixels. ACM Interactions, March+April, page 32.

Form studies for a digital alarm clock


The attributes of sketchesClear vocabulary

– rendering & style indicates it’s a sketch, not an implementation

Constrained resolution– no higher than required to

capture its conceptConsistency with state

– refinement of rendering matches the state of concept development

Quick

Timely

Disposable

Plentiful


Appropriate Degree of Refinement

• Make the sketch be as refined as the idea:– If you have a solid

idea, make the sketch look more defined

– If you have a hazy idea, the sketch will look much rougher and less defined



10/02/2017

6

The attributes of sketchesConstrained resolution

Consistency with state

Suggest & explore rather than confirm

– suggests /provokes what could be

A catalyst – evokes conversations & discussion

Quick

Timely

Disposable

Plentiful

Clear vocabulary



A Sketch is not a Prototype

Difference isa contrast of purpose (always)a contrast in form (usually, but not always)

Butit’s a continuum

sketch prototype



From Sketches to PrototypesSketches: early ideation stages of designPrototypes: capturing /detailing the actual design

Image from Bill Buxton’s Book Sketching User Experiences (2007) Morgan Kaufmann


10 Plus 10

Design Challenge: How can two people connect their mobile devices for information exchange (e.g., photo transfer)? Generate 10 very differentideas.

Focus on:The ‘handshake’ that you and the person perform to indicate that you wish to exchange information


10/02/2017

7

Generate 10 Different Ideas1. 2

3 4



Generate 10 Different Ideas5 6

7 8


Generate 10 Different Ideas9

10


Drilling Down Phase

After coming up with 10 designs, take the most promising and generate 10 more designs

Lets take the last option and explore it further


10/02/2017

8

Drilling down

a


Drilling Down

cb

d e


Interface toolkits

What are they?

Why are they important?

Examples


A Brief History Lesson

In 1968 Douglas Engelbart presented the “Mother of all demos”

Demo includedProductivity applicationsHypertextRemote computer-supported collaborative work (aka groupware)


10/02/2017

9

After the 1968 Demo

Engelbart’s visions for productivity tools, hypertext were quickly realized

Not the same for groupware…

Why not?


Prototyping Graphical User Interfaces

What support is out there to help prototype traditionally GUIs?


Many GUI Builders Exist


Some Tools for Prototyping Webpages


10/02/2017

10

What do Prototyping Tools Provide?

Many low-levels details are abstracted away

For example, there is no need to program:

Appearance/behaviour of basic widgets

Layout constraints

Event loop


What do Prototyping Tools Provide?

Implications

Less time to prototype

More ideas/variants can be explored and tested

Lower barrier to entry

A wider range of individuals can prototype


Moving Beyond Traditional GUIs

Consider “newer” technologies and applications. E.g.

groupware, vision-based interfaces, physical interfaces

To test out ideas and variants, one needs to address issues such as:

Sockets, compression, signal processing, concurrency control, etc.


Moving Beyond Traditional GUIs

Without prototyping tools:

Creative efforts go into solving technical constraints

Need for technical background increases dramatically


10/02/2017

11

Toolkits

Goal: Support prototyping of novel interactions/interfaces

General solution:

Provide higher-level libraries that abstract away low-level details


Case Study: Groupware


Image from Carl Gutwin’s PhD thesis

Case Study: Groupware

Groupware applications involve:

Sockets

Concurrency control

Awareness support

Data compression


From Carl Gutwin’s PhD thesis

What Happened to Groupware?


Image adapted from Gaines B (1999) Modeling and forecasting the information science

10/02/2017

12

Toolkit PropertiesIdeally a toolkit should:

Be embedded in commonly used language/platform

Remove low-level implementation burdens

Minimize details / housekeeping

Encapsulate successful design concepts

Provide concise API

Make simple things achievable with only few lines of code

Make complex things possible


Example Toolkits

Groupkit

Phidgets

Proximity Toolkit

AR Toolkit

Others???


Learning OutcomesNow you…

can explain the role of sketch in design

can explain the different attributes of a sketch

can explain the differences between a sketch and a prototype

know how to apply the 10 plus 10 method

can explain the importance of toolkits to advancing interactive technology

are aware of 5 toolkits and can describe (at a high-level) what they offer


sketching and toolkits - department of computer science · what do prototyping tools provide? many...

Documents