A Model-Based Approach for Distributed User Interfaces

1,112 views

Published on

This paper describes a model-based approach for designing distributed user interfaces (DUIs), i.e. graphical user interfaces that are distributed along one or many of the following dimensions: end user, display device, computing platform, and physical environment. The three pillars of this model-based approach are: (i) a Concrete User Interface model for DUIs incorporating the distribution dimensions and able to express in a XML-compliant format any DUI element until the granularity of an individual DUI element is reached, (ii) a specification language for DUI distribution primitives that have been defined in a user interface toolkit, and (iii), a step-wise method for modeling a DUI based on the concepts of distribution graph expressing a distribution scenario that can be played namely based on the distribution primitives. A distribution graph consists of a state transition diagram whose states represent significant distribution states of a DUI and whose transitions are labeled by an even-condition-action representation. The actions involved in this format may call any distribution primitive of the DUI toolkit. In order to exemplify this model-based approach, two simple DUIs are first designed: a DUI for the Pictionary game and a DUI for the Minesweeper game. They are then incorporated into a larger DUI game of the goose where cells may trigger the two other games.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide

A Model-Based Approach for Distributed User Interfaces

  1. 1. A Model-Based Approach for Distributed User Interfaces<br />Jérémie Melchior, Jean Vanderdonckt and Peter Van RoyUniversité catholique de Louvain<br />EICS2011 - June 14, 2011<br />
  2. 2. How to distributethings<br />Motivations<br />Drawbacks of Related Work<br />Our solution<br />Case Studies<br />Demonstration<br />Future Work and Conclusion<br />ITEA UsiXML project #08026, 2009-2012<br />2<br />
  3. 3. Motivations<br />Mobile devices (iPad, iPhone,...)<br />Smartphones are popular<br />Distribution is often limited to algorithmic and researchers<br />Limitations of the user's space<br />Need of independence between the user interface and the application<br />ITEA UsiXML project #08026, 2009-2012<br />3<br />
  4. 4. Motivations<br />ITEA UsiXML project #08026, 2009-2012<br />4<br />
  5. 5. Drawbacks of RelatedWork<br />Lack of customization<br />Predefined distribution (wincuts)<br />Lack of real-time distribution<br />Lack of reusability of the techniques<br />Lack of distribution modelling<br />Lack of control on the distribution<br />ITEA UsiXML project #08026, 2009-2012<br />5<br />
  6. 6. Drawbacks of Related Work<br />Predefined distribution<br />ITEA UsiXML project #08026, 2009-2012<br />6<br />
  7. 7. Our solution<br />Model-based approach defining the distribution:<br />CUI model in a XML-compliant format<br />a specification language<br />astep-wise method for modeling DUI<br />Unification of the techniques through a toolkit<br />Real-time controlon every single component of the UI<br />Distribution of <br />whole<br />part <br />custom group of widgets<br />Multi-platform support (computer + tablets + smartphones)<br />ITEA UsiXML project #08026, 2009-2012<br />7<br />
  8. 8. Our solution<br />CUI model in a XML-compliant format with:<br />buttons<br />labels<br />layouts<br />entry (text edit)<br />windows<br />canvas (drawing area)<br />...<br />ITEA UsiXML project #08026, 2009-2012<br />8<br />
  9. 9. Our solution<br />a specification language<br />e.g.: <br />DISPLAY button(text:"Start" action:Start name:button_1)<br />create a button with the text "Start" on it<br />Start is the algorithm triggered by the button<br />named this button_1 for distribution<br />without specifying a platform: default platform <br />COPYbutton_1 TO shared_display<br />copy the existing button_1 to the platform "shared_display"<br />...<br />ITEA UsiXML project #08026, 2009-2012<br />9<br />
  10. 10. Our solution<br />a step-wise method for modeling DUI<br />new concept: Distribution Graph<br /> CUI widget<br /> Platform without CUI<br /> Platform with CUI<br />ITEA UsiXML project #08026, 2009-2012<br />10<br />
  11. 11. Our solution<br />Unification of the techniques through a toolkit<br />the toolkit is based on a catalog of primitives:<br />Set, Display, Undisplay, Expose<br />Copy, Move, Switch, Permute<br />Merge, Separate, Replace, Distribute, Reset, Append, Transform<br />Save, Restore, Import, Export<br />ITEA UsiXML project #08026, 2009-2012<br />11<br />
  12. 12. Case Studies<br />Pictionary: a naturally distributed game<br />Minesweeper: a non-naturally distributed game<br />Game of the Goose: an evolutive game through real-time redistribution <br />ITEA UsiXML project #08026, 2009-2012<br />12<br />
  13. 13. Case Studies<br />Pictionary: a naturally distributed game<br />Minesweeper: a non-naturally distributed game<br />Game of the Goose: an evolutive game through real-time redistribution <br />ITEA UsiXML project #08026, 2009-2012<br />13<br />
  14. 14. Pictionary<br />Pictionary: a naturally distributed game<br />ITEA UsiXML project #08026, 2009-2012<br />14<br />
  15. 15. Pictionary<br />Pictionary: a naturally distributed game<br />ITEA UsiXML project #08026, 2009-2012<br />15<br />
  16. 16. Pictionary<br />Pictionary: a naturally distributed game<br />ITEA UsiXML project #08026, 2009-2012<br />16<br />
  17. 17. Pictionary<br />Pictionary: a naturally distributed game<br />ITEA UsiXML project #08026, 2009-2012<br />17<br />
  18. 18. Pictionary<br />Pictionary: a naturally distributed game<br />ITEA UsiXML project #08026, 2009-2012<br />18<br />
  19. 19. Pictionary: a naturally distributed game<br />control on the UI<br />Pictionary<br />ITEA UsiXML project #08026, 2009-2012<br />19<br />
  20. 20. Pictionary: a naturally distributed game<br />control on the UI<br />distribution scenario<br />Pictionary<br />ITEA UsiXML project #08026, 2009-2012<br />20<br />
  21. 21. Pictionary: a naturally distributed game<br />control on the UI<br />distribution scenario<br />UNDISPLAYcolor_bar, guess_wordTO pictionary_UIOF observers, guessers<br />EXPOSEdraw_area TO pictionary_UIOF observers, guessers<br />Pictionary<br />ITEA UsiXML project #08026, 2009-2012<br />21<br />
  22. 22. Case Studies<br />Pictionary: a naturally distributed game<br />Minesweeper: a non-naturally distributed game<br />Game of the Goose: an evolutive game through real-time redistribution <br />ITEA UsiXML project #08026, 2009-2012<br />22<br />
  23. 23. Case Studies<br />Pictionary: a naturally distributed game<br />Minesweeper: a non-naturally distributed game<br />Game of the Goose: an evolutive game through real-time redistribution <br />ITEA UsiXML project #08026, 2009-2012<br />23<br />
  24. 24. Case Studies<br />Pictionary: a naturally distributed game<br />Minesweeper: a non-naturally distributed game<br />Game of the Goose: an evolutive game through real-time redistribution <br />ITEA UsiXML project #08026, 2009-2012<br />24<br />
  25. 25. Case Studies<br />Pictionary: a naturally distributed game<br />Minesweeper: a non-naturally distributed game<br />Game of the Goose: an evolutive game through real-time redistribution <br />ITEA UsiXML project #08026, 2009-2012<br />25<br />
  26. 26. Case Studies<br />Pictionary: a naturally distributed game<br />Minesweeper: a non-naturally distributed game<br />Game of the Goose: an evolutive game through real-time redistribution <br />ITEA UsiXML project #08026, 2009-2012<br />26<br />
  27. 27. Future Work and Conclusion<br />Publication of the catalog<br />Android performances<br />Release the toolkit+ samples<br />Integrationinto UsiXML (UsiDistrib tool)<br />Behaviorbehind distribution<br />ITEA UsiXML project #08026, 2009-2012<br />27<br />

×