research-article

Engineering animations in user interfaces

Authors:

Thomas Mirlacher,

Philippe Palanque,

Regina BernhauptAuthors Info & Claims

EICS '12: Proceedings of the 4th ACM SIGCHI symposium on Engineering interactive computing systems

Pages 111 - 120

https://doi.org/10.1145/2305484.2305504

Published: 25 June 2012 Publication History

Abstract

Graphical User Interfaces used to be static, graphically representing one software state after the other. However, animated transitions between these static states are an integral part in modern user interfaces and processes for both their design and implementation remain a challenge for designers and developers.

This paper proposes a Petri net model-based approach to support the design, implementation and validation of animated user interfaces by providing a complete and unambiguous description of the entire user interface including animations. A process for designing interactive systems focusing on animations is presented, along with a framework for the definition and implementation of animation in user interfaces. The framework proposes a two levels approach for defining a high-level view of an animation (focusing on animated objects, their properties to be animated and on the composition of animations) and a low-level one dealing with detailed aspects of animations such as timing and optimization. A case study (in the domain of interactive Television) elaborating the application of the presented process and framework exemplifies the contribution.

References

[1]

Baecker, R. M., Small, I., and Mander, R. Bringing icons to life. Proceedings of CHI 1991, Myers (1991), 1--6.

Digital Library

[2]

Barboni, E., Ladry, J.-F., Navarre, D., Palanque, P., and Winckler, M. Beyond Modelling: An Integrated Environment Supporting Co-Execution of Tasks and Systems Models. Proceedings of EICS 2010, (2010), 165--174.

Digital Library

[3]

Bastide, R., Navarre, D., and Palanque, P. A Model-Based Tool for Interactive Prototyping of Highly Interactive Applications. Proceedings of CHI 2002 (Extended Abstracts), (2002), 516--517.

Digital Library

[4]

Bastide, R., Palanque, P., Le, D.-Hoa, Muñoz, J., and Frogis, L. I. S. Integrating rendering specifications into a formalism for the design of interactive systems. Design Specification and Verification of Interactive Systems 98, Springer (1998), 171--191.

[5]

Byrne, M. D. Evaluating animations as student aids in learning computer algorithms. Computers & Education 33, 4 (1999), 253--278.

Digital Library

[6]

Calder M., Kolberg M., Magill E. H., R.-M. S. Feature interaction: a critical review and considered forecast. Computer Networks, 41 (2002), 115--141.

Digital Library

[7]

Carroll, J. M., Kellogg, W. A., and Rosson, M. B. The Task-Artifact Cycle. In J. M. Carroll, ed., Designing Interaction: Psychology at the Human-Computer Interface. Cambridge University Press, 1991.

Digital Library

[8]

Chang, B.-W. and Ungar, D. Animation: from cartoons to the user interface. Sun Microsystems, Inc. Mountain View, CA, USA, March (1995), 1--18.

Digital Library

[9]

Chapman, N. and Chapman, J. Digital Multimedia. Wiley, 2009.

Digital Library

[10]

Chatty, S. Defining the Dynamic Behaviour of Animated Interfaces. Proceedings of EHCI 1992, (1992), 95.

Digital Library

[11]

Eronen, L. User Centered Research for Interactive Television. Children, (2003), 5--12.

[12]

Esteban, O., Chatty, S., and Palanque, P. Whizz'Ed: a visual environment for building highly interactive software. Proceedings of INTERACT 1995, (1995), 121--136.

[13]

Gawlinsky, M. Interactive Television Production. Focal Press, Oxford, 2003.

[14]

Genrich, H. J. Predicate/Transition Nets. In W. Brauer, W. Reisig and G. Rozenberg, eds., Advances in Petri Nets 1986 Part I. Springer-Verlag, 1987, 207--247.

Digital Library

[15]

Heer, J. and Robertson, G. G. Animated transitions in statistical data graphics. IEEE Trans. on Visualization and Computer Graphics 13, 6 (2007), 1240--7.

Digital Library

[16]

Jensen, K. Coloured Petri Nets - Modelling and Validation of Concurrent Systems. Springer, 2009.

Digital Library

[17]

Karavirta, V., Korhonen, A., Malmi, L., and Naps, T. A comprehensive taxonomy of algorithm animation languages. Journal of Visual Languages & Computing 21, 1 (2010), 1--22.

Digital Library

[18]

Kim, S., Coffin, C., and Tobias, H. Relocalization Using Virtual Keyframes For Online Environment Map Construction. Work 1, 212 (2009), 127--134.

Digital Library

[19]

Marsan, M. A., Bobbio, A., and Donatelli, S. Petri Nets in Performance Analysis: an Introduction. In G. Rozenberg and W. Reisig, eds., Lectures on Petri Nets I: Basic Models. Springer Verlag, Berlin, 1998.

Digital Library

[20]

Mirlacher, T., Pirker, M., Bernhaupt, R., et al. Interactive Simplicity for iTV: Minimizing Keys for Navigating Content. Proceedings of euroITV 2010, (2010).

Digital Library

[21]

