Paper presented at AVI 2012 on May 22nd in Capri, Italy. Work by Charles-Erick Dessart, Vivian Motti and Jean Vanderdonckt from LILAB (Louvain Interaction Laboratory) - UCL (Université catholique de Louvain) - Belgium.

1. Animated
TransiSons
between
User
Interface
Views
Charles-­‐Eric
Dessart,
Vivian
Genaro
Mo6,
Jean
Vanderdonckt
Louvain
School
of
Management
Université
catholique
de
Louvain
Place
des
Doyens,
1
–
B-­‐1348
Louvain-­‐la-­‐Neuve,
Belgium
Vivian.genaromoG@uclouvain.be
jean.vanderdonckt@uclouvain.be
–
hLp://www.uclouvain.be/jean.vanderdonckt

2. Louvain
InteracSon
Laboratory
(LILab)
Place
des
Doyens,
1
–
B-­‐1348
Louvain-­‐la-­‐Neuve,
Belgium
hGp://www.lilab.be,
hGp://www.lilab.eu,
hGp://www.lilab.info

3. PresentaSon
outline
ü MoSvaSons
ü Basic
concepts
ü Background
on
UI
views
ü Models
and
language
ü Method
ü SoWware
support
ü Future
work
AVI'2012 - Capri, May 21-25, 2012

4. MoSvaSons
ü SoWware
development
life
cycle
typically
involves
many
steps
at
various
levels
of
abstracSon
ü In
Model-­‐Driven
Architecture
(MDA),
3
levels
of
abstracSon
ü CompuSng-­‐Independent
Model
(CIM)
ü PlaZorm-­‐Independent
Model
(PIM)
ü PlaZorm-­‐Specific
Model
(PSM)
ü User
Interface
(UI)
development
life
cycle
is
similar
ü In
UI
development
according
to
Cameleon
Reference
Framework
(CRF),
4
levels
of
abstracSon
ü Task
and
domain
models
ü Abstract
User
Interface
(AUI)
model
ü Concrete
User
Interface
(CUI)
model
ü Final
User
Interface
ü In
Model-­‐based
UI
design,
the
mapping
problem
ü Task,
domain,
presentaSon,
dialog,
help,
tutorial
AVI'2012 - Capri, May 21-25, 2012

5. MoSvaSons
ü TransiSon
between
steps,
levels
is
hard
to
grasp
(imagine,
understand,
maintain,
evolve)
ü Models
found
at
each
level
are
different:
concepts,
relaSonships,
and
aLributes
are
different
ü Models
may
have
different
views
depending
on
ü The
stakeholder
(designer,
markeSng,
end
user)
ü The
step
(e.g.,
early
design
vs
advanced
design)
ü The
concepts
(e.g.,
level
of
details)
ü TransiSons
between
models
are
complex
ü E.g.,
mappings,
transformaSons
in
MDA
ü Consequences
ü Mode
switching
is
frequent
ü CogniSve
load
is
high
ü Learning
curve
is
slow
AVI'2012 - Capri, May 21-25, 2012

6. Basic
concepts
ü 3
types
of
representaSon:
ü Internal:
UI
code
(in
programming
of
markup
language)
ü External:
UI
as
experienced
by
the
end
user
ü Conceptual:
UI
representaSon
abstracted
from
the
UI
code
ü SemanScs
ü Syntax
ü StylisScs
Concep-
tual view
External Internal
view view
AVI'2012 - Capri, May 21-25, 2012

7. Basic
concepts
ü Possible
transiSons
between
representaSons:
ü From
Conceptual
to
ü Internal:
e.g.,
to
generate
UI
code
from
models
ü External:
e.g.,
to
render
a
UI
from
its
model
ü From
Internal
to
ü External:
e.g.,
to
compile/interpret
a
UI
from
its
code/markup
ü Conceptual:
e.g.,
UI
reverse
engineering
Concep-
tual view
External Internal
view view
AVI'2012 - Capri, May 21-25, 2012

8. Basic
concepts
ü Possible
transiSons
between
representaSons:
ü From
External
to
ü Internal:
e.g.,
to
draw
a
UI
and
to
generate
code
from
drawing
ü Conceptual:
e.g.,
to
infer
a
UI
model
from
look
and
feel
Concep-
tual view
External Internal
view view
AVI'2012 - Capri, May 21-25, 2012

9. Basic
concepts
ü Loops
on
representaSons:
ü From
Conceptual
to
Conceptual:
e.g.,
M2M
in
MDE
ü From
Internal
to
Internal:
e.g.,
UI
transcoding
ü From
External
to
External:
e.g.,
image
processing
techniques
Concep-
tual view
External Internal
view view
AVI'2012 - Capri, May 21-25, 2012

10. Background
on
UI
views
ü Typical
configuraSon
in
Integrated
Development
Environments
External view:
final user
interface
Conceptual
view:
hierarchical
Internal view:
description
user interface
code and
properties
AVI'2012 - Capri, May 21-25, 2012

11. Background
on
UI
views
ü FormsVBT
[Avrahami89]
synchronizes
2
UI
views
Internal view:
External view:
LaTex-like
final user
description
interface
(with structure)
External view:
final user
interface
(without
structure)
AVI'2012 - Capri, May 21-25, 2012

12. Background
on
UI
views
ü Vista
[Brown98]
synchronizes
2
UI
views
in
4
windows
Conceptual view:
Conceptual
task model
view: task
(UAN tables)
model (UAN
hierarchy)
Internal view:
Clock code
Internal
view: Clock
architecture
AVI'2012 - Capri, May 21-25, 2012

