Гарно та погано. Досвідчені розробники розбирають UI/UX-дизайн RDR 2, Tomb Raider та Dying Light 2

Три випуски рубрики «гарно та погано» позаду, а це — четвертий і останній. Коротко нагадаємо її суть. Ми просимо досвідчених українських фахівців розібрати той аспект в іграх, на якому вони спеціалізуються. Попередні матеріали з циклу були присвячені геймдизайну, дизайну рівнів та арту. А сьогодні в центрі уваги UI/UX.

Наші спікери обирають будь-який проєкт на вибір з тих, які вони грали або вивчали. А далі розробники описують по одному гарному і поганому рішенню в обраному для матеріалу напрямку. Сьогодні з нами поділилися думками UI/UX-дизайнери Epic Games, Bini Games, Room 8 і Horizon Holding. Вони розібрали реалізацію інтерфейсу у Red Dead Redemption 2, Nobody Wants to Die, Dying Light 2 і трилогії Tomb Raider.

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

Євген Фільченко, Lead UX Designer у Epic Games, — про Nobody Wants to Die

Для огляду UX я обрав гру Nobody Wants to Die від польських розробників зі студії Critical Hit Games. Вона виконана у жанрі нуарного кіберпанк-детектива й минулого року вийшла у Steam.

В UX є поняття «дієгетичний дизайн». Це підхід, в якому дизайнер намагається інтегрувати класичний UI у гру, щоб він здавався невіддільною частиною віртуального світу. Один із найпоширеніших прикладів такого методу — відображення ключових показників персонажа, таких як очки здоров’я та кількість патронів, прямо на його тілі або зброї. Саме так це реалізували у Dead Space.

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

Одразу варто зазначити, що йдеться не про звичайне перемотування часу в екшенах на кшталт Prince of Persia: The Sands of Time, F.E.A.R., Max Payne, Braid, Singularity та інших. В жанрі інтерактивних новел механіка зводиться до маніпуляцій із записами минулих подій для пошуку важливих фрагментів або доказів. Вони допомагають зрозуміти контекст історії або зміни, які трапилися під час конкретних подій.

На моїй пам’яті, першою грою, яка запропонувала цю механіку, була Remember Me. Кумедно, та саме вона 11 років тому надихнула мене перейти від розробки казуальних ігор до AAA-проєктів. У проєкті користувач міг повертатися у спогади про минулі події, наприклад, в трагічну автокатастрофу, яка травмувала матір загиблої дитини.

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

Трансформуючи епізоди минулого, гравець змінював спогади про них. Завдяки цьому героїня могла пережити отриману ментальну травму. Аналогічна механіка, але з доступнішим дизайном, була реалізована у Cyberpunk 2077.

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

На мій погляд, розробники Nobody Wants to Die знайшли золоту середину. Critical Hit інтегрувала інтерфейс, який реалізували у Cyberpunk 2077, в спеціальний браслет детектива. Це дозволяє реконструювати події на місці злочину, керувати часом і знаходити важливі деталі сюжету.

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

З погляду UX, використання браслета для ключових механік — це елегантне й візуально привабливе рішення, яке розширює візуальну ідентичність головного героя під час маркетингу гри. Насправді в Nobody Wants to Die є ще багато цікавих дизайнерських креативів. Та краще вам самостійно відкрити їх, щоб отримати більше задоволення.

Щодо недоліків, то у другій половині гри виникає відчуття відсутності реального впливу на події та фінал. У Nobody Wants to Die є три завершення, які визначаються такою ж кількістю ключових рішень протягом проходження. Проблема в тому, що основні вибори, які впливають на перебіг оповіді, складно відрізнити від фрагментів з відіграванням ролі. Останні на історію якраз не впливають.

Це поширена проблема наративних проєктів, і її нелегко вирішити. Але є приклад, який мені сподобався. В одному з епізодів The Wolf Among Us персонаж стикається з ключовим розгалуженням. Воно визначає його пріоритети й матиме вагомі наслідки. У цю мить час сповільнюється, і гравець бачить велике меню з візуальними образами, які асоціюються з різними рішеннями. Таким способом підкреслюється важливість моменту і привертається особлива увага гравця до вибору.

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

Наталія Яковлєва, UX/UI Designer у Burny Games, — про Dying Light 2

Dying Light 2: Stay Human — це довгоочікуване продовження серії в жанрі екшен-RPG, створене польською студією Techland. Реліз гри відбувся 4 лютого 2022 року. Вона здобула популярність завдяки поєднанню акробатики, боїв з зомбі та відкритого світу. Особлива роль в проєкті виділена саме системі паркуру, яка дозволяє гравцеві вільно пересуватися містом, використовуючи дахи будівель, стіни та інші елементи оточення.

Весь інтерфейс гри виконано у приємному постапокаліптичному стилі. Помаранчеві відтінки — не нав’язливі й одночасно акцентні, вони гарно сприймаються оком. Іконографіка «жирна», а зміни в інтерфейсі та завданнях мають звуковий супровід. Налаштування гри дають можливість підігнати HUD під власний стиль.

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

При наведенні на індикатор в ігровому світі ви дізнаєтесь подробиці об’єкта, що вас зацікавив. А ще є гарна особливість в кооперативі — телепорт товариша до вас. Це чудова функція для такого ігрового жанру. Бо коли ви вже на даху хмарочоса, а друг не може залізти у вікно, швидке переміщення може стати єдиним порятунком ігрового вечора 🙂.

