Murielle Florins 1 IAG-Louvain School of Management ISYS-Information Systems Unit Graceful Degradation: a Method for Designing Multiplatform Graphical User Interfaces Murielle Florins Ph.D. in Management Sciences Information Systems Louvain-la-Neuve, July 11th 2006

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 2 Problem description Building GUIs for multiplatform systems

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 3 Problem description(2) When the capabilities of each platform are very different  Hardware differences  Software differences Graphical toolkit ≠ Browser … screen size ≠ input devices ≠

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 4 User interfaces must be ≠ (adapted to their host platform) Problem description (3) Platforms are ≠ User interfaces must not be too ≠ (cross-platform consistency) A given user may use several platforms Our thesis: proposition of a method to address this dilemna between adaptation / cross-platform consistency This method is  Transformational  Model-based

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 5 Transformational Approach ? Transformation Rules Source interface Target interface Source platform More constrained platform Transformation from large screen to smaller interfaces  degradation Smooth transitions to usable UIs  graceful degradation

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 6 Model-based Approach Model-based approaches rely on a specification of the UI The specification is usually shared between a set of components, called models, which are an abstract description of the UI UI Models Level of the code, running interface Abstract description

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 7 Model-based Approach (2) A model  Represents a facet of the UI’s characteristics (e.g; presentation, functions,…)  Belongs to a given abstraction level Models structured in four abstraction levels (CAMELEON framework)

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 8 Final User Interface Not a model Code, running UI

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 9 Concrete User Interface Description of the UI in terms of  Presentation objects such as windows, buttons, check boxes, images,…  + their layout relationships

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 10 Tasks & Concepts Domain model (= class diagram) Task model

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 11 Abstract User interface Definition of interaction spaces (distribution of tasks among windows, pages,…)

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 12 State-of-the-art Major trend in model-based development of multiplatform UIs = « multireification »  Input = 1 abstract description, independent from the code  Output= N platform specific versions of the code

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 13 State-of-the-art (2) The input may belong to any abstraction level, for example:  Concrete User Interface (SEESCOA, LiquidUI, …)  Tasks and Concepts (ArtsStudio, TERESA)

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 14 State-of-the-art (3) Advantages:  Single specification  generation of multiple versions of the UI  No coding required  UI adapted to their target platform (depending on the heuristics implemented in supporting tools) Limitations:  Specifications at lower abstraction level : one specification per platform family required  Specifications at abstract level: lack of human control Automatic generation

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 15 Graceful Degradation Horizontal Multi-layer Expected advantages: control - cross-platform consistency 2 basic ingredients required for Graceful Degradation:  A multi-layer specification language  A catalog of transformation rules

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 16 Outline Introduction: the graceful degradation design method Specification language Rules for Graceful Degradation Tools Case Studies Validation Conclusion

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 17 The UsiXML Specification Language 1 language, many models

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 18 UsiXML (2) 1 language, distinct abstraction layers

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 19 UsiXML (3) Our input:

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 20 Platform Model

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 21 Interactor Model = Meta-model of UsiXML’s interactors UsiXML has 2 concepts for “Interactors”  CIOs (Concrete User Interface) E.g; menu, button  AIOs (Abstract User Interface), composed of facets, defined by their functionalities and data types E.g; Limitations:  Pre-established set of CIO’s  No restriction on AIO’s: any number and type of facets allowed  Lack of pre-established mappings between CIO’s and AIO’s  Lack of pre-established mappings between CIO’s/AIO’s and the data types/task types they support

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 22 Interactor Model (2) Uses: meta-description of graphical toolkits for interactor substitution, interactor selection or reverse engineering

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 23 Outline Introduction Language and Models Rules for Graceful Degradation Tools Case Studies Validation Conclusion

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 24 Rules for Graceful Degradation Constitution of an original corpus of rules Typology of rules, following the CAMELEON framework:  (Rules at the Final User Interface level)  Rules at the Concrete User Interface level  Rules at the Abstract User Interface level  Rules at the Tasks & Concepts level Structured description of these rules Formalization using OCL

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 25 Rules at the Concrete UI level Transformation of graphical objects  Resizing rules  Modification rules  Substitution rules  Removal rules Transformation of graphical relationships  Reorientation rules  Moving rules

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 26 Rules at the Concrete UI level Transformation of graphical objects  Resizing rules  Modification rules  Substitution rules  Removal rules Transformation of graphical relationships  Reorientation rules  Moving rules

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 27 Rules at the Concrete UI level Transformation of graphical objects  Resizing rules  Modification rules  Substitution rules  Removal rules Transformation of graphical relationships  Reorientation rules  Moving rules

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 28 Rules at the Concrete UI level Transformation of graphical objects  Resizing rules  Modification rules  Substitution rules  Removal rules Transformation of graphical relationships  Reorientation rules  Moving rules

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 29 Rules at the Concrete UI level Transformation of graphical objects  Resizing rules  Modification rules  Substitution rules  Removal rules Transformation of graphical relationships  Reorientation rules  Moving rules

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 30 Rules at the Concrete UI level Transformation of graphical objects  Resizing rules  Modification rules  Substitution rules  Removal rules Transformation of graphical relationships  Reorientation rules  Moving rules

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 31 Rules at the Abstract UI level Spitting rules Consist in breaking the initial UI into chunks + adding transitions

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 32 Rules at the Abstract UI level (2) Important because:  Difficult and significant step: generates important changes into the very structure of the UI  Appreciated by users Supporting algorithms developed during the thesis. Originality: involve UI description at several abstraction levels  Can be rely on the sole CUI level  Can exploit information from the AUI / task models.

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 33 Rules at the Abstract UI level (3) Source interface (in the graphical editor GrafiXML) (b) Execution of the splitting rule (a) box Application of the rule using CUI level information

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 34 Rules at the Abstract UI level (4) Application of the rule using task level information

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 35 Rules at the Tasks&Concepts level Task deletion Information summarization …

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 36 Outline Introduction Language and Models Rules for Graceful Degradation Tools Case Studies Validation Conclusion

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 37 Tools Support of manual design of multiplatform UIs  knowledge base of transformation rules Support of a semi-automatic application of the rules  GD plug-in

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 38 Knowledge Base

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 39 Knowledge Base (2)

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 40 Knowledge Base (3)

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 41 Knowledge Base (4)

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 42 GD Plug-in A plug-in to the GrafiXML editor

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 43 GD Plug-in (2) UsiXML’s CUI model can be produced graphically GrafiXML editor

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 44 GD Plug-in (3) Transformation rules implemented as a plug-in to the graphical editor

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 45 GD Plug-in (4) Sections of rules

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 46 GD Plug-in (4) Sections of rules

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 47 GD Plug-in (4) Sections of rules

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 48 GD Plug-in (5) Rules selection / parameters

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 49 GD Plug-in (6) Results

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 50 Outline Introduction Language and Models Rules for Graceful Degradation Tools Case Studies Validation Conclusion

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 51 Case Studies Cover the two types of scenarios envisioned for the use of GD rules:  Semi-automatic adaptation using the GD plug-in: the hotel booking system  Manual adaptation of an existing user interface to a more constrained platform by a human designer: scenario applied on the ARTHUR case study

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 52 The Hotel Booking System Source User Interface

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 53 The Hotel Booking System (2) Target User Interfaces

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 54 The Hotel Booking System: discussion Positive aspect  Semi-automatic production of several design alternatives, even with a limited set of transformation rules Limitations  Of the current implementation: execution of some rules, preview  Of the current tool design: lack of undo facility – no possibility of graphical selection of objects -> low usability  Of the approach for some complex layout modifications (contraints solving?)  Lack of realistic preview: difficulty of evaluating the screen area needed for display (platform specific)

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 55 The ARTHUR Case Study Information system for emergency departments in Belgian hospitals Multi-device: workstations, Pocket PCs, wall display First versions of ARTHUR’s UIs designed for desktops  investigation of design alternatives for PDA’s using GD rules Video

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 56 The ARTHUR Case Study: discussion Learnings:  Limits of model-based multireification approaches (complexity – high level of usability required)  Insertion of GD in a software development cycle (fast- prototyping of UIs – desktop first)

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 57 Outline Introduction Language and Models Rules for Graceful Degradation Tools Case Studies Validation Conclusion

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 58 Validation Goal  Measuring the usability of the UIs produced with the graceful degradation approach Quantitative measurements (task completion time) User satisfaction (questionnaires)  Investigating the cross-platform consistency of these UIs Experiment  12 participants  2 source UI’s, each with 4 PDA versions A. direct migration B. application of layout modification rules C. application of splitting rules D. ad-hoc development  1 task per group, repeated on 5 versions of the UI

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 59 Experimental UIs

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 60 Experimental UIs (2)

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 61 Results Evaluation of the usability  Hypothesis: D (ad-hoc version) > C (splitting)> B (layout modification) > A (direct migration)  Experimental results: Evaluation of the 4 PDA versions of the 1st source UI Evaluation of the 4 PDA versions of the 2st source UI Splitting + sequential navigation Splitting + fully-connected navigation

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 62 Results (2) Evaluation of the cross-platform consistency  Hypothesis: A (direct migration) > B (layout modification) > C (splitting) > D (ad-hoc version)  Experimental results: (1) “A” versions not recognized as identical to their source desktop version (2) Order B>C>D not contradictory with experimental data

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 63 Results (3) Discussion:  Variables not covered by the experiment may have an impact on usability: The type of GD rule The characteristics of the source UI  Possible bias: Not all PDA’s versions produced by independent designers None of the participants was an actual PDA user  Not all results statistically significant

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 64 Outline Introduction Language and Models Rules for Graceful Degradation Tools Case Studies Validation Conclusion

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 65 Conclusion: contributions Theoretical and conceptual contributions  Proposition of a platform model and an interactor model for the UsiXML user interface language  Catalog of rules: Gathering – Typology – Formalization - Structure  Splitting algorithm Methodological contribution  Feasability, both manually and semi-automatically  Evaluation Tools developed  Knowledge base: 1st tool for managing databases of adaptation rules?  GD plug-in: support of « horizontal » transformations, on multi-layer specifications

IAG-Louvain School of Management ISYS-Information Systems Unit Murielle Florins 66 Acknowledgments This thesis was realized thanks to the support of:  The Salamandre Project, funded by the ‘Initiatives III’ program of the Ministry of Walloon Region (DGTRE, Belgium) in association with the ARTHUR project.  The ISYS research unit at IAG, UCL.  The SIMILAR network of excellence supported by the 6th Framework Program of the European Commission.