Université catholique de Louvain (UCL)Belgian Laboratory of Computer-Human Interaction (BCHI)Place des Doyens, 1B-1348 Louvain-la-Neuve (Belgium)

Presented by

Graceful Degradation of User Graceful Degradation of User Interfaces as a Design Method for Interfaces as a Design Method for

Multiplatform SystemsMultiplatform Systems

Murielle Florins & Jean Vanderdonckt

Description of the ProblemDescription of the Problem

Problem = Building user interfaces for multiplatform systems when the capabilities of each platform are very different (screen size and resolution, input devices, available widgets,…)

Our approach to the multiplatform problem is

-transformational

-model-based

Model-based ApproachModel-based Approach

3 types of model-based approaches to the multiplatform problem:

1) multiplatform generation (e.g. ArtStudio, Teresa)

1 generic task & domain model N platform specific UI

2) specification-based interface design (e.g. UIML)

N platform specific presentation & dialog model N platform specific UI

3) reverse engineering approach (e.g. Vaquita)

1 source code 1 specification

Model-based ApproachModel-based Approach

Multiplatform generation

Specification-baseddesign

Reverse engineering

Graceful Degradation

1 abtract spec (task & domain)

N codes

N specs (presentation &

dialogue)

N codes 1 code

1 spec.

N codes

1 spec. N adapted

spec

Transformational ApproachTransformational Approach

Source Interface Target

?Transformation Rules

- transformations from large screen to smaller interfaces

degradation

- smooth transitions to usable UIs

graceful degradation

Graceful Degradation Rules: Exploratory Graceful Degradation Rules: Exploratory StudyStudy

GD rules have been

- identified on a large number of publicly available applications running on several devices

- tested on the ARTHUR system (multidevices information system for emergency services in Belgian hospitals)

GD Rules TypologyGD Rules Typology

GD rules have been classified using the CAMELEON framework

Context-sensitive UIs,

Model-based approach

GD Rules: Tasks & Concepts LevelGD Rules: Tasks & Concepts Level

Task Model

Domain Model

Tasks Model (example)Tasks Model (example)

Transformation Rule on Task Model Transformation Rule on Task Model (example 1)(example 1)

Transformation Rule on Task Model Transformation Rule on Task Model (example 2)(example 2)

>>>> >>

Domain Model (example)Domain Model (example)

0-N1-N writes

1-1

1-N

of

COPYCopyNbrLocalisation

BOOKBookNbrTitlePublisherPublDateKeywords[1-10]

AUTHORNameFirstName[0-1]Land[0-N]

Transformation Rule on Domain Transformation Rule on Domain Model (example 1)Model (example 1)

0-N1-N writes

1-1

1-N

of

COPYCopyNbrLocalisation

BOOKBookNbrTitlePublisherPublDateKeywords[1-10]

AUTHORNameFirstName[0-1]Land[0-N]

Transformation Rule on Domain Transformation Rule on Domain Model (example 2)Model (example 2)

0-N1-N writes

1-1

1-N

of

COPYCopyNbrLocalisation

BOOKBookNbrTitlePublisherPublDateKeywords[1-10]

AUTHORNameFirstName[0-1]Land[0-N]

GD Rules: Abstract User Interface LevelGD Rules: Abstract User Interface Level

Description of the UI in terms of Presentation Units (PUs)

= list of tasks ∈same container (window, panel, card,…)

Presentation Units (example)Presentation Units (example)

Splitting Rules (Example)Splitting Rules (Example)

Splitting RulesSplitting Rules

• Can be applied automatically• From:

1. a CTT Task Model

2. a PU designed for the source platform

deduction of correct PUs for the target platform

GD Rules: Concrete User Interface LevelGD Rules: Concrete User Interface Level

Description of the UI in terms of

- Graphical objects or Interactors

- Relationships between graphical objects

GD Rules: Concrete User Interface LevelGD Rules: Concrete User Interface Level

2 types of GD rules at the Concrete UI level• Graphical Objects Transformations• Layout Relationships Transformations

GD Rules : GD Rules : Graphical Objects Graphical Objects TransformationsTransformations

- modifications rules modify the appearance of the graphical object

- substitution rules replace an interactor by 1 or N alternate interactor(s) with the same functionalities

- removal rules

GD Rule at the Concrete Interface LevelGD Rule at the Concrete Interface Level(example 1)(example 1)

GD Rule at the Concrete Interface LevelGD Rule at the Concrete Interface Level(example 2)(example 2)

Add all >>

Add >

<< Remove all

< Remove

>>

>

<<

<

>

<

Item 1Item 2Item 3Item 4Item 5Item 6Item 7

Item 1

Group box

Item 1Item 2Item 3Item 4

Item 5Item 6Item 7Item 8

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

GD Rules : GD Rules : Layout Relationships Layout Relationships TransformationsTransformations

- resizing rules, modify the dimensions of a graphical object

- reorientation rules modify the orientation of an object without other change in size or position

- moving rules

GD Rule at the Concrete Interface Level GD Rule at the Concrete Interface Level (example 3)(example 3)

GD Rule at the Concrete Interface Level GD Rule at the Concrete Interface Level (example 4)(example 4)

GD Rules: Final User Interface LevelGD Rules: Final User Interface Level

Source code

GD Rules: Final User Interface LevelGD Rules: Final User Interface Level

Examples:

- substitution of an image by an image in a compressed format

- reduction of the colour number

- reduction of font sizes

rules at that level do not benefit from a model-based approach

ConclusionConclusion

Main characteristics of the Graceful Degradation approach:- model-based, transformational approach- input: spec of the less constrainst UI- output: UI adapted to the target platform while minimizing the

gap between system versions

Automatic application of the rules in two cases:

1. systems able to adapt their user interface at run-time in response to changes in the screen resolution

2. a design environment that will provide designers with assistance in obtaining a graceful degradation of UIs

GrafiXMLGrafiXML