UX/UI дизайн Web - сервісу по пошуку партнерів для комп'ютерних ігор

Анікін, Іван Андрійович

Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/6887

Title:	UX/UI дизайн Web - сервісу по пошуку партнерів для комп'ютерних ігор
Authors:	Рудницька , Юлія Володимирівна Анікін, Іван Андрійович
Keywords:	дизайн;користувач;веб-сервіс;UX, UI;WEB-сервіс
Issue Date:	11-Jun-2024
Abstract:	У сучасному світі комп'ютерних ігор спостерігається значне зростання кількості гравців, які шукають партнерів для спільної гри. Дизайн сервісу по пошуку партнерів зробить цей процес швидким, ефективним, зручним, та естетично привабливим. Мета роботи - створення UX/UI дизайну Веб-сервісу по пошуку партнерів для комп'ютерних ігор, який спростить процес формування команд і підвищить якість і задоволення від гри. Розділ 1: Постановка задачі. Огляд існуючих рішень, аналогів: Цей розділ присвячений визначенню об'єкта та предмета дослідження та детальному аналізу конкурентних сервісів. Розділ 2: Обґрунтуванням технічного завдання: У цьому розділі описуються вимоги до функціоналу, дизайну, прототипу, та критерії якості продукту. Розділ 3: Розробка системи: Розділ присвячений розробці користувацького інтерфейсу, включаючи принципи UX/UI дизайну, створення прототипів та їх тестування з метою забезпечення зручності та інтуїтивності використання сервісу. Об’єкт дослідження: процес розробки дизайну веб-сервісу по пошуку партнерів для комп'ютерних ігор. Предмет дослідження: UX/UI дизайн та функціональні можливості веб-сервісу по пошуку партнерів для комп'ютерних ігор. Методи дослідження: в роботі застосовувалися конкурентний аналіз, опитування, створення та тестування прототипів, аналіз користувацьких даних.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/6887
Appears in Collections:	126 Інформаційні системи та технології (Web-технології, web-дизайн)

Files in This Item:

File	Description	Size	Format
РЕП_БАК_Анікін_WEB-2011.pdf Restricted Access		3.07 MB	Adobe PDF	View/Open Request a copy

Show full item record

Extracted text

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІЕРСИТЕТ

ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ

Кафедра інформаційних технологій проектування

Пояснювальна записка
до кваліфікаційної роботи

_______________________________бакалавра_____________________________
(освітньо-кваліфікаційний рівень)

на тему: UX/UI дизайн Web - сервісу по пошуку партнерів для комп'ютерних ігор

Спеціал ьність 126 “Інформаційні
системи та технології”
ОП “We b-технології, Web-дизайн”
Анікін І.А.
(прізвище т а ініціали)

Керівник ______Рудницька Ю.В._______
(прізвище та ініціали)

Рецензе нт ______Мельник Р.П._______
(прізвище та ініціали)

Черкаси – 2024 року

ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
(назва вузу)

Факультет ФІТІС Кафедра Інформаційних технологій проектування
Освітній рівень бакалавр
Спеціальність 126 “Інформаційні системи та технології”
Освітня програма “Web-технології Web-дизайн”
ЗАТВЕРДЖУЮ:
зав.Кафедри Прокопенко Т.О.
“______” __________________2024р.

ЗАВДАННЯ
На кваліфікаційну роботу студенту

Анікіну Івану Андрійовичу
(прізвище, ім’я, по-батькові)
1. Тема проекту (роботи) UX/UI дизайн Web-сервісу по пошуку партнерів для комп'ютерних ігор
Керівник проекту(роботи) РУДНИЦЬКА Ю.В., PhD.
Затверджена наказом Черкаського державного технологічного університету № 60/40
від 26.02.24
Строк подання студентом роботи 29 травня 2024 р.

3. Вихідні дані до проекту (роботи) Середовище розробки Figma; FigJam; Adobe
P
h4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить
рoозробити)
Вt СТУП; 1. АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА ЗАДАЧІ; 1.1
oАналіз предметної області; 1.2 Огляд аналогів; 1.3 Порівняння аналогів; 1.4
Пs остановка задачі; Висновок до розділу 1; 2. ФОРМУВАННЯ ВИМОГ ТА
hПРОЕКТУВАННЯ WEB-СЕРВІСУ; 2.1 Опис розроблюваного веб-сервісу; 2.2
Вo имоги до проекту; 2.3 Структура Web-сервісу; 2.4 Критерії якості; Висновок до
pрозділу 2; 3. РОЗРОБКА UX/UI ДИЗАЙНУ ВЕБ-СЕРВІСУ; 3.1 Засоби реалізації;
ВAИКОРИСТАНИХ ДЖЕРЕЛ; ДОДАТКИ.
d
o5b.Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень)
Рeисунок: JTBD першої особи; Рисунок: User flow основного шляху користувача;
РI исунок: CJM проекту; Рисунок: Основні wireframes сервісу;
lРисунок: Основні frames сервісу.
l
u
s
t
r
a
t

6. Консультанти з проекту із зазначенням розділів проекту, що їх стосуються
Підпис, дата
Розділ Консультант
Завдання видав, завдання
прийняв

7. Дата видачі завдання 29 лютого 2024 р.
Керівник Рудницька Ю.В.
(підпис)
Завдання прийняв до виконання ________
(підпис)
Календарний план
Пор. № Назва етапів дипломного проекту Термін виконання Примітка
етапів проекту
Підготовча стадія
Постановка задачі Виконано
Підготовка завдання Виконано
Погодження завдання Виконано
Затвердження завдання Виконано
Основна стадія
Підбір матеріалів Виконано
Аналіз шляхів рішення задачі Виконано
Реалізація основних задач роботи Виконано
Реалізація всіх проектних задач Виконано
Оформлення первісної редакції роботи Виконано
Заключна стадія
Узгодження проектних рішень з керівником Виконано
Оформлення пояснювальної записки Виконано
Попередній захист роботи Виконано
Затвердження роботи Виконано
Рецензування роботи Виконано
Захист роботи 2
(підпис) (ПІБ)
Керівник проекту ______________________________________________

АНОТАЦІЯ

До кваліфікаційної роботи бакалавра на тему «UX/UI дизайн Web-сервісу по
пошуку партнерів для комп'ютерних ігор».
Виконав студент групи Web-2011 Анікін Іван Андрійович.
Кваліфікаційна робота бакалавра містить: 69 сторінок, 16 рисунків,
3 таблиць, 35 використане джерело, 3 додатків.
Актуальність теми. У сучасному світі комп'ютерних ігор спостерігається
значне зростання кількості гравців, які шукають партнерів для спільної гри. Дизайн
сервісу по пошуку партнерів зробить цей процес швидким, ефективним, зручним,
та естетично привабливим.
Мета роботи - створення UX/UI дизайну Веб-сервісу по пошуку партнерів
для комп'ютерних ігор, який спростить процес формування команд і підвищить
якість і задоволення від гри.
Розділ 1: Постановка задачі. Огляд існуючих рішень, аналогів: Цей розділ
присвячений визначенню об'єкта та предмета дослідження та детальному аналізу
конкурентних сервісів.
Розділ 2: Обґрунтуванням технічного завдання: У цьому розділі описуються
вимоги до функціоналу, дизайну, прототипу, та критерії якості продукту.
Розділ 3: Розробка системи: Розділ присвячений розробці користувацького
інтерфейсу, включаючи принципи UX/UI дизайну, створення прототипів та їх
тестування з метою забезпечення зручності та інтуїтивності використання сервісу.
Об’єкт дослідження: процес розробки дизайну веб-сервісу по пошуку
партнерів для комп'ютерних ігор.
Предмет дослідження: UX/UI дизайн та функціональні можливості веб-
сервісу по пошуку партнерів для комп'ютерних ігор.
Методи дослідження: в роботі застосовувалися конкурентний аналіз,
опитування, створення та тестування прототипів, аналіз користувацьких даних.
Ключові слова: дизайн, UX, UI, користувач, веб-сервіс.

ANNOTATION

For the bachelor's qualification work on the topic "UX/UI design of a web service
for for computer games partner search."
Performed by a student of the Web-2011 group, Ivan Anikin.
The bachelor's qualification work contains: 69 pages, 16 figures, 3 tables,
35 references, 3 appendices.
Actuality of theme. In the modern world of computer games, there is a significant
increase in the number of players who are looking for partners to play together. The
design of the partner search service will make this process fast, efficient, convenient, and
aesthetically attractive.
The purpose of the work is to create a UX/UI design of a Web service for finding
partners for computer games, which will simplify the process of forming teams and
increase the quality and enjoyment of the game.
Chapter 1: Statement of the problem. Overview of existing solutions, analogues:
This section is devoted to the definition of the object and subject of research and a detailed
analysis of competitive services.
Chapter 2: Statement of Terms: This section describes the requirements for
functionality, design, prototype, and product quality criteria.
Chapter 3: System Development: The chapter is devoted to the development of
the user interface, including the principles of UX/UI design, prototyping and testing in
order to ensure the convenience and intuitiveness of using the service.
The object of research: the process of designing a web service for finding partners
for computer games.
Research subject: UX/UI design and functionality of a web service for finding
partners for computer games.
Research methods: the work used competitive analysis, surveys, creation and
testing of prototypes, analysis of user data.
Keywords: design, UX, UI, user, web service.

ЗМІСТ

ВСТУП ............................................................................................................................. 3
РОЗДІЛ 1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА ЗАДАЧІ .. 7
1.1 Аналіз предметної області .................................................................................. 7
1.2 Огляд аналогів ...................................................................................................... 8
1.3 Порівняння аналогів ......................................................................................... 18
1.4 Постановка задачі .............................................................................................. 20
Висновок до розділу 1 .............................................................................................. 21
РОЗДІЛ 2 ФОРМУВАННЯ ВИМОГ ТА ПРОЕКУВАННЯ WEB-СЕРВІСУ . 22
2.1 Опис розроблюваного веб-сервісу .................................................................. 22
2.2 Вимоги до проекту ............................................................................................. 24
2.3 Структура WEB-сервісу .................................................................................... 32
2.4 Критерії якості .................................................................................................... 33
Висновки до розділу 2 .............................................................................................. 34
РОЗДІЛ 3 РОЗРОБКА UX/UI ДИЗАЙНУ WEB-СЕРВІСУ ................................ 35
3.1 Засоби реалізації ................................................................................................. 35
3.2 Реалізація ............................................................................................................. 37
3.3 Тестування ........................................................................................................... 58
3.4 Порівняння з аналогами ................................................................................... 63
Висновки до розділу 3 .............................................................................................. 67
ВИСНОВКИ ................................................................................................................. 68
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ................................................................ 70
ДОДАТОК А. Специфікація………….……………………………………...……..72
ДОДАТОК
ДОДАТОК

ЧДТУ 242011.001.ПЗ
Зм. Лист № докумемента Підпис Дата

Розроб. Анікін І.А. Літ. Лист Листів
Перев. Рудницька Ю.В UX/UI дизайн Web-сервісу по пошуку Н 2 69
Реценз. . Мельн ик Р.П. партнерів для комп 'ютерних ігор
ФІТІС ,

Н.контр . Рудницька Ю.В

Пояснювальна записка
Затв. ПрокопенкоТ.О. кафедра ІТП, WEB-2011

`

ВСТУП

Актуальність
У сучасному світі комп'ютерних ігор спостерігається значне зростання
кількості гравців, які шукають партнерів для спільної гри. Розвиток
багатокористувацьких онлайн-ігор створив потребу в платформах, що
допомагають знайти надійних і відповідних партнерів. Випускна робота бакалавра
спрямована на створення дизайну сервісу для пошуку партнерів для комп'ютерних
ігор, є надзвичайно актуальною, оскільки вона вирішує проблему пошуку
однодумців, підвищуючи якість і задоволення від гри.
Однією з ключових причин актуальності даної роботи є зростаюча
популярність кіберспорту та онлайн-спільнот згаданих у роботах [1-2]. Гравці все
частіше об'єднуються в команди для участі в змаганнях і турнірах, де важливу роль
відіграє злагодженість і взаєморозуміння між партнерами. Дана робота пропонує
інноваційні алгоритми підбору партнерів, що базуються на інтересах, рівні
майстерності та інших важливих параметрах, що значно полегшує процес пошуку
та підвищує ефективність командної гри.
Крім того, в умовах пандемії COVID-19 багато людей проводили більше часу
вдома, шукаючи нові способи розваг і соціалізації. Онлайн-ігри стали одним з
основних способів комунікації та проведення вільного часу. І навіть після
закінчення пандемії більшість людей продовжують і далі цікавитися
комп'ютерними іграми, не зважаючи як вони працюють онлайн чи офлайн. Це
робить цільову роботу особливо важливою у контексті сучасних соціальних змін.
Забезпечення зручного та ефективного пошуку партнерів для гри сприятиме не
лише підвищенню якості геймінгу, але й розвитку соціальних зв'язків серед гравців.
Нарешті, індустрія відеоігор є однією з найбільш швидкозростаючих галузей,
деталі якої можна побачити у роботі [3], і попит на високоякісні сервіси для
геймерів постійно зростає. Випускна робота бакалавра має потенціал задовольнити
цей попит, запропонувавши користувачам інтуїтивно зрозумілий, зручний і

Лис т
ЧДТУ 242011.001 ПЗ
3
Зм Арк. № докум. Пiдпис. Дата
нт
`

