Splitting Rules for Graceful Degradation of User Interfaces

Splitting Rules for Graceful Degradation of User Interfaces Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha

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 tradeoffs 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. § Source interface AVI’ 06 Transformation Rules May 23 -26, 2006, Venezia, Italy ? Target interface

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

Multilayer Language User Interface Description Language Usi. XML Ø 1 language – 3 layers Ø Specification in Usi. XML Source code “CAMELEON framework” (Calvary & al. EHCI’ 01) AVI’ 06 May 23 -26, 2006, Venezia, Italy

Usi. XML: Concrete User Interface Presentation model (widgets, layout, behaviour) Ø Example: Ø AVI’ 06 May 23 -26, 2006, Venezia, Italy

Usi. XML: Tasks and Concepts Domain model (class diagram) + Task model Ø Example: Ø CTT (Concur. Task. Tree) formalism AVI’ 06 May 23 -26, 2006, Venezia, Italy

Usi. XML: 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 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) AVI’ 06 May 23 -26, 2006, Venezia, Italy

Implementation Ø Usi. XML’s CUI model (presentation model) can be produced graphically Grafi. XML 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 Usi. XML. In the simplest case, the designer only produces a description of the Concrete User Interface Ø Different constructs in the CUI model of Usi. XML 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 box (b) Execution of the splitting rule box Source interface (in the graphical editor Grafi. XML) AVI’ 06 (a) Target interfaces, with different parameters values for navigation 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 AVI’ 06 Interaction spaces on target platform 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 AVI’ 06 Distribution May 23 -26, 2006, Venezia, Italy

Conclusion Ø Novelty: transformations performed on multilayer specification Ø Quality depends on the quality of the specification Ø Scope: § Design-time § Model-based Thank you! AVI’ 06 May 23 -26, 2006, Venezia, Italy