Mirlacher, T. Modeling animations for dependable interactive applications. Proceedings of EICS 2011, ACM (2011), 319--322.

Digital Library

[22]

Mori G., Paternò F., S. C. Design and Development of Multidevice User Interfaces through Multiple Logical Descriptions. IEEE Trans. Software Engineering 30, 8 (2004), 507--520.

Digital Library

[23]

Navarre, D., Palanque, P., and Basnyat, S. A formal approach for user interaction reconfiguration of safety critical interactive systems. Safety, Reliability, and Security, (2008), 373--386.

Digital Library

[24]

Navarre, D., Palanque, P., Bastide, R., and Sy, O. A model-based tool for interactive prototyping of highly interactive applications. Proceedings of RSP 2001, (2001), 136--141.

Digital Library

[25]

Navarre, D., Palanque, P., Ladry, J.-F., and Barboni, E. ICOs: A Model-Based User Interface Description Technique dedicated to Interactive Systems Addressing Usability, Reliability and Scalability. ACM Trans. on Computer-Human Interaction (TOCHI) 16, 4 (2009), 1--56.

Digital Library

[26]

Palanque, P., Ladry, J.-F., Navarre, D., Barboni, E., Paul, U., and Toulouse, S. High-Fidelity Prototyping of Interactive Systems Can Be Formal Too. Proceedings of EHCI 2009, (2009), 667--676.

Digital Library

[27]

Palanque P., Bernhaupt R., M. F. Integrating Gaming Research and Practice in the Design of User Interfaces of (partly)-Autonomous Safety-Critical Systems. Proceedings of ATACCS 2011, ACM (2011), 134--143.

[28]

Sénac P. and Diaz M. Time Stream Petri Nets: A model for timed multimedia information. Proceedings of Application and Theory of Petri Nets, Springer (1994), 219--238.

Digital Library

[29]

Thomas, B. H. and Calder, P. Applying cartoon animation techniques to graphical user interfaces. ACM Trans. on Computer-Human Interaction (TOCHI) 8, 3 (2001), 198--222.

Digital Library

[30]

Thomas, F. and Johnston, O. Disney Animation: The Illusion of Life. Abbeville Press, New York, USA, 1981.

[31]

Urquiza-Fuentes, J., Angel, J., Azquez-Iturbide, V. E. L., Rey, U., and Carlos, J. A Survey of Successful Evaluations of Program Visualization and Algorithm Animation Systems. Computing 9, 2 (2009), 1--21.

Digital Library

[32]

Vodislav, D. A visual programming model for user interface animation. Proceedings. 1997 IEEE Symposium on Visual Languages (Cat. No.97TB100180), (1997), 344--351.

Digital Library

[33]

Wang, P.-Y. The Impact of Animation Interactivity on Novices' Learning of Introductory Statistics. Design, 2010.

[34]

Xu, H.-Y., Li, D., and Wang, J. Implicit curve oriented inbetweening for motion animation. Computer graphics and interactive techniques in Australasia and South East Asia, (2006).

Digital Library

Cited By

Pieters RSchrijvers T(2020)PaSe: An Extensible and Inspectable DSL for Micro-AnimationsTrends in Functional Programming10.1007/978-3-030-57761-2_1(3-24)Online publication date: 18-Aug-2020
https://doi.org/10.1007/978-3-030-57761-2_1
Canny ANavarre DCampos JPalanque P(2020)Model-Based Testing of Post-WIMP Interactions Using Object Oriented Petri-NetsFormal Methods. FM 2019 International Workshops10.1007/978-3-030-54994-7_35(486-502)Online publication date: 13-Aug-2020
https://doi.org/10.1007/978-3-030-54994-7_35
Brant-Ribeiro TAraújo RMendonça ISoares MCattelan R(2019)Interactive web interfaces modeling, simulation and analysis using Colored Petri NetsSoftware and Systems Modeling (SoSyM)10.1007/s10270-017-0593-x18:1(721-737)Online publication date: 1-Feb-2019
https://dl.acm.org/doi/10.1007/s10270-017-0593-x
Show More Cited By

Index Terms

Engineering animations in user interfaces
1. Human-centered computing
  1. Human computer interaction (HCI)
2. Software and its engineering
  1. Software creation and management
    1. Designing software
      1. Software implementation planning
        Software design techniques
    2. Software development process management
      1. Software development methods

Recommendations

Designing a compelling user interface for morphing
CHI '04: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems

We present a new user interface for the common morphing tool found in animation packages. Previously this interface has been based on the features of the underlying algorithm, with little regard to how artists actually use this feature. By careful ...
The University of Alberta user interface management system

In this paper the design and implementation of the University of Alberta user interface management system (UIMS) is discussed. This UIMS is based on the Seeheim model of user interfaces, which divides the user interface into three separate components. ...
Applying cartoon animation techniques to graphical user interfaces

If judiciously applied, animation techniques can enhance the look and feel of computer applications that present a graphical human interface. Such techniques can smooth the rough edges and abrupt transitions common in many current graphical interfaces, ...

Comments

Please enable JavaScript to view thecomments powered by Disqus.

Information & Contributors

Information

Published In

cover image ACM Conferences

