МОДАЛЬНІ ВІКНА В ІНТЕРФЕЙСІ КОРИСТУВАЧА ЗАСОБАМИ REACT/NEXT.JS

О. Г. Трофименко; С. Ю. Манаков; М. М. Корнійчук; Ю. Г. Лобода; П. О. Чикунов

doi:10.32782/2521-6643-2025-1-69.11

О. Г. Трофименко Національний університет «Одеська юридична академія» https://orcid.org/0000-0001-7626-0886
С. Ю. Манаков Національний університет «Одеська юридична академія» https://orcid.org/0000-0001-5930-4592
М. М. Корнійчук Національний університет «Одеська юридична академія» https://orcid.org/0009-0009-4223-9291
Ю. Г. Лобода Національний університет «Одеська юридична академія» https://orcid.org/0000-0001-7083-552X
П. О. Чикунов Національний університет «Одеська юридична академія» https://orcid.org/0000-0003-4959-7744

DOI: https://doi.org/10.32782/2521-6643-2025-1-69.11

Ключові слова: модальне вікно, вебпрограмування, вебдизайн, інтерфейс, тестування, спливаюче вікно

Анотація

Модальні вікна стали повсюдним елементом цифрових інтерфейсів для відображення сповіщень, збору введених користувачем даних, керування навігацією. Метою статті є аналіз та систематизація сучасних підходів до реалізації модальних вікон у вебзастосунках, створених засобами React та Next.js. У статті проведено комплексний ана- ліз сучасних підходів до реалізації модальних вікон у frontend розробці. По-перше, досліджено роль модальних вікон у покращенні взаємодії користувачів у вебзастосунках. Попри їх широке використання є певна неоднозначність щодо того, коли використовувати модальні вікна, а коли альтернативні рішення – спливаючі діалогові вікна. Автори провели детальне порівняння цих компонентів інтерфейсу, різні варіанти їх використання, переваги та потенційні недоліки. По-друге, в статті, розглянуто різні проблеми при розробленні функціональних модальних вікон в інтерфейсі користувача. Зокрема це стосується проблем доступності, продуктивності та ефективності, інтеграції модальних вікон з маршрутизацією, проблем з мобільною версією, переривання поточної взаємодії, проблем з розміткою та стилями. По-третє, у роботі досліджено питання тестування модальних вікон у динамічних вебсередовищах. Традиційні засоби автоматизованого тестування часто мають проблеми з модальною взаємодією через їх тимчасовий характер і залежність від подій, ініційованих користувачем. У статті обговорюється те, як штучний інтелект (ШІ) здатен допомогти розв’язати ці складнощі, дозволяючи складний аналіз модальної поведінки, включно з динамічною адаптацією вмісту та реагування в режимі реального часу. Завдяки інтеграції ефективних методів доступності, оптимізації продуктивності і використанню розширеного тестування за допомогою ШІ, розробники можуть створювати інтуїтивно зрозумілі та ефективні інтерфейси, які покращують, а не перешкоджають взаємодії користувачів. Проведений аналіз може бути цінним як для новачків, так і для досвідчених розробників інтерфейсу, які прагнуть удосконалити свій підхід до модального дизайну в сучасних вебзастосунках.

Посилання

1. Ruiz J., Serral E., Snoeck M. Unifying Functional User Interface Design Principles. International Journal of Human-Computer Interaction. 2020. Vol. 37(4). P. 1-21. DOI: https://doi.org/10.1080/10447318.2020.1805876
2. Cui H., Trimananda R., Markopoulou A. Understanding Privacy Norms through Web Forms. arXiv. 2024. Vol. 2408.16304. DOI: https://doi.org/10.48550/arXiv.2408.16304.
3. Gellert U., Cristea A. Creating Modal Windows and External Windows. In: Web Dynpro ABAP for Practitioners. Springer, Berlin, Heidelberg. 2013. P. 361-379. DOI: https://doi.org/10.1007/978-3-642-38247-5_15
4. Knut H., Lars H., Vegard S., Frode S. Form Feedback on the Web: A Comparison of Popup Alerts and In-Form Error Messages. Smart Innovation, Systems and Technologies (SIST). 2019. Vol. 145. P. 369-379. DOI: https://doi.org/10.1007/978-981-13-8566-7_35
5. Zhan C. File Upload and Popup Dialogs. In: Selenium WebDriver Recipes in C#. Apress, Berkeley, CA. 2024. P. 107-116. DOI: https://doi.org/10.1007/979-8-8688-0023-8_13
6. Visconti E., Tsigkanos Ch., Nenzi L. Automated Monitoring of Web User Interfaces. ACM Transactions on the Web. 2025. Vol. 19, Issue 2. No. 10. P. 1-27. DOI: https://doi.org/10.1145/3708512.
7. Трофименко О.Г., Пастернак Ю.Ю., Манаков С.Ю., Лобода Ю.Г. Автоматизація тестування вебсайтів електронної комерції. Сучасна спеціальна техніка. 2021. № 2(65). С. 46-59. DOI: https://doi.org/10.36486/mst2411–3816.2021.2(65).5
8. Trofymenko O. H., Dyka A. I. Problems of testing e-commerce websites. International scientific conference «Information technologies and management in higher education and sciences» (November 28, 2022). Riga, Latvia: “Baltija Publishing”, 2022. Part 3. P. 195-199. DOI: https://doi.org/10.30525/978-9934-26-277-7-230
9. Boyev V. What is a modal in web design: all you need to know. 2024. URL: https://www.halo-lab.com/blog/modal-web-design
10. Peña N. S. Modals vs. Dialogs vs. Popups: How to Use Them Effectively in UX Design. 2025. URL: https://surl.li/wkumrj
11. The Dialog Element. Mdn web docs. URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
12. createPortal. React. URL: https://react.dev/reference/react-dom/createPortal
13. NextJS Docs. Routing. Parallel Routes. URL: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals
14. useRef. React. URL: https://react.dev/reference/react/useRef
15. Трофименко О.Г., Дика А.І., Лобода Ю.Г. Аналіз інструментів тестування вебзастосунків. Кібербезпека: освіта, наука, техніка. 2023. № 4(20). С. 62-71. DOI: https://doi.org/10.28925/2663-4023.2023.20.6271