надійний інструмент для пошуку партнерів, що, своєю чергою, сприятиме
подальшому розвитку індустрії та підвищенню якості користувацького досвіду.
Мета та задачі
Метою випускної роботи бакалавра є створення UX/UI дизайну Веб-сервісу
по пошуку партнерів для комп'ютерних ігор, який спростить процес формування
команд і підвищить якість і задоволення від гри.
Для досягнення поставленої мети треба виконати наступні задачі:
 провести огляд аналогів;
 провести аналіз розглянутих аналогів;
 провести опис вимог до проекту
 обрати засоби реалізації
 визначити цільову аудиторію
 реалізувати представлення Jobs to be dome
 реалізувати користувацький шлях (User flow)
 реалізувати таблицю Customer Journey Map
 розробити wireframes
 реалізувати дизайн по wireframes
 розробити клікабельні прототипи
 провести тестування (опитування)
 провести порівняння реалізованого UX/UI з аналогами

Об’єкт.
Об'єктом роботи є процес розробки дизайну веб-сервісу по пошуку партнерів
для комп'ютерних ігор, що надає користувачам можливість знаходити однодумців
для спільної гри на основі їхніх інтересів, рівня майстерності та інших важливих
параметрів.
Предмет дослідження.
Предметом роботи є UX/UI дизайн та функціональні можливості онлайн-
сервісу для пошуку партнерів для комп'ютерних ігор, включаючи розробку
Лис т
ЧДТУ 242011.001 ПЗ
4
Зм Арк. № докум. Пiдпис. Дата
нт
`

користувацького інтерфейсу, алгоритму підбору партнерів, а також інтеграцію
соціальних функцій для забезпечення ефективної взаємодії та комунікації між
користувачами.
Методи дослідження.
У процесі роботи над проектом використовуються такі методи дослідження:
Аналіз літератури та ринкових досліджень: Вивчення наукових статей, книг,
звітів та інших джерел інформації для розуміння сучасних тенденцій у сфері
онлайн-ігор і потреб гравців.
Конкурентний аналіз: Порівняння існуючих сервісів для пошуку партнерів
для комп'ютерних ігор, визначення їхніх сильних і слабких сторін, аналіз
функціональності, дизайну та користувацького досвіду.
Опитування та інтерв'ю: Проведення опитувань та інтерв'ю з потенційними
користувачами для збору даних про їхні потреби, очікування та проблеми, з якими
вони стикаються під час пошуку партнерів для гри.
Створення та тестування прототипів: Розробка та тестування інтерактивних
прототипів сервісу для оцінки зручності користування, виявлення недоліків та
збору зворотного зв'язку від користувачів.
Аналіз користувацьких даних: Збір та аналіз даних про поведінку
користувачів на платформі для вдосконалення алгоритму підбору партнерів та
покращення користувацького досвіду.
Ці методи дозволяють отримати комплексне розуміння потреб користувачів
та забезпечити розробку ефективного, зручного та конкурентоспроможного сервісу
для пошуку партнерів для комп'ютерних ігор.
Практичне значення.
Практичне значення даної кваліфікаційної роботи бакалавра полягає у
створенні ефективного дизайн рішення веб-сервісу по пошуку партнерів для
комп'ютерних ігор, який може бути застосований у різних галузях, пов'язаних з
ігровою індустрією та кіберспортом. Зокрема, сервіс може бути використаний
кіберспортивними організаціями для формування команд, ігровими платформами

Лис т
ЧДТУ 242011.001 ПЗ
5
Зм Арк. № докум. Пiдпис. Дата
нт
`

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

Лис т
ЧДТУ 242011.001 ПЗ
6
Зм Арк. № докум. Пiдпис. Дата
нт
`

РОЗДІЛ 1
АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА ЗАДАЧІ

1.1 Аналіз предметної області

Веб-сервіс, який надає можливість знаходження партнерів для гри. Веб-
сервіс спрямований на користувачів, які шукають ігрових партнерів з метою
покращення свого ігрового досвіду. Такий сервіс може забезпечити зручний
інтерфейс для взаємодії користувачів та функціонал для ефективного пошуку
партнерів.
Хоча послуги даного виду вже давно існували, але за статистикою, після
початку карантинів кількість попиту на ігри зросла на 52.9% для цифрових (ПК),
82% для фізичних носіїв, та на 155% для консолей, за наданою відкритою
статистикою ігрових платформ таких як: Steam, EpicGames, Xbox, Nintendo,
Playstation та Ubisoft у джерелах [4-9], а також кількість одночасних користувачів
у мережі зросла на 23.6 мільйони, що разом сприяло швидшій розробці та підтримці
ігор та зміцненню ігрової спільноти, що зумовило легким пошуком партнерів через
надмірну кількість гравців.
Але після закінчення карантинів онлайн користувачів різко зменшився, після
чого і виникла різка потреба у пошуку партнерів для гри з метою покращення свого
ігрового досвіду.
Сутність роботи: UX/UI дизайн веб-сервісу. UX (від англ. User Experience) та
UI (від англ. User Interface) дизайн визначають взаємодію користувача з веб-
сервісом та його зовнішній вигляд відповідно, який розглядається в роботі [10].
Дана роботи охоплює аналіз і покращення елементів інтерфейсу, які впливають на
зручність використання сервісу, а також на естетичний баланс та привабливість
дизайну для користувача.

Лист
ЧДТУ 242011.001 ПЗ
7
Зм Арк. № докум. Пiдпис. Дата
нт
`

1.2 Огляд аналогів

Було підібрано 3 найбільш схожих за тематикою та функціоналом аналоги
продукту: TEAMS.gg, Tapin, Dachi.lol.
Головними критеріями для оцінка та аналізу є:
1)Потреби користувачів: Важливо врахувати потреби цільової аудиторії, яка
шукає партнерів для гри. UX/UI дизайн повинен відповідати їх очікуванням і
сприяти комфортній взаємодії з сервісом.
2)Функціональність: Веб-сервіс повинен мати широкий функціонал для
ефективного пошуку партнерів, обміну інформацією та спілкування між
користувачами.
3)Візуальний дизайн: UI дизайн має бути привабливим та зрозумілим для
користувачів. Він повинен використовувати зручні кольорові схеми, чіткі та легко
читабельні шрифти, а також привертати увагу до ключових елементів.
4)Простота використання: UX дизайн повинен забезпечити легкість навігації
та зрозумілість усіх функцій сервісу. Важливо, щоб користувачі могли швидко
зрозуміти, як використовувати веб-сервіс без додаткових питань або непорозумінь.
5)Монетизація ігрового часу: Важливо розглянути механізми монетизації, які
не лише дозволять сервісу заробляти, але й не заважатимуть користувачам
насолоджуватися грою та пошуком партнерів.
TEAMS.gg
TEAMS.gg - сервіс безкоштовного пошуку партнерів для ігор

Рисунок 1.1 Головна сторінка сервісу TEAMS.gg

Лист
ЧДТУ 242011.001 ПЗ
8
Зм Арк. № докум. Пiдпис. Дата
нт
`

Використані темі сірі кольори разом з різнобарвними неоновими
градієнтами, являються стандартними асоціаціями що пов'язані з іграми та
геймінгом. Доведено, що кольори впливають на нервову систему людини. Кольори
з більшою довжиною хвилі мають більш стимулюючий ефект (чим довша довжина
хвилі, тим тепліший колір). З іншого боку, холодні кольори, такі як синій і білий,
діють заспокійливо. На стимуляцію впливають не тільки окремі кольори, а і їх
поєднання, що детально описано у роботі [11]. Простіше кажучи, контрастні
поєднання кольорів стимулюють, а градієнти заспокоюють. З цих, здавалося б,
простих властивостей існує ряд впливів кольору на нашу поведінку. Тому
використання найчастіше як і у дизайні так і у ігрових пристроях використовують
неонову підсвітку, здебільшого синім та зеленим кольором, що в свою чергу і
стимулює і зосереджує ,а також підвищує видимість об'єктів в темноті (стереотип
що грають по ночах).
Всі інтерактивні елементи змінюють свій стан при наведенні, даючи
зрозуміти що з ними можна працювати. Також посилаючись на дослідження
психології людини [12], наявність відмінностей предметів та речей які несуть
різний функціонал робить продукт більш зрозумілим та інтуїтивним, в свою чергу
відсутність цього збентежує користувача, що призводить до швидкого покидання
продукту.
Всі елементи виконані в одному дизайні з однаковими періодичними
інтервалами. Теж само що і з змінюваними елементами - якщо елементи виконані
в одній тематиці, це заспокоює, продукт виглядає цілісним і більш інтуїтивним, а
відсутність одного стилю - призводить до відчуття хаосу, і кожний стиль приверта
додаткову увагу до себе замість головних елементів продукту, що призводить до
неясності роботи з продуктом і його покидання.
Є візуалізація статистичних даних. Людина сприймає інформацію краще
завдяки візуальним елементам, таблицям, графікам, зображенням.
Прикріплена до верху (фіксована) навігаційна панель, що використовується
коли у вас є звичайні дії користувача, до яких користувач бажає мати доступ у будь-
який час.

Лист
ЧДТУ 242011.001 ПЗ
9
Зм Арк. № докум. Пiдпис. Дата
нт
`

Фіксовані верхні панелі також служать для включення веб-додатку.
Фіксований елемент створює відчуття, що вміст, який ви переглядаєте, знаходиться
в межах цієї програми. Він також забезпечує міцну основу, яка діє як центр для
використання програми.
Коли користувачі читають прокручуваний вміст, наприклад стрічку чи
статтю, легко побачити тунель і ігнорувати навігацію. Коли вони закінчують
споживати вміст або виходять із цього тунелю, це може бути розчаруванням або
дезорієнтацією, коли вони більше не мають доступу до основних дій на сайті, тому
що ви читали або заглиблені в вміст. По суті, наявність фіксованої панелі дозволяє
користувачеві переходити до верхньої частини екрана, використовуючи панель як
віртуальну ціль замість окремих дій. Це використовує подібну логіку щодо того,
чому док-бари працюють добре.
Є декілька способів для реєстрації та авторизації, а також можливість як гість
переглядати інші анкети. У випадку з аутентифікацією більший вибір - краще, тому
що користувач може використати спосіб який йому зручний, більш підходить або
якому він довіряє.
Є розширений пошук, який зберігає історію пошуку а також фільтрація та
сортування з великою кількістю опцій. Фільтрування допомагає звузити великий
список елементів на основі конкретних критеріїв. Наприклад, на веб-сайті
електронної комерції користувач може захотіти відфільтрувати товари за розміром,
кольором, ціною чи брендом, щоб полегшити пошук того, що він шукає. Без
фільтрування користувачеві довелося б вручну шукати весь список, що зайняло б
багато часу та розчарування, що призведе до відтоку користувачів, тому вдало
спроектовані фільтри відіграють важливу роль на сайтах та сервісах які мають
великий асортимент товари чи послуг.
Компактне, структуроване та зрозуміле представлення ключової інформації
користувацьких ігрових профілів. Коли людина має справу з великим обсягом
інформації, дуже важливим являється її структуризація та виділення головної
інформації (як наприклад опис найбільш цікавої інформації не відкриваючи
детального профілю користувача).

Лист
ЧДТУ 242011.001 ПЗ
10
Зм Арк. № докум. Пiдпис. Дата
нт
`

У сервісу є свої соціальні мережі та мобільний додаток. Наявність додаткових
засобів для відстеження актуальних новин продукту та його команди розробників,
особливо у соціальних мережах, якими зараз користуються більшість у
повсякденному житті - додатково привертає увагу нових користувачів, а також
залучає і утримує основних.
Детально пропрацьовано профілі під кожну гру окремо, з най релевантною
інформацією для гри. Завдяки такому рішенню користувачі можуть бачити
особливі характеристики профілю як: кількість годин, рейтинги, репутація та інше,
що надає змогу обирати гравців які за своїми навичками та стилем гри підходять
один одному.
Безкоштовні послуги. Одним з найважливіших моментів любого сайту чи
сервісу являється його монетизація. Більшість користувачів не хочуть розлучатися
зі своїми грошима ,тому платні послуги такого роду можуть відштовхувати велику
кількість потенційних користувачів.
Із мінусів можна виділити такі аспекти як:
Постійні спливаючі реклами. За статистикою більшість людей дратуються
від спливаючих вікон. Воно не тільки змушує користувача швидше покинути
сторінку, але й змушує його пообіцяти більше ніколи не заходити на цей
конкретний веб-сайт. Такі спливаючі вікна були причиною того, що браузери
включили блокувальники спливаючих вікон, щоб користувач не тільки покидали
сайт а й вимикали браузери. Гарна новина полягає в тому, що ця мода спливаючих
оголошень уже вимирає і ви не побачите їх часто.
Довгий та складний спосіб заповнення ігрового профілю - потрібно
відповісти більш ніж на 30 запитань. Хоч це і було зроблено для того щоб більш
детально відображати профілі, але за статистикою користувачі спокійно
відповідають лише до 15 запитань, а після цього починають поступово виходити з
сайту або сервісу навіть якщо відповіді не збережуться.
Головна сторінка перенавантажена різноманітним смисловим контентом.
Інформаційне перевантаження описує надлишок інформації, доступної людині для
виконання завдання або прийняття рішення. Це перешкоджає процесу прийняття

Лис т
ЧДТУ 242011.001 ПЗ
11
Зм Арк. № докум. Пiдпис. Дата
нт
`

рішень, що призводить до прийняття неправильного (або навіть жодного) рішення.
Розробляючи продукти (наприклад, веб-сайти чи програми), дизайнери повинні
бути особливо обережними, щоб запобігти перевантаженню інформацією, яка
впливає на роботу користувачів.
Відсутня будь яка система комунікації, як текстова так і голосова.
У сайтах та сервісах такого типу як продукт даної теми комунікація являється
однією з ключових особливостей, комунікація може допомогти зрозуміти чи варто
починати грати з особою чи ні, а також це служить зв'язком для домовленості щодо
гри та часу. А у випадку з сервісом який розглядається, єдиний спосіб зв'язатися це
по контактним даним (якщо вони заповнені у профілі)
Відсутня функція відгуків про користувачів. Відгуки також є ключовим
аспектом продуктів що надають послуги. Приблизно 92% користувачів кажуть, що
на їхні рішення щодо замовлення послуг впливають відгуки в Інтернеті, і більшість
з них кажуть, що вони будуть робити замовлення в компанії з рейтингом принаймні
чотири зірки (Forbes) [13].
Відсутність перемикача на світлу тему. Перемикання між темним і світлим
режимами стало популярною функцією сучасних веб-додатків. Це надає
користувачам можливість вибрати тему, яка найкраще відповідає їхнім
уподобанням, а також допомагає зменшити навантаження на очі під час роботи в
умовах слабкого освітлення. Але в більшості випадках такий функціонал доречним
лише коли основний дизайн є світлим.

