ДОСЛІДЖЕННЯ ЕФЕКТИВНОСТІ ПІДХОДІВ FLAT ТА MATERIAL ПРИ СТВОРЕННІ UI/UX-ДИЗАЙНУ НАВЧАЛЬНОГО МОБІЛЬНОГО ЗАСТОСУНКУ - Scientific conference
Main page
UA RU EN

Congratulation from Internet Conference!

Hello

Рік заснування видання - 2011

ДОСЛІДЖЕННЯ ЕФЕКТИВНОСТІ ПІДХОДІВ FLAT ТА MATERIAL ПРИ СТВОРЕННІ UI/UX-ДИЗАЙНУ НАВЧАЛЬНОГО МОБІЛЬНОГО ЗАСТОСУНКУ

03.05.2024 15:43

[1. Information systems and technologies]

Author: Хамар Іван Олегович, Національний університет "Львівська політехніка", м. Львів, Україна; Фечан Андрій Васильович, доктор технічних наук, професор, Національний університет "Львівська політехніка", м. Львів, Україна; Хамар Іванна Романівна, викладач вищої категорії, Львівська музична школа №3, м. Львів, Україна; Лігашевська Вікторія Володимирівна, викладач, Львівська музична школа №3, м. Львів, Україна; Лігашевська Любов Данилівна, викладач вищої категорії, методист, Львівська музична школа №3, м. Львів, Україна


ORCID: 0009-0000-0514-903X Хамар І.О.

ORCID: 0000-0001-9970-5497 Фечан А.В.

Ця робота присвячена дослідженню ефективності використання підходів Flat та Material у дизайні UI/UX для навчальних мобільних застосунків на прикладі застосунку «Guitatune Tuner». Для дослідження кількісних характеристик впливу кожного з розроблених варіантів дизайну на досвід користувачів використана гібридна модель оцінювання, яка включала як аналіз вражень користувачів програмою "Guitatune Tuner" за допомогою методики оцінювання meCUE, так і статистичну оцінку ефективності навчання учнів музичної школи з використанням застосунку. Для визначення ефективності навчання були використані оцінки викладачів, що були опрацьовані за допомогою апарату дисперсійного аналізу ANOVA у версії one-way. 

Ключові слова: ANOVA, meCUE, ефективність, дизайн, UI/UX, Flat, Material, тюнер, навчальна система.

Вступ

В наш час спостерігається стрімкий та динамічний розвиток мережі інтернет, наявних у ній вебсайтів, представлених мобільних застосунків та соціальних мереж. Це спричинило нагромадження інформації про розробку зокрема мобільних систем та виділення окремих галузей знань в цій сфері [1]. Також спостерігається плюралізм думок і підходів стосовно способів чи методологій такої розробки, виділення основних течій, відокремлення підгалузей [2].

Однією з важливих дискусійних тем в сфері UI/UX дизайну є вибір підходу до створення дизайну - мінімалістичного Flat-дизайну чи розробленого в Google для створення Android-інтерфейсів підходу Material-дизайну [3]. Обидва підходи мають свої особливості та переваги, і порівняння їх ефективності при створенні додатків певного професійного спрямування є актуальною задачею,вирішення якої  безпосередньо впливає на успішність продукту на ринку. 

Ця робота присвячена порівнянню ефективності підходів Flat та Material в розробці UI/UX дизайну на прикладі навчального музичного тюнера. Музичні тюнери є корисними інструментами для музикантів у підтримці правильного строю музичних інструментів. Важливою частиною таких додатків є їхній користувацький інтерфейс, який повинен бути інтуїтивно зрозумілим та легким у використанні. Крім цього інтерфейс повинен бути інклюзивним, тобто зручним для використання різними групами користувачів з урахуванням особливостей їхніх потреб.

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

Методологія дослідження

Якщо ж мова йде про оцінку ефективності UI/UX дизайну, то постає проблема суб’єктивного сприйняття користувачами тих чи інших елементів виконання цього дизайну та різниця в результатах відносно різних категорій користувачів [4]. В загальному випадку оцінка ефективності є складним завданням, бо для досягнення об’єктивного результату оцінки ефективності потрібно врахувати велику кількість факторів.

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

