graceful degradation of user interfaces as a design method for multiplatform systems
TRANSCRIPT
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
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,…)
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
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