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 Splitting Rules for Graceful Degradation of User Interfaces

2. AVI’06May 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,…)

3. AVI’06May 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

4. AVI’06May 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 Rules Source interface Target interface

5. AVI’06May 23-26, 2006, Venezia, Italy Outline  Specification Language  Transformation Rules & Tool Support  Splitting Rules

6. AVI’06May 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)

7. AVI’06May 23-26, 2006, Venezia, Italy UsiXML: Concrete User Interface  Concrete User Interface  Presentation model (widgets, layout, behaviour)  Example:

8. AVI’06May 23-26, 2006, Venezia, Italy UsiXML: Tasks and Concepts  Domain model (class diagram) + Task model  Example: CTT (ConcurTaskTree) formalism

9. AVI’06May 23-26, 2006, Venezia, Italy UsiXML: Abstract User Interface  Abstract User Interface = Definition of interaction spaces (distribution of tasks among windows, pages,…)  Example:

10. AVI’06May 23-26, 2006, Venezia, Italy Multilayer application of the rules

11. AVI’06May 23-26, 2006, Venezia, Italy Outline  Specification Language  Transformation Rules & Tool Support  Splitting Rules

12. AVI’06May 23-26, 2006, Venezia, Italy Transformation Rules Resizing 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)

13. AVI’06May 23-26, 2006, Venezia, Italy Implementation  UsiXML’s CUI model (presentation model) can be produced graphically GrafiXML editor

14. AVI’06May 23-26, 2006, Venezia, Italy Implementation (2)  Transformation rules implemented as a plug-in to the graphical editor

15. AVI’06May 23-26, 2006, Venezia, Italy Implementation (3)  Sections of rules

16. AVI’06May 23-26, 2006, Venezia, Italy Implementation (3)  Sections of rules

17. AVI’06May 23-26, 2006, Venezia, Italy Implementation (3)  Sections of rules

18. AVI’06May 23-26, 2006, Venezia, Italy Implementation (4)  Rules selection / parameters

19. AVI’06May 23-26, 2006, Venezia, Italy Implementation (5)  Results

20. AVI’06May 23-26, 2006, Venezia, Italy Outline  Specification Language  Transformation Rules & Tool Support  Splitting Rules

21. AVI’06May 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

22. AVI’06May 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.

23. AVI’06May 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).

24. AVI’06May 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

25. AVI’06May 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

26. AVI’06May 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

27. AVI’06May 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

28. AVI’06May 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 (|||, |[]|, |=|, [])

29. AVI’06May 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

30. AVI’06May 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. SplittingDistribution

31. AVI’06May 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!