Dying Light 2 має свої слабкі сторони. Після декількох годин проходження користувачу дається можливість покращувати зброю та екіпірування, але цей процес не є інтуїтивно зрозумілим. Частково причиною проблеми стала реалізація системи інвентарю.

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

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

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

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

Щоб побачити місцеперебування напарника, потрібно постійно натискати кнопку спеціального бачення. Робити це незручно, тому з’являється необхідність питати один одного: «Ти де?», — а потім шукати як зустрітися. І це в умовах, коли на гравців полюють зомбі.

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

Зі слабких місць я додатково виділю повторювану інформацію:

• При кожному вході у користувача запитують, чи додавати сезонні івенти у гру, навіть коли ця опція увімкнена в налаштуваннях.
• Під час входу в Dying Light 2 постійно демонструються одні й ті ж попередження та ролики.
• Після появи у відкритому світі пропонують відстежувати завдання, яке вже є активним.

Загалом UI в Dying Light 2: Stay Human приємний у взаємодії, дає можливість кастомізації, виглядає чистим і не перевантаженим.

Ярославна Коровайська-Тарасенко, UI/UX Designer у Horizon Holding, — про Red Dead Redemption 2

Red Dead Redemption 2 — це чудовий приклад гри, де інтерфейс і UX продумані до дрібниць. Але все ж є кілька моментів, які могли б бути зручнішими.

Один з найбільш дивовижних моментів у Red Dead Redemption 2 — це інтерфейс, який не нав’язує себе, а просто працює у потрібні моменти. В грі все зроблено так, щоб користувач міг насолоджуватися світом, не відвертаючи увагу на зайві елементи в полі зору.

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

До чудових рішень також належить система підказок в RDR2, яка працює ненав’язливо. Вони з’являються лиш у моменти, коли гравець реально потребує допомоги. Розробники не намагаються постійно втрутитися у ваш досвід. І, звісно ж, в проєкті є можливість налаштувати інтерфейс під себе. Це просто мрія для користувачів, які люблять все коригувати для власної зручності. Є навіть опція приховати більшість елементів інтерфейсу і просто насолоджуватися проходженням. Такий підхід справді класний, бо кожен може налаштувати гру під свої вподобання.

Як і в будь-якій великій грі, в Red Dead Redemption 2 є моменти, які потребують доопрацювання. Наприклад, система меню та інвентарю іноді може засмутити. Радіальне меню виглядає красиво, та під час бою, коли все відбувається швидко, дуже складно знайти потрібну зброю чи предмет. Розташування елементів здається трохи заплутаним. Доводиться витрачати час, поки зрозумієш, де і що знаходиться. А це відриває від ігрового процесу.

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

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

Євген Денисов, Middle UI/UX Designer у Room 8 Studio, — про трилогію Tomb Raider

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

Торік я пройшов крайню трилогію Tomb Raider, причому всі частини підряд. У процесі гри звернув увагу на зміни в UX у меню для крафту. Я не буду детально розглядати всі аспекти меню, адже в кожній наступній частині додавалися нові елементи та функції, а деякі компоненти змінювали своє розташування. Хочу звернути увагу саме на систему створення кастомних предметів із чіткою прогресією в кожній з частин.

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

• Tomb Raider: «навички», «швидке переміщення», «крафт».
• Rise of the Tomb Raider: «навички», «інвентар», «зброя», «швидке переміщення».
• Shadow of the Tomb Raider: «навички», «інвентар», «швидке переміщення».

Розділи «навички» та «крафт» у першій частині були дещо складними у використанні. При виборі однієї з функцій гравець бачив зверху дубльоване основне меню, посередині — прев’ю, а знизу — підрозділи, всередині яких вивчалися вміння та здійснювався крафт. Таким чином виникала трирівнева структура, яка змушувала гравця постійно перемикатися між доступними опціями. Це трохи плутало, хоча сам інтерфейс виглядав привабливо.

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

У Rise of the Tomb Raider розробники вирішили спростити розділ «крафт», поділивши його на «інвентар» та «зброю». Це покращило загальну структуру, проте трирівнева залежність залишилася. Зміни додали зручності завдяки підняттю елементів взаємодії ближче до основних пунктів підрозділів. Це поліпшило візуальну ієрархію і сприйняття послідовності.

У третій частині меню значно спростили. Гравець тепер обирає розділ «інвентар», де здійснює весь процес крафту. Категорію «навички» повністю переробили, і вона більше не пов’язана з «інвентарем». Усередині «інвентарю» вся інформація стала набагато зрозумілішою: гравець бачить три основні розділи зверху, а під ними — підрозділи з відповідними предметами. Відсутність дублювання пунктів з інших категорій і вертикальна ієрархія суттєво полегшили навігацію.

Мені сподобалося поступове спрощення меню в точках відпочинку — від заплутаного інтерфейсу у Tomb Raider до зрозумілого й структурованого у Shadow of the Tomb Raider. Людський мозок може утримувати до семи елементів у пам’яті. Та якщо є можливість скоротити їх до трьох і спростити використання інтерфейсу, то чому б цим не скористатися?!

Підписуйтеся на Telegram-канал @gamedev_dou, щоб не пропустити найважливіші статті і новини