Tapin
Tapin - сервіс пошуку партнерів для ігор
Як і в TEAMS.gg кольорове оформлення складається з темного фону та
неонової підсвітки (зеленої), по тим же причинам.
Майже все показано на 1 сторінці. Одно-сторінковий дизайн дозволяє
користувачам переглядати весь веб-сайт, просто прокручуючи його. Ця функція
корисна для мобільних користувачів, де основна навігація зазвичай прихована,
також такі продукти легше розробляти, оскільки дизайнерам не потрібно

Лис т
ЧДТУ 242011.001 ПЗ
12
Зм Арк. № докум. Пiдпис. Дата
нт
`

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

Рисунок 1.2 Головна сторінка сервісу Tapin

Одно-сторінкові веб-сайти чудово підходять для того, щоб спонукати
користувачів виконати певну дію, як-от зв’язатися з компанією, підписатися на
розсилку, придбати продукт/послуги тощо. А єдина точка входу (домашня
сторінка) дозволяє дизайнерам і маркетологам контролювати взаємодію з
користувачем і представляти послідовну розповідь відвідувачам.
Більшість елементів проанімовано. Анімація інтерфейсу користувача
виконує дві основні цілі: функціональну та декоративну: Функціональні анімації
ведуть користувача під час вашої подорожі на сайті. Вони повідомляють про зміни,
допомагають орієнтуватися та роблять інтерфейс більш інтерактивним.
Декоративні анімації допомагають створити настрій і тон сайту, розповісти історію
або підсилити бренд.
Майже всі інтерактивні елементи змінюють свій стан при наведенні. Як і у
TEAM.gg зміна станів елементів робить продукт більш зрозумілим та інтуїтивним,
що в цілому покращує досвід користувача і час його перебування на сайті.

Лис т
ЧДТУ 242011.001 ПЗ
13
Зм Арк. № докум. Пiдпис. Дата
нт
`

Присутній блок FAQ - він діє як буфер для команди підтримки клієнтів,
фільтруючи та відповідаючи на повторювані запитання клієнтів, дозволяючи
команді зосередитися на усуненні більш складних проблем. Безпосередньо
вирішуючи ці питання клієнтів, компанії економлять час і демонструють глибоке
розуміння своїх клієнтів, у свою чергу зміцнюючи довіру. Більшість клієнтів
віддають перевагу проактивній підтримці клієнтів, що призводить до зростання
позитивних настроїв щодо компанії. Замість того, щоб відповідати на поширені
запитання, ваш відділ продажів може зосередити свою увагу на залученні
потенційних клієнтів і допомозі клієнтам після продажу.
Присутні відгуки. Як і було сказано до цього 92% користувачів частіше
замовляють якщо є відгуки.
Не фіксована верхня навігація. Приховавши верхню панель і док-станцію,
користувач отримаєте безліч переваг, як-от більше простору на екрані, зменшення
візуального безладу, покращення взаємодії з користувачем тощо. Це також додає
нотку елегантності робочому столу. Автоматичне приховування верхньої панелі та
док-станції може дати користувачу робочий простір без відволікання, і це
максимізує його робочу область, особливо якщо у них менший екран.
Відразу видно реальні (актуальні) ціни. Коли клієнт потрапляє на сторінку
яка говорить що на ній повинні бути ціни, то їх потрібно додати на сторінку з
цінами, ми можемо припустити, що він шукає ціну на продукт, який найкраще
відповідає його потребам. Можливо, вони просто вивчають, що пропонує сайт, або
порівнюють продукт із пропозиціями конкурентів. У будь-якому випадку потрібно
надати користувачам акуратно упакований набір функцій і конкурентоспроможну
ціну на ці функції, бо коли користувач не може відразу побачити ціни які він шукає,
в таких випадках вони покидають сайт відразу.
Система ачівок на платформі. Досягнення покращують продуктивність,
мотивацію щодо наполегливості, але не самозвітів. Досягнення ефективніші, якщо
їх розроблено з високою складністю та малою кількістю. За механізмом роботи
нагадують класичне цілепокладання, також з часом покращують ефективність
більше, ніж постановка цілей. І в цілому за проведеними багатьма дослідженнями

Лис т
ЧДТУ 242011.001 ПЗ
14
Зм Арк. № докум. Пiдпис. Дата
нт
`

геймсіфікація (додавання ігрових елементів у життя), у будь якому вигляді
допомагає сприймати речі легше, більш розважально, але при цьому не втрачати
ефективності роботи.
Присутня система заохочень (скидки, промокоди, акції). Коли сайт-магазин
випускає промо-коди, вони спонукають клієнтів купувати, що приносить користь
як клієнтам, так і компанії. Клієнти отримують потрібні продукти за нижчою
ціною, а магазин-сервіс послуг приносить дохід. Однією з найкорисніших речей
промо-кодів є те, що вони добре працюють як з новими, так і з постійними
клієнтами. Ці стимули навіть безпосередньо впливають на загальний досвід
покупки та замовлень.
Є декілька способів для реєстрації та авторизації, а також можливість як гість
робити замовлення. Як і в попередньому сервісі вибір авторизації дає можливість
користувачам використовувати те що їм більш подобається, а функція замовлень
як гість взагалі допомагає користувачу не витрачати час на авторизацію.
Швидке створення профілю користувача. На відміну від TEAMS.gg швидке
створення профілю не привертає до себе багато уваги, чим допомагає зосередити
користувача на головному - замовленні послуги. А тим хто хоче кастомізувати свій
профіль - можуть зробити це в будь який час після його створення.
Із мінусів можна виділити такі аспекти як:
Блоки без заокруглень. Закруглені кути ефективні як контейнери для вмісту.
Це пояснюється тим, що викривлення закруглених кутів спрямовує увагу
всередину до центру прямокутника, підсвічуючи вміст усередині. Крім того, коли
два прямокутники розташовані поруч, легко визначити, яка сторона належить
кожному прямокутнику. А також вони полегшують відстеження ліній. На відміну
від гострих кутів, які можуть порушити хід лінії та призвести до різких пауз, коли
вона змінює напрямок, закруглені кути дозволяють погляду плавно стежити за
лінією перегляду сторінки без перерв.
Не можна вибрати гравця. Одним з най головніших аспектів даних сервісів
являється вибір особи з якою планують грати, а у випадку з даним сайтом -
компанія підбирає людину за особливостями пошуку користувача, що може

Лист
ЧДТУ 242011.001 ПЗ
15
Зм Арк. № докум. Пiдпис. Дата
нт
`

негативно вплинути на користувача через те що його залишають без головного
вибору який і повинен бути за ним.
Реклама вшита у блоки сторінки. Також на рівні з спливаючими рекламами є
ті, що знаходяться на місці інформативних блоків і дуже часто не підходять під
стилістику сайту, тим самим сильно виділяючись і приверта всю увагу користувача
до себе замість до контенту сайту. Це призводить не тільки до покидання сайту
через складність читання інформації, а й до можливих переходів по рекламі які
заберуть покупця собі (хоч за це і отримає гроші сервіс).
Спочатку оплата а потім детальна інформація. Одним з поганих прикладів
маркетингу є приховування інформації яка може бути цікавою користувачу, через
що у них з'являється відчуття тривоги (не довіри), що в свою чергу значною мірою
зменшить кількість замовлень, бо більшість користувачів не зроблять замовлення
якщо вони не впевнені що все буде так як вони хочуть.
Різний стиль елементів. Най частіше це проявляється у тому що частина
елементів заокруглені а інша ні, тим самим роблячи хаос у дизайні і відчуття
невизначеності, що передається користувачеві і напряму впливає на кількість
замовлень і час перебування на сайті.
Не рівномірні відступи між елементами. Частково можна віднести до різних
стилів елементів, але в даному випадку проблема більш серйозна, через те що коли
відступи між елементами не рівномірні та не відстежується якийсь патерн симетрії
відступів, то користувачеві стає складно зрозуміти який інформаційний блок
відноситься до іншого, що в свою чергу робить читання сторінки неможливим і
призводить до покидання сайту.

Dachi.lol
Dachi.lol - сервіс безкоштовного пошуку партнерів для гри LoL
Як і в інших представників кольорове оформлення складається з темного
фону та неонової підсвітки (фіолетової), по тим же причинам.
Все показано на 1 сторінці, те саме що й з Tapin, це зосереджує користувача
на контенті, не відволікає на перемикання між сторінками.

Лис т
ЧДТУ 242011.001 ПЗ
16
Зм Арк. № докум. Пiдпис. Дата
нт
`

Рисунок 1.3 Головна сторінка сервісу Dachi.lol

Всі елементи виконані в одному дизайні з однаковими періодичними
інтервалами. Все зроблено за стандартами як і у інших представників.
Багато “білого” простору. Пробіли допомагають відрізнити важливий вміст
на вашій сторінці від непов’язаного вмісту, коли користувач відвідує веб-сайт.
Таким чином, користувач спочатку може побачити потрібний вміст, який
зацікавить його на веб-сайті. Окрім привернення належної уваги, білий простір
також допомагають пришвидшити перетворення.
Не фіксована верхня навігація. Як і в попередньому випадку у зникаючому
верхньому меню є свої переваги, як збільшення простору і не привертання до себе
зайвої уваги.
Швидке створення профілю користувача, також щоб не зосереджувати увагу
на профілі, коли він є не одним з головних елементів.
Не звичайний інтерактив для сайтів цієї тематики (свап карток користувачів
як у додатках для знайомства). Не стандартні підходи можуть зацікавити та
привернути увагу користувача, навіть якщо рішення не повністю вдале (мінуси
якого буде розглянуті далі).
Із мінусів можна виділити такі аспекти як:
Тільки СТА елементи змінюють свій стан при наведенні. Хоч це рішення і
привертає більше уваги до СТА, але воно робить враження що вся інша частина
сторінки це статична картинка з якою неможливо взаємодіяти, що в свою чергу

Лис т
ЧДТУ 242011.001 ПЗ
17
Зм Арк. № докум. Пiдпис. Дата
нт
`

зменшую кількість функціоналу яким користується користувач та зменшую час
проводження на сайті.
Логін обов'язковий. Однією з гарних практик являється можливість
перегляду всього функціоналу сайту як гість, і просити авторизуватися лише при
необхідності, як при замовленні, відсутність цієї змоги відразу відкидає великий
пласт користувачів які не хочуть витрачати час і надавати дані сервісу про який
вони нічого майже не знають.
Авторизація лише через Google чи Discord. Дуже специфічний можливі
вибори авторизації можуть відштовхнути користувача від подальшого
використання сервісом.
Часті помилки при логіні. Це можна назвати фатальним мінусом сервісу,
особливо коли авторизація є обов'язковою. Всі користувачі, навіть ті, хто дуже
сильно хотіли скористатися послугами після 1-3 спроб авторизуватися - покинуть
сайт (можливо назавжди).
Бачиш лише 1 гравця за раз. Цей мінус якраз з'явився через особливості
перегляду гравців по типу як у додатках знайомств. Відсутність каталогу з
фільтрами і перегляд лише 1 користувача за раз сильно сповільнює вибір гравця
для гри, тим самим зменшує кількість замовлень через покидання сторінки,
витративши забагато часу у пошуку потрібної людини.
Відсутність відгуків. Як і з TEAM.gg 92% користувачів надають перевагу
замовленню послуг де можна побачити відгуки.

1.3 Порівняння аналогів

Для створення конкурентоспроможного веб-сервісу з пошуку партнерів для
комп'ютерних ігор важливо врахувати сильні та слабкі сторони існуючих
аналогічних платформ. Нижче наведена порівняльна таблиця, яка детально
аналізує різні особливості та функціональні елементи трьох популярних сервісів:
TEAMS.gg, Tapin та Dachi.lol. Цей аналіз допоможе визначити ключові напрями

Лис т
ЧДТУ 242011.001 ПЗ
18
Зм Арк. № докум. Пiдпис. Дата
нт
`

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

Таблиця 1.1 Результати аналізу аналогів
Назва Опис TEAMS.gg Tapin Dachi.lol
особливості особливості
Верхня тип фіксована зникаюча зникаюча
навігація
Каталог наявність наявний відсутній відсутній
Фільтри Наявність та Наявний, відсутній відсутній
детальність детальний
Відгуки наявність відсутні наявні відсутні
Зв'язок Комунікація відсутній наявний Наявний (не
замовника та внутрішній)
гравця
Стани Наявність наявні наявні відсутні
елементів декількох
станів
Анімація наявність відсутня наявні відсутня
Стиль Єдиний наявний відсутній наявний
стиль
Авторизація Обов’язкова, Не Не обов'язкова,
і скількома обов'язкова, обов'язкова, 2 способи
способами багато багато
способів способів
Сторінки кількість декілька 1 1
Профіль Наявність наявний наявний відсутній
профілю

Лист
ЧДТУ 242011.001 ПЗ
19
Зм Арк. № докум. Пiдпис. Дата
нт
`

