Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1...
-
Upload
may-nichols -
Category
Documents
-
view
218 -
download
0
Transcript of Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1...
![Page 1: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/1.jpg)
Murielle Florins1, Francisco Montero Simarro2, Jean Vanderdonckt1, Benjamin Michotte1
1Université catholique de Louvain 2Universidad de Castilla-la-Mancha
Splitting Rules for Graceful Degradation of User Interfaces
![Page 2: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/2.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Context Problem = Designing graphical user interfaces for
multiplatform systems… … When the capabilities of each platform are very
different (screen size and resolution,…)
![Page 3: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/3.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Context Designing and developing GUIs for such different
devices is a difficult task, implying perpetual trade-offs between: the usability of each particular version the cross-platform consistency
Our method for designing GUIs for multiplatform systems = Graceful Degradation
![Page 4: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/4.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Method:Graceful Degradation of GUIs
Graceful Degradation is a Model-based method Consists in specifying one source interface, designed for the least
constrained platform + transformation rules specific interfaces targeted to more constrained platforms.
?Transformation RulesSource interface
Target interface
![Page 5: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/5.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Outline Specification Language Transformation Rules & Tool Support Splitting Rules
![Page 6: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/6.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Multilayer Language
User Interface Description Language UsiXML 1 language – 3 layers
Source code
Specification in UsiXML
“CAMELEON framework” (Calvary & al. EHCI’01)
![Page 7: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/7.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
UsiXML: Concrete User Interface
Concrete User Interface Presentation model (widgets, layout, behaviour)
Example:
![Page 8: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/8.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
UsiXML: Tasks and Concepts
Domain model (class diagram) + Task model Example:
CTT (ConcurTaskTree)
formalism
![Page 9: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/9.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
UsiXML: Abstract User Interface
Abstract User Interface = Definition of interaction spaces (distribution of tasks among windows, pages,…)
Example:
![Page 10: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/10.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Multilayer application of the rules
![Page 11: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/11.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Outline Specification Language Transformation Rules & Tool Support Splitting Rules
![Page 12: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/12.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Transformation RulesResizing rules
Font size reduction
Input field shrinkage
Number of visible list items decrease
Moving rules
Vertical repositioning in columns
Vertical alignment of group box content
Interactor transformations
Interactor substitution (substitution of an interactor by another interactor supporting the same data type and the same functionalities)
Image transformations
Replace image by Alt (replace images by a textual description)
Splitting rules
Interaction space splitting (with different navigation types)
![Page 13: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/13.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Implementation
UsiXML’s CUI model (presentation model) can be produced graphically
GrafiXML editor
![Page 14: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/14.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Implementation (2)
Transformation rules implemented as a plug-in to the graphical editor
![Page 15: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/15.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Implementation (3)
Sections of rules
![Page 16: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/16.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Implementation (3)
Sections of rules
![Page 17: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/17.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Implementation (3)
Sections of rules
![Page 18: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/18.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Implementation (4)
Rules selection / parameters
![Page 19: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/19.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Implementation (5)
Results
![Page 20: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/20.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Outline Specification Language Transformation Rules & Tool Support Splitting Rules
![Page 21: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/21.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Splitting rules
Splitting is the most difficult and significant step of the whole graceful degradation process: Splitting generates important changes into the very structure
of the UI Splitting has an important influence on the quality of the final
results Splitting is appreciated by users that consider it as one of
the most useful GD rules
Splitting rules will be examined at two levels of abstraction: Concrete UI and Abstract UI
![Page 22: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/22.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Splitting rules at the Concrete UI level
Not all layers are mandatory in a UI specification in UsiXML. In the simplest case, the designer only produces a description of the Concrete User Interface
Different constructs in the CUI model of UsiXML can be used for pagination purposes: The layout is specified using embedded boxes. Those boxes are
declared as splittable or unsplittable, which is the basic ingredient for pagination.
Each container and each component is marked as pageable or unpageable. Pageable components can be distributed between the graphical containers created during the splitting process, while unpageable components must be present in each fragment.
Transitions can be specified between each pair of containers.
![Page 23: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/23.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Splitting rules at the Concrete UI level (2)
Each execution of our splitting rules is fully controllable and configurable by the designer. The parameters of the algorithm are: The names assigned to each interactive space at output,
which will be used as windows titles and for widgets pointing to these interactive spaces.
The type of transitions generated between the new interaction spaces generated by the splitting algorithm. Four types of transitions are proposed: linear navigation (e.g., through ‘next-previous’ links or buttons), indexed navigation (creation of a new page, the index, which links to the other interaction spaces), mixed navigation (combination of linear and indexed navigation) and fully-connected (typically rendered as a tabbed panel).
![Page 24: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/24.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Illustration
Target interfaces, with different parameters values for navigation
Source interface (in the graphical editor GrafiXML)
(b)
Execution of the splitting rule
(a)
box box
box
![Page 25: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/25.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Splitting rules at the Abstract UI level
When a task model and an Abstract UI have been produced, they can be used to refine the splitting rule
At the Abstract UI level, our splitting rules exploit: The hierarchical structure of the task model The temporal operators between these tasks (based on
LOTOS) The priority ordering between these temporal operators
![Page 26: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/26.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Splitting rules at the AUI level (2)
Principle 1: An interaction space can be split at the level of a sequential operator
Interaction space on source
platform
Interaction spaces on target
platform
![Page 27: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/27.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Splitting rules at the AUI level (3)
Principle 2: When an interaction space includes several sequential tasks, split before the first optional task in the sequence
![Page 28: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/28.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Splitting rules at the AUI level (4)
Principle 3: When it is not possible to split an interaction space at the level of a sequential operator, split at the level of a concurrent, order independency or choice operator (|||, |[]|, |=|, [])
![Page 29: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/29.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Splitting rules at the AUI level (5) Principle 4: When splitting rules can be applied at
distinct levels in the task hierarchy, split at the highest level
![Page 30: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/30.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Splitting rules at the AUI level (6)
Principle 5: When splitting in the scope of an operator with a higher priority, a distribution of tasks amongst target interaction spaces has to be operated.
Splitting Distribution
![Page 31: Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.](https://reader033.fdocuments.net/reader033/viewer/2022051517/5697bfe31a28abf838cb4f6c/html5/thumbnails/31.jpg)
AVI’06 May 23-26, 2006, Venezia, Italy
Conclusion Novelty: transformations performed on multi-
layer specification Quality depends on the quality of the
specification Scope:
Design-time Model-based
Thank you!