Date post: | 18-Dec-2014 |
Category: |
Technology |
Upload: | vivian-motti |
View: | 552 times |
Download: | 1 times |
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
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)
ü MoSvaSons ü Basic concepts ü Background on UI views
ü Models and language ü Method ü SoWware support
ü Future work
PresentaSon outline
AVI'2012 - Capri, May 21-25, 2012
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
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
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
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
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
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
ü 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
ü 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
ü 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
ü 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
ü 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
ü 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
ü 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
ü 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
ü 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
ü 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
ü 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
ü Replace links between UI views by an animated transiSon
Goal
AVI'2012 - Capri, May 21-25, 2012
ü 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
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
AVI'2012 - Capri, May 21-25, 2012
Which parameter for animated transiSon
ü 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
Animated TransiSon from CV to EV
AVI'2012 - Capri, May 21-25, 2012
Animated TransiSon from IV to EV
AVI'2012 - Capri, May 21-25, 2012
Anim. Trans. from IV to EV (idenSfied)
AVI'2012 - Capri, May 21-25, 2012
Anim. Trans. from IV to EV (Slow down)
AVI'2012 - Capri, May 21-25, 2012
ü 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
ü 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
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