SlideShare a Scribd company logo
Human-Computer Interaction: Adaptation, Distribution, Evaluation
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
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)
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)
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
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.
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)
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
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/
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
[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
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/
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
13
Heterogeneous Platforms
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
• 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
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
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
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
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
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
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
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
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
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
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
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
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
Graceful degradation
[Florins & Vanderdonckt,2004]
Transformation rules
Add all >>
Add >
<< Remove all
< Remove
>>
>
<<
<
>
<
Group box
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 1
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
• 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)
• 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)
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
+ =
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
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
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
Migration
36
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
Migration
37
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
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)
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)
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)
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)
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)
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)
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
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
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
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
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
+ -
+-
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
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
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
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
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
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
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
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
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
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
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)
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
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
Decision Table
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
62
Decision Table
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
63
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
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)
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
For Desktop
67
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
68
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
69
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
70
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
71
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
72
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
73
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
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
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
76
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
77
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
78
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
79
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
80
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
81
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
82
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
83
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
84
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
85
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
86
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
87
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
88
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
89
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
90
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
91
Première Ecole de Printemps Interaction Homme-Machine Réalité Virtuelle & Augmentée IVAR'2017
(Alger, 23-25 April 2017)
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
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
Human-Computer Interaction: Adaptation, Distribution, Evaluation

More Related Content

PPT
Human Computer Interaction Chapter 5 Universal Design and User Support - Dr....
PPTX
Virtual reality
PDF
Ui vs UX design
PPTX
A UI and UX training presentation
PDF
Good UX Bad UX
PDF
UX Best Practices
PPTX
Sixth sense technology
PPT
User Centered Design 101
Human Computer Interaction Chapter 5 Universal Design and User Support - Dr....
Virtual reality
Ui vs UX design
A UI and UX training presentation
Good UX Bad UX
UX Best Practices
Sixth sense technology
User Centered Design 101

What's hot (20)

PPTX
The Importance of UX
PPTX
Mixed reality
PDF
UX/UI Design and How It Works
PDF
1. Design - Intro UIUX Design.pdf
PDF
UI UX in depth
ODP
UI/UX - The Bigger Picture
PPTX
Introduction-to-Generative-AI.pptx
PDF
UX RULES: 10 ESSENTIAL PRINCIPLES
PPT
Fundamental principles of Usability and User Centred Design
PDF
An Introduction to Generative AI - May 18, 2023
PDF
UX Design + UI Design: Injecting a brand persona!
PDF
AI, Creativity and Generative Art
PPTX
Virtual Reality
PDF
UI/UX Courses
PDF
UX/UI Workshop Slides
PDF
Introduction to User Experience Design
PPTX
Final presentation of virtual reality by monil
PDF
UX is Not Equal to UI Design
PPTX
The Future of AI is Generative not Discriminative 5/26/2021
PDF
Microinteractions
The Importance of UX
Mixed reality
UX/UI Design and How It Works
1. Design - Intro UIUX Design.pdf
UI UX in depth
UI/UX - The Bigger Picture
Introduction-to-Generative-AI.pptx
UX RULES: 10 ESSENTIAL PRINCIPLES
Fundamental principles of Usability and User Centred Design
An Introduction to Generative AI - May 18, 2023
UX Design + UI Design: Injecting a brand persona!
AI, Creativity and Generative Art
Virtual Reality
UI/UX Courses
UX/UI Workshop Slides
Introduction to User Experience Design
Final presentation of virtual reality by monil
UX is Not Equal to UI Design
The Future of AI is Generative not Discriminative 5/26/2021
Microinteractions
Ad

Similar to Human-Computer Interaction: Adaptation, Distribution, Evaluation (20)

