A Model-Based Approach for Distributed User Interfaces

Post on 29-Nov-2014

1.145 views 1 download

description

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.

Transcript of A Model-Based Approach for Distributed User Interfaces

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

A Model-Based Approach for Distributed User Interfaces

Jérémie Melchior, Jean Vanderdonckt and Peter Van RoyUniversité catholique de Louvain

EICS2011 - June 14, 2011

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

How to distribute things

MotivationsDrawbacks of Related WorkOur solutionCase StudiesDemonstrationFuture Work and Conclusion

ITEA UsiXML project #08026, 2009-20122

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Motivations

Mobile devices (iPad, iPhone,...) Smartphones are popular Distribution is often limited to algorithmic and

researchers Limitations of the user's space Need of independence between the user interface and

the application

ITEA UsiXML project #08026, 2009-20123

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Motivations

ITEA UsiXML project #08026, 2009-20124

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Drawbacks of Related Work

Lack of customizationPredefined distribution (wincuts)Lack of real-time distributionLack of reusability of the techniquesLack of distribution modellingLack of control on the distribution

ITEA UsiXML project #08026, 2009-20125

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Drawbacks of Related Work

Predefined distribution

ITEA UsiXML project #08026, 2009-20126

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Our solution

Model-based approach defining the distribution: CUI model in a XML-compliant format a specification language a step-wise method for modeling DUI

Unification of the techniques through a toolkit Real-time control on every single component of the UI Distribution of

whole part custom group of widgets

Multi-platform support (computer + tablets + smartphones)

ITEA UsiXML project #08026, 2009-20127

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Our solution

CUI model in a XML-compliant format with: buttons labels layouts entry (text edit) windows canvas (drawing area) ...

ITEA UsiXML project #08026, 2009-20128

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Our solution

a specification language

e.g.:  DISPLAY button(text:"Start" action:Start name:button_1)

create a button with the text "Start" on it Start is the algorithm triggered by the button named this button_1 for distribution without specifying a platform: default platform 

COPY button_1 TO shared_display copy the existing button_1 to the platform "shared_display" ...

ITEA UsiXML project #08026, 2009-20129

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Our solution

a step-wise method for modeling DUI new concept: Distribution Graph

CUI widget Platform without CUI Platform with CUI

ITEA UsiXML project #08026, 2009-201210

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Our solution

Unification of the techniques through a toolkitthe toolkit is based on a catalog of primitives:

Set, Display, Undisplay, ExposeCopy, Move, Switch, PermuteMerge, Separate, Replace, Distribute, Reset, Append,

TransformSave, Restore, Import, Export

ITEA UsiXML project #08026, 2009-201211

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Case Studies

Pictionary: a naturally distributed game Minesweeper: a non-naturally distributed game Game of the Goose: an evolutive game through real-time

redistribution 

ITEA UsiXML project #08026, 2009-201212

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Case Studies

Pictionary: a naturally distributed game

Minesweeper: a non-naturally distributed game Game of the Goose: an evolutive game through real-time

redistribution 

ITEA UsiXML project #08026, 2009-201213

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Pictionary

Pictionary: a naturally distributed game

ITEA UsiXML project #08026, 2009-201214

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Pictionary

Pictionary: a naturally distributed game

ITEA UsiXML project #08026, 2009-201215

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Pictionary

Pictionary: a naturally distributed game

ITEA UsiXML project #08026, 2009-201216

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Pictionary

Pictionary: a naturally distributed game

ITEA UsiXML project #08026, 2009-201217

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Pictionary

Pictionary: a naturally distributed game

ITEA UsiXML project #08026, 2009-201218

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Pictionary: a naturally distributed game control on the UI

Pictionary

ITEA UsiXML project #08026, 2009-201219

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Pictionary: a naturally distributed game control on the UI distribution scenario

Pictionary

ITEA UsiXML project #08026, 2009-201220

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Pictionary: a naturally distributed game control on the UI distribution scenario

UNDISPLAY color_bar , guess_word TO pictionary_UI OF observers , guessers

EXPOSE draw_area TO pictionary_UI OF observers , guessers

Pictionary

ITEA UsiXML project #08026, 2009-201221

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Case Studies

Pictionary: a naturally distributed game Minesweeper: a non-naturally distributed game

Game of the Goose: an evolutive game through real-time redistribution 

ITEA UsiXML project #08026, 2009-201222

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Case Studies

Pictionary: a naturally distributed game Minesweeper: a non-naturally distributed game

Game of the Goose: an evolutive game through real-time redistribution 

ITEA UsiXML project #08026, 2009-201223

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Case Studies

Pictionary: a naturally distributed game Minesweeper: a non-naturally distributed game

Game of the Goose: an evolutive game through real-time redistribution 

ITEA UsiXML project #08026, 2009-201224

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Case Studies

Pictionary: a naturally distributed game Minesweeper: a non-naturally distributed game

Game of the Goose: an evolutive game through real-time redistribution 

ITEA UsiXML project #08026, 2009-201225

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Case Studies

Pictionary: a naturally distributed game Minesweeper: a non-naturally distributed game Game of the Goose: an evolutive game through real-time

redistribution 

ITEA UsiXML project #08026, 2009-201226

Ref

eren

ce W

Px/T

x.y/

YY

-MM

-DD

/PP

Future Work and Conclusion

Publication of the catalogAndroid performancesRelease the toolkit + samplesIntegration into UsiXML (UsiDistrib tool)Behavior behind distribution

ITEA UsiXML project #08026, 2009-201227