Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Showing User Interface Adaptivity by Animated Transitions

•Download as PPTX, PDF•
•

Animated transitions can provide a smooth transition between an initial user interface and an adapted final interface by using intermediate transitional interfaces. Related work shows that animation can be used to direct user attention, visualize processes over time, simplify complex content, and show reactions to interactions. When designing animated transitions, they should be short, support the direction of movement or information, and may be supported by sound. Users should be able to control the animation speed and sequence. An evaluation of transition scenarios found that participants generally reacted positively to the use of animation for interface adaptations.

1 of 23
Showing User Interface Adaptivity by Animated TransitionsCharles-Eric Dessart, Vivian Genaro Motti, Jean VanderdoncktLouvainInteractionLabUniversitécatholique de Louvainwww.lilab.be{Vivian.GenaroMotti, Jean.Vanderdonckt}@uclouvain.be
The problemWhathappenswhen a GUI isadapted?NothingbetweenEnd user disruption
Cognitive perturbationPotential solutionUse animated transition
Potential solutionUse animated transition to ensure a smooth transition between the initial UI and the final (adapted) UIInitial UI before adaptationFinal UI after adaptationTransient UI beingadaptedTransient UI beingadaptedTransient UI beingadaptedBackward animationForward animationBreakSkip……ith adaptationoperationReturnRestartTransition time forith adaptation operationTotal transition time for transition scenario
Relatedwork on Animated TransitionsUse animationto draw the audience's attention to a single element out of several, or to alert people to updatedinformationto indicate the function of a hot spot (for example, a movinghikercouldindicate the current location of Mungo Park adventurers)to draw attention to changes from one state to another (for example, animatedmap area changes couldindicatedeforestation over time).to demonstrate navigation in a particular direction (for example, a simple page-flip animation couldeasilydistinguishforwardfrombackwardmovementto createicons for actions thatcan'tbeadequatelyexpressedwith a flat, staticpicturePermanentlymoving (looping) animations shouldrarelybeincluded on a Web page becausetheywillmakeitvery hard for your audience to concentrate on other page content. Researchsuggeststhatmovement in ourperipheral vision candominateour attention. Researchalsoindicatesthatmovingtextis harder to readthanstatictext[Baecker, Small, Mander ,2001]
Relatedwork on Animated TransitionsA number of visualeffects are available. For global changes to the entirescreenthese 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 canbeused. Note: Visual effectsshouldbeusedcarefully. Whenemployedtoooften, theywillbefatiguing or evenannoying or distressing to the user.Animation covers a range of creative techniques and media, fromthree-dimensional figures captured on film to wholly computer-generated images. Typical for animation is the rapid and continuous change of the graphicalobjectsmaking up the animationThe dynamic of animation canbeused to direct the user's attention to a specific point. Time and movementcanbevisualised by animation. Animation canbeused to show an invisible process. It enables the simulation of processeswhich are toodangerous or difficult to performdirectly.Animation of structures isuseful for the exploration of complexenvironments. Animation canbeused for gradual illustration of a content. Complexcontents (e.g. process, function) canbesimplified by animation. Animation canbeused to show the reaction on an interaction.[Baecker, Small, Mander ,2001]
How to do an animated transition?Design: An animation sequenceshouldbe short. The direction of movement influence the meaning of the information conveyed. Animation shouldbesupported by sound. Animation techniques for global changes to the entirescreen 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]
How to do an animated transition?Interaction: The user shouldbe able to interrupt the animation sequenceatanytimeThe user shouldbe able to repeat parts of the animationThe user shouldbe able to control the animation playing speed (e.g. fastforward)The user maymanipulate an animatedobject
RelatedworkDiffIENew to youAlways onNon-intrusiveChanges to page since your last visitIn-situ[Teevan, Dumais, Liebling, Hughes,2010]
[www.silverlight.net/learn/pivotviewer/]RelatedWorkPivotViewer
[Elmqvistet al., 2008]RelatedWork
RelatedWorkMnemonicrendering[Bezerianos, Dragicevic, Balakrishnan, 2008]
Spatial AspectsInitial ImageFinal Image??[Heer, Robertson, 2007]RelatedWork
RelatedWorkTemporal AspectsSlow In/Slow Out is better in all regardsAdaptive speed performs best when complexity found at endpointsFast InFast OutConstantAdaptiveFastSlowFastSlowSlow InSlow Out->Speedttime->[Dragicevic, Bezerianos, Javed, Elmqvist, Fekete, 2011]
FlowArchitecture of the system
Resizing operations: are aimed at changing a widget size in order to optimize screen real estate, aesthetics, and visual designFor 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 consumptionFor 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 degradationFor 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 boxAdaptation operatons
How to associate an animated transition to an adaptation operation
Example #1SUBSTITUTE #listbox_component_19 BY @ComboBoxIN #box3 ("newComboBox")WHERE ROW 0, COL 0;CONTRACT #newComboBoxOF 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->FontSizeTO 12;CONTRACT #window_0 OF 40 120;
Example #2SUBSTITUTE %SelectRadioGroup "groupeType" BY @ComboBoxIN #box110 ("newComboBoxType") WHERE ROW 0,COL 0;SUBSTITUTE %SelectRadioGroup "groupeEtudiant" BY @CheckBoxIN #box120 ("newCheckBoxEtudiant") WHERE ROW 0, COL 0;CONTRACT #window_0 OF 50 50;CHANGEROWS #box1 TO 25 25 25 25;
Design setup20 participants 3 transition scenarios12 questions on a5-point LikertscaleI liked the animation processI liked the animation interfaceI preferred the animation over no animation at allThe animation is easy to useThe animation is easy to controlThe animation is easy to understandThe animation is easy to followThe animation is easy to progress (forward animation)The animation is easy to revert (backward animation)The animation represents the adaptationThe animation is fastI would recommend using the animation(1 = strongly disagree,five = strongly agree)User study
Results and discussionI liked the animation processI liked the animation interfaceI preferred the animation over no animation at allThe animation is easy to useThe animation is easy to controlThe animation is easy to understandThe animation is easy to followThe animation is easy to progress (forward animation)The animation is easy to revert (backward animation)The animation represents the adaptationThe animation is fastI would recommend using the animationUser study
Animated transition is a viable approachprovidedthatAppropriateanimated transitions are adequatelymapped onto adaptation operationsTime and space are properlyregulatedTo work on:Minimize the lageffectthatisstillthereGroup similar, small adaptation operationsConclusion
User Interface eXtensibleMarkupLanguagehttp://www.usixml.orgFor more information and downloading,http://www.lilab.beThankyouverymuch!FP7 Serenoaprojecthttp://www.serenoa-fp7.eu

