Université catholique de Louvain (UCL) Belgian Laboratory of Computer-Human Interaction (BCHI)...
-
Upload
garry-mckenzie -
Category
Documents
-
view
214 -
download
0
description
Transcript of Université catholique de Louvain (UCL) Belgian Laboratory of Computer-Human Interaction (BCHI)...
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 UI2) 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 ApproachSource
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 Model2. 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 boxItem 1Item 2Item 3Item 4
Item 5Item 6Item 7Item 8
Item 1Item 2Item 3Item 4Item 5Item 6Item 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