How we created "De Kinderpuzzel"
-
Upload
brogge -
Category
Technology
-
view
790 -
download
6
Transcript of How we created "De Kinderpuzzel"
![Page 1: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/1.jpg)
How we created
‘De Kinderpuzzel’
Boris Rogge
Metanous
![Page 2: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/2.jpg)
Overview
The idea & the project
Functional design
Graphical design
Some code (application, controls, …)
The results
Lessons learned
Questions
![Page 3: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/3.jpg)
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
![Page 4: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/4.jpg)
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
![Page 5: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/5.jpg)
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
![Page 6: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/6.jpg)
The functional design v1
![Page 7: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/7.jpg)
V1
![Page 8: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/8.jpg)
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
![Page 9: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/9.jpg)
The functional design v2
![Page 10: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/10.jpg)
Graphical design (v1, v2, ... )
![Page 11: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/11.jpg)
V2
![Page 12: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/12.jpg)
Some code
![Page 13: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/13.jpg)
KidsPuzzleWindow
![Page 14: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/14.jpg)
Code – KidsPuzzleWindow
SurfaceWindow
Grid
MediaElement
ScatterView
CoupleScatterViewItem
KidsScatterViewItem
CoupleScroller
KidsListbox
![Page 15: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/15.jpg)
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
![Page 16: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/16.jpg)
Code – CoupleScroller
ItemsControl
SurfaceScrollViewer
CoupleList
CoupleData
![Page 17: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/17.jpg)
Surface on location
![Page 18: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/18.jpg)
Surface on location
![Page 19: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/19.jpg)
raw
footage
![Page 20: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/20.jpg)
TV
version
![Page 21: How we created "De Kinderpuzzel"](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a9bbed1a28ab93088b45db/html5/thumbnails/21.jpg)
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