Розробка UX/UI дизайну інтерактивного електронного щоденника для підтримки ментального здоров’я

Оксана Володимирівна Зоренко; Олена Станіславівна Вдовиченкова; Василь Миколайович Скиба; Ярослав Володимирович Зоренко

doi:10.20535/2077-7264.3(89).2025.344584

Автор(и)

Оксана Володимирівна Зоренко Національний технічний університет України «Київський політехнічний інститут імені Ігоря Сікорського» , Україна https://orcid.org/0000-0002-2352-2579
Олена Станіславівна Вдовиченкова
Василь Миколайович Скиба Національний технічний університет України «Київський політехнічний інститут імені Ігоря Сікорського» , Україна http://orcid.org/0000-0003-4534-1960
Ярослав Володимирович Зоренко Національний технічний університет України «Київський політехнічний інститут імені Ігоря Сікорського» , Україна http://orcid.org/0000-0001-5332-5296

DOI:

https://doi.org/10.20535/2077-7264.3(89).2025.344584

Ключові слова:

інтерактивне видання, електронний щоденник, UX/UI дизайн, вебсервіс, вебсайт, інтерфейс, ментальне здоров’я, психологічна підтримка, користувацький досвід

Анотація

Проаналізовано вплив _російсько-української війни на ментальне здоров’я та психічний стан людини. Виокремлено сучасний сегмент найбільш популярних світових та вітчизняних цифрових застосунків для підтримки ментального здоров’я, що свідчить про стрімке зростання їх кількості для мобільних пристроїв та вебплатформ, а цифрове ментальне здоров’я виходить за межі традиційної телемедицини, охоплюючи не тільки вебсайти, мобільні застосунки, а й віртуальну реальність та штучний інтелект.

Встановлено, що зручним форматом самоспостереження, що дозволяє аналізувати свої думки та емоції є електронний щоденник, який відкриває нові можливості для інтерактивності, візуалізації даних та персоналізації користувацького досвіду завдяки простоті інтерфейсу та структурованій подачі інформації.

Розроблено концепцію, структуру та UX/UI дизайн, на основі яких створено прототип англомовної інноваційної платформи — інтерактивного електронного щоденника для підтримки ментального здоров’я «Zhyttia», що дозволить користувачам у будь-якій країні світу вести електронний щоденник настрою, записувати свої емоції та рівень тривожності, додавати нотатки й фотографії, вести трекер звичок, а також переглядати динаміку свого емоційного стану через зручні фільтри та проводити саморефлексію.

Для створення сучасного цифрового продукту на основі людино-центрованого дизайну розроблено прото-персону (збірний образ представника відповідної цільової аудиторії) та інформаційну структуру протитипу, низькодеталізовані схеми основних екранів (Wireframes) застосунку.

Для макетування електронного щоденника обрано онлайн-сервіс проєктування цифрових продуктів Figma; для розробки сервісу обрано програмне забезпечення Visual Studio Code; для реалізації клієнтської частини обрано React.js — JavaScript-бібліотеку для побудови інтерфейсів; обрано відповідну пастельну палітру кольорів, що поєднує естетичну привабливість та психологічний комфорт, для останнього дослідним шляхом обрано читабельну гарнітуру відповідних кеглів.

Поглиблене дослідження сучасних вимог до обладнання, технологій розробки та економічної ефективності дозволило створити інтуїтивно зрозумілий, візуально привабливий і технологічно обґрунтований прототип продукту з урахуванням принципів UX/UI дизайну.

Біографії авторів

Оксана Володимирівна Зоренко, Національний технічний університет України «Київський політехнічний інститут імені Ігоря Сікорського»

канд. техн. наук, доц., кафедра технології поліграфічного виробництва, відповідальний секретар збірника наукових праць «Технологія і техніка друкарства»

Олена Станіславівна Вдовиченкова

бакалавр

Василь Миколайович Скиба, Національний технічний університет України «Київський політехнічний інститут імені Ігоря Сікорського»

канд. техн. наук, доц., кафедра репрографії

Ярослав Володимирович Зоренко, Національний технічний університет України «Київський політехнічний інститут імені Ігоря Сікорського»

канд. техн. наук, доц., кафедра репрографії, зам. директора із наукової роботи

Посилання

