Jelly: A Multi-Device Design Environment for Managing Consistency across Devices<br />UHasselt - Belgium<br />Jan Meskens,...
Multi-Device<br />GUI Design<br />
Mobile Phone<br />
Smart Phone<br />
Tablet PC<br />
Notebook<br />
Application<br />GUI<br />GUI<br />GUI<br />GUI<br />
RelatedWork<br />
 Generating GUIs <br />Automatically<br />
GUI<br />GUI<br />GUI<br />GUI<br />Abstract Model<br />
Generate an optimal UI for each device<br />[Supple – Gajos et al., IUI ‘04]<br />
Automatic remote control GUI generation<br />[PUC – Nichols et al. TOCHI ‘09, UIST’06, CHI’07]<br />
Such approaches are not designer oriented…<br />[Myers et al., TOCHI’00]<br />
Multi-Device GUI<br />Design Tools<br />
GUI<br />GUI<br />(semi-) automatically transforming GUIs<br />
DAMASK: Pattern transformations<br />[Lin et al., CHI’08]<br />
GUMMY: Hidden abstract model <br />[Meskens et al., AVI’08]<br />
What do designers think about thisapproach?<br />
We interviewed 9 designers about Gummy<br />
1<br />Transforming<br />Parts of a GUI<br />
GUI Deployment takes time…<br />2<br />Testing !<br />[Grigoreanu et al., VL/HCC’09]<br />[Ko et al., VL/HCC’04]<br />
GUI Content Update<br />Consistency<br />Management<br />3<br />[Lin et al., CHI’08]<br />
Custom GUI <br />Controls<br />4<br />[Myers et al., VL/HCC’08]<br />
JELLY<br />
Multiple Design <br />Workspaces<br />
Flexible Toolbox<br />
Flexible Toolbox<br />
Flexible Toolbox<br />
Jelly’sFeatures<br />
Jelly Transforms<br />Parts of a GUI<br />1<br />
Cross-Device <br />Widget “Copies”<br />Adobe Flex<br />Windows Mobile<br />
What’s under the hood?<br />
[Demeure et al., CADUI’06]<br />A Semantic UI Network<br />
= UI Widget<br />= Input/Output/Action<br />= DataType<br />
Jelly can manage<br />Content <br />Consistency<br />2<br />
Linked Editing<br />[Toomim et al., VL/HCC’04]<br />Linked Editing<br />[Hartman et al., UIST’08]<br />
Adobe Flex<br />Windows Mobile<br />Linked Editing<br />
Jelly supports<br />fast testing<br />3<br />
Toolglass approach!<br />[Bier et al., Siggraph’93]<br />
GUI Renderer<br />Transparent Canvas<br />
Transparent Canvas<br />GUI Renderer<br />
Transparent Canvas<br />GUI Renderer<br />
Jelly<br />What happens behind the scenes?<br />
Data Structure<br />Data Structure<br />XML / JSON Serialization<br />XML / JSON<br />Deserialization<br />XMPP Network Co...
Jelly can handle<br />custom <br />components<br />4<br />
Self-Describing <br />Data Structure<br />…<br />Data Structure<br />…<br />XML / JSON Serialization<br />XMPP Network Com...
Root Panel<br />…<br />Panel<br />…<br />Round Range<br />
Root Panel<br />…<br />Panel<br />…<br />Round Range<br />
Panel<br />mapsTo: mx.Panel<br />Round Range<br />mapsTo: custom.RRange<br />
Informal Use Study<br />
Music Player<br />Windows Mobile<br />Adobe Flex<br />
8 Participants<br />
Observations<br />
FastTesting<br />Used by<br />almostevery participant<br />
Great for software <br />maintenance!<br />
CopyingElements<br />Useful, but…<br />… what’s on the clipboard?<br />… canwe copy more than<br />    the content?<br />
Conclusions<br />
Design Environment<br />Cross-Device Copies<br />LinkedEditing<br />
Upcoming SlideShare
Loading in …5
×

Jelly: A Multi-Device Design Environment for Managing Consistency Across Devices

1,270 views

Published on

Published in: Technology, Education
  • Be the first to comment

