1. http://www.slideshare.net/jeanvdd/a-review-of-animation-techniques-for-user-interface-designKeynote address forCongreso Internacional de Ingeniera del Software Armenia2012 (Quindio,October 10th, 2012) A review of Animation Techniques forUser Interface Design Jean Vanderdonckt, Vivian Genaro Motti Universit catholique de Louvain (UCL)

2. Content Motivations Why and what of animated transitions Basic concepts First example: web adaptation Second example: transition between UI views Conclusion and Future work 3. MotivationsAnimation in generalDoes not necessarily improve user interfaceShould be relevantAnimated transition in particular 4. Related WorkPivotViewer [www.silverlight.net/learn/pivotviewer/] 5. Related WorkInfoVis[Elmqvist et al., 2008] 6. Related WorkMnemonic rendering[Bezerianos, Dragicevic, Balakrishnan, 2008] 7. Related WorkSpatial aspects Initial ImageFinal Image?? [Heer, Robertson, 2007] 8. Related WorkAnimation in statistics [Heer, Robertson, 2007] 9. Related WorkPhosphor Widgets[Baudisch, P., Tan, D., Collomb, M., Robbins, D., Hinckley, K., Agrawala, M., Zhao, S., and Ramos, G, UIST2007] 10. Temporal Aspects Slow In/Slow Out is better in all regards Adaptive speed performs best when complexity found at endpoints Slow InFast InConstant AdaptiveSlow Out Fast OutFast Fast SlowtSlow [Dragicevic, Bezerianos, Javed, Elmqvist, Fekete, 2011] time 11. Related WorkAdaptive Layout[Plomp & Keranen, NordiCHI2002] 12. Related Work Diffie New toyou Always onNon-intrusive Changes to page since your In-last visit situ[Teevan, Dumais, Liebling, Hughes,2010] 13. When to use animated transitionIcon 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 14. Examples of animated transition First example: user interface adaptation What happens when a GUI is adapted?Nothing betweenEnd user disruptionCognitive perturbation 15. Examples of animated transition Potential solution: use animated transition 16. Examples of animated transition Use animated transition to ensure a smoothtransition between the initial UI and the final(adapted) UI Backward animation Forward animationBreakSkip Initial UI Transient UITransient UI Transient UIbefore being beingbeingFinal UI after adaptationadaptationadapted adaptedadaptedReturn ith adaptationRestart operation Transition time for ith adaptation operation Total transition time for transition scenario 17. Examples of animated transition When to use to draw the audiences attention to a single element out ofseveral, or to alert people to updated information to indicate the function of a hot spot (for example, a movinghiker could indicate the current location of Mungo Parkadventurers) to draw attention to changes from one state to another (forexample, animated map area changes could indicatedeforestation over time). to demonstrate navigation in a particular direction (forexample, a simple page-flip animation could easily distinguishforward from backward movement to create icons for actions that cant be adequately expressedwith a flat, static picture 18. Examples of animated transition How to do An animation sequence should be short The direction of movement influence the meaning of theinformation conveyed Animation should be supported by sound Animation techniques for global changes to the entire screenare cut, fade in and fade out, dissolve, wipe, overlap, andmultiple exposure Animation techniques for local changes within a region of thescreen are pop on and pop off, pull down and pull up, flip, andspin 19. Framework for animated transition +hasSource ModelModel ElementModel Relationship+modelID : string(idl) -isStructuredIn +elementID+relID+modelName : any(idl)+elementName1..* 0..* +relName+modelDefinition : string(idl) +elementDefinition+hasTarget+relDefinition+modelVersion : any(idl)1* +elementCharacterization+relStatement 1..*0..*1..* +views 1 1 *1 * * Attribute Constraint Attribute+constraintID +attributeID+constraintName +attributeName : Attribute+constraintType +attributeDefinition+constraintExpression +attributeDateTypeharacterization1*-constraintSatisfaction -attributeDomain-constraintLanguage0..* +isViewedIn View ShapeModel View +shapeID+hasSource +viewlID : string(idl) View Connection-isRenderedThrough -shapeName +viewName : any(idl)-shapeType -connectionID +viewType -shapePosition1..* 0..*-connectionType +levelOfFidelity+hasTarget -connectionLine 1 * -shapeDimensions +levelOfDetails -shapeDensity-connectionConstraints -shapeColorSaturation 1..* 0..* -shapeColorHue -shapeTexture +depicts1..*-shapeText -shapeLineSpec Animated Transition+isDepictedIn0..*+atID +atType +atTemporization Transition+atEffect +atInitialSeep-transitionID +atFinalSpeed-transitionType +atTemporalFunction-transitionDefinition-transitionCorresp 20. Example of instantiation: visual transitions [Schlienger, Chatty, IHM 2006] 21. First instantiation for user interface adaptation Transition Scenario Adaptation Operation Animated Transition+scenarioID : octet(idl) ** +animates+operationID : string(idl)+transitionID+scenarioDefinition : string(idl) +isAnimatedBy+operationDefinition : string(idl)+transitionName+Source : string(idl)+operationRationale : string(idl) * +transitionTime+Target : string(idl) Parameterization *+transitionOptions +ordering+transitionParam +Parameters 1..* +operatesOn 1..* +isOperatedBy0..* +isInvolvedIn +Values-isLaidOutIn1Concrete Individual Component-id : string(idl)1..* +Involves Concrete Container +name : string(idl) -laysOut-id : string(idl)+definition : string(idl)Concrete Interface Model +name : string(idl)+graphicalIcon : object(idl) +definition : string(idl)+icon : object(idl)-id : string(idl) 0..* +graphicalIcon : object(idl) +label : string(idl)+name : string(idl) +containerType : string(idl) +shortLabel : string(idl)+creationDate : Date +flowAlignment : string(idl)11..*+abbreviatedLabel : string(idl)+modificationDate : Date1 1..* +borderAlignment : string(idl) +shortCut : string(idl) +columnsNumber : fixed(idl)+mnemonic : short(idl) +linesNumber : fixed(idl)+isEditable : boolean(idl)+isMandatory : boolean(idl) User Interface Core Model+order : fixed(idl)-id : string(idl)1+name : string(idl)+versionNumber : string(idl)0..*textInputComboBox-isScrollable : boolean(idl)-isDropDownable : boolean(idl) Spacing Individual Component -isEditable : boolean(idl) -id : string(idl)1 +value : fixed(idl) textOutput +unit : string(idl)ListBox 1 checkBoxTreelinkradioButtonItem ** Button -label : string(idl) datePicker -presentationType -assignment -buttonType : string(idl) 22. GraphicalUI Editor SoftwarearchitectureUI Model Adaptation Editor AdaptedTransition UI Modelscenario 23. Adaptation operations Resizing operations: are aimed at changing a widget size in order to optimizescreen 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 reducethe 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 byanother widget or another group of widgets ensuring the same task, perhaps withsome 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 animage in order to accommodate the constraints imposed by the new context ofuse, namely the display/platforms constraints. Splitting rules: are aimed at dividing one or a group of widgets into one or severalother groups of widgets that will be displayed separately. For instance, a dialogbox is split into two tabs in a tabbed dialog box 24. Associate an animated transition AdaptationAnimation family, animated transition with justificationoperationSET that modifies the length of a UI Horizontal scroll/wipe from left (F1): this operation minimizes the visual change sinceelement into a larger value (absolute only the right part resulting from the enlarging is changing. For edit fields, for instance,or relative)this is particularly appropriate because it gives the feeling that the field is reallyexpandingSET that modifies the height of a UI Vertical scroll/wipe from bottom (F1): this operation minimizes the visual change sinceelement into a larger value (absolute only the right part resulting from the enlarging is changingor relative)DISPLAY that displays a new UI Uncover (F3), Box out (F4), or Iris open (F4): these operations all induce a progressiveelement at a certain position display of a new UI element at once, thus creating the illusion that it is coming from theempty.UNDISPLAY that undisplays a new Cover (F3), Box in (F4), or Iris close (F4): these operations all induce a progressiveUI element at a certain positiondisappearing of a existing UI element at once, thus creating the illusion that it is shrunk toan empty/white region.REPLACE that substitutes a UI Barn door open (F2): this operation affects the entire visual aspect of the previous oneelement by another oneand the new one.DISTRIBUTE that computes a Bam door open (F2) or Iris open (F4): these operations enable the visualization of andistribution of a series of UI Elements entire group at once, instead of showing every little display change individuallyinto a series of UI ContainersMOVE that moves a UI element to a Ideally, the UI movement could be represented by an animation depicting the movementnew location indicated by its itself. But practically, this would induce a very long animation, thus increasing again thecoordinates x and y, possibly in alag. Therefore, we preferred to adopt a disappearing of the UI element from its originalfixed amount of steps location and an appearing to its target location. Depending on these locations, vertical,horizontal or diagonal replacements (F1) are selected. 25. Sample #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; 26. Sample #2 27. Sample #3 28. Sample #4 SUBSTITUTE %SelectRadioGroup "groupeType" BY @ComboBoxIN #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; 29. Examples of application A simple login page:http://www.youtube.com/watch?v=2mvvTL1yYBA A polling system:http://www.youtube.com/watch?v=2ZViwktUbhU An address book:http://www.youtube.com/watch?v=8MxokT-GCMY 30. User studyI strongly disagree I disagree I am so so I agree I strongly agreeQ1212. I would recommend using the animationQ1111. The animation is fast10. The animation represents the adaptation Q109. The animation is easy to revert (backward Q9animation) Q88. The animation is easy to progress (forwardanimation) Q77. The animation is easy to follow Q66. The animation is easy to understand5. The animation is easy to controlQ54. The animation is easy to use Q43. I preferred the animation over no animation atallQ32. I liked the animation interface Q21. I liked the animation process Q11 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 31. Second instantiation: transitions between UI views+hasSourceModelModel ElementModel Relationship +modelID : string(idl) -isStructuredIn +elementID+relID +modelName : any(idl)+elementName1..* 0..* +relName +modelDefinition : string(idl) +elementDefinition+hasTarget+relDefinition +modelVersion : any(idl)1* +elementCharacterization+relStatement1..*0..* 1..* +views1 1 *1* *Attribute ConstraintAttribute +constraintID+attributeID +constraintName+attributeName : Attribute +constraintType+attributeDefinition +constraintExpression+attributeDateTypeharacterization1*-constraintSatisfaction-attributeDomain -constraintLanguage 0..* +isViewedInView Shape Model View+shapeID+hasSource+viewlID : string(idl) View Connection -isRenderedThrough -shapeName+viewName : any(idl)-shapeType -connectionID+viewType -shapePosition1..* 0..*-connectionType+levelOfFidelity+hasTarget -connectionLine1 * -shapeDimensions+levelOfDetails -shapeDensity-connectionConstraints-shapeColorSaturation 1..* 0..*-shapeColorHue-shapeTexture+depicts1..*-shapeText-shapeLineSpecAnimated Transition +isDepictedIn0..*+atID+atType+atTemporizationTransition+atEffect+atInitialSeep -transitionID+atFinalSpeed -transitionType+atTemporalFunction -transitionDefinition -transitionCorresp 32. 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, transformation in MDE Consequences Mode switching is frequent Cognitive load is high Learning curve is slow 33. Background 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 StylisticsConceptualview ExternalInternalview view 34. Background Typical configuration in Integrated Development Environments External view: final user interfaceConceptual view:hierarchicaldescription Internal view:user interfacecode andproperties 35. Background FormsVBT [Avrahami89] synchronizes 2 UI viewsInternal view:External view:LaTex-likefinal user descriptioninterface (with structure)External view: final user interface(without structure) 36. Background GEF3D [von Pilgrim 08] synchronizes 3 viewsConceptual view: External view: domain model final user(UML Classinterface Diagram)(without structure) External view: final user interface(with structure) 37. Methodology1) Define the initial view2) Define the final view3) Define mappings between views4) Derive the transition based on mappings previously defined 5) Identify animation technique to produce the transition Text-to-text Text-to-color Text-to-shape Disappearing elements 6) Execute the animated transition 38. Animated transitionsTransition typeInternal viewExternal viewText-to-text Text-to-position Test-to-length Text-to-color- saturationText-to-color- Text-to-shapeText-to-symbol 39. How to animate 40. UsiView: transitions between viewsaConceptual view Animated transition between conceptual and external views b Internal view c External viewAnimated transition between internal and external views 41. Animated Transition from CV to EV 42. Animated Transition from IV to EV 43. Anim. Trans. from IV to EV (identified) 44. Anim. Trans. from IV to EV (Slow down) 45. Related work: Gliimpse from P. Dragicevic found at[Dragicevic, Huot, Chevalier, UIST2011] 46. Conclusion Animated transitions are a viable approach for depicting thebehaviour 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 47. Thank you very much for your attention!This work is supported byFP7 Serenoa European Project (www.serenoa-fp7.eu)