Тому при розробці UI/UX дизайну застосунку необхідно враховувати різні фактори використання мобільних систем [5]. Зокрема цільову аудиторію застосунку, функціональні особливості системи, вимоги до локалізації та поширення додатку, актуальність представлення рішень для достатньої кількості користувачів, особливості контексту використання додатку, що розробляється та деякі інші фактори, які створюють певні передумови користувацької взаємодії з інтерфейсом як таким та з його окремими елементами.

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

Додатковим фактором впливу на методики та підходи до розробки UI/UX дизайну є те, що технології розробки, тренди побудови інтерфейсів, їх логічне розбиття на групи чи категорії постійно змінюються та залежать від популярних на даний момент в середовищі професійної розробки ідеологій розробки. Також загальне уявлення про найкращі практики розробки інтерфейсів часто залежить від вибору стеку технологій у законодавців розробки мобільних систем та інформаційних систем загалом [7]. Відомі випадки, коли флагмани у сфері інформаційних технологій обирали для реалізації своїх проєктів конкретні технології чи підходи і це впливало, а то і докорінно змінювало загальноприйняті уявлення в сфері розробки, визначало тренди побудови інтерфейсів чи способи використання окремих елементів дизайну.

Тому для отримання об’єктивних та, головне, репрезентативних даних про результати перевірки UI/UX дизайну мобільних чи будь-яких інших інформаційних застосунків та систем необхідно опиратися на дослідження багатьох різних факторів, проводити тестування на групах різних користувачів, використовувати різноманітні методики оцінки і перевірки результатів дослідження та оновлювати їх у відповідності до напрацьованого дослідницького досвіду. Для отримання найбільш відповідних даних варто використовувати такі методики та способи дослідження, які мають застосування та поширення серед дослідників і науковців, щоб результати дослідження чи перевірки були валідними і давали близькі до реальної картини впливу дизайну застосунку на ефективність його використання результати [8].

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

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

Відповідно ці перевірки мають бути поєднані в одну логічно вибудовану та збалансовану модель оцінки. Тому така модель оцінки є інтегрованою моделлю.

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

Методологія meCUE 2.0. Анкета meCUE — це модульний і гнучкий вимірювальний інструмент для дослідження аспектів досвіду роботи з інтерактивними технічними продуктами. Загальна анкета складається з 33 пунктів у форматі відповідей за шкалою Лайкерта [9].

Наразі анкета доступна у версії 2.0, що дозволяє, залежно від питання та предмета опитування, об’єднати п’ять різних модулів, які зосереджені на сприйнятті якостей продукту, пов’язаних із завданням, так і не пов’язаних із завданням, емоцій (позитивних і негативний) і наслідки взаємодії (наприклад, намір використання, лояльність, загальна оцінка). 

У межах компонентів опитувальник meCUE реалізує розмірну структуру, яка дає змогу збирати важливі субшкали, які є актуальними для практичного застосування.

Для дослідження було обрано саме версію meCUE 2.0, оскільки саме вона має розширену сферу застосування, тобто meCUE 2.0 не прив’язана лише до програмних систем для ПК чи лише для веб-сайтів.

Крім цього присутня оновлена шкала, meCUE 2.0 включає 5 факторів UX: Задоволеність, Ефективність, Простота використання, Естетика, Емоційний вплив, в той час, коли meCUE 1.0 використовував лише 4 фактори UX.

Звідси походить модульна структура meCUE, яка дає змогу збирати важливі субшкали, які є актуальними для практичного застосування. Наприклад, оцінка передбачуваної корисності та зручності використання, візуальної естетики, соціальної комунікації особистого статусу та інтеграція інтерактивного продукту в повсякденне життя користувачів на основі їх досвіду.

Дисперсійний аналіз ANOVA. Дисперсійний аналіз є сукупністю статистичних методів, призначених для перевірки гіпотез про зв’язок між певною ознакою та досліджуваними факторами, які не мають кількісного опису, а також для встановлення ступеня впливу факторів та їх взаємодії. У спеціальній літературі дисперсійний аналіз часто називають ANOVA (від англомовної назви Analysis of Variations). Вперше цей метод було розроблено Р. Фішером в 1925 р

