РОЗРОБКА АРХІТЕКТУРИ АДАПТИВНОГО ІНТЕРФЕЙСУ РЕДАКТОРА ВЕБ-ЗАСТОСУНКУ ДЛЯ СТВОРЕННЯ ВІРТУАЛЬНИХ ТУРІВ
DOI:
https://doi.org/10.35546/kntu2078-4481.2025.4.3.5Ключові слова:
віртуальні екскурсії, адаптивний інтерфейс, мобільний дизайн, UI/UX дизайн, автоматизоване тестування, архітектура інтерфейсуАнотація
Стрімкий розвиток та поширення технологій віртуальної реальності сприяє їх активному використанню у сферах туризму, нерухомості та освіти. Одним із способів представлення інформації у віртуальному середовищі є інтерактивні VR-тури. У роботі проаналізовано існуючі системи для створення та редагування віртуальних екскурсій, досліджено сучасні підходи до побудови мобільних інтерфейсів і виявлено низку суттєвих недоліків їх поточних реалізацій. Зокрема, встановлено, що більшість сервісів мають обмежений функціонал на мобільних пристроях, особливо щодо роботи з меню інструментів, керування сценою та стабільності відображення дрібних елементів на малих екранах. Метою роботи є розробка та тестування архітектури адаптивного інтерфейсу редактора веб-застосунку віртуальних екскурсій, здатної повністю відтворювати функціональність настільної версії в умовах обмеженого екранного простору. Запропонована архітектура ґрунтується на стратегії Mobile-First, системі модульних компонентів і принципах розподілу робочих зон інтерфейсу. Вона включає структурні елементи, такі як верхня панель навігації, робочий простір 3D-сцени, bottom sheet та бічне меню інструментів. Такий підхід забезпечує раціональне використання наявної площі екрана, чіткий поділ між навігацією, інструментарієм та середовищем перегляду віртуальної сцени, а також передбачувану поведінку інтерфейсу під час зміни розміру вікна перегляду. Для практичної перевірки архітектури було створено макет інтерфейсу з використанням фреймворку Vue. js. Запропонований підхід протестовано за допомогою набору автоматизованих UI-тестів з використанням Playwright, що охоплюють перевірку розташування, масштабування та доступності елементів під час роботи з різними розмірами вікна перегляду (viewport). Результати підтвердили відсутність конфліктів верстки, коректну роботу компонентів навігації і стабільність відображення навіть на малих екранах (наприклад, iPhone 5). Таким чином, архітектура демонструє ефективність і практичну придатність для створення інтуїтивних та зручних інтерфейсів для редакторів віртуальних екскурсій, орієнтованих на мобільні пристрої.
Посилання
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)
##submission.downloads##
Опубліковано
Номер
Розділ
Ліцензія
Ця робота ліцензується відповідно до Creative Commons Attribution 4.0 International License.
