Your SlideShare is downloading. ×
0
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
A review of animation techniques for user interface design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

A review of animation techniques for user interface design

7,823

Published on

Keynote address presented at Armenia'2012 conference

Keynote address presented at Armenia'2012 conference

Published in: Technology
3 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total Views
7,823
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
3
Likes
1
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

Transcript

  • 1. http://www.slideshare.net/jeanvdd/a-review-of-animation-techniques-for-user-interface-design Keynote address for Congreso Internacional de Ingeniería del Software Armenia2012 (Quindio, October 10th, 2012) A review of Animation Techniques for User 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. MotivationsAnimation in general Does not necessarily improve user interface Should be relevantAnimated transition in particular
  • 4. Related WorkPivotViewer [www.silverlight.net/learn/pivotviewer/]
  • 5. Related WorkInfoVis[Elmqvist et al., 2008]
  • 6. Related Work Mnemonic rendering[Bezerianos, Dragicevic, Balakrishnan, 2008]
  • 7. Related WorkSpatial aspects Initial Image Final Image ? ? [Heer, Robertson, 2007]
  • 8. Related WorkAnimation in statistics [Heer, Robertson, 2007]
  • 9. Related WorkPhosphor 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 In Fast InConstant Adaptive Slow Out Fast Out Fast Fast Slow t Slow → [Dragicevic, Bezerianos, Javed, Elmqvist, Fekete, 2011] time →
  • 11. Related WorkAdaptive Layout[Plomp & Keranen, NordiCHI2002]
  • 12. Related Work Diffie New to you Always on Non-intrusive Changes to page since your In- last visit situ[Teevan, Dumais, Liebling, Hughes,2010]
  • 13. When to use 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
  • 14. Examples of animated transition• First example: user interface adaptation – What happens when a GUI is adapted? Nothing between End user disruption Cognitive perturbation
  • 15. Examples of animated transition• Potential solution: use animated transition
  • 16. Examples of animated transition• 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 before … being being being … Final UI after adaptation adaptation adapted adapted adapted Return ith adaptation Restart 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 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
  • 18. Examples of animated transition• How to do – 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
  • 19. Framework for animated transition +hasSource Model Model Element Model Relationship +modelID : string(idl) -isStructuredIn +elementID +relID +modelName : any(idl) +elementName 1..* 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 +attributeDateTypeharacterization 1 * -constraintSatisfaction -attributeDomain -constraintLanguage 0..* +isViewedIn View Shape Model View +shapeID +hasSource +viewlID : string(idl) View Connection -isRenderedThrough -shapeName +viewName : any(idl) -shapeType -connectionID +viewType -shapePosition 1..* 0..* -connectionType +levelOfFidelity +hasTarget -connectionLine 1 * -shapeDimensions +levelOfDetails -shapeDensity -connectionConstraints -shapeColorSaturation 1..* 0..* -shapeColorHue -shapeTexture +depicts 1..* -shapeText -shapeLineSpec Animated Transition +isDepictedIn 0..* +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..* +isOperatedBy 0..* +isInvolvedIn +Values -isLaidOutIn 1 Concrete 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 : Date 1 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..* textInput ComboBox -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 checkBox Tree link radioButton Item * * Button -label : string(idl) datePicker -presentationType -assignment -buttonType : string(idl)
  • 22. Graphical UI Editor Softwarearchitecture UI Model Adaptation Editor Adapted Transition UI Model scenario
  • 23. 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
  • 24. Associate an animated transition Adaptation Animation family, animated transition with justification operationSET 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 really expandingSET 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 the empty.UNDISPLAY that undisplays a new Cover (F3), Box in (F4), or Iris close (F4): these operations all induce a progressiveUI element at a certain position disappearing of a existing UI element at once, thus creating the 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 the previous oneelement by another one and 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 a lag. 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 @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;
  • 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 study I strongly disagree I disagree I am so so I agree I strongly agree Q1212. I would recommend using the animation Q1111. 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 control Q54. The animation is easy to use Q43. I preferred the animation over no animation atall Q32. I liked the animation interface Q21. I liked the animation process Q1 1 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 +hasSource Model Model Element Model Relationship +modelID : string(idl) -isStructuredIn +elementID +relID +modelName : any(idl) +elementName 1..* 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 +attributeDateTypeharacterization 1 * -constraintSatisfaction -attributeDomain -constraintLanguage 0..* +isViewedIn View Shape Model View +shapeID +hasSource +viewlID : string(idl) View Connection -isRenderedThrough -shapeName +viewName : any(idl) -shapeType -connectionID +viewType -shapePosition 1..* 0..* -connectionType +levelOfFidelity +hasTarget -connectionLine 1 * -shapeDimensions +levelOfDetails -shapeDensity -connectionConstraints -shapeColorSaturation 1..* 0..* -shapeColorHue -shapeTexture +depicts 1..* -shapeText -shapeLineSpec Animated Transition +isDepictedIn 0..* +atID +atType +atTemporization Transition +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 • Stylistics Conceptual view External Internal view view
  • 34. Background • Typical configuration in Integrated Development Environments External view: final user interfaceConceptual view: hierarchical description Internal view: user interface code and properties
  • 35. Background • FormsVBT [Avrahami89] synchronizes 2 UI viewsInternal view: External view: LaTex-like final user description interface (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 Class interface Diagram) (without structure) External view: final user interface (with structure)
  • 37. 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 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 type Internal view External viewText-to-text <label_short=”Birthdate”>Text-to-position <textfield … col=”4”…>Test-to-length <textfield … length=”20”.>Text-to-color- <textfield. fgColor=”red”.>saturationText-to-color- <textfield …texture bgTexture=”checkerboard”…>Text-to-shape <textfield name=”Birthdate”>Text-to-symbol <textfield … required=”yes”… >
  • 39. How to animate
  • 40. UsiView: transitions between views a Conceptual view Animated transition between conceptual and external views b Internal view c External view Animated 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 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
  • 47. Thank you very much for your attention! This work is supported by FP7 Serenoa European Project (www.serenoa-fp7.eu)

×