‘Buty Okei’: shcho take mentalne zdorov’ia i yak yoho dosiahty? [‘Being OK’: what is mental health and how to achieve it?]. Retrieved from https://fizi.ua/blogs/news/mental?gad_source=5&gad_campaignid=23148721367&gclid=EAIaIQobChMIl4vKm7jxkAMVsZWDBx3aYDbqEAAYBCAAEgJuBvD_BwE [in Ukrainian].

Mental Health Apps Market (2025–2030). Size, Share & Trends Analysis Report By Platform Type (Android, iOS), By Application Type (Depression And Anxiety Management, Stress Management), By Region, And Segment Forecasts. Retrieved from https://www.grandviewresearch.com/industry-analysis/mental-health-apps-market-report [in English].

Pykalo, O. (January 27, 2025). Lyshe 3 % opytanykh ukraintsiv otsiniuiut svii zahalnyi stan yak duzhe dobryi — doslidzhennia Helsi [Only 3% of Ukrainians surveyed rate their general condition as very good — Helsi stud]. Forbes Ukraina. Retrieved from https://forbes.ua/news/lishe-3-opitanikh-ukraintsiv-otsinyuyut-sviy-zagalniy-stan-yak-duzhe-dobriy-doslidzhennya-helsi-27012025-26634 [in Ukrainian].

Wasil, A. R., Palermo, E. H., Lorenzo-Luaces, L., & DeRubeis, R. J. (November 2022). Is There an App for That? A Review of Popular Apps for Depression, Anxiety, and Well-Being. Cognitive and Behavioral Practice, 29(4), 883–901. Retrieved from https://www.sciencedirect.com/science/article/abs/pii/S107772292100122X [in English].

Daylio. Retrieved from https://daylio.net/ [in English].

Shchodennyk nastroiu — Prohrama Moodnotes [Mood diary — Moodnotes program]. App Store — Apple. Retrieved from https://apps.apple.com/ru/app/moodnotes-%D1%89%D0%BE%D0%B4%D0%B5%D0%BD%D0%BD%D0%B8%D0%BA-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D1%8E/id1019230398?l=uk [in Ukrainian].

Reflectly — Journal & AI Diary. Retrieved from https://apps.apple.com/ua/app/reflectly-journal-ai-diary/id1241229134?l=uk [in Ukrainian].

Jour. Retrieved from https://www.theappfuel.com/apps/jour [in English].

Rozmova. Retrieved from https://apps.apple.com/ru/app/rozmova-%D1%82%D0%B2%D1%96%D0%B9-%D0%BF%D1%81%D0%B8%D1%85%D0%BE%D0%BB%D0%BE%D0%B3-%D0%BE%D0%BD%D0%BB%D0%B0%D0%B9%D0%BD/id6504560038?l=uk [in Ukrainian].

Tysha — medytatsii ukrainskoiu [Silence — meditations in Ukrainian]. Retrieved from https://apps.apple.com/ua/app/%D1%82%D0%B8%D1%88%D0%B0-%D0%BC%D0%B5%D0%B4%D0%B8%D1%82%D0%B0%D1%86%D1%96%D1%97-%D1%83%D0%BA%D1%80%D0%B0%D1%97%D0%BD%D1%81%D1%8C%D0%BA%D0%BE%D1%8E/id6450309698 [in Ukrainian].

User-Centered Design (UCD). Interaction-Design Foundation. Retrieved from https://www.interaction-design.org/literature/topics/user-centered-design [in English].

Stack Overflow. Developer Survey 2023 — Most Popular Technologies. Languages. Retrieved from https://survey.stackoverflow.co/2023/#most-popular-technologies-language [in English].

Colors That Calm the Mind: What Psychology and Cognitive Science Reveal. Cognitive Science Blog. Retrieved from https://blog.cognifit.com/colors-that-calm-the-mind-what-psychology-and-cognitive-science-reveal/ [in English].

Collier, D. (2025). Text Readability in Colour. Land of Interruptions. Carl isle (UK). Retrieved from https://landofinterruptions.co.uk/b/textread/ [in English].

Komarov, V. Yevrystyky Nilsena: 10 pryntsypiv yuzabiliti dlia dyzainu interfeisiv [Nielsen’s heuristics: 10 usability principles for interface design]. Retrieved from https://www.komarov.design/ievristiki-nilsiena-10-printsipiv-iuzabiliti-dlia-dizainu-intierfieisiv/ [in Ukrainian].

Comparing ISO 27001 & ISO 27701: Differences, similarities, and dual certification process. StrikeGraph. Retrieved from https://www.strikegraph.com/blog/the-difference-between-iso-27001-and-27701 [in English].