Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How we created "De Kinderpuzzel"

930 views

Published on

Slides for the lunch session I gave on the 31st of March 2010 @ TechDays 2010

Published in: Technology
  • Be the first to comment

  • Be the first to like this

How we created "De Kinderpuzzel"

  1. 1. How we created ‘De Kinderpuzzel’<br />Boris Rogge<br />Metanous<br />
  2. 2. Overview<br />The idea & the project<br />Functional design<br />Graphical design<br />Some code (application, controls, …)<br />The results<br />Lessonslearned<br />Questions<br />
  3. 3. The idea – De Kinderpuzzel<br />Participants need to match kids and parents<br />32 kids – 7 couples<br />Participants gather knowledge about the kids during a number of <br />assignments and lay out the puzzle at the end of each<br />episode<br />a Microsoft Surface is used to lay out <br />the puzzle<br />
  4. 4. Why Microsoft Surface ?<br />multi-user – parents can work together to lay out<br />the puzzle<br />intuitive – parents can lay out the puzzle<br />without any education or training<br />visual – ideal device for showing the <br />couples lay out the puzzle<br />
  5. 5. The project<br />Short term notice – 3 weeks for 2 applications<br />one-time-use software – someshortcutswere taken<br />Verystressed and occupiedproduction team<br />onlyone face to face meeting<br />Graphical design team that we had never met before<br />Threedays of filmingonlocation<br />
  6. 6. The functional design v1<br />
  7. 7. V1<br />
  8. 8. Functional design v1 – some issues<br />too static<br />couples can not be moved on the canvas<br />kids can not be dragged onto the canvas<br />not ‘surface-like’<br />not really multi-user<br />
  9. 9. The functional design v2<br />
  10. 10. Graphical design (v1, v2, ... )<br />
  11. 11. V2<br />
  12. 12. Some code<br />
  13. 13. KidsPuzzleWindow<br />
  14. 14. Code – KidsPuzzleWindow <br />SurfaceWindow<br />Grid<br />MediaElement<br />ScatterView<br />CoupleScatterViewItem<br />KidsScatterViewItem<br />CoupleScroller<br />KidsListbox<br />
  15. 15. CoupleScroller<br />a = height of the curve<br />b = position of the center of the peak<br />c = width of the ’bell’<br />http://www.metanous.be/boblog/post/Creating-a-fish-eye-scrolling-panel.aspx<br />
  16. 16. Code – CoupleScroller<br />SurfaceScrollViewer<br />ItemsControl<br />CoupleList<br />CoupleData<br />
  17. 17. V2bis<br />
  18. 18. V2final<br />
  19. 19. Surface onlocation<br />
  20. 20. Surface onlocation<br />
  21. 21. raw<br />footage<br />
  22. 22. TV<br />version<br />
  23. 23. Lessons learned<br />one and two finger gestures are not intuitive<br />“reset to last position” would have been<br />a time saving feature<br />functional and graphical design should<br />be finished first<br />take a good book – there is a lot of waiting involved<br />
  24. 24. Questions<br />Boris Rogge<br />boris.rogge@metanous.be<br />http://www.metanous.be/<br />Twitter: @roggeb<br />

×