Skip to main content
Springer Nature Link
Log in

Kick-Starting Ready-to-Go Assets to Speed Up Motion Design Development for Mobile Devices

  • Conference paper
  • First Online:
HCI International 2022 – Late Breaking Posters (HCII 2022)

Part of the book series: Communications in Computer and Information Science ((CCIS,volume 1654))

Included in the following conference series:

  • 1567 Accesses

Abstract

Animated design elements make the interaction between mobile devices and users more easy and enjoyable. Ready-to-go assets generated directly from the designer’s environment might be used immediately by designers as high-fidelity prototypes or by developers as precisely implemented animations. It is essential to ensure the correctness of generated assets on the target device. In this study, we propose an approach that allows verifying ready-to-go assets on the target mobile device with the Android operating system. It is based on parsing and reconstructing assets on a canvas that offers a set of features to verify the animation. To investigate the performance of the proposed approach we conduct a comparison with the existing approach, qualitative analysis, and survey of designers and developers. The results indicate that the proposed approach is effective and delivers new prospects to prototype and implement animation directly on a target mobile device.

This is a preview of subscription content, log in via an institution to check access.

Access this chapter

Log in via an institution

Subscribe and save

Springer+
from €39.99 /Month
  • Starting from 10 chapters or articles per month
  • Access and download chapters and articles from more than 300k books and 2,500 journals
  • Cancel anytime
View plans

Buy Now

Chapter
EUR 29.95
Price includes VAT (Germany)
  • Available as PDF
  • Read on any device
  • Instant download
  • Own it forever
eBook
EUR 96.29
Price includes VAT (Germany)
  • Available as EPUB and PDF
  • Read on any device
  • Instant download
  • Own it forever
Softcover Book
EUR 128.39
Price includes VAT (Germany)
  • Compact, lightweight edition
  • Dispatched in 3 to 5 business days
  • Free shipping worldwide - see info

Tax calculation will be finalised at checkout

Purchases are for personal use only

') var buybox = document.querySelector("[data-id=id_"+ timestamp +"]").parentNode var buyingOptions = buybox.querySelectorAll(".buying-option") ;[].slice.call(buyingOptions).forEach(initCollapsibles) var buyboxMaxSingleColumnWidth = 480 function initCollapsibles(subscription, index) { var toggle = subscription.querySelector(".buying-option-price") subscription.classList.remove("expanded") var form = subscription.querySelector(".buying-option-form") var priceInfo = subscription.querySelector(".price-info") var buyingOption = toggle.parentElement if (toggle && form && priceInfo) { toggle.setAttribute("role", "button") toggle.setAttribute("tabindex", "0") toggle.addEventListener("click", function (event) { var expandedBuyingOptions = buybox.querySelectorAll(".buying-option.expanded") var buyboxWidth = buybox.offsetWidth ;[].slice.call(expandedBuyingOptions).forEach(function(option) { if (buyboxWidth buyboxMaxSingleColumnWidth) { toggle.click() } else { if (index === 0) { toggle.click() } else { toggle.setAttribute("aria-expanded", "false") form.hidden = "hidden" priceInfo.hidden = "hidden" } } }) } initialStateOpen() if (window.buyboxInitialised) return window.buyboxInitialised = true initKeyControls() })()

Institutional subscriptions

Similar content being viewed by others

Notes

  1. 1.

    https://zeplin.io/.

  2. 2.

    https://www.invisionapp.com/.

  3. 3.

    https://www.protopie.io/.

  4. 4.

    http://velocityjs.org/.

  5. 5.

    https://greensock.com/

  6. 6.

    https://material.io.

  7. 7.

    https://www.adobe.com/products/aftereffects.html.

  8. 8.

    https://aescripts.com/bodymovin/.

  9. 9.

    https://play.google.com/store/apps/details?id=com.airbnb.lottie.

