how we created "de kinderpuzzel"

How we created

‘De Kinderpuzzel’

Boris Rogge

Metanous

Overview

The idea & the project

Functional design

Graphical design

Some code (application, controls, …)

The results

Lessons learned

Questions

The idea – De Kinderpuzzel

Participants need to match kids and parents

32 kids – 7 couples

Participants gather knowledge about the kids during a number of

assignments and lay out the puzzle at the end of each

episode

a Microsoft Surface is used to lay out

the puzzle

Why Microsoft Surface ?

multi-user – parents can work together to lay out

the puzzle

intuitive – parents can lay out the puzzle

without any education or training

visual – ideal device for showing the

couples lay out the puzzle

The project

Short term notice – 3 weeks for 2 applications

Very stressed and occupied production team

only one face to face meeting

Three days of filming on location

Graphical design team that we had never met before

one-time-use software – some shortcuts were taken

The functional design v1

V1

Functional design v1 – some issues

couples can not be moved on the canvas

kids can not be dragged onto the canvas

too static

not „surface-like‟

not really multi-user

The functional design v2

Graphical design (v1, v2, ... )

V2

Some code

KidsPuzzleWindow

Code – KidsPuzzleWindow

SurfaceWindow

Grid

MediaElement

ScatterView

CoupleScatterViewItem

KidsScatterViewItem

CoupleScroller

KidsListbox

CoupleScroller

a = height of the curve

b = position of the center of the peak

c = width of the ‟bell‟

http://www.metanous.be/boblog/post/Creating-a-fish-eye-scrolling-panel.aspx

Code – CoupleScroller

ItemsControl

SurfaceScrollViewer

CoupleList

CoupleData

Surface on location

Surface on location

raw

footage

TV

version

Lessons learned

one and two finger gestures are not intuitive

“reset to last position” would have been

a time saving feature

take a good book – there is a lot of waiting involved

functional and graphical design should

be finished first

Boris Rogge

boris.rogge@metanous.be

http://www.metanous.be/

Twitter: @roggeb