Композиція Всі елементи так ні так
та їх
групування
інтуїтивно
зрозумілі
Заохочення Скидки, відсутні присутні відсутні
промо коди
Ачівки Нагороди за відсутні присутні відсутні
деяку
діяльність
Монетизація Спосіб Спливаюча Вшита Спливаюча
отримання реклами реклама та реклама
коштів кошти за
замовлення
FAQ Сторінка з відсутні присутні відсутні
відповідями
на часті
запитання
Тематика Ігрові присутня присутня присутня
асоціації

1.4 Постановка задачі

На основі результатів порівняння конкурентів TEAMS.gg, Tapin і Dachi.lol,
для нашого проекту важливо зосередитися на наданні користувачам інтуїтивно
зрозумілого інтерфейсу та широких можливостей для персоналізації. Враховуючи
сильні сторони TEAMS.gg, слід впровадити фіксовану верхню навігацію, детальні
фільтри для пошуку партнерів та єдиний стиль оформлення. Це допоможе створити
привабливий і функціональний веб-сервіс, який буде зручним у використанні та
забезпечить користувачам приємний досвід.

Лист
ЧДТУ 242011.001 ПЗ
20
Зм Арк. № докум. Пiдпис. Дата
нт
`

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

Висновок до розділу 1

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

Лист
ЧДТУ 242011.001 ПЗ
21
Зм Арк. № докум. Пiдпис. Дата
нт
`

РОЗДІЛ 2
ФОРМУВАННЯ ВИМОГ ТА ПРОЕКУВАННЯ WEB-СЕРВІСУ

Для коректної розробки ux/ui дизайну, потрібне технічне завдання з
поставленими цілями, функціоналом, і наповненням (контентом). Описи деяких
частим ТЗ відсутній через наявність жодного зв’язку з розробкою дизайну
цільового сервісу.

2.1 Опис розроблюваного веб-сервісу

Цілі веб-сервісу:
1) Створення сервісу, який дозволить гравцям знаходити інших користувачів
для спільної гри в різні комп'ютерні ігри.
2) Розробити інтерфейс, який буде простим у використанні для користувачів
будь-якого рівня досвіду.
3) Розробити функціонал, який дозволить користувачам швидко та зручно
знаходити партнерів для гри за певними критеріями, такими як гра, рівень навичок
тощо.
4) Створити середовище, в якому користувачі можуть обмінюватися
досвідом, рекомендаціями та іншою інформацією про комп'ютерні ігри.
5) Забезпечити можливість гравцям знаходити партнерів, які відповідають
їхнім вимогам та стилі гри, щоб покращити їхній досвід від гри.
6) Створити функції та інструменти, які стимулюватимуть користувачів до
активної участі на платформі та взаємодії з іншими гравцями.

Завдання, поставлені перед веб-сервісом:
1) Створення спільноти гравців, яка об'єднує людей із різних куточків світу,
які цікавляться грою у комп'ютерні ігри.

Лис т
ЧДТУ 242011.001 ПЗ
22
Зм Арк. № докум. Пiдпис. Дата
нт
`

2) Надання можливості гравцям знаходити партнерів для спільної гри в різні
ігри.
3) Стати сервісом - центром інформації про різноманітні турніри, змагання, а
також інші події, пов'язані з комп'ютерними іграми.
4) Підтримка соціальних зв'язків між гравцями, створення можливостей для
спілкування, дружби та співпраці в грі.
5) Створення освітніх ресурсів, таких як відеоуроки, блоги, підручники, щоб
допомогти гравцям покращити свої навички в грі.
6) Надавати можливість гравцям спостерігати, організовувати онлайн-
турніри, а також брати участь, як поодиноко, так і командою.

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

Цілі аудиторії
Розглядаючи потенційні потреби користувачів, спочатку потрібно дізнатися
їх потреби, рекомендації до яких можна розглянути у роботах [14-15]. Для цього
цільову аудиторію розсортуємо на декілька надперсон які створення яких описано
у роботі [16], та представлені далі:
1) Гравці-любителі:
 Включають у себе людей різного віку та досвіду в геймінгу.
 Шукають партнерів для спільної гри в онлайн-ігри.
 Можуть бути зацікавлені в нових друзях або співробітниках для
покращення своєї гри.

Лис т
ЧДТУ 242011.001 ПЗ
23
Зм Арк. № докум. Пiдпис. Дата
нт
`

2) Професійні гравці:
 Гравці, які беруть участь в турнірах і змаганнях з комп'ютерних ігор.
 Шукають партнерів для тренувань, команди для участі в турнірах, а
також можливих спонсорів або партнерів для спільного виступу.
3) Стрімери та контент-творці:
 Люди, які створюють контент з комп'ютерних ігор для стрімінгових
платформ, таких як Twitch, YouTube тощо.
 Шукають співробітників для спільних проектів, наприклад, спільних
стрімів або відеороликів.
4) Фанати геймінгу та колекціонери:
 Люди, які цікавляться геймінгом не лише як активні гравці, але і як
колекціонери або ентузіасти.
 Шукають можливостей для обміну досвідом, покупки або продажу
рідкісних ігрових предметів.
5) Представники ігрової індустрії:
 Представники виробників ігрового обладнання, студій розробників,
маркетологи тощо.
 Шукають партнерів для співпраці у рекламній або партнерській
програмі, а також можливих інвесторів або клієнтів.
6) Геймери - працівники:
 Люди, що заробляють тим що грають в ігри.
 Шукають зручну, надійну платформу для представлення своїх послуг.

2.2 Вимоги до проекту

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

Лис т
ЧДТУ 242011.001 ПЗ
24
Зм Арк. № докум. Пiдпис. Дата
нт
`

1) Створення профілю користувача:
 Опис: Користувачі можуть створювати свій профіль на платформі, де
вони зможуть вказати інформацію про себе та свої ігрові вподобання.
 Вхідні дані: особисті дані (ім'я, прізвище, електронна пошта тощо),
інформація про ігрові вподобання (жанри, платформи, години гри
тощо).
 Вихідні дані: створений профіль користувача.
2) Пошук партнерів для гри:
 Опис: Користувачі можуть здійснювати пошук інших користувачів для
спільної гри відповідно до їхніх ігрових вподобань та параметрів
пошуку.
 Вхідні дані: критерії пошуку (жанр гри, платформа, час гри, регіон,
тощо).
 Вихідні дані: список потенційних партнерів для гри.
3) Обмін повідомленнями:
 Опис: Користувачі можуть спілкуватися та домовлятися про деталі гри
через внутрішню систему обміну повідомленнями.
 Вхідні дані: текстове повідомлення, отримане від іншого користувача.
 Вихідні дані: відповідь користувача та інші повідомлення.
4) Оцінка та відгуки:
 Опис: Користувачі можуть залишати відгуки та оцінки про інших
користувачів після гри.
 Вхідні дані: текст відгуку та оцінка користувача.
 Вихідні дані: відгук та оцінка, опубліковані на профілі користувача.

Вимоги до дизайну web-ресурсу
Дизайн вебресурсу грає ключову роль у привертанні користувачів і
забезпеченні зручного використання платформи. Далі представлені вимоги до
дизайну цільового вебсервісу:

Лис т
ЧДТУ 242011.001 ПЗ
25
Зм Арк. № докум. Пiдпис. Дата
нт
`

Колірна гама: Кольори є невід’ємною частиною дизайну, а саме UI, тому
дизайнери приділяють багато часу підбору кольорів які ідеально покажуть суть
продукту. Опираючись на роботи [11; 18-19] - колірна палітра, повинна
відображати енергійну і гравітаційну атмосферу, типову для ігрової тематики, якій
притаманна темна тема з 1-2 основними яскравими кольорами. Яскраві, насичені
кольори можуть бути використані для привернення уваги, в помірних обсягах.
Шрифти: Вибір шрифтів також відіграє ключову роль у дизайні. З робіт [20-
22], в яких описується важливість та особливості вибору шрифтів були зіставлені
критерії для даного проекту - чіткі, легко читані шрифти для основного тексту,
заголовків і кнопок. Шрифти, які відображають технологічний характер ігор,
можуть доповнити стиль даного дизайну.
Принцип композиції: Із робіт [10; 23-24] було виділено головні
аспекти підходящі для даного проекту - легкий інтерфейс, який дозволить
користувачам легко зорієнтуватися та швидко знаходити потрібну інформацію.
Чітке розмежування контенту по специфікації представленої інформації,
використання чітких розділів, кнопок та меню для організації контенту.
Графіка й ілюстрації: Використання графіки та ілюстрацій, які відображають
тематику комп'ютерних ігор і сприяють імерсії користувачів. Анімація може бути
використана для покращення відчуття динаміки та привабливості. Для визначення
вимог за основу були взяті рекомендації з роботи [25].
Використання іконок: Використання іконок, для швидко передавати
інформації та полегшення навігації користувачам. Іконки повинні бути чіткими та
зрозумілими. Вибір яких брався за основу з принципів описаних у роботах [24; 26-
27], та відредагований під цільовий проект.
Простота інтерфейсу: Слід уникати перевантаження інформацією та
складних макетів. Простий та зрозумілий інтерфейс дозволить користувачам

Лис т
ЧДТУ 242011.001 ПЗ
26
Зм Арк. № докум. Пiдпис. Дата
нт
`

швидко зорієнтуватися на сайті. Для вимог за основу взяті роботи [10; 28-29] та
підлаштовані під даний проект.

Вимоги до UX/UI дизайну
UX та UI частини дизайну являються ключовими елементами в даному
проекті, вимоги до яких можуть переплітатися між собою та вимогами до web та
прототипу, але мають деталі на яких буде акцентуватися увага при реалізації
роботи.
Вимоги до UX
Інтуїтивний інтерфейс:
 Простий та зрозумілий інтерфейс, що дозволяє користувачам легко
знаходити потрібні функції та ресурси.
 Чітка навігація, що допомагає користувачам швидко переходити між
різними розділами та функціями сервісу.
Персоналізація:
 Можливість персоналізації профілю користувача з метою знаходження
ідеальних партнерів для гри відповідно до їхніх уподобань та навичок.
 Рекомендації партнерів на основі історії гри та інших параметрів.
Спрощений пошук:
 Фільтри та параметри пошуку, що дозволяють користувачам швидко
знаходити партнерів за такими критеріями, як тип гри, рівень навичок,
час гри тощо.
 Можливість створення оголошень або відповідь на існуючі
оголошення для пошуку партнерів.
Спілкування та взаємодія:
 Вбудовані засоби спілкування, такі як чат або система повідомлень, що
дозволяють користувачам зв'язуватися з потенційними партнерами.

Лист
ЧДТУ 242011.001 ПЗ
27
Зм Арк. № докум. Пiдпис. Дата
нт
`

 Можливість оцінювати і коментувати партнерів після гри для
підвищення довіри та вибору найкращих партнерів.

Тестування та зворотній зв'язок:
 Проведення тестування з реальними користувачами для виявлення
потенційних проблем та отримання зворотного зв'язку з метою
постійного вдосконалення користувацького досвіду.

Вимоги до UI
Мінімалізм та простота:
 Чистий та мінімалістичний дизайн, що спрощує сприйняття інформації
та навігацію користувачів.
 Використання простих форм, плоских елементів та мінімального
кількості декоративних ефектів для збереження чистоти дизайну.
Інтуїтивність:
 Зрозумілі та легко впізнавані іконки та символи для швидкого
розуміння функціоналу інтерфейсу.
 Інтуїтивний розміщення елементів інтерфейсу, що відповідає
загальному використанню та очікуванням користувачів.
Колірна схема:
 Використання приємних та збалансованих кольорів, які не
перевантажують користувачів та допомагають зору.
 Кольори, що підсилюють контрастність та роблять ключові елементи
інтерфейсу видимими та легко розпізнаваними.
Інтерактивність:

Лист
ЧДТУ 242011.001 ПЗ
28
Зм Арк. № докум. Пiдпис. Дата
нт
`

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

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

Вимоги до контенту
Головна сторінка:
 Новини, івенти, популярні події.
 Короткий огляд популярних людей.
 Можливість швидкого пошуку партнерів по іграм.
Сторінка профілю користувача:
 Інформація про користувача: ім'я, вік, місце проживання, інтереси
тощо.
 Список ігрових вподобань та активності користувача.
 Можливість редагування профілю та завантаження фотографій.
Сторінка пошуку партнерів:
 Фільтри для точного вибору партнерів за різними критеріями: жанр
гри, платформа, час гри тощо.
 Список потенційних партнерів з можливістю перегляду їхніх профілів.
Сторінка повідомлень:
 Список всіх повідомлень та діалогів користувача.
Лис т
ЧДТУ 242011.001 ПЗ
29
Зм Арк. № докум. Пiдпис. Дата
нт
`

 Можливість надсилання та отримання повідомлень від інших
користувачів.
Сторінка оцінок та відгуків:
 Огляд оцінок та відгуків, залишених користувачами після спільних
ігор.
 Можливість залишити відгук та оцінку іншим користувачам.

Сторінка налаштувань:
 Можливість змінити особисті дані, налаштування безпеки, сповіщень
та інші параметри облікового запису.
Сторінка замовлення послуг:
 Можливість обрати, змінити, подарувати послугу по грі.

Вимоги до прототипу
Формулювання вимоги до прототипу розроблюваної системи є важливим
етапом перед початком самого процесу розробки, особливості створення якого
детально описано у роботах [30-31]. Прототип допомагає зрозуміти функціонал та
інтерфейс вебсервісу перед тим, як витрачати час і ресурси на повноцінний
розвиток. Далі представлені ключових вимог до прототипу даного сервісу:
Функціональність: Прототип повинен відображати основний функціонал
вебсервісу, включаючи можливість реєстрації користувачів, пошуку партнерів для
ігор, перегляду профілів користувачів.
Інтерфейс та взаємодія користувача: Прототип повинен мати простий та
зрозумілий інтерфейс, що дозволяє користувачам легко знаходити необхідну
інформацію та взаємодіяти з системою без перешкод.
Макет сторінок: Прототип повинен містити макети сторінок веб-сервісу,
включаючи головну сторінку, сторінку пошуку партнерів, сторінку профілю
користувача, сторінку ігор.