References

  1. Chalbi, A.: Understanding and designing animations in the user interfaces. Dissertation, Université de Lille (2018)

    Google Scholar 

  2. Sosa-Tzec, O., Bergqvist, E.S.: Delight by motion: investigating the role of animation in microinteractions. In: Coorey, J., Murnieks, A., Rinnert, G., Shaw, H., Tegtmeyer, R. (eds.) Motion Design Education Summit 2021 Edited Conference Proceedings, 10–13 Jun 2021

    Google Scholar 

  3. Chang, B.W., Ungar, D.: Animation: from cartoons to the user interface. In: Proceedings of the 6th annual ACM symposium on User interface software and technology (UIST’93), pp. 45–55. ACM, New York (1993). https://doi.org/10.1145/168642.168647

  4. Ma, J., Chen, C.C., Lin, Y.C.: Emotional and cognitive assessment of use of functional animation. In: Proceedings of the International Conference on Machine Vision and Applications (ICMVA 2018), pp. 61–65. ACM, New York (2018). https://doi.org/10.1145/3220511.3220516

  5. Laubheimer, P.: The Role of Animation and Motion in UX. Nielsen Norman Group. https://www.nngroup.com/articles/animation-purpose-ux/ (2021). Accessed 16 Feb 2022

  6. Head, V.: Designing Interface Animation. Rosenfeld Media, New York (2016)

    Google Scholar 

  7. McElroy, K.: Prototyping for Designers: Developing the Best Digital and Physical Products. O’Reilly Media Inc., Sebastopol, CA (2016)

    Google Scholar 

  8. Maudet, N., Leiva, G., Beaudouin-Lafon, M., Mackay, W.: Design breakdowns: designer-developer gaps in representing and interpreting interactive systems. In: Proceedings of the 2017 ACM Conference on Computer Supported Cooperative Work and Social Computing, pp. 630–641. ACM, New York (2017). https://doi.org/10.1145/2998181.2998190

  9. Leiva, G., Maudet, N., Mackay, W., Beaudouin-Lafon, M.: Enact: reducing designer-developer breakdowns when prototyping custom interactions. ACM Trans. Comput.-Hum. Interact. 26(3), 1–48 (2019). https://doi.org/10.1145/3310276

    Article  Google Scholar 

  10. Walny, J., et al.: Data changes everything: challenges and opportunities in data visualization design handoff. IEEE Trans. Visual Comput. Graphics 26(1), 12–22 (2019). https://doi.org/10.1109/TVCG.2019.2934538

    Article  Google Scholar 

  11. Bogachenko, A., et al.: All you need is web: visual interaction with no graphic background. In: Stephanidis, C., Antona, M. (eds.) HCII 2020. CCIS, vol. 1224, pp. 3–10. Springer, Cham (2020). https://doi.org/10.1007/978-3-030-50726-8_1

    Chapter  Google Scholar 

  12. Bogachenko, A., Bondarenko, I., Voskoboinikova, D., Buhera, Y., Ko, D., Alkhimova, S.: Transform motion design into ready-to-go assets. In: Stephanidis, C., Antona, M., Ntoa, S. (eds.) HCII 2021. CCIS, vol. 1419, pp. 3–11. Springer, Cham (2021). https://doi.org/10.1007/978-3-030-78635-9_1

    Chapter  Google Scholar 

  13. Biørn-Hansen, A., Grønli, T.M., Ghinea, G.: Animations in cross-platform mobile applications: an evaluation of tools, metrics and performance. Sensors 19(9), 2081 (2019). https://doi.org/10.3390/s19092081

    Article  Google Scholar 

  14. Rufo, P.: Experimenting with motion in Android. Medium. https://medium.com/snapp-mobile/experimenting-with-motion-in-android-9283962ae0ef (2019). Accessed 16 Feb 2022

  15. Gladkiy, S.: Native Animation for mobile apps using lottie. https://dzone.com/articles/native-animation-for-mobile-app-using-lottie/ (2019). Accessed 16 Feb 2022

  16. Hidayat, T., Sungkowo B.D.: Comparison of memory consumptive against the use of various image formats for app onboarding animation assets on Android with Lottie JSON. In: 2020 3rd International Conference on Computer and Informatics Engineering (IC2IE). IEEE (2020). https://doi.org/10.1109/IC2IE50715.2020.9274612

  17. Ivanova, B.N., Rusev, R.: Improving computer-generated images – methods for realistic depiction. In: ‏The 3rd International Conference on Applied Research in Engineering, Science and Technology, Vilnius (2020)

    Google Scholar 

  18. Joshi, A., Kale, S., Chandel, S., Pal, D.K.: Likert scale: explored and explained. British J. Appl. Sci. Technol. 7(4), 396–403 (2015). https://doi.org/10.9734/BJAST/2015/14975

    Article  Google Scholar 

Download references

Author information

Authors and Affiliations

  1. Samsung R&D Institute Ukraine (SRK), 57, Lva Tolstogo Str., Kyiv, 01032, Ukraine

    Andrii Bogachenko, Daria Voskoboinikova, Inna Bondarenko, Yevhenii Buhera & Svitlana Alkhimova

  2. Samsung Electronics, Seoul R&D Campus, 33 Seongchon-gil, Seoul, 06765, Seocho-gu, Korea

    Dongjoo Ko

Authors
  1. Andrii Bogachenko
    View author publications

    Search author on:PubMed Google Scholar

  2. Daria Voskoboinikova
    View author publications

    Search author on:PubMed Google Scholar

  3. Inna Bondarenko
    View author publications

    Search author on:PubMed Google Scholar

  4. Yevhenii Buhera
    View author publications

    Search author on:PubMed Google Scholar

  5. Dongjoo Ko
    View author publications

    Search author on:PubMed Google Scholar

  6. Svitlana Alkhimova
    View author publications

    Search author on:PubMed Google Scholar

Corresponding author

Correspondence to Andrii Bogachenko .

Editor information

Editors and Affiliations

  1. University of Crete and Foundation for Research and Technology – Hellas (FORTH), Heraklion, Crete, Greece

    Constantine Stephanidis

  2. Foundation for Research and Technology Hellas (FORTH), Heraklion, Crete, Greece

    Margherita Antona

  3. Foundation for Research and Technology Hellas (FORTH), Heraklion, Crete, Greece

    Stavroula Ntoa

  4. University of Central Florida, Orlando, FL, USA

    Gavriel Salvendy

Rights and permissions

Reprints and permissions

Copyright information

© 2022 The Author(s), under exclusive license to Springer Nature Switzerland AG

About this paper

Check for updates. Verify currency and authenticity via CrossMark

Cite this paper

Bogachenko, A., Voskoboinikova, D., Bondarenko, I., Buhera, Y., Ko, D., Alkhimova, S. (2022). Kick-Starting Ready-to-Go Assets to Speed Up Motion Design Development for Mobile Devices. In: Stephanidis, C., Antona, M., Ntoa, S., Salvendy, G. (eds) HCI International 2022 – Late Breaking Posters. HCII 2022. Communications in Computer and Information Science, vol 1654. Springer, Cham. https://doi.org/10.1007/978-3-031-19679-9_17

Download citation

  • DOI: https://doi.org/10.1007/978-3-031-19679-9_17

  • Published:

  • Publisher Name: Springer, Cham

  • Print ISBN: 978-3-031-19678-2

  • Online ISBN: 978-3-031-19679-9

  • eBook Packages: Computer ScienceComputer Science (R0)

Publish with us

Policies and ethics