• Like
Animated Transitions between User Interface Views
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Animated Transitions between User Interface Views

  • 605 views
Published

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 …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
605
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 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. 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. Presentation outline  Motivations  Basic concepts  Background on UI views  Models and language  Method  Software support  Future work AVI2012 - Capri, May 21-25, 2012
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Goal  Replace links between UI views by an animated transition AVI2012 - Capri, May 21-25, 2012
  • 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. 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. Which parameter for animated transition AVI2012 - Capri, May 21-25, 2012
  • 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. Animated Transition from CV to EV AVI2012 - Capri, May 21-25, 2012
  • 27. Animated Transition from IV to EV AVI2012 - Capri, May 21-25, 2012
  • 28. Anim. Trans. from IV to EV (identified) AVI2012 - Capri, May 21-25, 2012
  • 29. Anim. Trans. from IV to EV (Slowdown) AVI2012 - Capri, May 21-25, 2012
  • 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. 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. 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