animated transitions across ui views
DESCRIPTION
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.TRANSCRIPT
![Page 1: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/1.jpg)
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 [email protected]
[email protected] – hLp://www.uclouvain.be/jean.vanderdonckt
Animated TransiSons between User Interface Views
![Page 2: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/2.jpg)
Place des Doyens, 1 – B-‐1348 Louvain-‐la-‐Neuve, Belgium hGp://www.lilab.be, hGp://www.lilab.eu, hGp://www.lilab.info
Louvain InteracSon Laboratory (LILab)
![Page 3: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/3.jpg)
ü MoSvaSons ü Basic concepts ü Background on UI views
ü Models and language ü Method ü SoWware support
ü Future work
PresentaSon outline
AVI'2012 - Capri, May 21-25, 2012
![Page 4: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/4.jpg)
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
![Page 5: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/5.jpg)
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
![Page 6: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/6.jpg)
Basic concepts
Concep-tual view
External view
Internal view
ü 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
AVI'2012 - Capri, May 21-25, 2012
![Page 7: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/7.jpg)
Basic concepts
Concep-tual view
External view
Internal view
ü 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
AVI'2012 - Capri, May 21-25, 2012
![Page 8: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/8.jpg)
Basic concepts
Concep-tual view
External view
Internal view
ü 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
AVI'2012 - Capri, May 21-25, 2012
![Page 9: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/9.jpg)
Basic concepts
Concep-tual view
External view
Internal view
ü 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
AVI'2012 - Capri, May 21-25, 2012
![Page 10: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/10.jpg)
ü Typical configuraSon in Integrated Development Environments
Background on UI views
Internal view: user interface
code and properties
Conceptual view:
hierarchical description
External view: final user interface
AVI'2012 - Capri, May 21-25, 2012
![Page 11: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/11.jpg)
ü FormsVBT [Avrahami89] synchronizes 2 UI views
Background on UI views
External view: final user interface
(with structure)
External view: final user interface (without structure)
Internal view: LaTex-like description
AVI'2012 - Capri, May 21-25, 2012
![Page 12: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/12.jpg)
ü Vista [Brown98] synchronizes 2 UI views in 4 windows
Background on UI views
Conceptual view: task
model (UAN hierarchy)
Conceptual view: task model
(UAN tables)
Internal view: Clock code
Internal view: Clock architecture
AVI'2012 - Capri, May 21-25, 2012
![Page 13: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/13.jpg)
ü TADEUS++ [Stary00] provides 3 views
Background on UI views
Conceptual view: domain model (UML
Class Diagram)
Internal view: final user interface
(with structure)
External view: final user interface
(with structure)
AVI'2012 - Capri, May 21-25, 2012
![Page 14: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/14.jpg)
ü TADEUS++ [Stary00] provides 3 views
Background on UI views
Conceptual view: domain model (Object oriented model)
Conceptual view: final user interface
(with structure)
Conceptual view: user
model
Conceptual view: task
model
AVI'2012 - Capri, May 21-25, 2012
![Page 15: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/15.jpg)
ü Teallach [Griffith00] has 2 views: domain and task, UI
Background on UI views
Conceptual view: task
model
Conceptual view: final user interface
(with structure)
AVI'2012 - Capri, May 21-25, 2012
![Page 16: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/16.jpg)
ü IdealXML [Montero06] has conceptual views
Background on UI views
Conceptual view: task model
Conceptual view: abstract user interface
(with structure)
Conceptual view: domain model (UML
Class Diagram)
AVI'2012 - Capri, May 21-25, 2012
![Page 17: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/17.jpg)
ü IdealXML [Montero06] links views by a table
Background on UI views
Conceptual view: domain model (UML
Class Diagram)
Conceptual view: task model
Conceptual view: abstract user interface
(with structure)
AVI'2012 - Capri, May 21-25, 2012
![Page 18: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/18.jpg)
ü GEF3D [von Pilgrim 08] synchronizes 3 views
Background on UI views
Conceptual view: domain model (UML
Class Diagram)
External view: final user interface
(with structure)
External view: final user interface (without structure)
AVI'2012 - Capri, May 21-25, 2012
![Page 19: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/19.jpg)
ü GEF3D [von Pilgrim 08] synchronizes 3 views
Background on UI views
Conceptual view: domain model (UML
Class Diagram)
External view: final user interface
(with structure)
External view: final user interface (without structure)
AVI'2012 - Capri, May 21-25, 2012
![Page 20: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/20.jpg)
ü 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
Shortcomings of UI views organisaSon
AVI'2012 - Capri, May 21-25, 2012
![Page 21: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/21.jpg)
ü Replace links between UI views by an animated transiSon
Goal
AVI'2012 - Capri, May 21-25, 2012
![Page 22: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/22.jpg)
ü 1) Define the iniSal view
ü 2) Define the final view
ü 3) Define mappings between views
ü 4) Derive the transiSon based on mappings previously defined
Methodology
AVI'2012 - Capri, May 21-25, 2012
![Page 23: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/23.jpg)
AVI'2012 - Capri, May 21-25, 2012
T r a n s i t i o n type
Internal view External view
Text-to-text <label_short=”Birthdate”>
T e x t - t o -position
<textfield … col=”4”…>
T e s t - t o -length
<textfield … length=”20”.>
Text-to-color-saturation
<textfield. fgColor=”red”.>
Text-to-color-texture
< t e x t f i e l d … bgTexture=”checkerboard”…>
T e x t - t o -shape
<textfield name=”Birthdate”>
T e x t - t o -symbol
<textfield … required=”yes”… >
Birthdate :
Birthdate :4
Birthdate :
20
Birthdate :
Birthdate :
Birthdate :
Birthdate * :
Mappings
![Page 24: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/24.jpg)
AVI'2012 - Capri, May 21-25, 2012
Which parameter for animated transiSon
![Page 25: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/25.jpg)
ü 5) IdenSfy animaSon technique to produce the
transiSon ü Text-‐to-‐text ü Text-‐to-‐color ü Text-‐to-‐shape ü Disappearing elements
ü 6) Execute the animated transiSon
Methodology
AVI'2012 - Capri, May 21-25, 2012
![Page 26: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/26.jpg)
Animated TransiSon from CV to EV
AVI'2012 - Capri, May 21-25, 2012
![Page 27: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/27.jpg)
Animated TransiSon from IV to EV
AVI'2012 - Capri, May 21-25, 2012
![Page 28: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/28.jpg)
Anim. Trans. from IV to EV (idenSfied)
AVI'2012 - Capri, May 21-25, 2012
![Page 29: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/29.jpg)
Anim. Trans. from IV to EV (Slow down)
AVI'2012 - Capri, May 21-25, 2012
![Page 30: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/30.jpg)
ü 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
Results
AVI'2012 - Capri, May 21-25, 2012
![Page 31: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/31.jpg)
ü 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
Conclusion and Future Work
AVI'2012 - Capri, May 21-25, 2012
![Page 32: Animated transitions across UI views](https://reader033.vdocuments.mx/reader033/viewer/2022051514/549a1f76ac79592f2e8b5aa3/html5/thumbnails/32.jpg)
For more information and downloading, http://www.lilab.be
User Interface eXtensible Markup Language http://www.usixml.org
Thank you very much!
FP7 Serenoa project http://www.serenoa-fp7.eu