More Related Content

Showing User Interface Adaptivity by Animated Transitions

  • 1. Showing User Interface Adaptivity by Animated TransitionsCharles-Eric Dessart, Vivian Genaro Motti, Jean VanderdoncktLouvainInteractionLabUniversitécatholique de Louvainwww.lilab.be{Vivian.GenaroMotti, Jean.Vanderdonckt}@uclouvain.be
  • 2. The problemWhathappenswhen a GUI isadapted?NothingbetweenEnd user disruption
  • 4. Potential solutionUse animated transition to ensure a smooth transition between the initial UI and the final (adapted) UIInitial UI before adaptationFinal UI after adaptationTransient UI beingadaptedTransient UI beingadaptedTransient UI beingadaptedBackward animationForward animationBreakSkip……ith adaptationoperationReturnRestartTransition time forith adaptation operationTotal transition time for transition scenario
  • 5. Relatedwork on Animated TransitionsUse animationto draw the audience's attention to a single element out of several, or to alert people to updatedinformationto indicate the function of a hot spot (for example, a movinghikercouldindicate the current location of Mungo Park adventurers)to draw attention to changes from one state to another (for example, animatedmap area changes couldindicatedeforestation over time).to demonstrate navigation in a particular direction (for example, a simple page-flip animation couldeasilydistinguishforwardfrombackwardmovementto createicons for actions thatcan'tbeadequatelyexpressedwith a flat, staticpicturePermanentlymoving (looping) animations shouldrarelybeincluded on a Web page becausetheywillmakeitvery hard for your audience to concentrate on other page content. Researchsuggeststhatmovement in ourperipheral vision candominateour attention. Researchalsoindicatesthatmovingtextis harder to readthanstatictext[Baecker, Small, Mander ,2001]
  • 6. Relatedwork on Animated TransitionsA number of visualeffects are available. For global changes to the entirescreenthese 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 canbeused. Note: Visual effectsshouldbeusedcarefully. Whenemployedtoooften, theywillbefatiguing or evenannoying or distressing to the user.Animation covers a range of creative techniques and media, fromthree-dimensional figures captured on film to wholly computer-generated images. Typical for animation is the rapid and continuous change of the graphicalobjectsmaking up the animationThe dynamic of animation canbeused to direct the user's attention to a specific point. Time and movementcanbevisualised by animation. Animation canbeused to show an invisible process. It enables the simulation of processeswhich are toodangerous or difficult to performdirectly.Animation of structures isuseful for the exploration of complexenvironments. Animation canbeused for gradual illustration of a content. Complexcontents (e.g. process, function) canbesimplified by animation. Animation canbeused to show the reaction on an interaction.[Baecker, Small, Mander ,2001]
  • 7. How to do an animated transition?Design: An animation sequenceshouldbe short. The direction of movement influence the meaning of the information conveyed. Animation shouldbesupported by sound. Animation techniques for global changes to the entirescreen 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]
  • 8. How to do an animated transition?Interaction: The user shouldbe able to interrupt the animation sequenceatanytimeThe user shouldbe able to repeat parts of the animationThe user shouldbe able to control the animation playing speed (e.g. fastforward)The user maymanipulate an animatedobject
  • 9. RelatedworkDiffIENew to youAlways onNon-intrusiveChanges to page since your last visitIn-situ[Teevan, Dumais, Liebling, Hughes,2010]
  • 13. Spatial AspectsInitial ImageFinal Image??[Heer, Robertson, 2007]RelatedWork
  • 14. RelatedWorkTemporal AspectsSlow In/Slow Out is better in all regardsAdaptive speed performs best when complexity found at endpointsFast InFast OutConstantAdaptiveFastSlowFastSlowSlow InSlow Out->Speedttime->[Dragicevic, Bezerianos, Javed, Elmqvist, Fekete, 2011]
  • 16. Resizing operations: are aimed at changing a widget size in order to optimize screen real estate, aesthetics, and visual designFor 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 consumptionFor 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 degradationFor 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 boxAdaptation operatons
  • 17. How to associate an animated transition to an adaptation operation
  • 18. Example #1SUBSTITUTE #listbox_component_19 BY @ComboBoxIN #box3 ("newComboBox")WHERE ROW 0, COL 0;CONTRACT #newComboBoxOF 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->FontSizeTO 12;CONTRACT #window_0 OF 40 120;
  • 19. Example #2SUBSTITUTE %SelectRadioGroup "groupeType" BY @ComboBoxIN #box110 ("newComboBoxType") WHERE ROW 0,COL 0;SUBSTITUTE %SelectRadioGroup "groupeEtudiant" BY @CheckBoxIN #box120 ("newCheckBoxEtudiant") WHERE ROW 0, COL 0;CONTRACT #window_0 OF 50 50;CHANGEROWS #box1 TO 25 25 25 25;
  • 20. Design setup20 participants 3 transition scenarios12 questions on a5-point LikertscaleI liked the animation processI liked the animation interfaceI preferred the animation over no animation at allThe animation is easy to useThe animation is easy to controlThe animation is easy to understandThe animation is easy to followThe animation is easy to progress (forward animation)The animation is easy to revert (backward animation)The animation represents the adaptationThe animation is fastI would recommend using the animation(1 = strongly disagree,five = strongly agree)User study
  • 21. Results and discussionI liked the animation processI liked the animation interfaceI preferred the animation over no animation at allThe animation is easy to useThe animation is easy to controlThe animation is easy to understandThe animation is easy to followThe animation is easy to progress (forward animation)The animation is easy to revert (backward animation)The animation represents the adaptationThe animation is fastI would recommend using the animationUser study
  • 22. Animated transition is a viable approachprovidedthatAppropriateanimated transitions are adequatelymapped onto adaptation operationsTime and space are properlyregulatedTo work on:Minimize the lageffectthatisstillthereGroup similar, small adaptation operationsConclusion
  • 23. User Interface eXtensibleMarkupLanguagehttp://www.usixml.orgFor more information and downloading,http://www.lilab.beThankyouverymuch!FP7 Serenoaprojecthttp://www.serenoa-fp7.eu

Editor's Notes

  1. 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.