ANOVA (Analysis of Variance) - це статистичний метод, який використовується для аналізу великої кількості даних для визначення наявності статистично значущих відмінностей між трьома або більше групами. ANOVA дозволяє визначити, чи є середні значення груп статистично відмінними, тобто чи існують значущі різниці між групами.

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

ANOVA має кілька різновидів, включаючи однофакторний (One-Way ANOVA), багатофакторний (Two-Way ANOVA) та деякі інші модифікації для специфічних випадків дослідження.

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

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

Аналіз результатів




Рис. 1. Розроблені інтерфейси Guitatune за підходами Flat (a) та Material (b).

Створені інтерфейси мають характерні для кожного підходу відмінності: Material використовує реалістичні тіні, градієнти та анімацію, намагається відтворити вигляд матеріалів у реальному світі, тоді як Flat відзначається плоским, двовимірним виглядом без таких ефектів. Material інтерфейси мають більш яскраві, контрастні анімації та глибину, у той час як Flat дизайн фокусується на легкості сприйняття та надає простіші, менш витончені анімації, натомість даючи простоту сприйняття та легкість користування. 

Методологія meCUE 2.0. В процесі дослідження зібрані за рахунок опитувань дані вражень користувачів були проаналізовані відповідно до стандартів  meCUE 2.0.

Для кожного варіанту дизайну зібрані відповіді користувачів на питання були погруповані за відповідними підкатегоріями. Оцінки кожного користувача за цими підкатегоріями було визначено як середнє арифметичне оцінок на всі питання користувача з цієї підкатегорії. Загалом було визначено 10 підкатегорій, які складали 5 модулів: 




Рис. 2. Структура модулів та підкатегорій оцінювання за meCUE 2.0.

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

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

 

Рис. 3. Результати для Material інтерфейсу.




Рис. 4. Результати для Flat інтерфейсу

Дисперсійний аналіз one-way ANOVA. Для аналізу за ANOVA було проведено дослідження ефективності навчання учнів ЛМШ№3 з використанням застосунку Guitatune Tuner.

Було проведено 10 занять в 3 класах різних викладачів залученням 27 учнів.

В кожному класі дослідження відбувалося за однаковим принципом, перші 3 заняття відбувалися без застосування Guitatune, другі 3 заняття з використанням Material, треті 3 заняття – з використанням Flat. На останньому занятті можна було користуватись усім функціоналом за бажанням.

Обчислення статистичної функції відбувається за такою формулою:

 

Рис. 5. Формула one-way ANOVA

Отримані оцінки успішності було занесено до 3-ох груп: без Guitatune, Guitatune Material та Guitatune Flat та підготовано до визначення статистичних відмінностей за допомогою дисперсійного аналізу методом однопараметричного ANOVA.

 

Рис. 6. Дані оцінок успішності учнів для дисперсійного аналізу

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

 

Рис. 7. Результати проведеного дисперсійного аналізу

Для підведення підсумків було враховано як і результати аналізу опитування користувачів за методикою meCUE 2.0, так і результати аналізу дослідження за участі експертів, викладачів ЛМШ№3 та їх учнів.

Обидві застосовані методики показали більшу ефективність застосування підходу Flat для побудови інтерфейсів навчальних мобільних застосунків.

Обговорення та перспективи

Проведене дослідження є перспективним з погляду порівняння ефективності дизайнерських підходів. Застосовані методи дають можливість оцінити проведену роботу, а результати мають цінність для розробки мобільних застосунків.

Проте простір для покращення методики оцінювання все ще залишається і також можна збільшити репрезентативність дослідження шляхом збільшення кількості досліджуваних дизайнів, кількості досліджуваних застосунків, кількості респондентів чи експертних груп, серед яких проводиться дослідження. Крім цього існують інші методики проведення дисперсійного аналізу, застосування яких можливо дасть точніші чи більш репрезентативні результати [11].

