Murielle Florins 1 IAG-Louvain School of Management ISYS-Information Systems Unit Graceful...

Murielle Florins 1

IAG-Louvain School of Management ISYS-Information Systems Unit

Graceful Degradation: a Method for Designing Multiplatform Graphical User InterfacesMurielle Florins

Ph.D. in Management SciencesInformation Systems

Louvain-la-Neuve, July 11th 2006


Murielle Florins 2

Problem description

Building GUIs for multiplatform systems


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 ≠


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


Murielle Florins 5

Transformational Approach

?Transformation Rules

Source interfaceTarget interface

Source platform More constrained platform

Transformation from large screen to smaller interfaces degradation

Smooth transitions to usable UIs

graceful degradation


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


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)


Murielle Florins 8

Final User Interface

Not a model Code, running UI


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


Murielle Florins 10

Tasks & Concepts Domain model (= class diagram)

Task model


Murielle Florins 11

Abstract User interface

Definition of interaction spaces (distribution of tasks among windows, pages,…)


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


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)


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


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


Murielle Florins 16

Outline Introduction: the graceful degradation design method Specification language Rules for Graceful Degradation Tools Case Studies Validation Conclusion


Murielle Florins 17

The UsiXML Specification Language 1 language, many models

modelTypeid : stringname : string

authorName

versionmodifDate : string

comment

transformationModel domainModel taskModel auiModel cuiModel mappingModel contextModel resourceModel

uiModelcreationDate : stringschemaVersion : string

0..n 0..n0..n 0..n

0..n1..n

0..n1..n

0..n 10..n 1

0..1

1

0..1

1

0..1

1

0..1

1

0..1

1

0..1

1

0..1

1

0..1

1

0..1

1

0..1

1

0..1

1

0..1

1

0..n

1

0..n

1

0..1

1

0..1

1


Murielle Florins 18

UsiXML (2) 1 language, distinct abstraction layers


Murielle Florins 19

UsiXML (3) Our input:


Murielle Florins 20

Platform Model


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


Murielle Florins 22

Interactor Model (2)

Uses: meta-description of graphical toolkits for interactor substitution, interactor selection or reverse engineering


Murielle Florins 23

Outline Introduction Language and Models Rules for Graceful Degradation Tools Case Studies Validation Conclusion


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


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


Murielle Florins 26





Murielle Florins 27





Murielle Florins 28





Murielle Florins 29





Murielle Florins 30





Murielle Florins 31

Rules at the Abstract UI level

Spitting rules Consist in breaking the initial UI into chunks

+ adding transitions


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.


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 box

box

Application of the rule using CUI level information


Murielle Florins 34

Rules at the Abstract UI level (4) Application of the rule using task level information


Murielle Florins 35

Rules at the Tasks&Concepts level

Task deletion Information summarization …


Murielle Florins 36



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


Murielle Florins 38

UsabilityProblemobjectConcerned

ConditionidConditionnameConditionnameDisplay

ChangeInPlatformFeaturenatureOfChange

TargetPlatformIs

PlatformFeatureidFeaturecategorynameFeaturenameDisplayvalueFeature

1

0..nconcerns

1..n

0..n

composedOf

1

0..n

1..n

0..n

ReactionRelationshiptypeOfRelationshipnameDisplay

ExampleidExamplefileName

ReactionidReactionnameReactionnameDisplaydescriptioninputoutputtypeformalDescriptionlevel

0..n

0..n

0..n

0..n

0..n 0..1+isChildOf

0..n

+isParentOf0..1

reactionHierarchy

0..n

0..n

0..n

0..n illustrates

SynonymsidSynonymnameSynonymlgSynonym

0..n

1synonymy

0..n

1

ReferenceidReferencetitlesourceURLcomments0..n

0..n

0..n

0..n

refers

0..n

0..1

0..n

0..1

refExample

AuthoridAuthornamefirstName

RefAuthorrank

0..n1..n 0..n1..n

KnowledgeBaseidBasenameBasenameDisplay

GDRuleidRulecentralityadvantagesdisadvantagesexceptions

1

1..n

1

1..n

1

1..n

1

1..n

SectionidSectionnameSectionnameDisplay1..n1..n 1..n1..n

baseComposition

1..n1..n 1..n1..n

sectionContent

0..n0..1

sectionHierarchy

+subsection+parentSection 0..n0..1

Knowledge Base


Murielle Florins 39

Knowledge Base (2)


Murielle Florins 40

Knowledge Base (3)


Murielle Florins 41

Knowledge Base (4)


Murielle Florins 42

GD Plug-in A plug-in to the GrafiXML editor


Murielle Florins 43

GD Plug-in (2) UsiXML’s CUI model can be produced graphically

GrafiXML editor


Murielle Florins 44

GD Plug-in (3) Transformation rules implemented as a plug-in to the graphical editor


Murielle Florins 45

GD Plug-in (4) Sections of rules


Murielle Florins 46



Murielle Florins 47



Murielle Florins 48

GD Plug-in (5) Rules selection / parameters


Murielle Florins 49

GD Plug-in (6) Results


Murielle Florins 50



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


Murielle Florins 52

The Hotel Booking System Source User Interface


Murielle Florins 53

The Hotel Booking System (2) Target User Interfaces


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)


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


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)


Murielle Florins 57



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


Murielle Florins 59

Experimental UIs


Murielle Florins 60

Experimental UIs (2)


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


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


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


Murielle Florins 64



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


Murielle Florins 66

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

Murielle Florins 1 IAG-Louvain School of Management ISYS-Information Systems Unit Graceful...

Documents

Transcript of Murielle Florins 1 IAG-Louvain School of Management ISYS-Information Systems Unit Graceful...