Лист
ЧДТУ 242011.001 ПЗ
30
Зм Арк. № докум. Пiдпис. Дата
нт
`

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

Вимоги до структури та шаблону
Основні сторінки: домашня сторінка, сторінка пошуку партнерів, сторінка
профілю користувача, сторінка входу/реєстрації, та інші відповідно до
функціональності системи.
Ієрархія сторінок: забезпечення логічної структури, де кожна сторінка має
своє місце та роль у системі.
Навігаційна панель: Підтримка навігаційної панелі, яка дозволяє
користувачам швидко переміщатися між різними сторінками системи. Зручність та
зрозумілість навігаційних елементів для забезпечення швидкого доступу до
потрібної інформації.
Форми та елементи введення даних: Використання зручних та зрозумілих
форм для введення даних, таких як поля вводу, вибір зі списку, кнопки тощо.
Шаблони вмісту: Створення однорідних шаблонів вмісту для кожної
сторінки системи, що забезпечить єдність в дизайні та полегшить сприйняття
інформації користувачами.
Графічний дизайн: Використання зграбних та сучасних графічних елементів,
які підкреслюють бренд системи та забезпечують приємний вигляд інтерфейсу.
Адміністративний інтерфейс: Розробка зручного та функціонального
адміністративного інтерфейсу для управління контентом та користувачами
системи.

Лис т
ЧДТУ 242011.001 ПЗ
31
Зм Арк. № докум. Пiдпис. Дата
нт
`

2.3 Структура WEB-сервісу

Логічна структура сервісу
Головна сторінка (Home Page):
 Можливість швидкого пошуку партнерів та ігор по категоріях.
 Важливі оголошення, новини або події.
Сторінка Реєстрації та Входу (Registration/Login Page):
 Форми для реєстрації нового облікового запису або входу для існуючих
користувачів.
 Можливість увійти за допомогою соціальних мереж.
 Можливість відновити аккаунт.
Профіль користувача (User Profile):
 Інформація про користувача, така як нікнейм, ігри, статистика ігор,
досягнення, подарунки, мови, стать, послуги (якщо надає).
 Можливість редагувати профіль та налаштування.
Сторінка Пошуку Партнерів (Partner Search Page):
 Фільтри для пошуку партнерів за різними критеріями, такими як гра,
рівень, час гри, рейтинг, регіон, мова спілкування тощо.
 Результати пошуку зі списком користувачів, які відповідають
вибраним критеріям.
Форум або Спільнота (Forum/Community Page - Discord):
 Місце для обговорення ігор, обміну досвідом та пошуку нових
партнерів.
 Категорії для різних тем та ігор.
Сторінка оплати (Pay Page):
 Інформація про всі послуги, акції, знижки.
 Можливість заказати/оплатити послуги для себе або друга.

Навігація

Лис т
ЧДТУ 242011.001 ПЗ
32
Зм Арк. № докум. Пiдпис. Дата
нт
`

Навігація грає важливу роль у забезпеченні зручного використання веб-
сервісу. Далі представлені типи та форми навігаційного меню, а також типи
переходів між сторінками для даного веб-сервісу:
Вертикальне меню:
 Розташоване праворуч на сторінці.
 Міститиме швидкий доступ для листування з гравцями.
 Горизонтальне меню:
 Розташоване верхній частині сторінки.
 Містити основні розділи та категорії.
 Переходи між сторінками відбуваються шляхом кліку на відповідний
пункт меню.
Пошукове поле:
 Розташоване у верхній частині сторінки в горизонтальному меню.
 Дозволяє користувачам швидко знаходити інформацію та переходити
до певної сторінки за ключовими словами.
Кнопки дії (Call-to-Action):
 Кнопки з викликом до дії, такі як "Зареєструватися", "Увійти",
"Створити профіль" і т.д.
 Часто використовуються для стимулювання користувачів до виконання
певних дій.

2.4 Критерії якості

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

Лис т
ЧДТУ 242011.001 ПЗ
33
Зм Арк. № докум. Пiдпис. Дата
нт
`

Доступність: Можливість доступу до системи в будь-який час та з будь-якого
пристрою без зайвих перешкод.
Ефективність: Швидкодія та продуктивність системи у виконанні операцій та
обробці даних.
Надійність: Стабільність та безперебійна робота системи, відсутність
сильних збоїв та непередбачуваних відмов.
Безпека: Захищеність конфіденційності, цілісності та доступності даних
системи від несанкціонованого доступу та атак.
Сумісність: Здатність системи взаємодіяти з іншими програмними засобами
та пристроями, а також працювати на різних платформах.
Інтерфейс користувача: Зручність, зрозумілість та естетичний вигляд
інтерфейсу, спрощення взаємодії з системою для користувачів.
Складність та підтримка: Рівень складності системи та зручність у її
підтримці та адмініструванні.
Відповідність стандартам та вимогам: Відповідність системи стандартам
якості та вимогам, які встановлені для конкретної сфери діяльності або індустрії.

Висновки до розділу 2

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

Лист
ЧДТУ 242011.001 ПЗ
34
Зм Арк. № докум. Пiдпис. Дата
нт
`

РОЗДІЛ 3
РОЗРОБКА UX/UI ДИЗАЙНУ WEB-СЕРВІСУ

3.1 Засоби реалізації

Для реалізації даної роботи були обрані такі інструменти як: Figma, Adobe
Photoshop, Adobe Illustrator та Google інструменти (Form, Analytic), оскільки вони
покривають всі потреби як для розробки дизайну, так і для аналізу даної області.
Хоч останніми роками для дизайну було створено безліч засобів, на даний
час майже весь ринок витіснили Figma та Sketch, головна різниця між якими те що
Sketch - інструмент тільки для Apple пристроїв, коли Figma - кросплатформений,
хмарний інструмент.
Тому для реалізації ux/ui дизайну було обрано Figma оскільки:
Кросплатформеність: Figma працює у веб-браузері, що означає, що ви можете
працювати з ним на будь-якому комп'ютері без необхідності встановлення
додаткового програмного забезпечення. Крім того, він підтримується як на
Windows, так і на macOS, що робить його доступним для широкого кола
користувачів.
Оновлення в реальному часі: Коли хтось з команди вносить зміни до проекту
в Figma, інші користувачі можуть бачити ці зміни майже миттєво. Це дозволяє
швидко здійснювати спільне редагування та додавати коментарі без необхідності
чекати на оновлення.
Автоматизація процесів: Figma має можливості автоматизації, такі як
використання компонентів та бібліотек компонентів, що дозволяє швидко
створювати та оновлювати елементи дизайну по всьому проекту.
Інтегроване прототипування: Figma має вбудовані засоби для створення
прототипів, що дозволяє створювати інтерактивні демонстрації інтерфейсу без
переходу до інших програм.

Лист
ЧДТУ 242011.001 ПЗ
35
Зм Арк. № докум. Пiдпис. Дата
нт
`

Також частиною Figma являється FigJam перевагами якого є:
Швидке створення концепцій: FigJam дозволяє швидко створювати скетчі,
мапи мозку, діаграми та інші важливі елементи проекту, що допомагає команді
швидко висловити та узгодити ідеї.
Шаблони та компоненти: FigJam має набір вбудованих шаблонів та
компонентів, що дозволяє швидко створювати структуру для обговорень та
прототипування.
Багатофункціональність: Окрім спільної роботи над дизайном, FigJam може
використовуватися для проведення онлайн-брифінгів, ретроспектив та інших типів
колективної діяльності.
А також з останніми оновленнями у Figma активно впроваджують підтримку
штучного інтелекту для покращення і пришвидшення роботи.
У Adobe Photoshop та Adobe Illustrator також є безліч аналогів для створення
графіки, але знов же таки більшу частину ринку займають ці інструменти через свої
переваги поміж іншими:
Adobe Photoshop відомий своїми потужними можливостями редагування
растрової графіки. Photoshop ідеально підходить для обробки фотографій,
створення текстур, тіней та інших растрових елементів.
Adobe Illustrator спеціалізується на векторній графіці і має розширені
можливості для створення складних векторних об'єктів, таких як логотипи, іконки
та ілюстрації.
Інтеграція з іншими продуктами Adobe: Якщо ви вже використовуєте інші
продукти Adobe, такі як Adobe Premiere Pro для відео монтажу чи Adobe After
Effects для анімації, що також часто використовуються у дизайні, то використання
Photoshop та Illustrator забезпечить безшовну інтеграцію та обмін ресурсами між
цими програмами.
Також важливим елементом для дизайну є аналітика, завдяки якій можна
правильно визначити що слід включати у дизайн, а що оминати. Тому Google Form
допоможе з опитуванням потенційних користувачів, а завдяки Google Analytics
можна буде зібрати дані з використання користувачами аналогів нашого сервісу.

Лис т
ЧДТУ 242011.001 ПЗ
36
Зм Арк. № докум. Пiдпис. Дата
нт
`

3.2 Реалізація

Щоб UX/UI дизайн забезпечував приємний та зручний досвід користувачам,
спочатку проводиться бізнес-аналіз. Дуже часто цим займається дизайнер, оскільки
окремого бізнес-аналітика можуть собі дозволити лише масштабні проекти. Тому
першою частиною реалізації сервісу являється повноцінний аналіз, який
складається з:
Дослідження ринку та аналіз конкурентів:
 Вивчення ринкових тенденцій у галузі пошуку партнерів для
комп'ютерних ігор.
 Аналіз існуючих конкурентів і їхніх продуктів, включаючи їхні
функції, UX/UI рішення та монетизаційні моделі.
Визначення цільової аудиторії:
 Ідентифікація ключових сегментів користувачів, які шукають
партнерів для гри.
 Аналіз потреб та вимог цих сегментів.
Визначення функціональних вимог:
 Визначення основних функціональних можливостей веб-сервісу, таких
як пошук партнерів за різними критеріями, комунікація між
користувачами, оцінка ігрової сумісності.
Визначення технічних вимог:
 Визначення технічних аспектів реалізації, таких як платформи, на яких
працюватиме веб-сервіс, потрібні інтеграції з іншими сервісами
Розробка бізнес-моделі:
 Визначення монетизаційних стратегій, таких як підписка, плата за
послуги, реклама.
 Розрахунок прогнозованих доходів та витрат.

Лис т
ЧДТУ 242011.001 ПЗ
37
Зм Арк. № докум. Пiдпис. Дата
нт
`

Підготовка вимогового документу (BRD):
 Створення документа, який містить всі визначені бізнес- та
функціональні вимоги до веб-сервісу.

Перша частина бізнес-аналізу (Дослідження ринку та аналіз конкурентів) вже
було детально розглянуто в 1 та 2 розділі цієї роботи.

Визначення цільової аудиторії:
Як зазначалося у роботах [14; 32-33], детальне визначення цільової аудиторії
є критичним етапом бізнес-аналізу для розробки веб-сервісу з наступних причин:
Розуміння потреб користувачів: Це допомагає збирати і аналізувати важливу
інформацію про цільових користувачів - їхні демографічні характеристики,
інтереси, звички та потреби. Зрозуміння цих факторів дозволяє розробникам
створювати веб-сервіс, який ефективно відповідає на їхні потреби та очікування.
Персоналізація досвіду користувача: Визначення цільової аудиторії дозволяє
розробникам створити персоналізований досвід для користувачів. Це може
включати різноманітні функції та фічі, які відповідають унікальним потребам та
інтересам різних груп користувачів.
Маркетингові стратегії: Знання цільової аудиторії допомагає у визначенні
маркетингових стратегій для привертання нових користувачів і збереження
існуючих. Це може включати рекламні кампанії, спрямовані на конкретні сегменти
аудиторії, а також розвиток контенту, який зацікавить цю аудиторію.
Уникнення непотрібних функцій: Розуміння потреб цільової аудиторії
допомагає уникнути розробки зайвого функціоналу, який може бути неважливим
або непотрібним для користувачів. Це дозволяє оптимізувати ресурси та
зосередитися на розробці тих функцій, які справді важливі для цільових
користувачів.
Забезпечення конкурентної переваги: Глибоке розуміння цільової аудиторії
дозволяє розробникам створити веб-сервіс, який краще відповідає потребам

Лис т
ЧДТУ 242011.001 ПЗ
38
Зм Арк. № докум. Пiдпис. Дата
нт
`

користувачів, ніж продукти конкурентів. Це може стати ключовою перевагою в
конкурентному середовищі.

Цільова аудиторія:
Географічні характеристики: Географічно розподілені користувачі з усього
світу, з основною концентрацією у США, Європі та Азії.
Демографічні характеристики:
 Вік: 18-35 років.
 Стать: Чоловіки та жінки.
 Статус: Гравці комп'ютерних ігор, які шукають партнерів для спільної
гри.
Інтереси та хобі:
 Зацікавлені у різноманітних жанрах комп'ютерних ігор, включаючи
аркади, стратегії, RPG, MMO та інші.
 Шукають соціальні зв'язки та спільноту, яка дозволить їм знайти нових
партнерів для спільної гри та комунікації.
Технічні навички та пристрої:
 Мають доступ до інтернету та пристроїв, що підтримують онлайн-ігри,
таких як ПК, консолі або мобільні пристрої.
 Розуміють основні принципи інтерфейсу користувача та можуть
використовувати функції веб-сервісу без складнощів.
Соціальний статус:
 Різні соціальні статуси, від студентів та працюючих молодих людей до
професійних гравців та геймерських ентузіастів.
Мотивація:
 Бажають знайти партнерів для спільної гри, обміну досвідом, участі у
турнірах та подіях, а також розвитку власної геймерської спільноти.

Лис т
ЧДТУ 242011.001 ПЗ
39
Зм Арк. № докум. Пiдпис. Дата
нт
`

