Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1...

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,…)


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

Murielle Florins


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


Outline Specification Language Transformation Rules & Tool Support Splitting Rules


Multilayer Language

User Interface Description Language UsiXML 1 language – 3 layers

Source code

Specification in UsiXML

“CAMELEON framework” (Calvary & al. EHCI’01)


UsiXML: Concrete User Interface

Concrete User Interface Presentation model (widgets, layout, behaviour)

Example:


UsiXML: Tasks and Concepts

Domain model (class diagram) + Task model Example:

CTT (ConcurTaskTree)

formalism


UsiXML: Abstract User Interface

Abstract User Interface = Definition of interaction spaces (distribution of tasks among windows, pages,…)

Example:


Multilayer application of the rules


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)


Implementation

UsiXML’s CUI model (presentation model) can be produced graphically

GrafiXML editor


Implementation (2)

Transformation rules implemented as a plug-in to the graphical editor


Implementation (3)

Sections of rules


Implementation (4)

Rules selection / parameters


Implementation (5)

Results


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


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.


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).


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


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


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



Principle 2: When an interaction space includes several sequential tasks, split before the first optional task in the sequence



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 (|||, |[]|, |=|, [])


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



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


Conclusion Novelty: transformations performed on multi-

layer specification Quality depends on the quality of the

specification Scope:

Design-time Model-based

Thank you!

Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1...

Documents

Transcript of Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1...