13. Background
on
UI
views
ü TADEUS++
[Stary00]
provides
3
views
Internal view:
final user
interface
(with structure)
External view:
Conceptual final user
view: domain interface
model (UML (with structure)
Class Diagram)
AVI'2012 - Capri, May 21-25, 2012

14. Background
on
UI
views
ü TADEUS++
[Stary00]
provides
3
views
Conceptual view:
final user
interface
(with structure)
Conceptual
view: domain Conceptual
model (Object view: user
oriented model) model
Conceptual
view: task
model
AVI'2012 - Capri, May 21-25, 2012

15. Background
on
UI
views
ü Teallach
[Griffith00]
has
2
views:
domain
and
task,
UI
Conceptual Conceptual view:
view: task final user
model interface
(with structure)
AVI'2012 - Capri, May 21-25, 2012

16. Background
on
UI
views
ü IdealXML
[Montero06]
has
conceptual
views
Conceptual view:
task model
Conceptual
view: domain
model (UML
Class Diagram)
Conceptual
view: abstract
user interface
(with structure)
AVI'2012 - Capri, May 21-25, 2012

17. Background
on
UI
views
ü IdealXML
[Montero06]
links
views
by
a
table
Conceptual view:
task model
Conceptual
view: domain Conceptual
model (UML view: abstract
Class Diagram) user interface
(with structure)
AVI'2012 - Capri, May 21-25, 2012

18. Background
on
UI
views
ü GEF3D
[von
Pilgrim
08]
synchronizes
3
views
External view:
Conceptual
final user
view: domain
interface
model (UML
(without
Class Diagram)
structure)
External view:
final user
interface
(with structure)
AVI'2012 - Capri, May 21-25, 2012

19. Background
on
UI
views
ü GEF3D
[von
Pilgrim
08]
synchronizes
3
views
External view:
final user
interface
(without
Conceptual
structure)
view: domain
model (UML
Class Diagram)
External view:
final user
interface
(with structure)
AVI'2012 - Capri, May 21-25, 2012

20. Shortcomings
of
UI
views
organisaSon
ü Almost
no
links
represented
between
views
ü When
links
are
represented
ü Legibility
problems
ü Scalability
problems
ü VariaSon
of
link
representaSons
ü Line,
arrows,
table,
graph,
tree
ü No
immediate
feedback
ü High
cogniSve
load
AVI'2012 - Capri, May 21-25, 2012

21. Goal
ü Replace
links
between
UI
views
by
an
animated
transiSon
AVI'2012 - Capri, May 21-25, 2012

22. Methodology
ü 1)
Define
the
iniSal
view
ü 2)
Define
the
final
view
ü 3)
Define
mappings
between
views
ü 4)
Derive
the
transiSon
based
on
mappings
previously
defined
AVI'2012 - Capri, May 21-25, 2012

23. Mappings
T r a n s i t i o n Internal view External view
type
Birthdate :
Text-to-text <label_short= Birthdate >
T e x t - t o - <textfield … col= 4 …>
4
Birthdate :
position
20
T e s t - t o - <textfield … length= 20 .> Birthdate :
length
Text-to-color- <textfield. fgColor= red .>
Birthdate :
saturation
Text-to-color- < t e x t f i e l d
texture bgTexture= checkerboard …>
…
Birthdate :
T e x t - t o - <textfield name= Birthdate >
Birthdate :
shape
Birthdate * :
T e x t - t o - <textfield …
symbol required= yes … >
AVI'2012 - Capri, May 21-25, 2012

24. Which
parameter
for
animated
transiSon
AVI'2012 - Capri, May 21-25, 2012

25. Methodology
ü 5)
IdenSfy
animaSon
technique
to
produce
the
transiSon
ü Text-­‐to-­‐text
ü Text-­‐to-­‐color
ü Text-­‐to-­‐shape
ü Disappearing
elements
ü 6)
Execute
the
animated
transiSon
AVI'2012 - Capri, May 21-25, 2012

26. Animated
TransiSon
from
CV
to
EV
AVI'2012 - Capri, May 21-25, 2012

27. Animated
TransiSon
from
IV
to
EV
AVI'2012 - Capri, May 21-25, 2012

28. Anim.
Trans.
from
IV
to
EV
(idenSfied)
AVI'2012 - Capri, May 21-25, 2012

29. Anim.
Trans.
from
IV
to
EV
(Slow
down)
AVI'2012 - Capri, May 21-25, 2012

30. Results
ü UsiView
ü Supports
animated
transiSons
between
three
UI
views:
internal,
external,
conceptual
ü Is
implemented
in
MicrosoW
Expression
Blend
ü An
animated
transiSon
is
actually
a
visual
effect
between
two
vectorial
graphical
objects
in
MS
Blend
governed
by
parameters
ü LocaSon
ü Speed
ü AcceleraSon
-­‐
DeceleraSon
ü Reduces
the
cogniSve
load
of
mode
switching
AVI'2012 - Capri, May 21-25, 2012

31. Conclusion
and
Future
Work
ü Animated
transiSons
are
a
viable
approach
for
depicSng
the
behaviour
of
some
phenomenon
ü For
a
change
of
context
ü Between
an
iniSal
and
a
final
state
ü Provided
that
ü Temporal
aspects
are
well
designed
ü SpaSal
aspects
are
adequately
programmed
ü Effects
are
derived
from
the
model
views,
not
randomly
ü TransiSon
types:
to
be
extended
ü End
user
studies:
to
be
pursued
ü SSll
no
systemaSc
approach
for
animated
transiSons
AVI'2012 - Capri, May 21-25, 2012

32. Thank you very much!
User Interface eXtensible Markup Language
http://www.usixml.org
FP7 Serenoa project
http://www.serenoa-fp7.eu
For more information and downloading,
http://www.lilab.be