PPTX
A Methodology for the Development of Vocal User Interfaces
PPT
Model-driven engineering of multimodal user interfaces
PDF
Research Directions in Heads-Up Computing
PPT
90seconds Presentation
PDF
Optimal Meeting Point Notification for Moving groups of Users in Network Region
PPTX
Methodology for the Development of Vocal User Interfaces
PDF
PhD Trial Lecture: Design guidelines for multi-display environments in comman...
PDF
Breaking the Walls: A Unified Vision on Context-Oriented Software Engineering
PDF
Tools and Techniques for Designing, Implementing, & Evaluating Ubiquitous Com...
PPTX
Barcelona Global Energy Challenges 2015
PDF
TUW-ASE-Summer 2014: Advanced Services Engineering- Introduction
PPTX
When User Interface Patterns Become Mobile
PDF
COMP 4010 Lecture12 Research Directions in AR
PPTX
Distributed User Interfaces: How to Distribute User Interface Elements across...
PPTX
Distributed User Interfaces: How to Distribute User Interface Elements across...
PDF
Software Development for the Cloud - Trends, Opportunities, and Challenges
PDF
Short intro: Chung-Ching Huang
PDF
Smart Sound Measurement and Control System for Smart City
PPT
Cnie Projet Enjeux S Diaporama Banff 2008 Va
PPTX
연구실 소개(2014)
A Methodology for the Development of Vocal User Interfaces
Model-driven engineering of multimodal user interfaces
Research Directions in Heads-Up Computing
90seconds Presentation
Optimal Meeting Point Notification for Moving groups of Users in Network Region
Methodology for the Development of Vocal User Interfaces
PhD Trial Lecture: Design guidelines for multi-display environments in comman...
Breaking the Walls: A Unified Vision on Context-Oriented Software Engineering
Tools and Techniques for Designing, Implementing, & Evaluating Ubiquitous Com...
Barcelona Global Energy Challenges 2015
TUW-ASE-Summer 2014: Advanced Services Engineering- Introduction
When User Interface Patterns Become Mobile
COMP 4010 Lecture12 Research Directions in AR
Distributed User Interfaces: How to Distribute User Interface Elements across...
Distributed User Interfaces: How to Distribute User Interface Elements across...
Software Development for the Cloud - Trends, Opportunities, and Challenges
Short intro: Chung-Ching Huang
Smart Sound Measurement and Control System for Smart City
Cnie Projet Enjeux S Diaporama Banff 2008 Va
연구실 소개(2014)
Ad

More from Jean Vanderdonckt (20)

PPTX
https://dl.acm.org/doi/10.1145/3715336.3735706
PPTX
TapStrapGest: Elicitation and Recognition of Ring-based Multi-Finger Gestures
PPTX
Congruent and Hierarchical Gesture Set Design
PPTX
Paired Sketching of Distributed User Interfaces:Workflow, Protocol, Software ...
PPTX
Comparative Testing of 2D Stroke Gesture Recognizers in Multiple Contexts of Use
PPTX
Human-AI Interaction in Space: Insights from a Mars Analog Mission with the H...
PPTX
Gestural Interaction in Virtual/Augmented Reality
PPTX
User-controlled Form Adaptation by Unsupervised Learning
PPTX
Engineering Touchscreen Input for 3-Way Displays: Taxonomy, Datasets, and Cla...
PPTX
To the end of our possibilities with Adaptive User Interfaces
PPTX
Engineering the Transition of Interactive Collaborative Software from Cloud C...
PPTX
UsyBus: A Communication Framework among Reusable Agents integrating Eye-Track...
PPTX
µV: An Articulation, Rotation, Scaling, and Translation Invariant (ARST) Mult...
PPTX
RepliGES and GEStory: Visual Tools for Systematizing and Consolidating Knowle...
PPTX
Gesture-based information systems: from DesignOps to DevOps
PPTX
Engineering Slidable User Interfaces with Slime
PPTX
Evaluating Gestural Interaction: Models, Methods, and Measures
PPTX
Conducting a Gesture Elicitation Study: How to Get the Best Gestures From Peo...
PPTX
Designing Gestural Interaction: Challenges and Pitfalls
PPTX
Fundamentals of Gestural Interaction
https://dl.acm.org/doi/10.1145/3715336.3735706
TapStrapGest: Elicitation and Recognition of Ring-based Multi-Finger Gestures
Congruent and Hierarchical Gesture Set Design
Paired Sketching of Distributed User Interfaces:Workflow, Protocol, Software ...
Comparative Testing of 2D Stroke Gesture Recognizers in Multiple Contexts of Use
Human-AI Interaction in Space: Insights from a Mars Analog Mission with the H...
Gestural Interaction in Virtual/Augmented Reality
User-controlled Form Adaptation by Unsupervised Learning
Engineering Touchscreen Input for 3-Way Displays: Taxonomy, Datasets, and Cla...
To the end of our possibilities with Adaptive User Interfaces
Engineering the Transition of Interactive Collaborative Software from Cloud C...
UsyBus: A Communication Framework among Reusable Agents integrating Eye-Track...
µV: An Articulation, Rotation, Scaling, and Translation Invariant (ARST) Mult...
RepliGES and GEStory: Visual Tools for Systematizing and Consolidating Knowle...
Gesture-based information systems: from DesignOps to DevOps
Engineering Slidable User Interfaces with Slime
Evaluating Gestural Interaction: Models, Methods, and Measures
Conducting a Gesture Elicitation Study: How to Get the Best Gestures From Peo...
Designing Gestural Interaction: Challenges and Pitfalls
Fundamentals of Gestural Interaction

