1. Jelly: A Multi-Device Design Environment for Managing Consistency across Devices UHasselt - Belgium Jan Meskens, Kris Luyten and Karin Coninx

2. Multi-Device GUI Design

3. Mobile Phone

4. Smart Phone

5. Tablet PC

6. Notebook

7. Application GUI GUI GUI GUI

8. RelatedWork

9. Generating GUIs Automatically

10. GUI GUI GUI GUI Abstract Model

11. Generate an optimal UI for each device [Supple – Gajos et al., IUI ‘04]

12. Automatic remote control GUI generation [PUC – Nichols et al. TOCHI ‘09, UIST’06, CHI’07]

13. Such approaches are not designer oriented… [Myers et al., TOCHI’00]

14. Multi-Device GUI Design Tools

15. GUI GUI (semi-) automatically transforming GUIs

16. DAMASK: Pattern transformations [Lin et al., CHI’08]

17. GUMMY: Hidden abstract model [Meskens et al., AVI’08]

18. What do designers think about thisapproach?

19. We interviewed 9 designers about Gummy

20. 1 Transforming Parts of a GUI

21. GUI Deployment takes time… 2 Testing ! [Grigoreanu et al., VL/HCC’09] [Ko et al., VL/HCC’04]

22. GUI Content Update Consistency Management 3 [Lin et al., CHI’08]

23. Custom GUI Controls 4 [Myers et al., VL/HCC’08]

24. JELLY

26. Multiple Design Workspaces

27. Flexible Toolbox

28. Flexible Toolbox

29. Flexible Toolbox

31. Jelly’sFeatures

32. Jelly Transforms Parts of a GUI 1

33. Cross-Device Widget “Copies” Adobe Flex Windows Mobile

37. What’s under the hood?

38. [Demeure et al., CADUI’06] A Semantic UI Network

39. = UI Widget = Input/Output/Action = DataType

41. Jelly can manage Content Consistency 2

42. Linked Editing [Toomim et al., VL/HCC’04] Linked Editing [Hartman et al., UIST’08]

43. Adobe Flex Windows Mobile Linked Editing

46. Jelly supports fast testing 3

47. Toolglass approach! [Bier et al., Siggraph’93]

48. GUI Renderer Transparent Canvas

49. Transparent Canvas GUI Renderer

50. Transparent Canvas GUI Renderer

51. Jelly What happens behind the scenes?

52. Data Structure Data Structure XML / JSON Serialization XML / JSON Deserialization XMPP Network Communication

53. Jelly can handle custom components 4

55. Self-Describing Data Structure … Data Structure … XML / JSON Serialization XMPP Network Communication

56. Root Panel … Panel … Round Range

57. Root Panel … Panel … Round Range

58. Panel mapsTo: mx.Panel Round Range mapsTo: custom.RRange

59. Informal Use Study

60. Music Player Windows Mobile Adobe Flex

61. 8 Participants

62. Observations

63. FastTesting Used by almostevery participant

64. Great for software maintenance!

65. CopyingElements Useful, but… … what’s on the clipboard? … canwe copy more than the content?

66. Conclusions

67. Design Environment Cross-Device Copies LinkedEditing

68. Jelly is Open Source ! http://research.edm.uhasselt.be/jmeskens/jelly

69. Questions? Jelly is Open Source ! http://research.edm.uhasselt.be/jmeskens/jelly Jan.Meskens@UHasselt.be meskensj