Для кращого аналізі цільову аудиторію можна поділити на декілька основних
надперсон за їх потребами у даному сервісі:
 Особи що хочуть пограти в ігри, але немає з ким
 Особи що хочуть заробити на тому, що грає з іншими
 Особи що хочуть поєднати 2 в 1 - пограти з кимось та заробити
 Особи (команди), яким необхідні професійні гравці для рейтингових
ігор, змагань або кіберспортивних турнірів.
Для найбільш точного аналізу також створюють окремих персон на
особливості яких додатково спираються при подальших бізнес рішеннях.
Найчастіше персон муже бути від однієї до десяти, дивлячись на функціонал
продукту та потреби які він повинен заохочувати.
Далі для кращого розуміння представленні графічно дві персони, які
відіграють роль користувачів сервісу які займають більшу частку аудиторії сервісу:

Рисунок 3.1 – Особа 1, яка шукає партнера для ігор

Лист
ЧДТУ 242011.001 ПЗ
40
Зм Арк. № докум. Пiдпис. Дата
нт
`

Рисунок 3.2 – Особа 2, яка заробляє кошти граючи в ігри

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

Jobs to be done
Наступним кроком є створення Jobs to be done (JTBD) інфографіки.
Jobs to be Done (JTBD) - це концепція, яка фокусується на ідентифікації
основних завдань або проблем, які люди намагаються вирішити за допомогою
продукту або послуги. Замість того, щоб спрямовуватися на характеристики
продукту чи характеристики користувача, JTBD стверджує, що люди
найймовірніше "наймають" продукт або послугу, щоб виконати певне завдання або
вирішити конкретну проблему.

Лист
ЧДТУ 242011.001 ПЗ
41
Зм Арк. № докум. Пiдпис. Дата
нт
`

Основні поняття JTBD:
 Ситуація: Це конкретна проблема або завдання, яку людина
намагається вирішити. Наприклад, "Знайти ефективний спосіб
спілкування з командою під час онлайн-ігор".
 Мотивація: JTBD допомагає розібратися, які мотивації стоять за
спробою вирішити це завдання. Наприклад, бажання знайти сильних
партнерів для покращення ігрового досвіду та досягнення кращих
результатів.
 Результат: JTBD допомагає визначити, які конкретні результати очікує
користувач від використання продукту. Наприклад, "Щоб підняти
рейтинг в грі".
Використання концепції "Jobs to be Done" для нашого сервісу може мати
кілька значних корисностей:
Ліпше розуміння потреб користувачів: JTBD допомагає нам глибше
зрозуміти, які конкретні завдання та проблеми мають наші користувачі. Це означає,
що ми можемо більш точно визначити, що саме вони шукають у нашому сервісі та
як ми можемо їм допомогти.
Ефективна розробка функціоналу: Розуміння JTBD дозволяє нам
зосередитися на розробці функціоналу, який найбільше відповідає потребам
користувачів. Ми можемо створити інструменти та можливості, які допоможуть
користувачам ефективно вирішувати свої завдання та проблеми.
Персоналізований досвід користувача: JTBD дозволяє нам персоналізувати
досвід користувача, надаючи їм інструменти та функції, які найбільш важливі для
їхніх конкретних завдань та мотивацій.
Маркетинг та комунікації: JTBD надає нам можливість ліпше спілкуватися з
нашою цільовою аудиторією. Ми можемо підкреслити, як саме наш сервіс
допоможе користувачам вирішувати їхні проблеми та виконувати їхні завдання.

Лис т
ЧДТУ 242011.001 ПЗ
42
Зм Арк. № докум. Пiдпис. Дата
нт
`

Постійне вдосконалення продукту: З розумінням JTBD ми можемо
проводити оцінку та аналіз ефективності нашого сервісу, щоб постійно
вдосконалювати його та відповідати змінним потребам користувачів.
Далі наведені JTBD для кожної персони відповідно:

Рисунок 3.3 – JTBD першої особи

Лис т
ЧДТУ 242011.001 ПЗ
43
Зм Арк. № докум. Пiдпис. Дата
нт
`

Рисунок 3.4 – JTBD другої особи

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

User flow
User Flow (користувацький потік), як було вказано у роботах [10; 34] – це
діаграма або схема, яка показує послідовність кроків, які користувач проходить під

Лис т
ЧДТУ 242011.001 ПЗ
44
Зм Арк. № докум. Пiдпис. Дата
нт
`

час взаємодії з продуктом або сервісом для досягнення певної мети. Це візуальне
представлення того, як користувачі рухаються через різні екрани або етапи
цільового продукту, починаючи від входу на сайт або додаток до досягнення
конкретного результату.
Ключові компоненти User Flow:
Точки входу (Entry Points): Початкові точки, з яких користувачі починають
взаємодію з цільовим продуктом. Це може бути головна сторінка сайту, сторінка
входу або будь-яка інша стартова точка.
Сторінки або екрани (Screens): Різні інтерфейси, через які проходить
користувач. Кожен екран має свою функціональність та ціль.
Дії користувача (User Actions): Дії, які користувач виконує, такі як кліки,
натискання кнопок, заповнення форм тощо.
Переходи (Transitions): Переходи між екранами, що показують, як
користувач рухається від однієї частини продукту до іншої.
Цілі (Goals): Основні цілі або результати, яких користувач намагається
досягти. Наприклад, реєстрація, пошук партнера для гри, приєднання до гри тощо.
Користь User Flow:
Покращення досвіду користувача (UX): Допомагає ідентифікувати можливі
проблеми та бар'єри в користувацькому шляху, що дозволяє зробити продукт більш
інтуїтивним та зручним у використанні.
Оптимізація навігації: Дає змогу оптимізувати структуру продукту,
забезпечуючи логічну та зрозумілу навігацію.
Виявлення вузьких місць: Допомагає виявити вузькі місця або точки, де
користувачі можуть застрягати або відмовлятися від використання продукту.
Координація команди: Служить корисним інструментом для координації
роботи різних команд (дизайн, розробка, маркетинг), забезпечуючи єдине
розуміння користувацького шляху.
Поліпшення конверсії: Допомагає зрозуміти, як користувачі досягають цілей,
що дозволяє оптимізувати шляхи для підвищення конверсії та досягнення бізнес-
цілей.

Лис т
ЧДТУ 242011.001 ПЗ
45
Зм Арк. № докум. Пiдпис. Дата
нт
`

User flow цільового сервісу можна поділити на 4 основних блоків:
 Реєстрація та авторизація
 Основний шлях користувача
 Шлях верифікації Гравця (особа, що надає послуги по грі)
 Основний шлях Гравця

Далі представлена структура кожного з User flow, та його візуальне
зображення відповідно:
Структура User Flow Реєстрації та авторизації:
Форма реєстрації:
• Введіть облікові дані, такі як електронна пошта або номер мобільного
телефону та пароль.
• Варіанти реєстрації включають Google, Facebook, Twitter, Discord та Twitch.
Форма Логін:
• Введіть облікові дані, такі як електронна пошта або номер мобільного
телефону та пароль.
• Варіанти входу включають Google, Facebook, Twitter, Discord та Twitch.
Відновлення пароля:
• Є можливість відновити пароль, якщо його забули.
Вхід до аккаунта:
• Перехід до аккаунта після введення облікових даних.
• Є можливість входу з різних платформ, таких як Google, Facebook, Twitter,
Discord та Twitch.
Поточна Сторінка взаємодії:
• При взаємодії з послугою, перехід на послугу після логіну або реєстрації.
• При прямому логіні або реєстрації, перехід на попередню сторінку до логіну
або реєстрації.

Лис т
ЧДТУ 242011.001 ПЗ
46
Зм Арк. № докум. Пiдпис. Дата
нт
`

Рисунок 3.5 – User flow Реєстрації та авторизації

Структура User Flow Основного шляху користувача:
 Домашня сторінка
 Популярні Гравці
 Категорії гравців
 Міні профіль користувача (Зображення профіля, Вішліст, orders,
Wallet, logout)
 Ігри (services)
 Пошук
 Фільтрування пошуку
 Обрати гру
 Обрати категорію
 Обрати діапазон часу
 Обрати діапазон вартості

Лис т
ЧДТУ 242011.001 ПЗ
47
Зм Арк. № докум. Пiдпис. Дата
нт
`

 Обрати мову
 Обрати стать
 Обрати вік
 Обрати платформу
 Обрати рейтинг гравця
 Обрати інші категорії, які залежать від конкретної гри
 Результати пошуку
 Профіль Гравця
 Список послуг
 Інформація
 Фото
 Короткий опис
 Вік
 Стать
 Мова
 Години праці
 Категорія
 Відгуки
 Ціни
 Рейтинг
 Чат
 Ордери

Додати гравця в улюблені
можна як з профілю, так і з міні профілю гравця додавати в улюблені

Замовлення послуги:
 Логін
 Оформлення послуги

Лис т
ЧДТУ 242011.001 ПЗ
48
Зм Арк. № докум. Пiдпис. Дата
нт
`

 Вибір способу оплати
 Підтвердження оплати
 Повідомлення про успішне замовлення

Рисунок 3.6 – User flow Основного шляху користувача (пошук послуги)

Рисунок 3.7 – User flow Основного шляху користувача (замовлення)

Структура User Flow Шляху верифікації Гравця:
Правила сервісу (та погодження з ними)

Заповнення профілю:
• Користувачі мають можливість заповнити свій профіль, але він залишається
порожнім і не з'являється у пошуку.
• При заповненні профілю є можливість його опублікувати.

Лис т
ЧДТУ 242011.001 ПЗ
49
Зм Арк. № докум. Пiдпис. Дата
нт
`

• Для заповнення профілю користувач повинен ввести різні особисті дані та
фото.
Верифікація профілю:
• Є потреба в процесі верифікації для гравців.
• Користувачі повинні ввести реквізити для отримання коштів.
• Після заповнення профілю, користувач може його опублікувати.

Рисунок 3.7 – User flow Шляху верифікації гравця

Структура User Flow Основного шлях Гравця:
 Особистий кабінет
 Wallet
 Orders
 Account
 Messages
 Notifications
 Settings
 Help
 Logout

Гравець перевіряє чи з'явилися у нього замовлення, повідомлення
Лис т
ЧДТУ 242011.001 ПЗ
50
Зм Арк. № докум. Пiдпис. Дата
нт
`

Рисунок 3.7 – User flow Основного шляху гравця

Створення User Flow допомагає зрозуміти та вдосконалити весь шлях
користувача, забезпечуючи йому плавний та приємний досвід взаємодії з сервісом.

CJM
CJM (Customer Journey Map), як сказано у роботі [35] – це візуальне
представлення усіх взаємодій та досвіду клієнта з продуктом або сервісом від
першого контакту до завершення взаємодії. CJM дозволяє зрозуміти та аналізувати,
як клієнти рухаються через різні етапи взаємодії, що відчувають і думають на
кожному з цих етапів, а також визначити ключові точки болю (pain points) і
моменти задоволення.
Основні компоненти CJM:
Персонажі (Personas): Сегментовані представники вашої цільової аудиторії з
описом їх демографічних характеристик, потреб, болів та мотивацій.
Етапи взаємодії (Stages): Основні фази, через які проходить клієнт. Це
можуть бути усвідомлення потреби, пошук інформації, прийняття рішення,
покупка, використання продукту та пост-покупковий досвід.
Точки дотику (Touchpoints): Конкретні моменти або місця, де відбувається
взаємодія клієнта з продуктом або сервісом. Це можуть бути веб-сайт, мобільний
додаток, соціальні мережі, фізичні магазини тощо.

Лис т
ЧДТУ 242011.001 ПЗ
51
Зм Арк. № докум. Пiдпис. Дата
нт
`

Дії клієнта (Customer Actions): Дії, які клієнт здійснює на кожному етапі
взаємодії.
Думки та відчуття (Thoughts and Emotions): Що клієнт думає та відчуває на
кожному етапі взаємодії. Це допомагає зрозуміти емоційний стан клієнта протягом
всієї подорожі.
Проблеми та болі (Pain Points): Проблеми або незручності, які клієнт
зустрічає на своєму шляху. Виявлення цих точок болю дозволяє покращити досвід
користувача.
Моменти задоволення (Moments of Delight): Позитивні моменти або
взаємодії, які приносять задоволення клієнту.
Користь CJM:
Глибше розуміння клієнтів: CJM дозволяє краще зрозуміти потреби,
мотивації та поведінку клієнтів. Це допомагає створювати більш персоналізовані
та ефективні рішення.
Виявлення проблем та можливостей для покращення: Аналізуючи точки
болю, можна знайти області для покращення продукту або сервісу. Це допомагає
підвищити задоволеність клієнтів та лояльність.
Оптимізація ресурсів: Знання точок дотику та етапів, де клієнти взаємодіють
з продуктом, допомагає ефективніше розподіляти ресурси та фокусуватися на
ключових аспектах досвіду клієнта.
Підвищення конверсії та лояльності: Поліпшення клієнтського досвіду веде
до зростання рівня конверсії, задоволеності та лояльності клієнтів.
Синхронізація роботи команди: CJM забезпечує єдине розуміння шляху
клієнта серед усіх членів команди, що покращує координацію та спільну роботу.
Далі наведено графічне відображення CJM цільового проекту:

Лис т
ЧДТУ 242011.001 ПЗ
52
Зм Арк. № докум. Пiдпис. Дата
нт
`

Рисунок 3.8 – CJM проекту

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

Wireframe
Wireframes (каркасні схеми), з робіт [10; 35], можна дізнатися, що – це
спрощені, схематичні представлення інтерфейсу користувача, які показують
структуру та компоненти сторінки або екрану без детальних дизайнерських
елементів або стилів. Вони використовуються на ранніх етапах розробки продукту
Лис т
ЧДТУ 242011.001 ПЗ
53
Зм Арк. № докум. Пiдпис. Дата
нт
`