Recently uploaded (20)

PDF
System and Network Administraation Chapter 3
PDF
Designing Intelligence for the Shop Floor.pdf
PDF
SAP S4 Hana Brochure 3 (PTS SYSTEMS AND SOLUTIONS)
PDF
Addressing The Cult of Project Management Tools-Why Disconnected Work is Hold...
PPTX
Reimagine Home Health with the Power of Agentic AI​
PDF
Navsoft: AI-Powered Business Solutions & Custom Software Development
PDF
Nekopoi APK 2025 free lastest update
PPTX
Introduction to Artificial Intelligence
PPTX
Agentic AI : A Practical Guide. Undersating, Implementing and Scaling Autono...
PDF
Design an Analysis of Algorithms I-SECS-1021-03
PDF
Digital Strategies for Manufacturing Companies
PPTX
Why Generative AI is the Future of Content, Code & Creativity?
PPTX
Odoo POS Development Services by CandidRoot Solutions
PDF
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
PDF
iTop VPN Free 5.6.0.5262 Crack latest version 2025
PPTX
Embracing Complexity in Serverless! GOTO Serverless Bengaluru
PDF
Upgrade and Innovation Strategies for SAP ERP Customers
PPTX
assetexplorer- product-overview - presentation
PDF
top salesforce developer skills in 2025.pdf
PDF
Design an Analysis of Algorithms II-SECS-1021-03
System and Network Administraation Chapter 3
Designing Intelligence for the Shop Floor.pdf
SAP S4 Hana Brochure 3 (PTS SYSTEMS AND SOLUTIONS)
Addressing The Cult of Project Management Tools-Why Disconnected Work is Hold...
Reimagine Home Health with the Power of Agentic AI​
Navsoft: AI-Powered Business Solutions & Custom Software Development
Nekopoi APK 2025 free lastest update
Introduction to Artificial Intelligence
Agentic AI : A Practical Guide. Undersating, Implementing and Scaling Autono...
Design an Analysis of Algorithms I-SECS-1021-03
Digital Strategies for Manufacturing Companies
Why Generative AI is the Future of Content, Code & Creativity?
Odoo POS Development Services by CandidRoot Solutions
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
iTop VPN Free 5.6.0.5262 Crack latest version 2025
Embracing Complexity in Serverless! GOTO Serverless Bengaluru
Upgrade and Innovation Strategies for SAP ERP Customers
assetexplorer- product-overview - presentation
top salesforce developer skills in 2025.pdf
Design an Analysis of Algorithms II-SECS-1021-03

Human-Computer Interaction: Adaptation, Distribution, Evaluation

  • 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
  • 28. Graceful degradation [Florins & Vanderdonckt,2004]
  • 29. Transformation rules Add all >> Add > << Remove all < Remove >> > << < > < Group box Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 1 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7
  • 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