Animated Transitions between          User Interface Views    Charles-Eric Dessart, Vivian Genaro Motti, Jean Vanderdonckt...
Louvain Interaction Laboratory            (LILab)    Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgiumhttp://www.lila...
Presentation outline     Motivations     Basic concepts     Background on UI views         Models and language       ...
Motivations     Software development life cycle typically involves many      steps at various levels of abstraction      ...
Motivations     Transition between steps, levels is hard to grasp      (imagine, understand, maintain, evolve)          ...
Basic concepts     3 types of representation:         Internal: UI code (in programming of markup language)         Ext...
Basic concepts     Possible transitions between representations:          From Conceptual to            Internal: e.g.,...
Basic concepts     Possible transitions between representations:          From External to            Internal: e.g., t...
Basic concepts     Loops on representations:         From Conceptual to Conceptual: e.g., M2M in MDE         From Inter...
Background on UI views             Typical configuration in Integrated Development              EnvironmentsExternal view...
Background on UI views             FormsVBT [Avrahami89] synchronizes 2 UI viewsInternal view:                           ...
Background on UI views           Vista [Brown98] synchronizes 2 UI views in 4 windows                                    ...
Background on UI views            TADEUS++ [Stary00] provides 3 views                                                    ...
Background on UI views             TADEUS++ [Stary00] provides 3 views                                                   ...
Background on UI views              Teallach [Griffith00] has 2 views: domain and task, UIConceptual                     ...
Background on UI views            IdealXML [Montero06] has conceptual views                                              ...
Background on UI views            IdealXML [Montero06] links views by a table                                            ...
Background on UI views            GEF3D [von Pilgrim 08] synchronizes 3 views                                            ...
Background on UI views            GEF3D [von Pilgrim 08] synchronizes 3 views                                            ...
Shortcomings of UI views organisation     Almost no links represented between views     When links are represented      ...
Goal        Replace links between UI views by an animated         transition                          AVI2012 - Capri, Ma...
Methodology    1) Define the initial view    2) Define the final view    3) Define mappings between views    4) Derive...
MappingsTransition      Internal view                          External view                                              ...
Which parameter for animated transition                  AVI2012 - Capri, May 21-25, 2012
Methodology   5) Identify animation technique to produce the   transition        Text-to-text        Text-to-color     ...
Animated Transition from CV to EV                  AVI2012 - Capri, May 21-25, 2012
Animated Transition from IV to EV                  AVI2012 - Capri, May 21-25, 2012
Anim. Trans. from IV to EV (identified)                   AVI2012 - Capri, May 21-25, 2012
Anim. Trans. from IV to EV (Slowdown)                   AVI2012 - Capri, May 21-25, 2012
Results    UsiView       Supports animated transitions between three UI        views: internal, external, conceptual    ...
Conclusion and Future Work     Animated transitions are a viable approach for      depicting the behaviour of some phenom...
Thank you very much!User Interface eXtensible Markup Languagehttp://www.usixml.orgFP7 Serenoa projecthttp://www.serenoa-fp...
Upcoming SlideShare
Loading in …5
×

Animated Transitions between User Interface Views

862 views

Published on