Jelly: A Multi-Device Design Environment for Managing Consistency Across Devices

  1. 1. Jelly: A Multi-Device Design Environment for Managing Consistency across Devices<br />UHasselt - Belgium<br />Jan Meskens, Kris Luyten and Karin Coninx<br />
  2. 2. Multi-Device<br />GUI Design<br />
  3. 3. Mobile Phone<br />
  4. 4. Smart Phone<br />
  5. 5. Tablet PC<br />
  6. 6. Notebook<br />
  7. 7. Application<br />GUI<br />GUI<br />GUI<br />GUI<br />
  8. 8. RelatedWork<br />
  9. 9. Generating GUIs <br />Automatically<br />
  10. 10. GUI<br />GUI<br />GUI<br />GUI<br />Abstract Model<br />
  11. 11. Generate an optimal UI for each device<br />[Supple – Gajos et al., IUI ‘04]<br />
  12. 12. Automatic remote control GUI generation<br />[PUC – Nichols et al. TOCHI ‘09, UIST’06, CHI’07]<br />
  13. 13. Such approaches are not designer oriented…<br />[Myers et al., TOCHI’00]<br />
  14. 14. Multi-Device GUI<br />Design Tools<br />
  15. 15. GUI<br />GUI<br />(semi-) automatically transforming GUIs<br />
  16. 16. DAMASK: Pattern transformations<br />[Lin et al., CHI’08]<br />
  17. 17. GUMMY: Hidden abstract model <br />[Meskens et al., AVI’08]<br />
  18. 18. What do designers think about thisapproach?<br />
  19. 19. We interviewed 9 designers about Gummy<br />
  20. 20. 1<br />Transforming<br />Parts of a GUI<br />
  21. 21. GUI Deployment takes time…<br />2<br />Testing !<br />[Grigoreanu et al., VL/HCC’09]<br />[Ko et al., VL/HCC’04]<br />
  22. 22. GUI Content Update<br />Consistency<br />Management<br />3<br />[Lin et al., CHI’08]<br />
  23. 23. Custom GUI <br />Controls<br />4<br />[Myers et al., VL/HCC’08]<br />
  24. 24. JELLY<br />
  25. 25.
  26. 26. Multiple Design <br />Workspaces<br />
  27. 27. Flexible Toolbox<br />
  28. 28. Flexible Toolbox<br />
  29. 29. Flexible Toolbox<br />
  30. 30.
  31. 31. Jelly’sFeatures<br />
  32. 32. Jelly Transforms<br />Parts of a GUI<br />1<br />
  33. 33. Cross-Device <br />Widget “Copies”<br />Adobe Flex<br />Windows Mobile<br />
  34. 34.
  35. 35.
  36. 36.
  37. 37. What’s under the hood?<br />
  38. 38. [Demeure et al., CADUI’06]<br />A Semantic UI Network<br />
  39. 39. = UI Widget<br />= Input/Output/Action<br />= DataType<br />
  40. 40.
  41. 41. Jelly can manage<br />Content <br />Consistency<br />2<br />
  42. 42. Linked Editing<br />[Toomim et al., VL/HCC’04]<br />Linked Editing<br />[Hartman et al., UIST’08]<br />
  43. 43. Adobe Flex<br />Windows Mobile<br />Linked Editing<br />
  44. 44.
  45. 45.
  46. 46. Jelly supports<br />fast testing<br />3<br />
  47. 47. Toolglass approach!<br />[Bier et al., Siggraph’93]<br />
  48. 48. GUI Renderer<br />Transparent Canvas<br />
  49. 49. Transparent Canvas<br />GUI Renderer<br />
  50. 50. Transparent Canvas<br />GUI Renderer<br />
  51. 51. Jelly<br />What happens behind the scenes?<br />
  52. 52. Data Structure<br />Data Structure<br />XML / JSON Serialization<br />XML / JSON<br />Deserialization<br />XMPP Network Communication<br />
  53. 53. Jelly can handle<br />custom <br />components<br />4<br />
  54. 54.
  55. 55. Self-Describing <br />Data Structure<br />…<br />Data Structure<br />…<br />XML / JSON Serialization<br />XMPP Network Communication<br />
  56. 56. Root Panel<br />…<br />Panel<br />…<br />Round Range<br />
  57. 57. Root Panel<br />…<br />Panel<br />…<br />Round Range<br />
  58. 58. Panel<br />mapsTo: mx.Panel<br />Round Range<br />mapsTo: custom.RRange<br />
  59. 59. Informal Use Study<br />
  60. 60. Music Player<br />Windows Mobile<br />Adobe Flex<br />
  61. 61. 8 Participants<br />
  62. 62. Observations<br />
  63. 63. FastTesting<br />Used by<br />almostevery participant<br />
  64. 64. Great for software <br />maintenance!<br />
  65. 65. CopyingElements<br />Useful, but…<br />… what’s on the clipboard?<br />… canwe copy more than<br /> the content?<br />
  66. 66. Conclusions<br />
  67. 67. Design Environment<br />Cross-Device Copies<br />LinkedEditing<br />
  68. 68. Jelly is Open Source !<br />http://research.edm.uhasselt.be/jmeskens/jelly<br />
  69. 69. Questions?<br />Jelly is Open Source ! <br />http://research.edm.uhasselt.be/jmeskens/jelly<br />Jan.Meskens@UHasselt.be<br />meskensj<br />

×