DEVELOPMENT OF THE ARCHITECTURE OF AN ADAPTIVE INTERFACE OF THE EDITOR OF A WEB APPLICATION FOR CREATING VIRTUAL TOURS
DOI:
https://doi.org/10.35546/kntu2078-4481.2025.4.3.5Keywords:
virtual tours, adaptive interface, mobile design, UI/UX design, automated testing, interface architectureAbstract
The rapid development and spread of virtual reality technologies facilitates their active use in the fields of tourism, real estate, and education. VR tours are one of the ways to present information in a virtual environment. This paper analyzes existing systems for creating and editing virtual tours, examines modern approaches to building mobile interfaces, and identifies several significant limitations in their current implementations. In particular, it has been found that most services have limited functionality on mobile devices, particularly those related to tool menus, scene control, and the stability of displaying tiny elements on small screens. The goal of this work is to develop and test the architecture of an adaptive interface for an editor of a virtual tour web application that is capable of fully replicating the functionality of the desktop version in a limited screen space. The proposed architecture is based on the Mobile-First strategy, a system of modular components, and the principles of distributing interface workspaces. It includes structural elements such as the top navigation bar, 3D scene workspace, bottom sheet, and navigation drawer. This approach ensures rational use of the available screen space, a clear separation between navigation, tools, and the virtual scene working environment, as well as predictable interface behavior when the viewport size changes. An interface mockup was created using the Vue.js framework to test the architecture in practice. The proposed approach was tested using a set of automated UI tests with Playwright, covering the verification of the location, scaling, and accessibility of elements when working with different viewport sizes. The results confirmed the absence of layout conflicts, the correct operation of navigation components, and stable display even on small screens (e.g., iPhone 5). Thus, the architecture demonstrates its effectiveness and practical applicability for creating intuitive and convenient interfaces for virtual tour editors for mobile devices.
References
Burke D., Crompton H., Nickel C. The Use of Extended Reality (XR) in Higher Education: A Systematic Review. TechTrends. 2025. № 69. P. 998-1011. URL: https://doi.org/10.1007/s11528-025-01092-y
Thangavel S., Sharmila K., Sufina K. Revolutionizing Education Through Augmented Reality (AR) and Virtual Reality (VR): Innovations, Challenges and Future Prospects. Asian Journal of Interdisciplinary Research. 2025. Vol. 8, Iss. 1. P. 1-28. URL: https://doi.org/10.54392/ajir2511
Wang K. Research and Application of VR in Training and Learning. Highlights in Science, Engineering and Technology. 2024. Vol. 85. P. 1306–1313. URL: https://doi.org/10.54097/anhqyy16
Shahu A., Kinzer K., Michahelles F. Enhancing Professional Training with Single-User Virtual Reality: Unveiling Challenges, Opportunities, and Design Guidelines. MUM '23: Proceedings of the 22nd International Conference on Mobile and Ubiquitous Multimedia (Vienna, 3-6 December 2023). Vienna, 2024. P. 224-256. URL: https://doi.org/10.1145/3626705.3627791
Virtual reality and augmented reality in medical education: an umbrella review / T. Tene, D. F. V. Lopez, P. E. V. Aguerre et al. Frontiers in Digital Health. 2024. Vol. 6:1365345. DOI: 10.3389/fdgth.2024.1365345
What is XR? Towards a Framework for Augmented and Virtual Reality / P. A. Rauschnabel, R. Felix, C. Hinsch et al. Computers in Human Behavior. 2022. Vol. 133. P. 107289. URL: https://doi.org/10.1016/j.chb.2022.107289
Macario G. WebXR, A-Frame and Networked-Aframe as a Basis for an Open Metaverse: A Conceptual Architecture. 2024. URL: https://arxiv.org/abs/2404.05317
Govindaraju M. The Impact Of Mobile-First Development Approaches On User Experience And Development Efficiency. International Journal of Creative Research Thoughts. 2025. Vol. 13, no. 3. URL: https://www.ijcrt.org/papers/IJCRT25A3445.pdf
Kuula: #1 Virtual Tour Software for any business. Kuula. URL: https://kuula.co/ (дата звернення: 20.09.2025).
Virtual Tour Easy. 360° Virtual Tour software. URL: https://virtualtoureasy.com/ (дата звернення: 20.09.2025).
Fang Y.-M., Lin C. The Usability Testing of VR Interface for Tourism Apps. Applied Sciences. 2019. Vol. 9(16). P. 3215. URL: https://doi.org/10.3390/app9163215
Kamińska D., Zwoliński G., Laska-Leśniewicz A. Usability Testing of Virtual Reality Applications–The Pilot Study. Sensors. 2022. Vol. 22(4). P. 1342. URL: https://doi.org/10.3390/s22041342
Bhanarkar N., Paul A., Mehta A. Responsive web design and its impact on user experience. International Journal of Advanced Research in Science, Communication and Technology. 2023. Vol. 3, Is. 4. P. 50-55. DOI: 10.48175/ijarsct-9259
Marcotte E. Responsive Web Design. 2nd ed. New York : A Book Apart, 2014. 153 p.
Responsive web design: principles and implementation / R. Rupali, D. P. Mankame, B. Patil et al. International Journal of Research Publication and Reviews. 2024. Vol. 5, Is. 7. P. 4291-4293. URL: https://ijrpr.com/uploads/V5ISSUE7/IJRPR31795.pdf
Prakash B. Retrofitting Mobile First Design, Responsive Design: Driving Factors, Approach, Best Practices and Design Considerations. Current Trends in Computer Sciences & Applications. 2020. Vol. 2, Is. 2. DOI: 10.32474/CTCSA.2020.02.000131
Kim H., Moritz D., Hullman J. Design Patterns and Trade-Offs in Responsive Visualization for Communication. 2021. URL: https://arxiv.org/abs/2104.07724
Understanding Visual Saliency in Mobile User Interfaces / L. A. Leiva et al. 2021. URL: https://arxiv.org/abs/2101.09176
Bilohub D., Skrypchenko M., Tytenko S. Quality attributes and architectural patterns of modern mobile apps. Modern Engineering And Innovative Technologies. 2023. № 1(29-01). P. 33-38. URL: https://doi.org/10.30890/2567-52 73.2023-29-01-056
Gu R., Rojas J. M., Shin D. Software testing for extended reality applications: a systematic mapping study. Automated Software Engineering. 2025. № 32(56). URL: https://doi.org/10.1007/s10515-025-00523-7
Fast and reliable end-to-end testing for modern web apps. Playwright. URL: https://playwright.dev/(date of access: 07.11.2025).
Common Viewport Sizes for Mobile. Award Winning Web Design Newport – Digital Marketing. URL: https://www.icwebdesign.co.uk/common-viewport-sizes (date of access: 07.11.2025)
