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

1
Graceful Degradation of User Interfaces as a
Design Method for Multiplatform Systems

• Murielle Florins Jean Vanderdonckt

2
Description 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

3
Model-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

4
Model-based Approach
Multiplatform generation
Specification-based design
Reverse engineering
Graceful Degradation
5
Transformational Approach
Source Interface
Target

Transformation Rules
?

• transformations from large screen to smaller
  interfaces
• ? degradation
• smooth transitions to usable UIs
• ? graceful degradation

6
Graceful Degradation Rules Exploratory Study

• 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)

7
GD Rules Typology

• GD rules have been classified using the CAMELEON
  framework
• Context-sensitive
  UIs,
• Model-based
  approach

8
GD Rules Tasks Concepts Level
Task Model
Domain Model
9
Tasks Model (example)
10
Transformation Rule on Task Model (example 1)
11
Transformation Rule on Task Model (example 2)
gtgt
gtgt
gtgt
12
Domain Model (example)

BOOK

AUTHOR
BookNbr
Title
Name
0-N
1-N
writes
Publisher
FirstName0-1
PublDate
Land0-N
Keywords1-10
1-N
of
1-1
COPY
CopyNbr
Localisation
13
Transformation Rule on Domain Model (example 1)

BOOK

AUTHOR
BookNbr
Title
Name
0-N
1-N
writes
Publisher
FirstName0-1
PublDate
Land0-N
Keywords1-10
1-N
of
1-1
COPY
CopyNbr
Localisation
14
Transformation Rule on Domain Model (example 2)

BOOK

AUTHOR
BookNbr
Title
Name
0-N
1-N
writes
Publisher
FirstName0-1
PublDate
Land0-N
Keywords1-10
1-N
of
1-1
COPY
CopyNbr
Localisation
15
GD Rules Abstract User Interface Level

Description of the UI in terms of Presentation
Units (PUs) list of tasks ?same container
(window, panel, card,)
16
Presentation Units (example)

17
Splitting Rules (Example)

18
Splitting 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

19
GD Rules Concrete User Interface Level
Description of the UI in terms of - Graphical
objects or Interactors - Relationships between
graphical objects
20
GD Rules Concrete User Interface Level

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

21
GD Rules Graphical Objects Transformations

• - 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

22
GD Rule at the Concrete Interface Level(example
1)
23
GD Rule at the Concrete Interface Level(example
2)
Add all gtgt
Add gt
lt Remove
ltlt Remove all
Item 1
24
GD Rules Layout Relationships Transformations
- 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
25
GD Rule at the Concrete Interface Level (example
3)
26
GD Rule at the Concrete Interface Level (example
4)
27
GD Rules Final User Interface Level

Source code
28
GD 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

29
Conclusion

• 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
• systems able to adapt their user interface at
  run-time in response to changes in the screen
  resolution
• a design environment that will provide designers
  with assistance in obtaining a graceful
  degradation of UIs

30
GrafiXML