2. Human-Computer Interaction:
Adaptation, Distribution, Evaluation
Jean Vanderdonckt
Louvain School of Management (LSM)
Université catholique de Louvain (UCL)
Place des Doyens, 1 – 1348 Louvain-la-Neuve (Belgium)
jean.vanderdonckt@uclouvain.be
3. Who is talking?
Jean VANDERDONCKT
• Researcher in Human-Computer Interaction (HCI) since 1988
• Full professor at UCL, Past President of LSM Research Institute
• Co-editor-in-Chief of Springer HCI Series: www.springer.com/series/6033
• Co-editor-in-Chief of SpringerBriefs in HCI: www.springer.com/series/15580
• Associate Editor of ACM TiiS: http://tiis.acm.org/editorial.cfm
• Associate Editor of KAIS:
http://www.springer.com/computer/information+systems+and+applications/journal/10115
• Adv. Board of Interacting with Computers: http://iwc.oxfordjournals.org/
• Coordinator of the UsiXML Consortium: www.usixml.org
3
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
4. Who is talking?
• Google Scholar: http://scholar.google.com/citations?user=U-FgGrkAAAAJ
• LinkedIn Profile: http://www.linkedin.com/in/jeanvdd
• DBLP: http://www.informatik.uni-trier.de/~ley/pers/hd/v/Vanderdonckt:Jean
• Microsoft Academic: https://academic.microsoft.com/#/detail/2284081945
• Academia Profile: http://uclouvain.academia.edu/JeanVanderdonckt
• ResearchGate: https://www.researchgate.net/profile/Jean_Vanderdonckt2
• YouTube: http://www.youtube.com/results?search_query=usixml
• Slides: http://www.slideshare.net/jeanvdd
• Books: https://www.amazon.com/Jean-Vanderdonckt/e/B01640UKYK
4
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
5. What is adaptation?
• “The idea of an adaptive interface is straightforward.
Simply, it means that the interface should adapt to the
user; rather than the user adapting to the system”
• Adaptation consists in transforming different aspects
of the systems in different levels, according to the
context of use
– For example: concerning the presentation, the contrast can
be adapted according to the preference of the user
• How to consider all the possible dimensions, levels
and contexts?
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017 (Alger, 23-
25 April 2017)
5
Norcio and Stanley, Adaptive Human-Computer Interfaces: A literature survey and perspectives, IEEE Transactions on Systems, Man and
Cybernetics, Vol 19, n 2, March/April, 1989
6. Why to adapt?
• ‘One size does not fit all’
• Different contexts of use with different
– Users
• Age, impairments, preferences, profiles…
– Platforms
• Mobile phones, laptops, desktops, idTV…
– Environments
• Levels of light, noise, temperature…
• A context of use: C=(U, P, E)
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
6
Calvary, G., Coutaz, J., Thevenin, D., Limbourg, Q., Bouillon, L., Vanderdonckt, J.,
A Unifying Reference Framework for Multi-Target User Interfaces, Interacting with Computers, Vol. 15, No. 3, June 2003, pp. 289-308.
7. Interactive Software evolution: context of use =(U,P,E)
7
time
Platform
User
Environment
Language
What is the situation today?
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle &
Augmentée IVAR'2017 (Alger, 23-25 April 2017)
8. Diversity of Users
• Able-bodied users
• People with disabilities
– Visual
– Motor
– Cognitive
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
8
9. Diversity of Users
• Virtual User Modeling and Simulation (VUMS)
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
9
http://www.veritas-project.eu/
10. Variety of Tasks
• Taxonomy of canonical task types
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
10
González-Calleros, J.M., Guerrero-García, J., Vanderdonckt, J., Muñoz-Arteaga, J., Towards Canonical Task Types for User Interface Design, Proc. of LA-
Web/CLIHC'2009
11. [Forrester Research,2003]
Multiple Interaction Preferences
• Users want to determine their own path on each platform
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017 (Alger, 23-
25 April 2017)
11
12. Heterogeneous Platforms
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
12
http://wurfl.sourceforge.net/
13. Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
13
Heterogeneous Platforms
14. Many Contexts of Use
Location Role Device Experience
Sporting Music selection, clips
Working Travel booking site
Powerful interface for complex operations
Driving Trafic, weather notification
Everywhere connectivity for simple data exchange
Playing
Games
TV is multi-media family device #1
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle &
Augmentée IVAR'2017 (Alger, 23-25 April 2017)
14
15. 15
• The specialization of Norman’s model for adaptation
results into the ISATINE framework:
Goals for user
Interface adaptation
Meaning of an
input adaptation
Meaning of an
output adaptation
Specification
of adaptation
Shape of an
input adaptation
Shape of an
output adaptation
Application of
adaptation
INterpretation
of evaluation
Initiative for
adaptation
Evaluation
of adaptation
Interactive
System
Transition with
adaptation
Adaptation
semantic
distance
in input
Adaptation
articulatory
distance
in input
Adaptation
semantic
distance
in output
Adaptation
articulatory
distance
in output
Gulfofadaptationexecution
Gulfofadaptationevaluation
Goals for user
Interface adaptation
Meaning of an
input adaptation
Meaning of an
input adaptation
Meaning of an
output adaptation
Specification
of adaptation
Shape of an
input adaptation
Shape of an
output adaptation
Application of
adaptation
INterpretation
of evaluation
Initiative for
adaptation
Evaluation
of adaptation
Interactive
System
Interactive
System
Transition with
adaptation
Adaptation
semantic
distance
in input
Adaptation
articulatory
distance
in input
Adaptation
semantic
distance
in output
Adaptation
articulatory
distance
in output
Gulfofadaptationexecution
Gulfofadaptationevaluation
1U, S or a T maintains
up-to-date a series of
goals to ensure user
interface adaptation
THE ISATINE FRAMEWORK
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
López-Jaquero, V., Vanderdonckt, J.,
Montero, F., González, P., Towards an
Extended Model of User Interface
Adaptation: the ISATINE framework, Proc.
of EIS’2007
16. Goals for user
Interface adaptation
Meaning of an
input adaptation
Meaning of an
output adaptation
Specification
of adaptation
Shape of an
input adaptation
Shape of an
output adaptation
Application of
adaptation
INterpretation
of evaluation
Initiative for
adaptation
Evaluation
of adaptation
Interactive
System
Transition with
adaptation
Adaptation
semantic
distance
in input
Adaptation
articulatory
distance
in input
Adaptation
semantic
distance
in output
Adaptation
articulatory
distance
in output
Gulfofadaptationexecution
Gulfofadaptationevaluation
Goals for user
Interface adaptation
Meaning of an
input adaptation
Meaning of an
input adaptation
Meaning of an
output adaptation
Specification
of adaptation
Shape of an
input adaptation
Shape of an
output adaptation
Application of
adaptation
INterpretation
of evaluation
Initiative for
adaptation
Evaluation
of adaptation
Interactive
System
Interactive
System
Transition with
adaptation
Adaptation
semantic
distance
in input
Adaptation
articulatory
distance
in input
Adaptation
semantic
distance
in output
Adaptation
articulatory
distance
in output
Gulfofadaptationexecution
Gulfofadaptationevaluation
• The specialization of Norman’s model for adaptation
results into the ISATINE framework:
Adaptation request
Detection of
adaptation need
Notification for
adaptation request
2
THE ISATINE FRAMEWORK
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
16
17. Goals for user
Interface adaptation
Meaning of an
input adaptation
Meaning of an
output adaptation
Specification
of adaptation
Shape of an
input adaptation
Shape of an
output adaptation
Application of
adaptation
INterpretation
of evaluation
Initiative for
adaptation
Evaluation
of adaptation
Interactive
System
Transition with
adaptation
Adaptation
semantic
distance
in input
Adaptation
articulatory
distance
in input
Adaptation
semantic
distance
in output
Adaptation
articulatory
distance
in output
Gulfofadaptationexecution
Gulfofadaptationevaluation
Goals for user
Interface adaptation
Meaning of an
input adaptation
Meaning of an
input adaptation
Meaning of an
output adaptation
Specification
of adaptation
Shape of an
input adaptation
Shape of an
output adaptation
Application of
adaptation
INterpretation
of evaluation
Initiative for
adaptation
Evaluation
of adaptation
Interactive
System
Interactive
System
Transition with
adaptation
Adaptation
semantic
distance
in input
Adaptation
articulatory
distance
in input
Adaptation
semantic
distance
in output
Adaptation
articulatory
distance
in output
Gulfofadaptationexecution
Gulfofadaptationevaluation
• The specialization of Norman’s model for adaptation
results into the ISATINE framework:
3
Specification by
demonstration
Specification by
demonstration
Specification by
definition
THE ISATINE FRAMEWORK
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
17
18. Goals for user
Interface adaptation
Meaning of an
input adaptation
Meaning of an
output adaptation
Specification
of adaptation
Shape of an
input adaptation
Shape of an
output adaptation
Application of
adaptation
INterpretation
of evaluation
Initiative for
adaptation
Evaluation
of adaptation
Interactive
System
Transition with
adaptation
Adaptation
semantic
distance
in input
Adaptation
articulatory
distance
in input
Adaptation
semantic
distance
in output
Adaptation
articulatory
distance
in output
Gulfofadaptationexecution
Gulfofadaptationevaluation
Goals for user
Interface adaptation
Meaning of an
input adaptation
Meaning of an
input adaptation
Meaning of an
output adaptation
Specification
of adaptation
Shape of an
input adaptation
Shape of an
output adaptation
Application of
adaptation
INterpretation
of evaluation
Initiative for
adaptation
Evaluation
of adaptation
Interactive
System
Interactive
System
Transition with
adaptation
Adaptation
semantic
distance
in input
Adaptation
articulatory
distance
in input
Adaptation
semantic
distance
in output
Adaptation
articulatory
distance
in output
Gulfofadaptationexecution
Gulfofadaptationevaluation
• The specialization of Norman’s model for adaptation
results into the ISATINE framework:
This stage specifies
which entity will apply the
adaptation specified in
the previous stage
4
THE ISATINE FRAMEWORK
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
18
19. Goals for user
Interface adaptation
Meaning of an
input adaptation
Meaning of an
output adaptation
Specification
of adaptation
Shape of an
input adaptation
Shape of an
output adaptation
Application of
adaptation
INterpretation
of evaluation
Initiative for
adaptation
Evaluation
of adaptation
Interactive
System
Transition with
adaptation
Adaptation
semantic
distance
in input
Adaptation
articulatory
distance
in input
Adaptation
semantic
distance
in output
Adaptation
articulatory
distance
in output
Gulfofadaptationexecution
Gulfofadaptationevaluation
Goals for user
Interface adaptation
Meaning of an
input adaptation
Meaning of an
input adaptation
Meaning of an
output adaptation
Specification
of adaptation
Shape of an
input adaptation
Shape of an
output adaptation
Application of
adaptation
INterpretation
of evaluation
Initiative for
adaptation
Evaluation
of adaptation
Interactive
System
Interactive
System
Transition with
adaptation
Adaptation
semantic
distance
in input
Adaptation
articulatory
distance
in input
Adaptation
semantic
distance
in output
Adaptation
articulatory
distance
in output
Gulfofadaptationexecution
Gulfofadaptationevaluation
• The specialization of Norman’s model for adaptation
results into the ISATINE framework:
This stage specifies which
entity will ensure a smooth
transition between the UI
before and after adaptation
5
THE ISATINE FRAMEWORK
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
19
20. Goals for user
Interface adaptation
Meaning of an
input adaptation
Meaning of an
output adaptation
Specification
of adaptation
Shape of an
input adaptation
Shape of an
output adaptation
Application of
adaptation
INterpretation
of evaluation
Initiative for
adaptation
Evaluation
of adaptation
Interactive
System
Transition with
adaptation
Adaptation
semantic
distance
in input
Adaptation
articulatory
distance
in input
Adaptation
semantic
distance
in output
Adaptation
articulatory
distance
in output
Gulfofadaptationexecution
Gulfofadaptationevaluation
Goals for user
Interface adaptation
Meaning of an
input adaptation
Meaning of an
input adaptation
Meaning of an
output adaptation
Specification
of adaptation
Shape of an
input adaptation
Shape of an
output adaptation
Application of
adaptation
INterpretation
of evaluation
Initiative for
adaptation
Evaluation
of adaptation
Interactive
System
Interactive
System
Transition with
adaptation
Adaptation
semantic
distance
in input
Adaptation
articulatory
distance
in input
Adaptation
semantic
distance
in output
Adaptation
articulatory
distance
in output
Gulfofadaptationexecution
Gulfofadaptationevaluation
• The specialization of Norman’s model for adaptation
results into the ISATINE framework:
This stage specifies which
entity will produce meaningful
information in order to facilitate
the understanding of the
adaptation to the other entities
6
THE ISATINE FRAMEWORK
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
20
21. Goals for user
Interface adaptation
Meaning of an
input adaptation
Meaning of an
output adaptation
Specification
of adaptation
Shape of an
input adaptation
Shape of an
output adaptation
Application of
adaptation
INterpretation
of evaluation
Initiative for
adaptation
Evaluation
of adaptation
Interactive
System
Transition with
adaptation
Adaptation
semantic
distance
in input
Adaptation
articulatory
distance
in input
Adaptation
semantic
distance
in output
Adaptation
articulatory
distance
in output
Gulfofadaptationexecution
Gulfofadaptationevaluation
Goals for user
Interface adaptation
Meaning of an
input adaptation
Meaning of an
input adaptation
Meaning of an
output adaptation
Specification
of adaptation
Shape of an
input adaptation
Shape of an
output adaptation
Application of
adaptation
INterpretation
of evaluation
Initiative for
adaptation
Evaluation
of adaptation
Interactive
System
Interactive
System
Transition with
adaptation
Adaptation
semantic
distance
in input
Adaptation
articulatory
distance
in input
Adaptation
semantic
distance
in output
Adaptation
articulatory
distance
in output
Gulfofadaptationexecution
Gulfofadaptationevaluation
• The specialization of Norman’s model for adaptation
results into the ISATINE framework:
This stage specifies the
entity responsible for
evaluating the quality of
the adaptation performed
7
THE ISATINE FRAMEWORK
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
21
22. Definitions
• Multi-target user interface
– Support different contexts of use
• Plastic
• Adaptive
• Adaptable
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
22
23. Plastic user interface
• Example: the Virtual keyboard
Donatien Grolaux, Peter Van Roy, Jean Vanderdonckt:
QTk - A Mixed Declarative/Procedural Approach for Designing Executable User Interfaces, Proc. of EHCI’2001
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
23
24. Plastic User interface
• Property of plasticity = adaptation to the context of
use while satisfying predefined usability properties of
interest
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
24
25. Plasticity
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
25
• NOKIA plastic interface for remote control
Heikki Keränen & Johan
Plomp,
Adaptive Runtime Layout
of Hierarchical UI
Components, Proc. of
NordiCHI’2002
26. Adaptivity x Adaptability
• Adaptivity
– Automatic
– Adaptive systems
• Adaptability
– Manually
– Adaptable systems
• Complementary approach
– Mixed-initiative
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
26
27. Personalization
X Customization
• Personalization
– Occurs when the system is adapted regarding user
characteristics
• Customization
– Occurs when the users are able to modify the
application according to their needs
• Both concepts can be considered as a subset
of adaptation
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
27
30. • Alternate widgets for the same selection
January
February
March
April
May
June
July
August
September
October
November
December
J F M A M J J A S O N D
30
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
31. • Alternate widgets for the same selection
31
January February March
Jan Feb Mar Apr Ma
Mar
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
32. The Painter’s palette
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
32
+ =
33. Digital Painter’s palette
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
33
34. Useful area is waisted!
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
34
35. Migration
• Problem: how to design a UI that adapts to
multiple displays?
Pencil
Palette
Painting
Painting
tool
[Grolaux & Vanderdonckt,2005]
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
35
36. Migration
36
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
37. Migration
37
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
38. UI Migration: DEMIPLAT
• Detach
38
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
39. UI Migration: DEMIPLAT
• Detach - Migrate
39
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
40. UI Migration: DEMIPLAT
• Detach - Migrate - Plastify
40
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
41. UI Migration: DEMIPLAT
• Detach - Migrate - Plastify - Attach
41
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
42. This is not a floating toolbar
Process
42
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
43. Computer B
Process
This is migration !
Process
Computer A
43
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
44. Adaptation: Resources
• Many different resources can be subject to
adaptation
– Content
• Images
• Audio
• Video
• Text
• Widgets
– Presentation
– Navigation
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
44
45. Taxonomy – User Context
User
Personal
Information
Age Gender Nationality Language
Instruction
Level
Primary
School
Secondary
School
High
School
Graduation
Post-
Graduation
Biometric
Information
Weight
Height
Fingerprint
Voice
Sample
Iris
Head
Diameter
Impairments
Sight
Myopia
Color
Blindness
Blind
Auditory Motor Cognitive
Technological
Background
Novice
user
Intermediary
Advanced
Preferences
Language
Color
Interaction
Mean
Performance
Modality
Media
Type
Emotions
Anxious
Relaxed
Happy
Sad
Status
Online
Offline
Invisible
Stationary
Moving
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
45
46. Adapting the Presentation
Attach
Augment
Collapse to Zoom
Detach
Distribution
Fish eye
Full-screen
Migration
Mirroring
No-script
Optimize
Overview+Detail
Print
Re-distribution
Re-molding
Re-size
Replace
Single column
TextBox Expansion
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
46
47. Adapting the Navigation
Accessible Navigation
Annotation of Links
Alphabetical Organization
Alternative Navigation
Chronological Organization
Categorization
Direct Guidance
Generation of Links
Hiding of Links
Hierarchical Organization (within a page)
application)
Linear Structure
Map Adaptation
Mesh Structure
Popularity-based Organization
Search
Simplify Input Controls
Sorting of Links
Suggestion of Links
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
47
48. Conditional Text
Direction
Frame Based
Filtering
Personalize
Stretch
Suggestion (Recommendation)
Re-size
Adapting the Contents
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
48
Type
Taille
Couleur
Format
Film Image texte
24 bit 8 bit 256 C Echelle de gris Noir et blanc
BMP JPEG GIF (256c)
description
de l’image
9x6 pxls
Résolution
7x5 pxls 6x 3,5 pxls 3x 2,1 pxls
200x200 pxls 100x100 pxls 20x20 pxls
Compression
...
Toncature
ciblée sur le visage
Speed
Quality
+ -
+-
49. Adaptation Rules
First order: direct
commands
Second order: govern first-
order adaptation rules
Third order: adaptation
strategies to promote or
demote sets of second-order
rules
if (platform = ‘mobile’)
then replace a radio box
by a drop-down list
prefer R1, than R2 if (user = ‘expert’) then
reverse the order of
“prefer R1, than R2”
if (platform = ‘mobile’)
and (entries are limited)
then
replace a radio box with
an edit field with codes
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
49
50. Context-Aware Design Space
Task
Domain
User
Interaction object
Device
Computing platform
Physical environment
Organization
Application
Presentation
Dialog
Help
Guidance
Tutorial
Design
With respect to what?
What?
Action (Before)
Reaction (After)
Who?
User Mixed System
When?With
what?
At design time
At run time
At both design and
run time
How many?
One
Some
Many
For what?
Initiative
Proposal
Decision
ExecutionSource: Vanderdonckt, J., Grolaux, D., Van Roy, P., Limbourg, Q., Macq, B., Michel, B., A Design Space for Context-Sensitive User Interfaces, Proc. of ISCA 14th Int. Conf. on Intelligent and
Adaptive Systems and Software Engineering IASSE’2005 (Toronto, 20-22 July 2005), International Society for Computers and their Applications, Toronto, 2005, pp. 207-214. (FP6 Similar NoE)
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
50
51. Context-Aware Design Space
Adaptation
means
Re-molding
Redistribution
• UI re-molding denotes any UI reconfiguration that is perceivable to the user and that results from the application of transformations
on the UI (e.g., insertion, deletion, modification)
• UI redistribution denotes the re-allocation of the UI components to different interaction resources
(e.g., for instance in the Painter's palette, the toolbars may move to a PocketPC until the end of the session)
Source: Grolaux, D., Vanderdonckt, J., Van Roy, P., Attach me, Detach me, Assemble me like You Work, Proc. of INTERACT’2005 (Rome, 12-16 September 2005), M.-F. Costabile, F. Paternò (eds.),
Lecture Notes in Computer Science, Vol. 3585, Springer-Verlag, Berlin, 2005, pp. 198-212.
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
51
52. Context-Aware Design Space
Adaptation
means
Re-molding
Redistribution
Total level
Dialog space level
Interactor level
UI component
granularity
UI components granularity denotes the smallest software UI unit that can be
affected by re-molding and/or re-distribution
For instance, in Qtk, any individual widget is subject to redistribution
In [Czerwinsky, 2000], any window is subject to redistribution
Source: Melchior, J., Grolaux, D., Vanderdonckt, J., Van Roy, P., A Toolkit for Peer-to-Peer Distributed User Interfaces: Concepts, Implementation, and Applications, Proc. of 1st ACM SIGCHI
Symposium on Engineering Interactive Computing Systems EICS’2009 (Pittsburgh, July 15-17, 2009), ACM Press, New York, 2009, pp. 69-78.
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
52
53. Context-Aware Design Space
Source: Melchior, J., Grolaux, D., Vanderdonckt, J., Van Roy, P., A Toolkit for Peer-to-Peer Distributed User Interfaces: Concepts, Implementation, and Applications, Proc. of 1st ACM SIGCHI
Symposium on Engineering Interactive Computing Systems EICS’2009 (Pittsburgh, July 15-17, 2009), ACM Press, New York, 2009, pp. 69-78.
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
53
54. Context-Aware Design Space
Adaptation
means
Re-molding
Redistribution
Total level
Dialog space level
Interactor level
UI component
granularity
State recovery
granularity
Session level
Task level
Action level
State recovery granularity characterizes the effort users must apply to carry on their activity after adaptation has occurred: at the
session level, at the task level or at the action level.
For instance, in Rich Internet Applications
Source: Paternò F. Santoro C. Scorcia A. "Preserving rich user interface state in Web applications across various platforms". Engineering Interactive Systems. Second Conference on Human-
Centered Software Engineering, HCSE 2008 TAMODIA 2008 (Pisa, Italy, 25-26 September 2008). Proceedings, pp. 255 - 262. (LNCS, vol. 5247). Springer.
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
54
55. Context-Aware Design Space
Adaptation
means
UI
deployment
Re-molding
Redistribution
Total level
Dialog space level
Interactor level
UI component
granularity
State recovery
granularity
Session level
Task level
Action level
Static
Dynamic
UI deployment denotes the installation of the UI components in its environment: static or dynamic
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
55
56. Context-Aware Design Space
Adaptation
means
Context
of use
UI
deployment
Re-molding
Redistribution
Total level
Dialog space level
Interactor level
UI component
granularity
State recovery
granularity
Session level
Task level
Action level
Static
Dynamic
User
Computing platform
Environment
Coverage of context of use denotes the capability of the UI components to be context-aware: user, platform or environment
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
56
57. Context-Aware Design Space
Adaptation
means
Technological
space coverage
Context
of use
UI
deployment
Re-molding
Redistribution
Total level
Dialog space level
Interactor level
UI component
granularity
State recovery
granularity
Session level
Task level
Action level
Static
Dynamic
User
Computing platform
Environment
Multi-TS
Inter-TS Intra-TS
Technological space coverage denotes the capability of the UI components to support different working contexts with a set of
associated concepts, body of knowledge, tools, required skills, and possibilities.
Source: Kurtev, I., Bézivin, J., and Aksit, M. (2002) Technological Spaces: an Initial Appraisal. CoopIS, DOA'2002 Federated Conferences, Industrial track, Irvine, 2002,.Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
57
58. Context-Aware Design Space
Adaptation
means
Technological
space coverage
Context
of use
UI
deployment
Re-molding
Redistribution
Total level
Dialog space level
Interactor level
UI component
granularity
State recovery
granularity
Session level
Task level
Action level
Static
Dynamic
User
Computing platform
Environment
Multi-TS
Inter-TS Intra-TS
No Meta-UI
Meta-UI without negotiation
Meta-UI with negotiation
Plastic Meta-UI
Existence of
a meta-UI
Existence of a meta-UI denotes the capability of a UI to provide a UI for controlling its adaptation.
For instance, the Collapse-to-zoom meta-UI [Baudish et al., 2004]
Source: Coutaz, J. (2006) Meta-User Interfaces for Ambient Spaces. In: Proc. of 4th Int. Workshop on Task Models and Diagrams for User Interface Design Tamodia’2006 (Hasselt, October 23-24,
2006). Lecture Notes in Computer Science, Vol. 4385, Springer, Heidelberg, pp. 1–15.
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
58
59. 1. Diffie
DiffIE
59
Always on
In-situ
New to you
Non-intrusive
Changes to page
since your last visit
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle &
Augmentée IVAR'2017 (Alger, 23-25 April 2017)
60. Large Screens
Adaptive Layout Template for Effective Web Content Presentation in Large-Screen Contexts
Michael Nebeling, Fabrice Matulic, Lucas Streit and Moira C. Norrie
Proc. 11th ACM Symposium on Document Engineering (DocEng 2011), Mountain View, CA, USA, September 2011
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
60
XDStudio
Progressive
Enhancement
Car rental example
61. Full example of context-
aware adaptation
• Walkaware = route planning
• Weatheraware = wheather forecasts
• WalkWeather = both combined
• Adaptation to
– User profile
– Platform configuration
– Location and environmental conditions
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
61
https://play.google.com/store/apps/details?id=be.defimedia.android.walkawaremobile&hl=fr
http://windowsphoneapks.com/APK_WalkAware_Windows-Phone.html
http://www.appdropp.com/ios/walkaware/414443781
62. Decision Table
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
62
63. Decision Table
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
63
64. Architectural Approaches
• GUI generation
• Web services
• Client-server
• Model-view-control
• When?
– At the client (arrival)
– At the proxy (on the way)
– At the server (before it is sent)
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
64
65. Architectural Approach
Using Web services
65
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
66. Weatheraware
• Adaptation: Mobile, Tablet and Desktop
PC
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
66
67. For Desktop
67
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
68. 68
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
69. 69
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
70. 70
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
71. 71
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
72. 72
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
73. 73
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
74. For Tablet PC and iPads
74
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
75. 75
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
76. 76
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
77. 77
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
78. 78
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
79. 79
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
80. 80
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
81. 81
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
82. 82
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
83. 83
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
84. 84
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
85. 85
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
86. 86
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
87. 87
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
88. 88
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
89. 89
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
90. 90
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
91. 91
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
92. Conclusion of Adaptation:
for what?
• Advantages
– Improve task efficiency and effectiveness
• Optimizes task completion time and rate
• Reduces work load
– Positively impacts
• User’s subjective satisfaction
• Accuracy, human performance
• Predictability, situation awareness
• Shortcomings
– Induces user disruption and generates variability
– Loss of control
– Development cost and complexity
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017 (Alger, 23-
25 April 2017)
92
93. Thank you very much for your
attention
Questions?
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle &
Augmentée IVAR'2017 (Alger, 23-25 April 2017)
93