Animated Transitions for Empowering Interactive Information Systems - Keynote address of RCIS'2012 conference

1,638 views

Published on

Animated transitions are widely used in many different domains of human activity, ranging from cartoons and movies to computer science for powerfully conveying a message more effectively and efficiently about a phenomenon of interest. This paper reviews a series of techniques for defining, analyzing, and exploiting animated transitions in different types of interactive information systems. A general conceptual model is provided that explicitly links a model of an interactive information system, its model elements and relationships to animated transitions in order to adequately reflect any change of the model into animated transitions. Two instantiations of this conceptual framework are discussed: animated transitions for representing adaptation of the graphical user interface of an interactive system, along with its implementation; and animated transitions between user interface views during development life cycle.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,638
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
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
  • Statement #1: nobody had a negative feeling about having an animation of the transition scenario (neither orange nor red areas). Statement #2: some participants were concerned about the Animator UI (some orange area) Statement #3: follows a similar trend. Participants appear to show a preference for the animation over no animation at all. Statement #4: the animation should always come automatically, participants seemed to appreciate the animation effects, but do not appreciate the time consumed by the animation, especially when the total animation time is long. Statement #5: users prefer to keep control over the transition scenario with user actions, but it turns out that they do not know exactly what user action to undertake since they do not know what the next adaptation operations are.   Statement #8: Forward animation is perceived in a better way that the backward animation (statement #9). Statement #12: verifies the results of the global perception responses by asking the participants to respond to a recommendation statement: three quarters of the participants were confident in recommending the animation transition as a mechanism for showing the adaptation. These results are more moderate than the initial statements. Keynote address - Interaccion'2010 (Valencia, 6-10 September 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
  • Mapping problem consist in the need to express link between different Uis views December 6, 2010
  • Animated Transitions for Empowering Interactive Information Systems - Keynote address of RCIS'2012 conference

    1. 1. Animated Transitions for Empowering Interactive Information Systems Jean Vanderdonckt Louvain School of Management Université catholique de Louvain Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgiumjean.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  Why and what of animated transitions  Basic concepts  First example: web adaptation  Second example: transition between UI views  Conclusion and Future work Keynote address - RCIS2012 - Valencia, May 18, 2012
    4. 4. Motivations  Static display vs dynamic animation  Many domains of human activity are dynamic by definition  Air traffic control, auctions, statistics  Information systems  Information systems should have a vivid behaviour that reflects their internal processing  Some IFIP WG 13.2 Qualities  Honesty = capability to reflect the internal state  Observability  Browsability  Why not: "behaviourability" Keynote address - RCIS2012 - Valencia, May 18, 2012
    5. 5. Motivations  Animation in general  Animated transition in particular Keynote address - RCIS2012 - Valencia, May 18, 2012
    6. 6. What and why of animated transition  What: Smooth out a startling or dislocating transition with an animation that makes it feel natural.  When: Users move through a large virtual space, such as an image, spreadsheet, graph, or text document. They might be able to zoom in to varying degrees, pan or scroll, or rotate the whole thing.  Why: All of these transformations can disrupt a users sense of where she in in the virtual space.  Zooming in and out, for instance, can throw off her spatial sense when its done instantaneously, as can rotation and the closing of entire sections that prompt a re-layout of the screen.  Moving from an initial diagram to a final diagram  Scrolling down a long page of text, when its jumpy, can slow a reader down. But when the shift from one state to another is continuous, its not so bad. In other words, you can animate the transition between states so it looks smooth, not discontinuous. This helps keep the user oriented. Keynote address - RCIS2012 - Valencia, May 18, 2012
    7. 7. Related Work: PivotViewer [www.silverlight.net/learn/pivotviewer/] Keynote address - RCIS2012 - Valencia, May 18, 2012
    8. 8. Related Work: InfoVis [Elmqvist et al., 2008] Keynote address - RCIS2012 - Valencia, May 18, 2012
    9. 9. Related Work• Mnemonic rendering [Bezerianos, Dragicevic, Balakrishnan, 2008] Keynote address - RCIS2012 - Valencia, May 18, 2012
    10. 10. Related Work• Spatial Aspects Initial Image Final Image ? ? [Heer, Robertson, 2007] Keynote address - RCIS2012 - Valencia, May 18, 2012
    11. 11. Related Work: AT in statistics [Heer, Robertson, 2007] Keynote address - RCIS2012 - Valencia, May 18, 2012
    12. 12. Related Work: Phosphor widgets Keynote address - RCIS2012 - Valencia, May 18, 2012
    13. 13. When to use an animated transition Icon Name: definition Horizontal scroll from right: to display the next element from a sequence of elements Horizontal scroll from left: to display the previous element from a sequence of elements Vertical scroll from bottom: to proceed with a step-by-step reasoning, a continuous subject or a long passing over, or a movement Vertical scroll from top: to move back in a step-by-step reasoning, a continuous subject or a long passing over, or a movement Diagonal replacement from top/bottom left corner: to go back to the previous page or screen or element Diagonal replacement from top/bottom right corner: to move to next page or screen or UI element Venetian blinds: to present a completely different topic, to provide a feeling of coordinated time, to convey a significant transition Barn door close: to close a transient screen (e.g., an information screen, the About… splash screen), to close a current scene, to signify game over Barn door open: to open a transient screen, to initiate a new step, to open a new window or UI element, to launch a game, a simulation Iris open: to show more detailed information about a particular topic Iris close: to show more general information about a particular topic Keynote address - RCIS2012 - Valencia, May 18, 2012
    14. 14. First example: userinterface adaptation Keynote address - RCIS2012 - Valencia, May 18, 2012
    15. 15. The problem• What happens when a GUI is adapted? Nothing between ⇒End user disruption ⇒Cognitive perturbation Keynote address - RCIS2012 - Valencia, May 18, 2012
    16. 16. Potential solution• Use animated transition Keynote address - RCIS2012 - Valencia, May 18, 2012
    17. 17. Potential solution• Use animated transition to ensure a smooth transition between the initial UI and the final (adapted) UI Backward animation Forward animation Break Skip Initial UI Transient UI Transient UI Transient UI Final UI after before … being being being … adaptation adaptation adapted adapted adapted Return ith adaptation Restart operation Transition time for ith adaptation operation Total transition time for transition scenario Keynote address - RCIS2012 - Valencia, May 18, 2012
    18. 18. Related work on Animated Transitions• Use animation – to draw the audiences attention to a single element out of several, or to alert people to updated information – to indicate the function of a hot spot (for example, a moving hiker could indicate the current location of Mungo Park adventurers) – to draw attention to changes from one state to another (for example, animated map area changes could indicate deforestation over time). – to demonstrate navigation in a particular direction (for example, a simple page-flip animation could easily distinguish forward from backward movement – to create icons for actions that cant be adequately expressed with a flat, static picture • Permanently moving (looping) animations should rarely be included on a Web page because they will make it very hard for your audience to concentrate on other page content. Research suggests that movement in our peripheral vision can dominate our attention. Research also indicates that moving text is harder to read than static text [Baecker, Small, Mander ,2001] Keynote address - RCIS2012 - Valencia, May 18, 2012
    19. 19. Related work on Animated Transitions• A number of visual effects are available. For global changes to the entire screen these are the cut, fade in and fade out, dissolve, wipe, overlap, and multiple exposure. Locally, within a region of the screen, pop on and pop off, pull down and pull up, flip, and spin can be used.• Note: Visual effects should be used carefully. When employed too often, they will be fatiguing or even annoying or distressing to the user.• Animation covers a range of creative techniques and media, from three- dimensional figures captured on film to wholly computer-generated images. Typical for animation is the rapid and continuous change of the graphical objects making up the animation• The dynamic of animation can be used to direct the users attention to a specific point. – Time and movement can be visualised by animation. – Animation can be used to show an invisible process. It enables the simulation of processes which are too dangerous or difficult to perform directly. – Animation of structures is useful for the exploration of complex environments. – Animation can be used for gradual illustration of a content. – Complex contents (e.g. process, function) can be simplified by animation. – Animation can be used to show the reaction on an interaction. [Baecker, Small, Mander ,2001] Keynote address - RCIS2012 - Valencia, May 18, 2012
    20. 20. How to do an animated transition?• Design: – An animation sequence should be short. – The direction of movement influence the meaning of the information conveyed. – Animation should be supported by sound. – Animation techniques for global changes to the entire screen are cut, fade in and fade out, dissolve, wipe, overlap, and multiple exposure. – Animation techniques for local changes within a region of the screen are pop on and pop off, pull down and pull up, flip, and spin. [Ware,2004] Keynote address - RCIS2012 - Valencia, May 18, 2012
    21. 21. How to do an animated transition?• Interaction: – The user should be able to interrupt the animation sequence at any time – The user should be able to repeat parts of the animation – The user should be able to control the animation playing speed (e.g. fast forward) – The user may manipulate an animated object Keynote address - RCIS2012 - Valencia, May 18, 2012
    22. 22. Related work• DiffIE New to you Always on Non-intrusive Changes to page since your In- last visit situ [Teevan, Dumais, Liebling, Hughes,2010] Keynote address - RCIS2012 - Valencia, May 18, 2012
    23. 23. Related Work• Temporal Aspects – Slow In/Slow Out is better in all regards – Adaptive speed performs best when complexity found at endpoints Slow In Fast InConstant Adaptive Slow Out Fast Out Fast Fast Slow t Slow → Sp eed [Dragicevic, Bezerianos, Javed, Elmqvist, Fekete, 2011] time → Keynote address - RCIS2012 - Valencia, May 18, 2012
    24. 24. Architecture of the system• Flow Keynote address - RCIS2012 - Valencia, May 18, 2012
    25. 25. Graphical UI Editor UI ModelAdaptation Editor Adapted Transition UI Model scenario Keynote address - RCIS2012 - Valencia, May 18, 2012
    26. 26. Adaptation operations• Resizing operations: are aimed at changing a widget size in order to optimize screen real estate, aesthetics, and visual design – For instance, an edit field could be enlarged/shortened in height and/or length to take less space and to be subject to various alignments.• Relocating operations: are aimed at changing a widget location in order to reduce the screen space consumption – For instance, “Ok”, “Cancel”, and “Help” push buttons could be relocated to the bottom of a dialog box.• Widget transformations: are aimed at replacing one or a group of widgets by another widget or another group of widgets ensuring the same task, perhaps with some degradation – For instance, an accumulator that consists of list boxes with possible values and chosen values could be replaced by a multi-selection list, which could be in turn replaced by a multi-selection drop-down list.• Image transformations: are aimed at changing the size, surface, and quality of an image in order to accommodate the constraints imposed by the new context of use, namely the display/platforms constraints.• Splitting rules: are aimed at dividing one or a group of widgets into one or several other groups of widgets that will be displayed separately. For instance, a dialog box is split into two tabs in a tabbed dialog box Keynote address - RCIS2012 - Valencia, May 18, 2012
    27. 27. How to associate an animated transition to an adaptation operation Adaptation Animation family, animated transition with justification operationSET that modifies the length of a Horizontal scroll/wipe from left (F1): this operation minimizes the visualUI element into a larger value change since only the right part resulting from the enlarging is changing. For(absolute or relative) edit fields, for instance, this is particularly appropriate because it gives the feeling that the field is really expandingSET that modifies the height of a Vertical scroll/wipe from bottom (F1): this operation minimizes the visualUI element into a larger value change since only the right part resulting from the enlarging is changing(absolute or relative)DISPLAY that displays a new UI Uncover (F3), Box out (F4), or Iris open (F4): these operations all induce aelement at a certain position progressive display of a new UI element at once, thus creating the illusion that it is coming from the empty.UNDISPLAY that undisplays a Cover (F3), Box in (F4), or Iris close (F4): these operations all induce anew UI element at a certain progressive disappearing of a existing UI element at once, thus creating theposition illusion that it is shrunk to an empty/white region.REPLACE that substitutes a UI Barn door open (F2): this operation affects the entire visual aspect of theelement by another one previous one and the new one.DISTRIBUTE that computes a Bam door open (F2) or Iris open (F4): these operations enable thedistribution of a series of UI visualization of an entire group at once, instead of showing every little displayElements into a series of UI change individuallyContainersMOVE that moves a UI element Ideally, the UI movement could be represented by an animation depicting theto a new location indicated by its movement itself. But practically, this would induce a very long animation, thuscoordinates x and y, possibly in a increasing again the lag. Therefore, we preferred to adopt a disappearing offixed amount of steps the UI element from its original location and an appearing to its target location. Depending on these locations, vertical, horizontal or diagonal replacements (F1) are selected. Keynote address - RCIS2012 - Valencia, May 18, 2012
    28. 28. Example #1• SUBSTITUTE #listbox_component_19 BY @ComboBox IN #box3 ("newComboBox") WHERE ROW 0, COL 0;• CONTRACT #newComboBox OF 90 50;• CHANGEBOX #button_1 TO #box3 WHERE ROW 0, COLINSERT 1;• SET #button_1->Content TO "GO!";• CHANGEBOX #button_0 TO #box3 WHERE ROW 0, COLINSERT 2;• SET #button_0->Content TO "[X]";• SET #label_0->FontSize TO 12;• CONTRACT #window_0 OF 40 120; Keynote address - RCIS2012 - Valencia, May 18, 2012
    29. 29. Example #1• SUBSTITUTE #listbox_component_19 BY @ComboBox IN #box3 ("newComboBox") WHERE ROW 0, COL 0;• CONTRACT #newComboBox OF 90 50;• CHANGEBOX #button_1 TO #box3 WHERE ROW 0, COLINSERT 1;• SET #button_1->Content TO "GO!";• CHANGEBOX #button_0 TO #box3 WHERE ROW 0, COLINSERT 2;• SET #button_0->Content TO "[X]";• SET #label_0->FontSize TO 12;• CONTRACT #window_0 OF 40 120; Keynote address - RCIS2012 - Valencia, May 18, 2012
    30. 30. Example #2• SUBSTITUTE %SelectRadioGroup "groupeType" BY @ComboBox IN #box110 ("newComboBoxType") WHERE ROW 0, COL 0;• SUBSTITUTE %SelectRadioGroup "groupeEtudiant" BY @CheckBox IN #box120 ("newCheckBoxEtudiant") WHERE ROW 0, COL 0;• CONTRACT #window_0 OF 50 50;• CHANGEROWS #box1 TO 25 25 25 25; Keynote address - RCIS2012 - Valencia, May 18, 2012
    31. 31. Example #3 Keynote address - RCIS2012 - Valencia, May 18, 2012
    32. 32. User study• Design setup20 participants 3 transition scenarios 12 questions on a 1. I liked the animation process 2. I liked the animation interface 5-point Likert scale 3. I preferred the animation over no animation at all (1 = strongly 4. The animation is easy to use disagree, 5. The animation is easy to control five = strongly agree) 6. The animation is easy to understand 7. The animation is easy to follow 8. The animation is easy to progress (forward animation) 9. The animation is easy to revert (backward animation) 10. The animation represents the adaptation 11. The animation is fast 12. I would recommend using the animation
    33. 33. User study I strongly disagree I disagree I am so so I agree I strongly agree • Results and discussion Q121. I liked the animation process Q112. I liked the animation interface3. I preferred the animation over no animation at Q10 all Q94. The animation is easy to use5. The animation is easy to control Q86. The animation is easy to understand Q77. The animation is easy to follow Q68. The animation is easy to progress (forward animation) Q59. The animation is easy to revert (backward Q4 animation)10. The animation represents the adaptation Q311. The animation is fast Q212. I would recommend using the animation Q1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Keynote address - RCIS2012 - Valencia, May 18, 2012
    34. 34. Intermediary conclusion• Animated transition is a viable approach provided that – Appropriate animated transitions are adequately mapped onto adaptation operations – Time and space are properly regulated• To work on: – Minimize the lag effect that is still there – Group similar, small adaptation operations Keynote address - RCIS2012 - Valencia, May 18, 2012
    35. 35. Second example:transitions between UI views
    36. 36. 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 Keynote address - RCIS2012 - Valencia, May 18, 2012
    37. 37. 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 Keynote address - RCIS2012 - Valencia, May 18, 2012
    38. 38. 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 Keynote address - RCIS2012 - Valencia, May 18, 2012
    39. 39. 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 Keynote address - RCIS2012 - Valencia, May 18, 2012
    40. 40. 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 Keynote address - RCIS2012 - Valencia, May 18, 2012
    41. 41. 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 Keynote address - RCIS2012 - Valencia, May 18, 2012
    42. 42. 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 Keynote address - RCIS2012 - Valencia, May 18, 2012
    43. 43. 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) Keynote address - RCIS2012 - Valencia, May 18, 2012
    44. 44. 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 Keynote address - RCIS2012 - Valencia, May 18, 2012
    45. 45. 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) Keynote address - RCIS2012 - Valencia, May 18, 2012
    46. 46. 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 Keynote address - RCIS2012 - Valencia, May 18, 2012
    47. 47. Background on UI views  Teallach [Griffith00] has 2 views: domain and task, UIConceptual Conceptual view:view: task final user model interface (with structure) Keynote address - RCIS2012 - Valencia, May 18, 2012
    48. 48. 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)
    49. 49. 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) Keynote address - RCIS2012 - Valencia, May 18, 2012
    50. 50. 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) Keynote address - RCIS2012 - Valencia, May 18, 2012
    51. 51. 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) Keynote address - RCIS2012 - Valencia, May 18, 2012
    52. 52. 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 Keynote address - RCIS2012 - Valencia, May 18, 2012
    53. 53. Goal  Replace links between UI views by an animated transition Keynote address - RCIS2012 - Valencia, May 18, 2012
    54. 54. 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 Keynote address - RCIS2012 - Valencia, May 18, 2012
    55. 55. Transition Internal view External viewtypeText-to-text <label_short=”Birthdate”> Birthdate :Text-to- <textfield … col=”4”…>position 4 Birthdate :Test-to- <textfield … length=”20”.> 20length Birthdate :Text-to- <textfield. fgColor=”red”.>color- Birthdate :saturationText-to- <textfield …color-texture bgTexture=”checkerboard”…> Birthdate :Text-to- <textfield name=”Birthdate”>shape Birthdate :Text-to- <textfield … Birthdate *:symbol required=”yes”… > Keynote address - RCIS2012 - Valencia, May 18, 2012
    56. 56. Keynote address - RCIS2012 - Valencia, May 18, 2012
    57. 57. 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 Keynote address - RCIS2012 - Valencia, May 18, 2012
    58. 58. Animated Transition from CV to EV Keynote address - RCIS2012 - Valencia, May 18, 2012
    59. 59. Animated Transition from IV to EV Keynote address - RCIS2012 - Valencia, May 18, 2012
    60. 60. Anim. Trans. from IV to EV (identified) Keynote address - RCIS2012 - Valencia, May 18, 2012
    61. 61. Anim. Trans. from IV to EV (Slowdown) Keynote address - RCIS2012 - Valencia, May 18, 2012
    62. 62. 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 Keynote address - RCIS2012 - Valencia, May 18, 2012
    63. 63. Final conclusion  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 Keynote address - RCIS2012 - Valencia, May 18, 2012
    64. 64. In memoriam: Paul Vanderdonckt(8 May 1933 – 31 March 2012) Keynote address - RCIS2012 - Valencia, May 18, 2012
    65. 65. 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 Keynote address - RCIS2012 - Valencia, May 18, 2012

    ×