User interface development life cycle often involves several different views of the user interface over time; these views belong sometimes to different abstraction levels. Usually the relationship between views is presented by tiling coordinated windows, which leaves to the developer the responsibility to effectively and efficiently link corresponding elements across views. This paper attempts to overcome the shortcomings posed by the coordinated visualization across views by providing UsiView, a rendering engine that ensures with one single window an animated transition between three different user interface views: the internal, the external, and the conceptual one. Examples of scenarios include: an authoring environment providing an animated transition from an internal view (e.g., HTML5) to its external view (e.g., a web page), an Integrated Development Environment providing an animated transition from its conceptual view to its external view; a model-driven engineering environment providing an animated transition from the conceptual view to an external view. A five-step methodology for specifying animated transitions between views is proposed: defining the views, their mappings, the transition expressing the mappings, and the animation technique to render such transition. This paper discusses the potential advantages of using animated transitions between user interface views during the development life cycle

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
862
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • December 6, 2010
  • Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • Mapping problem consist in the need to express link between different Uis views External view: final GUI look an feel December 6, 2010
  • To represent a quantitative variable the position is the most precise then length, angle…. December 6, 2010
  • Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • Animated Transitions between User Interface Views

    1. 1. Animated Transitions between User Interface Views Charles-Eric Dessart, Vivian Genaro Motti, Jean Vanderdonckt Louvain School of Management Université catholique de Louvain Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium Vivian.genaromotti@uclouvain.bejean.vanderdonckt@uclouvain.be – http://www.uclouvain.be/jean.vanderdonckt
    2. 2. Louvain Interaction Laboratory (LILab) Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgiumhttp://www.lilab.be, http://www.lilab.eu, http://www.lilab.info
    3. 3. Presentation outline  Motivations  Basic concepts  Background on UI views  Models and language  Method  Software support  Future work AVI2012 - Capri, May 21-25, 2012
    4. 4. Motivations  Software development life cycle typically involves many steps at various levels of abstraction  In Model-Driven Architecture (MDA), 3 levels of abstraction  Computing-Independent Model (CIM)  Platform-Independent Model (PIM)  Platform-Specific Model (PSM)  User Interface (UI) development life cycle is similar  In UI development according to Cameleon Reference Framework (CRF), 4 levels of abstraction  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, presentation, dialog, help, tutorial AVI2012 - Capri, May 21-25, 2012
    5. 5. Motivations  Transition between steps, levels is hard to grasp (imagine, understand, maintain, evolve)  Models found at each level are different: concepts, relationships, and attributes are different  Models may have different views depending on  The stakeholder (designer, marketing, end user)  The step (e.g., early design vs advanced design)  The concepts (e.g., level of details)  Transitions between models are complex  E.g., mappings, transformations in MDA  Consequences  Mode switching is frequent  Cognitive load is high  Learning curve is slow AVI2012 - Capri, May 21-25, 2012
    6. 6. Basic concepts  3 types of representation:  Internal: UI code (in programming of markup language)  External: UI as experienced by the end user  Conceptual: UI representation abstracted from the UI code  Semantics  Syntax  Stylistics Concep- tual view External Internal view view AVI2012 - Capri, May 21-25, 2012
    7. 7. Basic concepts  Possible transitions between representations:  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 AVI2012 - Capri, May 21-25, 2012
    8. 8. Basic concepts  Possible transitions between representations:  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 AVI2012 - Capri, May 21-25, 2012
    9. 9. Basic concepts  Loops on representations:  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 AVI2012 - Capri, May 21-25, 2012
    10. 10. Background on UI views  Typical configuration in Integrated Development EnvironmentsExternal view: final user interface Conceptual view: hierarchical Internal view: description user interface code and properties AVI2012 - Capri, May 21-25, 2012
    11. 11. Background on UI views  FormsVBT [Avrahami89] synchronizes 2 UI viewsInternal view: External view: LaTex-like final user description interface (with structure) External view: final user interface (without structure) AVI2012 - Capri, May 21-25, 2012
    12. 12. Background on UI views  Vista [Brown98] synchronizes 2 UI views in 4 windows Conceptual view:Conceptual task modelview: task (UAN tables)model (UANhierarchy) Internal view: Clock code Internalview: Clockarchitecture AVI2012 - Capri, May 21-25, 2012
    13. 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) AVI2012 - Capri, May 21-25, 2012
    14. 14. Background on UI views  TADEUS++ [Stary00] provides 3 views Conceptual view: final user interface (with structure) Conceptual view: domain Conceptual model (Object view: useroriented model) model Conceptual view: task model AVI2012 - Capri, May 21-25, 2012
    15. 15. Background on UI views  Teallach [Griffith00] has 2 views: domain and task, UIConceptual Conceptual view:view: task final user model interface (with structure) AVI2012 - Capri, May 21-25, 2012
    16. 16. Background on UI views  IdealXML [Montero06] has conceptual views Conceptual view: task model Conceptual view: domain model (UMLClass Diagram) Conceptual view: abstract user interface (with structure) AVI2012 - Capri, May 21-25, 2012
    17. 17. Background on UI views  IdealXML [Montero06] links views by a table Conceptual view: task model Conceptual view: domain Conceptual model (UML view: abstractClass Diagram) user interface (with structure) AVI2012 - Capri, May 21-25, 2012
    18. 18. Background on UI views  GEF3D [von Pilgrim 08] synchronizes 3 views External view: Conceptual final user view: domain interface model (UML (withoutClass Diagram) structure) External view: final user interface (with structure) AVI2012 - Capri, May 21-25, 2012
    19. 19. Background on UI views  GEF3D [von Pilgrim 08] synchronizes 3 views External view: final user interface (without Conceptual structure) view: domain model (UMLClass Diagram) External view: final user interface (with structure) AVI2012 - Capri, May 21-25, 2012
    20. 20. Shortcomings of UI views organisation  Almost no links represented between views  When links are represented  Legibility problems  Scalability problems  Variation of link representations  Line, arrows, table, graph, tree  No immediate feedback  High cognitive load AVI2012 - Capri, May 21-25, 2012
    21. 21. Goal  Replace links between UI views by an animated transition AVI2012 - Capri, May 21-25, 2012
    22. 22. Methodology  1) Define the initial view  2) Define the final view  3) Define mappings between views  4) Derive the transition based on mappings previously defined AVI2012 - Capri, May 21-25, 2012
    23. 23. MappingsTransition Internal view External view Birthdate :typeText-to-text <label_short=”Birthdate”> 4Text-to- <textfield … col=”4”…> Birthdate :position 20Test-to- <textfield … length=”20”.> Birthdate :length Birthdate :Text-to- <textfield. fgColor=”red”.>color-saturationText-to- <textfield … Birthdate :color-texture bgTexture=”checkerboard”…> Birthdate :Text-to- <textfield name=”Birthdate”>shape Birthdate *:Text-to- <textfield …symbol required=”yes”… > AVI2012 - Capri, May 21-25, 2012
    24. 24. Which parameter for animated transition AVI2012 - Capri, May 21-25, 2012
    25. 25. Methodology 5) Identify animation technique to produce the transition  Text-to-text  Text-to-color  Text-to-shape  Disappearing elements 6) Execute the animated transition AVI2012 - Capri, May 21-25, 2012
    26. 26. Animated Transition from CV to EV AVI2012 - Capri, May 21-25, 2012
    27. 27. Animated Transition from IV to EV AVI2012 - Capri, May 21-25, 2012
    28. 28. Anim. Trans. from IV to EV (identified) AVI2012 - Capri, May 21-25, 2012
    29. 29. Anim. Trans. from IV to EV (Slowdown) AVI2012 - Capri, May 21-25, 2012
    30. 30. Results UsiView  Supports animated transitions between three UI views: internal, external, conceptual  Is implemented in Microsoft Expression Blend  An animated transition is actually a visual effect between two vectorial graphical objects in MS Blend governed by parameters  Location  Speed  Acceleration - Deceleration  Reduces the cognitive load of mode switching AVI2012 - Capri, May 21-25, 2012
    31. 31. Conclusion and Future Work  Animated transitions are a viable approach for depicting the behaviour of some phenomenon  For a change of context  Between an initial and a final state  Provided that  Temporal aspects are well designed  Spatial aspects are adequately programmed  Effects are derived from the model views, not randomly  Transition types: to be extended  End user studies: to be pursued  Still no systematic approach for animated transitions AVI2012 - Capri, May 21-25, 2012
    32. 32. Thank you very much!User Interface eXtensible Markup Languagehttp://www.usixml.orgFP7 Serenoa projecthttp://www.serenoa-fp7.euFor more information and downloading,http://www.lilab.be

    ×