EICS '12: Proceedings of the 4th ACM SIGCHI symposium on Engineering interactive computing systems

June 2012

350 pages

ISBN:9781450311687

DOI:10.1145/2305484

General Chairs:
Simone D.J. Barbosa
PUC Rio de Janeiro, Brazil
,
José Creissac Campos
University of Minho, Portugal
,
Program Chairs:
Rick Kazman
Carnegie Mellon University and University of Hawai'i, USA
,
Philippe Palanque
University of Toulouse 3, France
,
Michael Harrison
Newcastle University, UK
,
Steve Reeves
University of Waikato, New Zealand

Copyright © 2012 ACM.

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected]

Sponsors

SIGCHI: ACM Special Interest Group on Computer-Human Interaction

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 25 June 2012

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article

Conference

EICS'12

Sponsor:

SIGCHI

EICS'12: ACM SIGCHI Symposium on Engineering Interactive Computing Systems

June 25 - 26, 2012

Copenhagen, Denmark

Acceptance Rates

Overall Acceptance Rate 73 of 299 submissions, 24%

Upcoming Conference

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

11
Total Citations
View Citations
366
Total Downloads

Downloads (Last 12 months)12
Downloads (Last 6 weeks)2

Reflects downloads up to 16 Nov 2024

Other Metrics

View Author Metrics

Citations

Cited By

Pieters RSchrijvers T(2020)PaSe: An Extensible and Inspectable DSL for Micro-AnimationsTrends in Functional Programming10.1007/978-3-030-57761-2_1(3-24)Online publication date: 18-Aug-2020
https://doi.org/10.1007/978-3-030-57761-2_1
Canny ANavarre DCampos JPalanque P(2020)Model-Based Testing of Post-WIMP Interactions Using Object Oriented Petri-NetsFormal Methods. FM 2019 International Workshops10.1007/978-3-030-54994-7_35(486-502)Online publication date: 13-Aug-2020
https://doi.org/10.1007/978-3-030-54994-7_35
Brant-Ribeiro TAraújo RMendonça ISoares MCattelan R(2019)Interactive web interfaces modeling, simulation and analysis using Colored Petri NetsSoftware and Systems Modeling (SoSyM)10.1007/s10270-017-0593-x18:1(721-737)Online publication date: 1-Feb-2019
https://dl.acm.org/doi/10.1007/s10270-017-0593-x
Palanque PPietriga ELuyten K(2018)Engineering AutomationsProceedings of the ACM SIGCHI Symposium on Engineering Interactive Computing Systems10.1145/3220134.3223044(1-2)Online publication date: 19-Jun-2018
https://dl.acm.org/doi/10.1145/3220134.3223044
Palanque PMartinie CFayollas CMandryk RHancock MPerry MCox A(2018)AutomationExtended Abstracts of the 2018 CHI Conference on Human Factors in Computing Systems10.1145/3170427.3170652(1-4)Online publication date: 20-Apr-2018
https://dl.acm.org/doi/10.1145/3170427.3170652
Raffaillac THuot SDucasse SCampos JNunes N(2017)Turning function calls into animationsProceedings of the ACM SIGCHI Symposium on Engineering Interactive Computing Systems10.1145/3102113.3102134(81-86)Online publication date: 26-Jun-2017
https://dl.acm.org/doi/10.1145/3102113.3102134
Palanque PMartinie CFayollas CMark GFussell SLampe Cschraefel mHourcade JAppert CWigdor D(2017)AutomationProceedings of the 2017 CHI Conference Extended Abstracts on Human Factors in Computing Systems10.1145/3027063.3027115(1257-1260)Online publication date: 6-May-2017
https://dl.acm.org/doi/10.1145/3027063.3027115
Bernhaupt RPalanque PManciet FMartinie C(2016)User-Test Results Injection into Task-Based Design Process for the Assessment and Improvement of Both Usability and User ExperienceHuman-Centered and Error-Resilient Systems Development10.1007/978-3-319-44902-9_5(56-72)Online publication date: 23-Aug-2016
https://doi.org/10.1007/978-3-319-44902-9_5
Bernhaupt RCronel MManciet FMartinie CPalanque P(2015)Transparent Automation for Assessing and Designing better Interactions between Operators and Partly-Autonomous Interactive SystemsProceedings of the 5th International Conference on Application and Theory of Automation in Command and Control Systems10.1145/2899361.2899375(129-139)Online publication date: 30-Sep-2015
https://dl.acm.org/doi/10.1145/2899361.2899375
Pleuss APaternò FSantoro CZiegler J(2014)Generating code skeletons for individual media elements in model-driven development of interactive systemsProceedings of the 2014 ACM SIGCHI symposium on Engineering interactive computing systems10.1145/2607023.2610285(155-160)Online publication date: 17-Jun-2014
https://dl.acm.org/doi/10.1145/2607023.2610285
Show More Cited By

View Options

Login options

Check if you have access through your login credentials or your institution to get full access on this article.

Full Access

Get this Publication

View options

PDF

View or Download as a PDF file.

eReader

View online with eReader.

Media

Figures

Other

Tables

View Table of Contents