Phd Slides

1,058 views

Published on

The slides of Jan Meskens' Phd defense

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,058
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Phd Slides

  1. 1. Expertise centre for Digital Media (EDM) - UHasselt<br />26/04/2011<br />Tool Support for <br />Designing, Managing and Optimizing <br />Multi-Device User Interfaces<br />Jan Meskens<br />jan.meskens@uhasselt.be<br />Advisor: prof. dr. Karin Coninx<br />Co-Advisor: prof. dr. Kris Luyten<br />
  2. 2. 2<br />People use Multiple Devices<br />Tablet PCs<br />Mobile Phones<br />Interactive TV<br />
  3. 3. 3<br />Existing Multi-Device <br />UI Design approaches<br />Models<br />Manually<br />Model Based<br />
  4. 4. 4<br />Problems with these approaches<br /><ul><li>Switching between incompatibletools
  5. 5. Duplicated design effort
  6. 6. Models are often complex
  7. 7. Automatic generation can lead to unexpected results</li></ul>Models<br />Myers, 2000<br />Grigoreanu, 2009<br />Lin, 2005<br />
  8. 8. Designers need<br />Multi-Device Design Tools to...<br />1<br />2<br />3<br />Createrealistic high fidelity prototypes<br />Managemultiple <br />device-specific prototypes<br />IterativelyOptimizedesigns for the targeted devices<br />5<br />
  9. 9. 1<br />2<br />3<br />Createrealistic high fidelity prototypes<br />Managemultiple <br />device-specific prototypes<br />IterativelyOptimizedesigns for the targeted devices<br />6<br />
  10. 10. 7<br />Gummy design environment<br /><ul><li>Multi-device graphical design environment
  11. 11. What You See Is What You Get (WYSIWYG)
  12. 12. Models are used behind the scenes</li></li></ul><li>8<br />Gummy design environment<br />Presented at AVI’08 and AVI’10<br />
  13. 13. 9<br />Gummy design environment<br />Device-specific workspaces<br />Presented at AVI’08 and AVI’10<br />
  14. 14. 10<br />Gummy design environment<br />Toolbox<br />Presented at AVI’08 and AVI’10<br />
  15. 15. 11<br />Gummy design environment<br />Canvas<br />Presented at AVI’08 and AVI’10<br />
  16. 16. 12<br />Gummy design environment<br />Properties panel<br />Presented at AVI’08 and AVI’10<br />
  17. 17. 13<br />Gummycan target many platforms<br />Mobile<br />Web<br />Desktop<br />Presented at AVI’08 and AVI’10<br />
  18. 18. <ul><li>Integration of new platforms by means of “platform plug-ins”
  19. 19. Hiding the underlying UI models
  20. 20. Providing visual design feedback (WYSIWYG)</li></ul>14<br />Gummy architecture: requirements<br />Presented at AVI’08 and AVI’10<br />
  21. 21. 15<br />Gummy architecture: MVC<br />Model<br />Controller<br />Screenshot<br />Screenshot<br />Platform <br />Plug-In<br />Design Change<br />Render<br />View<br />XMPP<br />Pierce et al., 2008<br />Presented at AVI’08 and AVI’10<br />
  22. 22. 16<br />Gummy’s underlying Model<br />A<br />B<br />C<br />Root Panel<br />Properties<br />...<br />Panel<br />Layout Information<br />Rendering Information<br />Button<br />Rounded Range<br />Presented at AVI’08 and AVI’10<br />
  23. 23. 17<br />Example UI: Video Explorer<br />Desktop (.NET)<br />Mobile (Android)<br />Web (Flex)<br />Keyframes<br />Video Player<br />
  24. 24. 18<br />Limitations of Gummy<br /><ul><li>Repetitive design effort
  25. 25. Hard to keep prototypes consistent</li></ul>Desktop (.NET)<br />Mobile (Android)<br />
  26. 26. 1<br />2<br />3<br />Createrealistic high fidelity prototypes<br />Managemultiple <br />device-specific prototypes<br />IterativelyOptimizedesigns for the targeted devices<br />19<br />
  27. 27. 20<br />Why Managing Tool Support?<br /><ul><li>Reduce repetitive design effort
  28. 28. Keep prototypes consistent</li></ul>Desktop (.NET)<br />Grigoreanu, 2009<br />Lin, 2005<br />Mobile (Android)<br />
  29. 29. 21<br />Managing Techniques<br />Automatic Transformations + Linked Editing<br />Design tool Macros(D-Macs)<br />
  30. 30. 22<br />Managing Techniques<br />Automatic Transformations + Linked Editing<br />Design tool Macros(D-Macs)<br />
  31. 31. Automatic Transformations + Linked Editing<br />Copy<br />Paste<br />Edit Contents<br />Presented at AVI’10<br />23<br />
  32. 32. 24<br />
  33. 33. 25<br />
  34. 34. 26<br />Limitations of automatic transformations and linked editing<br />A<br />B<br />C<br /><ul><li>Only predefined transformations
  35. 35. Designers cannot create their own transformations
  36. 36. Difficult to integrate new components</li></ul>Semantic UI Network<br />Vermeulen et al., 2007<br />Demeure et al., 2006<br />
  37. 37. 27<br />Managing Techniques<br />Automatic Transformations + Linked Editing<br />Design tool Macros(D-Macs)<br />
  38. 38. 28<br />D-Macs approach<br />Design<br />Record<br />Replay<br />Presented at UIST’10<br />
  39. 39. 29<br />D-Macs design action recorder<br />Presented at UIST’10<br />
  40. 40. 30<br />Example UI: News Video Explorer<br />Desktop (.NET)<br />Mobile (Android)<br />Presented at UIST’10<br />
  41. 41. 31<br />
  42. 42. 32<br />Replay design actions using a <br />mixed initiative approach<br />Manual action<br />Computer action<br />Leshed et al, 2008<br />Li et al, 2010<br />Presented at UIST’10<br />
  43. 43. 33<br />
  44. 44. 34<br />Replay can fail<br />Success:<br />Add item to collection<br />Add item to collection<br />Switch to android<br />Switch to android<br />Dependency<br />Select android.widget.gallery<br />Select android.widget.button<br />Failure:<br />Presented at UIST’10<br />
  45. 45. 35<br />
  46. 46. 36<br />D-Macs action sharing<br />D-macs repository<br />Add <br />recording<br />Reuse <br />recording<br />http://dmacs<br />Designer A<br />Designer B<br />Presented at UIST’10<br />
  47. 47. 37<br />Online Action Repository<br />Query Repository<br />View Recording<br />
  48. 48. 1<br />2<br />3<br />Createrealistic high fidelity prototypes<br />Managemultiple <br />device-specific prototypes<br />IterativelyOptimizedesigns for the targeted devices<br />38<br />
  49. 49. Iteratively Optimizing <br />User Interfaces<br />39<br />Design<br />Test<br />Rethink<br />
  50. 50. 40<br />Problems when Iteratively<br />OptimizingUser Interfaces<br /><ul><li>GUI Deployment takes time
  51. 51. Testing is often postponed to the end of the design process
  52. 52. Design changes are more expensive</li></ul>Design<br />Test<br />Rethink<br />
  53. 53. 41<br />Live UI Design: <br />Intertwine test and design<br />Hartmann et al., 2006<br />Bila et al., 2007<br />Pagetailor<br />d.tools<br />
  54. 54. 42<br />Multi-device<br />Live UI Design Techniques<br />Design Mirror<br />Continuous Design Pointer<br />Design Toolglass<br />
  55. 55. 43<br />Multi-device<br />Live UI Design Techniques<br />Design Mirror<br />Continuous Design Pointer<br />Design Toolglass<br />
  56. 56. 44<br />Design Mirror<br />Device A<br />B<br />C<br />Real Time <br />Visualization<br />Device A<br />Design Environment<br />Presented at VL/HCC’09<br />
  57. 57. 45<br />
  58. 58. 46<br />Evaluation<br /><ul><li>7 HCI Professionals
  59. 59. Observations:
  60. 60. Changing widget sizes,
  61. 61. Replacing widgets,
  62. 62. Fine-tuning colors
  63. 63. One recurring suggestion:“the integration of a technique to drag elements from the toolbox directly to the target device”</li></li></ul><li>47<br />Multi-device<br />Live UI Design Techniques<br />Design Mirror<br />Continuous Design Pointer<br />Design Toolglass<br />
  64. 64. 48<br />Continuous Design Pointer<br />Device A<br />B<br />C<br />Device A<br />Design Environment<br />Presented at EICS’09<br />
  65. 65. 49<br />
  66. 66. 50<br />Multi-device<br />Live UI Design Techniques<br />Design Mirror<br />Continuous Design Pointer<br />Design Toolglass<br />
  67. 67. 51<br />Design Toolglass<br />Device A<br />B<br />C<br />Transparent Canvas<br />Design Environment<br />Emulator of Device A<br />Presented at AVI’10<br />
  68. 68. 52<br />Design Toolglass <br />Windows Mobile Emulator<br />Canvas<br />Canvas<br />Android Emulator<br />Windows Mobile<br />Android<br />Presented at AVI’10<br />
  69. 69. 1<br />2<br />3<br />Createrealistic high fidelity prototypes<br />Managemultiple <br />device-specific prototypes<br />IterativelyOptimizedesigns for the targeted devices<br />53<br />
  70. 70. 54<br />Conclusions<br />
  71. 71. 55<br />Contributions<br />Gummy Multi-device Graphical Design Environment<br />1<br />Createrealistic high fidelity prototypes<br /><ul><li>WYSIWYG
  72. 72. Models are used in the background
  73. 73. Open source</li></li></ul><li>56<br />Contributions<br />Automate parts of the design process<br />2<br />Managemultiple <br />device-specific prototypes<br /><ul><li>Reduce duplicated design effort
  74. 74. Keep prototypes consistent
  75. 75. Automation techniques:
  76. 76. Automatic Transformations + Linked Editing
  77. 77. Design Tool Macros (D-Macs)</li></li></ul><li>57<br />Contributions<br />Live UI Design:<br />Intertwine design and test<br />3<br />IterativelyOptimizedesigns for the targeted devices<br /><ul><li>Reduce deployment time
  78. 78. Stimulate design iterations
  79. 79. Design techniques:
  80. 80. Design Mirror
  81. 81. Continuous Design Pointer
  82. 82. Design Toolglass</li></li></ul><li>A<br />B<br />C<br />58<br />Extensions and Outlook<br />ISO 9241<br />http<br />Storyboards<br />Haesen et al., MDDAUI 2011<br />Web Services<br />IBBT Croslocis, 2009<br />Usability Evaluation<br />DFKI Kaiserslautern<br />EICS 2011<br />
  83. 83. Questions?<br />1<br />2<br />3<br />Createrealistic high fidelity prototypes<br />Managemultiple <br />device-specific prototypes<br />IterativelyOptimizedesigns for the targeted devices<br />59<br />

×