jelly: a multi-device design environment for managing consistency across devices
DESCRIPTION
TRANSCRIPT
UHasselt - Belgium
Jelly: A Multi-Device Design Environment for Managing Consistency across Devices
Jan Meskens, Kris Luyten and Karin Coninx
Multi-Device GUI Design
Mobile Phone
Smart Phone
Tablet PC
Notebook
ApplicationGUI GUI GUI GUI
Related Work
Generating GUIs Automatically
GUI GUI GUI GUI
Abstract Model
Generate an optimal UI for each device[Supple – Gajos et al., IUI ‘04]
Automatic remote control GUI generation[PUC – Nichols et al. TOCHI ‘09, UIST’06, CHI’07]
Such approaches are not designer oriented…
[Myers et al., TOCHI’00]
Multi-Device GUIDesign Tools
GUI GUI
(semi-) automatically transforming GUIs
DAMASK: Pattern transformations[Lin et al., CHI’08]
GUMMY: Hidden abstract model [Meskens et al., AVI’08]
What do designers think about this
approach?
We interviewed 9 designers about Gummy
TransformingParts of a GUI1
2[Grigoreanu et al., VL/HCC’09][Ko et al., VL/HCC’04]
Testing !
GUI Deployment takes time…
3[Lin et al., CHI’08]
ConsistencyManagement
GUI Content Update
4[Myers et al., VL/HCC’08]
Custom GUI Controls
JELLY
Multiple Design Workspaces
Flexible Toolbox
Flexible Toolbox
Flexible Toolbox
Jelly’s Features
1 Jelly TransformsParts of a GUI
Adobe FlexWindows Mobile
Cross-Device Widget “Copies”
What’s under the hood?
A Semantic UI Network
[Demeure et al., CADUI’06]
= UI Widget= Input/Output/Action= DataType
2Jelly can manageContent Consistency
[Toomim et al., VL/HCC’04]
Linked Editing
[Hartman et al., UIST’08]Linked Editing
Adobe Flex Windows Mobile
Linked Editing
3 Jelly supportsfast testing
Toolglass approach!
[Bier et al., Siggraph’93]
Transparent Canvas
GUI Renderer
GUI Renderer
Transparent Canvas
GUI Renderer
Transparent Canvas
What happens behind the scenes?
Jelly
Data Structure
XML / JSON Serialization
XMPP Network Communication
XML / JSON Deserialization
Data Structure
4Jelly can handlecustom components
…
…
Data Structure
XML / JSON Serialization
XMPP Network Communication
Self-Describing Data Structure
Root Panel
… Panel
… Round Range
Root Panel
… Panel
… Round Range
Panel
Round Range
mapsTo: mx.Panel
mapsTo: custom.RRange
Informal Use Study
Music PlayerWindows MobileAdobe Flex
8 Participants
Observations
Fast TestingUsed by
almost every participant
Great for software maintenance!
Copying ElementsUseful, but…
… what’s on the clipboard?… can we copy more than the content?
Conclusions
Design Environment
Cross-Device Copies
Linked Editing
Jelly is Open Source !http://research.edm.uhasselt.be/jmeskens/jelly
