Abstract
Animated transitions are key elements that contribute to the user experience (UX) of mobile Apps. Unfortunately, animated transitions are usually addressed too late in software development. We recommend to consider animated transitions already during user interface (UI) storyboarding. Typically, UI storyboards do not address the kind of transition, they focus on the screens and visualize a transition just with a simple arrow. Therefore, we investigated the leading mobile phone operating systems iOS 5, Windows Phone 7.5 and Android 4 with respect to their utilization of animated transitions. We developed a catalog consisting of 21 different types of animated transitions. Based on this catalog of 21 different types of animated transition we developed a vocabulary of 66 simple icons. These icons enhance the abilities of storyboards to the extent that they are now able to illustrate animated transitions.
Chapter PDF
Similar content being viewed by others
References
Chang, B., Ungar, D.: Animation: From Cartoons to the User Interface. In: Proc. of UIST 1993, ACM Symposium on User Interface Software and Technology, pp. 45–55. ACM Press, New York (1993)
Lasseter, J.: Principles of Traditional Animation Applied to 3D Computer Animation. In: Computer Graphics (Proceedings of ACM SIGGRAPH 1987), pp. 35–44. ACM Press, New York (1987)
Huhtala, J., et al.: Animated UI Transitions and Perception of Time - a User Study on Animated Effects on a Mobile Screen. In: CHI 2010: Interaction Techniques, Atlanta, USA (2010)
Harrison, C., et al.: Rethinking the Progress Bar. In: Proc. UIST 2007, pp. 115–118. ACM Press, New York (2007)
Tractinsky, N., et al.: What Is Beautiful Is Usable. In: Interacting with Computers, vol. 13, pp. 127–145. Elsevier (2000)
De Angeli, A., et al.: What Influences User’s Preferences. In: Proc. DIS (2006)
Design concepts (March 20, 2012), http://msdn.microsoft.com/en-us/library/aa511285.aspx#concepts
Yasmin, R.: Storyboarding of Standard Animated Transitions for Interactive Mobile Interface Applications, Studienarbeit, TU Kaiserslautern, Germany (2012)
Bederson, B., Boltman, A.: Does Animation Help Users Build Mental Maps of Spatial Information? IEEE InfoVis, 28–35 (1999)
Bartram, L., et al.: Detection, Distraction and Task. Int. J. Hum.-Comput. Stud. 58(5), 515–545 (2003)
Using Storyboard Prototype In Your Design Process (May 24, 2012), http://blogs.msdn.com/b/crm/archive/2006/11/02/storyboarding-in-software-development-with-particular-reference-to-microsoft-crm.aspx
Storyboard (May 24, 2012), http://en.wikipedia.org/wiki/Storyboard
Dissolve (Filmmaking) (May 27, 2012), http://en.wikipedia.org/wiki/Dissolve_%28filmmaking%29
Slide to unlock: an iPhone dance in three acts (March 23, 2012), http://watchingapple.com/2007/06/slide-to-unlock/
7 Principles of Effective Icon Design (May 26, 2012), http://psd.tutsplus.com/articles/7-principles-of-effective-icon-design/
10 Mistakes in Icon Design (May 26, 2012), http://turbomilk.com/blog/cookbook/icon_design/10_mistakes_in_icon_design/
Author information
Authors and Affiliations
Editor information
Editors and Affiliations
Rights and permissions
Copyright information
© 2013 Springer-Verlag Berlin Heidelberg
About this paper
Cite this paper
Trapp, M., Yasmin, R. (2013). Addressing Animated Transitions already in Mobile App Storyboards. In: Marcus, A. (eds) Design, User Experience, and Usability. Web, Mobile, and Product Design. DUXU 2013. Lecture Notes in Computer Science, vol 8015. Springer, Berlin, Heidelberg. https://doi.org/10.1007/978-3-642-39253-5_81
Download citation
DOI: https://doi.org/10.1007/978-3-642-39253-5_81
Publisher Name: Springer, Berlin, Heidelberg
Print ISBN: 978-3-642-39252-8
Online ISBN: 978-3-642-39253-5
eBook Packages: Computer ScienceComputer Science (R0)