для планування та візуалізації основних функціональних елементів і розташування
контенту.
Основні компоненти wireframes:
Структура сторінки: Розташування головних елементів інтерфейсу, таких як
заголовки, меню, кнопки, поля для введення тексту, зображення тощо.
Ієрархія інформації: Відображення порядку важливості та відносного розміру
елементів, що допомагає зрозуміти, як користувачі будуть сприймати інформацію.
Функціональні елементи: Позначення інтерактивних компонентів, таких як
кнопки, посилання, форми та інші елементи управління.
Пояснювальні підписи: Тексти, які пояснюють функцію або мету кожного
елемента на схемі.
Види wireframes:
Low-fidelity (низька деталізація): Прості, грубі ескізи, які використовуються
для швидкого прототипування та обговорення основних ідей. Зазвичай
виконуються без деталей, кольорів або шрифтів.
High-fidelity (висока деталізація): Більш детальні схеми, що наближаються до
кінцевого дизайну. Вони включають більш точні розміри, розташування елементів,
деталі навігації та можуть використовуватися для тестування користувачів.
Користь використання wireframes:
Чітке бачення структури продукту: Wireframes дозволяють зрозуміти та
погодити основну структуру та компоненти інтерфейсу на ранніх етапах розробки,
що допомагає уникнути помилок у дизайні.
Ефективна комунікація: Схеми слугують спільним документом для
дизайнерів, розробників, бізнес-аналітиків та інших зацікавлених сторін,
забезпечуючи єдине бачення майбутнього продукту.
Простота внесення змін: На стадії wireframes внесення змін до структури та
функціональних елементів набагато простіше та дешевше, ніж на пізніших етапах
розробки.

Лис т
ЧДТУ 242011.001 ПЗ
54
Зм Арк. № докум. Пiдпис. Дата
нт
`

Тестування користувачів: Wireframes можна використовувати для раннього
тестування користувачів, щоб отримати зворотний зв’язок про структуру та
функціональність продукту до його повної реалізації.
Основи для дизайну та розробки: Вони слугують основою для створення
детальних дизайнів (mockups) та функціональних прототипів, що спрощує
подальший процес розробки.

Далі приведені зображення High-fidelity wireframes цільового проекту:

Рисунок 3.9 – Основні wireframes сервісу

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

Лис т
ЧДТУ 242011.001 ПЗ
55
Зм Арк. № докум. Пiдпис. Дата
нт
`

Design
Frames в контексті UX/UI дизайну, як сказано у роботах [10; 23], відносяться
до різних кадрів або екранів, які представляють конкретні стани або інтерфейси
користувацького досвіду в додатку чи на веб-сайті. Вони є частиною процесу
проектування, що дозволяє створити інтерактивні прототипи та допомагає
дизайнерам і розробникам зрозуміти, як буде виглядати і працювати продукт.
Основні компоненти Frames в UX/UI дизайні:
Екрани (Screens): Кожен кадр представляє окремий екран або стан
користувацького інтерфейсу, такий як головна сторінка, сторінка входу, сторінка
профілю, сторінка налаштувань тощо.
Елементи інтерфейсу (UI Elements): Кожен кадр містить відповідні елементи
інтерфейсу, такі як кнопки, поля введення, меню, іконки, текстові блоки,
зображення тощо.
Взаємодії (Interactions): Вказівка на те, як користувач буде взаємодіяти з
елементами інтерфейсу, наприклад, натискання кнопок, заповнення форм,
прокрутка, перехід між сторінками тощо.
Користь Frames в UX/UI дизайні:
Візуалізація дизайну: Frames дозволяють візуалізувати, як буде виглядати і
працювати кожен екран додатку або веб-сайту, що допомагає команді зрозуміти
кінцевий продукт.
Планування користувацького шляху: Використання кадрів допомагає
спланувати і побудувати логіку переходів між різними екранами, забезпечуючи
плавний і логічний користувацький досвід.
Ефективна комунікація: Frames слугують спільним засобом комунікації між
дизайнерами, розробниками, стейхолдерами та іншими членами команди,
забезпечуючи чітке розуміння того, як повинен виглядати та працювати продукт.
Раннє тестування та зворотній зв'язок: Дозволяє проводити раннє тестування
з користувачами та отримувати зворотній зв’язок, що допомагає виявити проблеми
на ранніх етапах та внести необхідні зміни.

Лис т
ЧДТУ 242011.001 ПЗ
56
Зм Арк. № докум. Пiдпис. Дата
нт
`

Основи для прототипування: Frames є основою для створення інтерактивних
прототипів, що дозволяє тестувати функціональність і взаємодії перед розробкою
кінцевого продукту.

Далі приведені зображення фреймів ux/ui дизайну цільового проекту:

Рисунок 3.10 – Основні frames сервісу

На даному рисунку зображено чотири сторінки головного шляху
користувача:
 Головна сторінка при вході на сайт
 Екран вибору гри по якій потім буде список гравців
 Сторінка пошуку гравців по конкретній грі
 Сторінка профілю гравця з всією необхідною інформацією

Лис т
ЧДТУ 242011.001 ПЗ
57
Зм Арк. № докум. Пiдпис. Дата
нт
`

Рисунок 3.11 – Основні ui елементи сервісу

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

3.3 Тестування

Тестування UX/UI дизайну – це процес оцінки користувацького досвіду та
інтерфейсу з метою виявлення та виправлення проблем, що можуть вплинути на
зручність, ефективність та задоволення користувачів. Це включає перевірку
фреймів (frames), лейаутів (layouts) та інших елементів дизайну на різних етапах
розробки.

Лист
ЧДТУ 242011.001 ПЗ
58
Зм Арк. № докум. Пiдпис. Дата
нт
`

Основні методи тестування UX/UI дизайну:
Юзабіліті-тестування (Usability Testing): Користувачі виконують певні
завдання за допомогою продукту, поки дослідники спостерігають за їхньою
поведінкою та виявляють проблеми.
А/Б-тестування (A/B Testing): Порівняння двох варіантів дизайну (A і B) для
визначення, який з них краще виконує певні цілі, наприклад, підвищення конверсії.
Тестування першого кліку (First Click Testing): Оцінка того, куди користувачі
клікають спочатку на сторінці, що допомагає зрозуміти, наскільки інтуїтивно
зрозумілий дизайн.
Тестування дерева (Tree Testing): Перевірка логіки та структури навігації без
графічного інтерфейсу, щоб визначити, наскільки легко користувачам знаходити
інформацію.
Оцінка за методом «Heuristic Evaluation»: Експерти з юзабіліті оцінюють
дизайн на основі певного набору евристичних правил (наприклад, принципів
Нільсена).
Аналіз поведінки користувачів (User Behavior Analytics): Використання
інструментів аналітики для збору даних про те, як користувачі взаємодіють з
продуктом (теплові карти, запис сесій тощо).
Процес тестування UX/UI дизайну:
Планування: Визначення цілей тестування, методів, які будуть
використовуватися, і вибір цільової аудиторії.
Розробка тестових сценаріїв: Створення завдань та сценаріїв, які користувачі
повинні виконати під час тестування.
Проведення тестування: Залучення користувачів до тестування продукту в
контрольованому середовищі або віддалено.
Збір та аналіз даних: Збір даних про поведінку користувачів, їхні думки та
емоції під час взаємодії з продуктом.
Визначення проблем: Аналіз зібраних даних для виявлення проблем у
дизайні, які заважають користувачам досягати своїх цілей.
Внесення змін: Внесення змін до дизайну на основі результатів тестування.

Лис т
ЧДТУ 242011.001 ПЗ
59
Зм Арк. № докум. Пiдпис. Дата
нт
`

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

Prototype
Клікабельний прототип в UX/UI дизайні, як написано у робі [10] – це
інтерактивна модель веб-сайту або додатку, яка дозволяє користувачам
взаємодіяти з елементами інтерфейсу, такими як кнопки, посилання та меню, і
переміщатися між різними екранами чи сторінками. Клікабельні прототипи
надають реалістичне уявлення про те, як буде працювати кінцевий продукт, і
дозволяють проводити тестування та отримувати зворотний зв'язок на ранніх
етапах розробки.
Основні характеристики клікабельного прототипу:
Інтерактивність: Елементи інтерфейсу, такі як кнопки, посилання, меню та
форми, активні та можуть бути натиснуті, що дозволяє користувачам переміщатися
між екранами.
Реалістичність: Прототип максимально наближений до кінцевого дизайну
продукту, включаючи кольори, шрифти, зображення та розташування елементів.
Сценарії використання: Прототип відображає основні сценарії використання
продукту, дозволяючи тестувати основні функції та процеси.

Лис т
ЧДТУ 242011.001 ПЗ
60
Зм Арк. № докум. Пiдпис. Дата
нт
`

Користь клікабельного прототипу:
Раннє тестування: Можливість проводити тестування з користувачами на
ранніх етапах розробки, виявляючи потенційні проблеми та збираючи зворотний
зв'язок до того, як буде написаний код.
Ефективна комунікація: Клікабельні прототипи слугують засобом
комунікації між дизайнерами, розробниками та зацікавленими сторонами,
забезпечуючи спільне розуміння того, як буде виглядати та працювати продукт.
Виявлення проблем: Інтерактивні прототипи допомагають виявити проблеми
з навігацією, розташуванням елементів та загальним користувацьким досвідом, що
дозволяє їх виправити до розробки.
Зменшення витрат: Внесення змін до прототипу значно дешевше та швидше,
ніж внесення змін до готового продукту, що зменшує витрати на розробку.
Етапи створення клікабельного прототипу:
Визначення вимог: Збір та аналіз вимог до продукту, включаючи цільову
аудиторію, основні функції та сценарії використання.
Створення wireframes: Розробка базових схем (wireframes), які визначають
структуру та розташування елементів інтерфейсу.
Розробка high-fidelity макетів: Створення детальних макетів з урахуванням
кольорів, шрифтів, зображень та інших візуальних елементів.
Інтерактивність: Додавання інтерактивних елементів та налаштування
переходів між екранами за допомогою спеціалізованих інструментів для створення
прототипів (наприклад, Figma, Adobe XD, InVision).
Тестування прототипу: Проведення тестувань з користувачами для
виявлення проблем та збору зворотного зв’язку.
Внесення змін: Виправлення виявлених проблем та вдосконалення
прототипу на основі отриманого зворотного зв’язку.
Клікабельний прототип є незамінним інструментом у процесі UX/UI дизайну,
що дозволяє візуалізувати та тестувати інтерактивність та користувацький досвід
продукту на ранніх етапах розробки. Він допомагає виявляти та вирішувати

Лис т
ЧДТУ 242011.001 ПЗ
61
Зм Арк. № докум. Пiдпис. Дата
нт
`

проблеми, зменшувати витрати на розробку та забезпечувати кращу комунікацію
між усіма учасниками процесу.

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

Таблиця 3.12 Результати опитування користувацького досвіду
Сторінка Проблема при користуванні Ідеї для покращення
Головна сторінка все англійською мовою Перемикач мов
Пошук ігор Проблем не виникло, все Немає ідей
досить зрозуміло.
Пошук гравця не зразу зрозумілі всі додавання подробиць
фільтри щодо ролей
Профіль гравця Проблем не виникло, все Немає ідей
досить зрозуміло.
Замовлення Проблем не виникло, все Немає ідей
послуги досить зрозуміло.
Бронювання: Проблем не виникло, все Немає ідей
успішне досить зрозуміло.

За результатами опитування можна зробити висновки, що сервіс з головними
своїми особливостями справляється добре. Локалізація на українську мову може
підвищити популярність в Україні, але це не обов’язковий функціонал для
реалізації. Тільки у 2 з 20 виникли труднощі з англійською - особи за 40 років, які
складають найменшу частку активної аудиторії.

Лис т
ЧДТУ 242011.001 ПЗ
62
Зм Арк. № докум. Пiдпис. Дата
нт
`

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

3.4 Порівняння з аналогами

Щоб наочно продемонструвати переваги нашого сервісу, ми провели
детальне порівняння з іншими популярними платформами. Нижче представлено
таблиця, яка порівнює наш сервіс із аналогами за ключовими параметрами, такими
як зручність користування, функціональність, підтримка користувачів та інші
важливі аспекти, деталі яких зазначені під таблицею. Ця таблиця наочно покаже,
чому наш сервіс є найкращим вибором для геймерів, які шукають надійних
партнерів для гри в кооперативні онлайн ігри.
Умовні позначки:
 Зелений - добре
 Жовтий - задовільно, але можна покращити
 Червоний – погано

Таблиця 3.13 Порівняння з аналогами
Ключові Аспекти Наш сервіс TEAMS.gg Tapin Dachi.lol
Загальний вигляд
Зручність навігації
Інтуїтивність
Візуальна ієрархія
Кольорова схема
Типографіка
Іконографіка

Лис т
ЧДТУ 242011.001 ПЗ
63
Зм Арк. № докум. Пiдпис. Дата
нт
`

Click Depth
Функціональність
пошуку
Персоналізація
Повідомлення
Зворотній зв'язок від
інтерфейсу
Мультимедійні
елементи
Елементи
гейміфікації
Монетизація
FAQ

