murielle florins 1, francisco montero simarro 2, jean vanderdonckt 1, benjamin michotte 1 1...
TRANSCRIPT
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
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,…)
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
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
AVI’06 May 23-26, 2006, Venezia, Italy
Outline Specification Language Transformation Rules & Tool Support Splitting Rules
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)
AVI’06 May 23-26, 2006, Venezia, Italy
UsiXML: Concrete User Interface
Concrete User Interface Presentation model (widgets, layout, behaviour)
Example:
AVI’06 May 23-26, 2006, Venezia, Italy
UsiXML: Tasks and Concepts
Domain model (class diagram) + Task model Example:
CTT (ConcurTaskTree)
formalism
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:
AVI’06 May 23-26, 2006, Venezia, Italy
Multilayer application of the rules
AVI’06 May 23-26, 2006, Venezia, Italy
Outline Specification Language Transformation Rules & Tool Support Splitting Rules
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)
AVI’06 May 23-26, 2006, Venezia, Italy
Implementation
UsiXML’s CUI model (presentation model) can be produced graphically
GrafiXML editor
AVI’06 May 23-26, 2006, Venezia, Italy
Implementation (2)
Transformation rules implemented as a plug-in to the graphical editor
AVI’06 May 23-26, 2006, Venezia, Italy
Implementation (3)
Sections of rules
AVI’06 May 23-26, 2006, Venezia, Italy
Implementation (3)
Sections of rules
AVI’06 May 23-26, 2006, Venezia, Italy
Implementation (3)
Sections of rules
AVI’06 May 23-26, 2006, Venezia, Italy
Implementation (4)
Rules selection / parameters
AVI’06 May 23-26, 2006, Venezia, Italy
Implementation (5)
Results
AVI’06 May 23-26, 2006, Venezia, Italy
Outline Specification Language Transformation Rules & Tool Support Splitting Rules
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
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.
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).
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
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
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
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
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 (|||, |[]|, |=|, [])
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
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
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!