Висновки

Розроблено методику порівняння ефективності інтерфейсів мобільних застосунків на основі meCUE 2.0 та ANOVA.

Розроблено Material та Flat інтерфейси для навчального застосунку Guitatune Tuner.

Проведені дослідження показали загалом позитивне ставлення до обох розроблених варіантів дизайну. З незначною перевагою інтерфейсу на основі підходу Flat у враженнях користувачів за meCUE 2.0, а оцінювання в ЛМШ№3 за допомогою ANOVA також продемонструвало більшу ефективність Flat інтерфейсу. Це може бути пояснено притаманною для Flat простотою та легкістю сприйняття та відсутністю контрастних колірних гам.

Посилання

1. C. G. Thomas, A. Jayanthila Devi, “A Study and Overview of the Mobile AppDevelopment Industry,” International Journal of Applied Engineering and ManagementLetters (IJAEML), vol. 5, pp. 115-130, June 2021

2. M. Zielhuis, F. Sleeswijk Visser, D. Andriessen, P. J. Stappers, “Making design research relevant for design practice: What is in the way?” Design Studies, vol. 78, pp. 5–17, 2022.

3. S. Kim, S. Lee, “Smash the dichotomy of Skeuomorphism and flat design: Designing an affordable interface to correspond with the human perceptuomotor process,” International Journal of Human-Computer Studies, vol. 141, pp. 2–5, 2020.

4. K. Spiliotopoulos, M. Rigou, S. Sirmakessis, “A Comparative Study of Skeuomorphic and Flat Design from a UX Perspective,” Multimodal Technologies and Interaction, vol. 2, pp. 4–16, June 2018.

5. B. Klimova, P. Prazak, Evaluation of the Effectiveness of the Use of a Mobile Application on Students’ Study Achievements – A Pilot Study, S. A. Al-Sharhan, A. C. Simintiras, Y. K. Dwivedi, et al. Eds, El-Kuwait, Kuwait:Springer International Publishing, 2018.

6. H. Chemerys, H. Briantseva, “URGENCY OF INTRODUCTION OF DESIGN OF UNIVERSAL, ACCESSIBLE AND INCLUSIVE DESIGN IN PROFESSIONAL TRAINING OF FUTURE DESIGNS,” Pedagogy of the formation of a creative person in higher and secondary schools. vol. 3, pp. 151–155, 2021.

7. F. Del Giorgio Solfa, G. Amendolaggine, T. A. Alvarado Wall, “Nuevos paradigmas para el diseño de productos. Design Thinking, Service Design y experiencia de usuario”, Arte e investigación, vol. 14, pp. 2-9, Nov. 2018.

8. N. Samrgandi, “User Interface Design & Evaluation of Mobile Applications,” IJCSNS international journal of computer science and network security, vol. 21, pp. 55–63, 2021.

9. M. Minge, “Nutzererleben messen mit dem meCUE 2.0 – Ein Tool für alle Fälle?”, Mensch und Computer – Workshopband, vol. 2, pp. 1-9, September 2018.

10. G. Zhao, J. Yang, L. Zhang, H. Yang, “ANOVA F Test of Non-Null Hypothesis”, European Journal of Statistics, vol. 4, pp. 1-21, February 2024.

11. A. Bondarenko, S. Lapach, “Advantages of multivariate regression analysis over ANOVA”, International Scientific and Technical conference The Progressive Technics Technology and Engineering Education, vol. XXIII, pp. 153–156, June 2023.



Creative Commons Attribution Ця робота ліцензується відповідно до Creative Commons Attribution 4.0 International License
допомога Знайшли помилку? Виділіть помилковий текст мишкою і натисніть Ctrl + Enter

Another articles in this section

Сonferences

Conference 2024

Conference 2023

Conference 2022

Conference 2021



Міжнародна інтернет-конференція з економіки, інформаційних систем і технологій, психології та педагогіки

Наукова спільнота - інтернет конференції

:: LEX-LINE :: Юридична лінія

Інформаційне суспільство: технологічні, економічні та технічні аспекти становлення