Розглянемо кожний аспект більш детально щодо кожного з продуктів:
Загальний вигляд: TEAMS.gg реалізовано в темній тематиці з
використанням помаранчевого та рожевого кольору для акцентів. Всі елементи
підсвічені та виділяються на фоні тінями, надаючи об’єму сайту. Елементи мають
заокруглені кінці, що являється однією з головних деталей привабливого вигляду
сайту на даний час.
Tapin виконано в темній тематиці з зеленим-неоновим кольором з підсвіткою
елементів, як і в попередньому варіанті. Головним недоліком є гості кути які не
популярні а також не підходять даній ігровій тематиці.
Dachi.lol виконано в темній тематиці з синім акцентом з використанням
застарілої стилістики елементів та поганою їх компоновкою.
Наш сервіс був створен за всіма нинішніми тенденціями - темна тема з
фіолетовим акцентом, тіні для об’єму елементів (кнопок).
Зручність навігації: У всіх сервісів проблем з навігацією не виявлено, всю
потрібно інформацію можна швидко та інтуїтивно знайти через навігацію. Єдиним

Лис т
ЧДТУ 242011.001 ПЗ
64
Зм Арк. № докум. Пiдпис. Дата
нт
`

недоліком TEAMS.gg являється невелике перенасичення навігаційними
елементами які не відразу зрозуміло куди ведуть / для чого потрібні.
Інтуїтивність: На всіх сервісах зрозуміло як працювати з ними через гарно
пропрацьовану навігацію. Через теж саме перенасичення у TEAMS.gg не відразу
зрозуміло куди натискати. В свою чергу в Dachi.lol з’являється невеликий недолік
- не притаманний (незручний) пошук.
Візуальна ієрархія: У сервісах окрім TEAMS.gg всі елементи ієрархічно
впорядковані, вся інформація структурована та виділяється по своїй важливості
завдяки розмірам, кольорам, відступам, “білому” просторі навколо. Коли в
TEAMS.gg всі елементи приблизно однакові як за розміром так і кольорами і
простором між ними через що не можна зрозуміти які елементи важливіші серед
усіх.
Кольорова схема: З кольоровою схемою не виникло ніяких проблем у
кожного продукту, все виконано в темній тематиці притаманній ігровій, з
яскравими акцентними кольорами.
Типографіка: Шрифти у всіх випадках пропрацьовані, мають свою ієрархію
за важливістю, що відображається у величині та жирності шрифту. Проблемою
TEAMS.gg є реверсне використання шрифтів, тобто використовуються
декоративний шрифт у основному контексті, та звичайний для заголовків. Хоч
обраний декоративний шрифт непогано читається, але все ж його не вийде
прочитати з такою ж швидкістю як і звичайний, особливо при великому обсязі
інформації.
Іконографіка: Головними критеріями являється єдиний стиль іконок, та
інтуїтивно зрозуміле їх призначення. У TEAMS.gg та Tapin в деяких місцях
використовуються емоджи замість іконок, які не зовсім зрозумілі за змістом які
вони повинні нести.
Click Depth: Головним критерієм являється використання не більше 5 кліків
(в ідеальному випадку) для досягнення своєї головної цілі, в нашому випадку
замовити гравця для гри. Наш сервіс виконує дану задачу за 5 кліків, Tapin за 2, а
іншим потрібно більше 2 десятків кліків.

Лис т
ЧДТУ 242011.001 ПЗ
65
Зм Арк. № докум. Пiдпис. Дата
нт
`

Функціональність пошуку: Головний критерій - корисні фільтри та
сортування. В нашому сервісу реалізовано детальну фільтрацію та сортування за
всіма можливими критеріями для гравців та ігор. В TEAMS.gg присутня лише
скупе сортування за популярністю, новизною, відповідності вашим інтересам. В
інших двох випадків фільтри та сортування - відсутні.
Персоналізація: У нашому сервісі та TEAMS.gg є змога створити власний
кабінет та заповнити свої вподобання, для більш точного пошуку, показу
пропозицій та інформації. В інших сервісах це відсутнє.
Повідомлення: В нашому сервісі та TEAMS.gg повідомлення позначаються
іконкою що змінює значення не прочитаних листів, а також в налаштуваннях
можна дозволити відправляти лист на особисту пошту, та дозвіл на звуковий сигнал
при отриманні нового листа. В Tapin лише приходить лист на пошту, без функції
прибрати це. У Dachi.lol відсутня система будь яких повідомлень.
Зворотній зв'язок від інтерфейсу: Головний критерій це зміна станів
елементів при взаємодії з ними, такі як підсвітка, зміна кольору або вигляду при
наведені або натисканні. В нашому сервісі та TEAMS.gg всі елементи є
інтерактивними і візуально змінюються при взаємодії з ними. В інших двох
сервісах чомусь лише половина інтерактивних елементів змінюється при взаємодії,
а інші повністю статичні.
Мультимедійні елементи: Критерії - використання мультимедії відповідної
тематики, для покращення користувацького досвіду. В нашому сервісі та
TEAMS.gg використовується велика кількість зображень ігрової тематики. В Tapin
хоч і є достатня кількість мультимедії, але вона нейтрального характеру, не
відповідаюча ігровій тематиці. Dachi.lol має лише кілька ілюстрацій не зовсім
ігрової тематики на весь сервіс.
Елементи гейміфікації: В нинішній час одним з ключових елементів, що
привертають уваги і залучають користувачів не покидати продукт - ігрові
елементи. В нашому сервісі присутні такі елементи як: ачівки, досягнення, прогрес,
рівень акаунту, та кастомізація додаткового профілю для “вихваляння” своїми
досягненнями на платформі.

Лист
ЧДТУ 242011.001 ПЗ
66
Зм Арк. № докум. Пiдпис. Дата
нт
`

В TEAMS.gg намагалися реалізувати інтерфейс та взаємодії з ним у стилі
ігор, та значки-нагороди за проведений час. А в інших сервісах елементи
гейміфікації відсутні.
Монетизація: В нашому сервісі монетизація реалізована з отримання
відсотку за послуги які надають гравці, а також за рекламний банер на головній
сторінці (лише ігрової тематики). В TEAMS.gg монетизація реалізована через
набридливі спливаючі попапи, які навіть не ігрової тематики. Tapin отримує кошти
за пошук та надання партнерів для гри. Dachi.lol є безкоштовним продуктом.
FAQ: У нашого сервісу та Tapin присутня сторінка FAQ, та є форма
зворотного зв’язку, якщо користувач не знайшов потрібної інформації. У інших
сервісів даний функціонал відсутній.

Висновки до розділу 3

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

Лис т
ЧДТУ 242011.001 ПЗ
67
Зм Арк. № докум. Пiдпис. Дата
нт
`

ВИСНОВКИ

У ході виконання кваліфікаційної роботи бакалавра проведено аналіз ринку
та вивчення потреб користувачів дозволили розробити ефективний алгоритм
підбору партнерів, що базується на різних параметрах та забезпечує точний підбір
відповідних гравців. Створений користувацький інтерфейс є інтуїтивно зрозумілим
та зручним у використанні, що сприяє позитивному враженню користувачів та
підвищує їхню лояльність до сервісу.
Щодо технічної новизни системи, слід зазначити, що вона базується на
сучасних технологіях та інструментах, що дозволяє забезпечити якісну та швидку
у редагуванні дизайн систему з інтегрованим прототипом. Впровадження системи
призведе до позитивних результатів, зокрема до збільшення активності
користувачів та покращення якості їхнього геймінг-досвіду.
З огляду на отримані результати, пропонуються такі рекомендації щодо
подальшого використання розробленої системи на практиці:
Розширення функціональності сервісу за допомогою додаткових
можливостей для взаємодії між гравцями, таких як групові чати або спільні ігрові
заходи.
Підвищення безпеки та конфіденційності користувачів шляхом
впровадження додаткових заходів захисту персональних даних.
Розробка мобільного додатку для забезпечення доступу до сервісу з будь-
якого пристрою та зручності використання в рухомому середовищі.
Посилення рекламної кампанії та партнерських відносин для залучення
нових користувачів та розширення аудиторії сервісу.
В цілому, розроблений дизайн сервісу по пошуку партнерів для
комп'ютерних ігор є успішним продуктом, який відповідає сучасним потребам
геймерської спільноти та має потенціал для подальшого розвитку та
вдосконалення.

Лис т
ЧДТУ 242011.001 ПЗ
68
Зм Арк. № докум. Пiдпис. Дата
нт
`

При виконання кваліфікаційної роботи бакалавра виконані наступні задачі:
 Проведено огляд аналогів;
 Проведено аналіз розглянутих аналогів;
 Проведено опис вимог до проекту
 Обрані засоби реалізації
 Визначені цільову аудиторію
 Реалізовано представлення Jobs to be dome
 Реалізовано користувацький шлях (User flow)
 Реалізовано таблицю Customer Journey Map
 Розробоені wireframes
 Реалізувован дизайн по wireframes
 Розроблені клікабельні прототипи
 Проведено тестування (опитування)
 Проведено порівняння реалізованого UX/UI з аналогами
Таким чином була досягнута мета кваліфікаційної роботи бакалавра:
створення UX/UI дизайнуWeb-сервісу по пошуку партнерів для комп'ютерних ігор,
який спростить процес пошуку партнерів для ігор та підвищить якість і
задоволення від гри. Завдяки дизайну цього сервісу гравці в майбутньому
отримають можливість знаходити однодумців на основі їхніх інтересів та рівня
майстерності, що покращить їхній геймінг-досвід та підвищить задоволення від
спільної гри.

Лис т
ЧДТУ 242011.001 ПЗ
69
Зм Арк. № докум. Пiдпис. Дата
нт
`

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

1) Laura Wood. Global Esports Market (2021 to 2030). 2022. URL:
https://www.businesswire.com/news/home/20220119005894/en/Global-Esports-
Market-2021-to-2030---Featuring-Electronic-Arts-Gameloft-and-Kabam-Among-
Others---ResearchAndMarkets.com.
2) T.L. Taylor. Raising the Stakes: E-Sports and the Professionalization of Computer
Gaming. USA, 2012. 332 с.
3) Timothy L. Wilson. The Video Game Industry: Formation, Present State, and Future.
USA, 2012. 282с.
4) Steam: Charts Overview URL: https://store.steampowered.com/charts/.
5) Epic Games: Epic Games Newsroom URL: https://store.epicgames.com/en-US/news.
6) Xbox: Xbox Wire URL: https://news.xbox.com/en-us/.
7) Nintendo Financial Reports URL: https://www.nintendo.co.jp/ir/en/index.html.
8) PlayStation: PlayStation Blog URL: https://blog.playstation.com.
9) Ubisoft: Ubisoft News URL: https://news.ubisoft.com/en-gb/.
10) Steve Krug . Don't Make Me Think: A Common Sense Approach to Web Usability.
USA, 2013. 216с.
11) Georg A. Agoston. Color Theory and Application in Art and Design. USA, 2014.
156с.
12) Aarron Walter. Designing for Emotion. USA, 2011. 104 c.
13) Євгенія Гордієнко. Forbs. 92% людей роблять свої покупки за рекомендаціями.
2021. URL: https://forbes.ua/business/92-lyudey-delayut-pokupki-po-rekomendatsiy
am-kak-uvelichit-dokhodnost-biznesa-rabotaya-s-inflyuenserami-14042021-1376.
14) Rex Hartson and Pardha S. Pyla. The UX Book: Process and Guidelines for Ensuring
a Quality User Experience. USA, 2012. 976 c.
15) About Face: The Essentials of Interaction Design / Alan Cooper та ін. USA, 2014.
720 c.
16) John Pruitt and Tamara Adlin. Personas: User Focused Design. USA, 2010. 744 c.

Лис т
ЧДТУ 242011.001 ПЗ
70
Зм Арк. № докум. Пiдпис. Дата
нт
`

17) Dan Saffer. Designing for Interaction: Creating Smart Applications and Clever
Devices. USA, 2006. 231 c.
18) Cameron Chapman. Color Theory for Web Designers. USA, 2020. 144 c.
19) Jason Beaird and James George. The Principles of Beautiful Web Design. USA, 2020.
20) Richard Rutter. Web Typography: A handbook for designing beautiful and effective
typography in responsive websites. Нідерланди, 2017. 333 c.
21) Stephen Boss. The New Web Typography. USA, 2016. 256 c.
22) Ellen Lupton. Type on Screen: A Critical Guide for Designers, Writers, Developers,
and Students. USA, 2014. 208 c.
23) Don Norman. The Design of Everyday Things. USA, 2012. 368 c.
24) Jenifer Tidwell. Designing Interfaces. USA, 2012. 599 c.
25) Greg Houston. Illustration That Works: Professional Techniques for Artistic and
Commercial Success. USA, 2016. 208 c.
26) Steve Caplin. Icon Design: Graphic Icons in Computer Interface Design. USA, 2001.
27) Jesmond Allen and James Chudley. Smashing UX Design: Foundations for Designing
Online User Experiences. USA, 2012. 446 c.
28) John Maeda. Simplicity: The Art of Complexity. USA, 2006.
29) John Maeda. The Laws of Simplicity. USA, 2006. 128 c.
30) Kathryn McElroy. Prototyping for Designers: Developing the Best Digital and
Physical Products. USA, 2017. 324 c.
31) Laura Klein. UX for Lean Startups: Faster, Smarter User Experience Research and
Design. USA, 2013. 233 c.
32) Jeff Gothelf and Josh Seiden. Lean UX: Applying Lean Principles to Improve User
Experience. USA, 2013. 148 c.
33) Elizabeth Goodman, Mike Kuniavsky, and Andrea Moed. Observing the User
Experience: A Practitioner's Guide to User Research. USA, 2012. 608 c.
34) Marc Stickdorn and Jakob Schneider. This Is Service Design Thinking: Basics, Tools,
Cases. USA, 2012. 384 c.
35) Bill Buxton. Sketching User Experiences: Getting the Design Right and the Right
Design. USA, 2007. 448 c.

Лис т
ЧДТУ 242011.001 ПЗ
71
Зм Арк. № докум. Пiдпис. Дата
нт

ChSTU repository

ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets