Чому зручність інтерфейсу має значення. Евристики юзабіліті та конкуренція в іграх

Привіт, мене звуть Олександр, я Senior UX/UI Designer в Ubisoft. В попередній статті я розповідав чому кожна людина в команді має вплив на UX. В цій хочу більше розкрити тему юзабіліті та евристик.

UX & Job Family

Юзабіліті

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

Це важливий аспект успіху й популярності продукти. Здається, для деяких це був прям «key/unique selling point»: Apple «It Just Works», Monobank «Раз-два, і банк у телефоні».

Я не зустрічав ігор, у які б люди грали лише через зручний приємний UI. Але аудиторія звикає до певного рівня взаємодії з інших предметних областей: мобайл, веб, автомобільні infotainment-системи... «А Ваша Галя балувана!» Коли UI гри не відповідає очікуванням, це погано впливає на юзабіліті, і як наслідок, на досвід гри. Тому конкуренція рухає прогрес.

Мем із двома зображеннями собак Doge. Ліворуч під заголовком «ІГРИ 2000Х» зображено великого мускулистого Doge з текстом: «Не розумієш як грати? Йди гуляй на вулицю! Всьо, пока!». Праворуч під заголовком «ЗАРАЗ» зображено маленького сумного Doge з текстом: «Ой, давайте я Вас проведу за ручку, все покажу, поясню. А ще дивіться який гарний у нас преміум стор і баттлпас. Ну куди Ви? Зачекайте!». Usability 2000-2025

Конкуренція

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

Можна виділити три категорії конкурентів. Наприклад, я думаю пограти в S.T.A.L.K.E.R. 2: Серце Чорнобиля на PS5.

Прямі конкуренти (Direct competitors)
Ігри умовної підмножини ААА, того ж жанру: open-world, survival horror, постапок шутер....

Непрямі конкуренти (Indirect competitors)
Інші ігри, які дають потрібну емоцію, відчуття, конкуренти за досвід: Ori, Cuphead, Cocoon, Alan Wake 2, The Last of Us, God of War, Red Dead Redemption 2...

Конкуренти-замінники (Replacement/ substitute), в цьому випадку конкуренти за час і увагу, деякі з них:

Медіа та стрімінг (Netflix, Prime, Apple TV, Disney+, HBO Max, YouTube, Twitch)
Мобільні застосунки (E-commerce, Dating, Monobank з їх лимонами)
Соц мережі (TikTok, Instagram)
Оффлайн активності (спорт, настолки, «читати книжки, бути шпіоном, дресірувать любіму обізяну і ходить в оперу»)

Велика кількість варіантів може провокувати параліч вибору або вибір найпростішого — гортати стрічку соц мереж. Багатьох конкурентів-замінників не ісувало в 2000х, тому вибір був легше: «грати в GTA: San Andreas і їсти шалену бджілку». Можливо, зараз треба пропонувати ринку гібридні рішення. Netflix вже пару років додає в свою бібліотеку інтерактивне кіно та ігри аби захопити ще більше ринку.

Скріншот відеогри Stalker 2. У правому верхньому куті показано студію телепередачі з червоним фоном і логотипом «СТБ», а також напис «Супер Мама». Stalker 2+STB

Евристики

Повернімось до юзабіліті та евристик. Звичайно, це не дасть грі нагороду «Game of the Year» на The Game Awards, хіба можливість поборотись у категорії «Innovation in Accessibility». Але добре пророблений аспект юзабіліті може знизити ймовірність втечі користувачів до конкурентів, а їх, як видно, зараз дуже багато.

Юзабіліті евристики (usability heuristics) — це загальні принципи, які допомагають оцінювати та покращувати зручність використання системи. Вони не обмежені цифровим інтерфейсом, і дієві в багатьох сферах і продуктах. Вони часто базуються на спостереженнях і практиці, а не на точних математичних формулах і психологічних термінах. Найвідоміші з них — 10 евристик Якоба Нільсена.

Я взяв за основу ці 10, роботи Celia Hodent (Developing UX Practices at Epic Games) і звів до оновлених восьми.

Стрілки об’єднують пункти 3–5 з підписом «Error prevention and Recovery» та пункт 7 з підписом «A11Y and Flexibility». Евристики юзабіліті

Видимість статусу системи (Visibility of system status)
Відповідність між системою та реальним світом (Match between system and the real world)
Послідовність та стандарти (Consistency and standards)
Запобігання помилкам і відновлення (Error prevention & Recovery)
Впізнавання замість згадування (Recognition rather than recall)
Доступність та гнучкість (A11Y and Flexibility)
Естетичний і мінімалістичний дизайн (Aesthetic and minimalist design)
Допомога та документація (Help and documentation)

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

1.Видимість статусу системи

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

Використовуйте візуальні, звукові та тактильні канали, щоб інформувати про те, що відбувається в грі (informative signs), спонукати гравців виконати певну дію (inviting signs), надавати чітку реакцію на дії гравців (feedback). Усі функції та можливі взаємодії в грі повинні мати відповідні знаки та відгуки.

Основна задача HUD інтерфейсу якраз інформувати гравця про стани, події гри, наприклад, здоров’я, доступні/недоступні дії персонажа, позиція на карті і т.д.

Скріншот гри Fortnite: персонаж стоїть у з відкритим золотим скринькою, на екрані відображено команду гравця, міні-карту, індикатори здоров’я та боєприпасів, панель інструментів із зброєю та ресурсами. Fortnite

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

Інтерфейс меню покращення броні в God of War Ragnarök, показано характеристики та ресурси для апгрейду. Upgrade Menu в God of War Ragnarök

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

2. Відповідність між системою та реальним світом

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

Це особливо важливо для текстів у UI, так званих UX copy. Вони складають значну частину інтерфейсу й можуть зробити UX чудовим — або навпаки, нестерпним, «тєкст по дібільному напісан».

На скріншотах нижче видно приклади HUD-віджетів: вони повторюють розташування кнопок на пристрої вводу (геймпад, клавіатура, Nintendo Switch...). Таким чином можна швидше зрозуміти, що робити, яку кнопку чи кнопки натискати.

Віджет підказки: L-стік + кнопка X — дія «Climb»; поруч іконки Y, A та B. The Legend of Zelda: Breath of the Wild (2017)

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

Три приклади HUD віджетів: Ghost of Tsushima, Spider-Man 2, Assassin’s Creed Shadows з кнопками дій та індикаторами. HUD віджети зброї, здібностей, розхідників

3. Послідовність і стандарти

Елементи інтерфейсу повинні бути узгодженні, послідовні (Consistency) і відповідати загальноприйнятим стандартам.

Навіщо вигадувати колесо, якщо можна красти як художник. Радіальне меню вибору зброї (Weapon Wheel) часто використовується в іграх для швидкого доступу до зброї чи предметів.

Два радіальні меню вибору зброї в ігровому UI: ліворуч Red Dead Redemption 2, праворуч Far Cry 6. Радіальне меню вибору зброї (Weapon Wheel)

Навігація в Horizon Forbidden West(2022) схожа з YouTube чи іншими TV застосунками. Загалом це поширена практика брати, надихатись рішеннями з інших областей: знайомі стандарти, структури, шаблони.

Інтерфейс YouTube та Horizon Forbidden West з боковим меню навігації. Навігація YouTube та Horizon Forbidden West(2022)

Левел-дизайн спирається на ті ж правила: виступи, на які можна залізти, виглядають схоже в іграх; червоні бочки, ймовірно, вибухнуть після пострілу; жовті елементи привертають увагу до важливого, як і в міському дизайні.

Чотири скріншоти з ігор, що показують виступи для лазіння: Uncharted 4 — кам’яні уступи; STAR WARS Jedi: Fallen Order — металеві подряпані платформи; Kena: Bridge of Spirits — теж подряпини та символ в камен; God of War Ragnarök —скелі з видимими точками та символами. Виступи, на які можна залізти

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

4. Впізнавання замість згадування

Інформація, необхідна для користування має бути видимою або доступною за потреби. Аби мінімізувати навантаження на пам’ять, зробивши видимими об’єкти, дії та параметри.

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

Скріншот з літака в Far Cry 6: інфо панель керування справа Far Cry 6 (2021)

Інтерфейс магазину зброї з каталогом на розвороті та панеллю керування справа Red Dead Redemption 2 (2018)

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

Ігровий екран з картою у грі Prince of Persia: The Lost Crown. Праворуч показана легенда з пунктами Prince of Persia: The Lost Crown (2024)

Ще гарне рішення у God of War: Ragnarök. Зліва — дієгетичний UI: персонаж наводить на тайли світів на дверях, а справа відображається недієгетична панель для гравця з інформацією про цю локацію, квести, колекційні речі. Відповідно, це зменшує кількість інформації, яку потрібно запам’ятовувати або шукати.

Персонаж стоїть біля дерев’яних дверей з символами світів, справа UI панель God of War: Ragnarök (2022)

У багатьох програма поширена функція Recent Files — показує останні відкриті документи або проєкти. Користувачам не потрібно згадувати точний шлях чи назву файлу — просто розпізнаємо та обираємо потрібний елемент.

5. Запобігання помилкам і відновлення

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

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

Два приклади вікон підтвердження з відеоігор. Ліворуч — Dishonored 2: темний екран із великим знаком питання та текстом «Do you want to spend 3 Runes to acquire the Pull Objects upgrade?» з кнопками No і Yes. Праворуч — Horizon Forbidden West: меню Tripwire Pouch на дерев’яній поверхні з діалогом «Would you like to set this job as your Active Quest?» та кнопками No і Yes. Вспливаючі вікна підтвердження Dishonored 2 та Horizon Forbidden West

Два приклади вікон підтвердження з відеоігор. Ліворуч — Hi-Fi Rush: яскраве меню налаштувань із вкладками Options, Gameplay, Graphics, Sound, Accessibility та діалогом «Quit the options menu without applying changes?» з кнопками Yes і No. Праворуч — XDefiant: темний екран із діалогом «Exit Game. You are about to exit XDefiant. Are you sure you want to quit the game?» з кнопками Yes і No. Вспливаючі вікна підтвердження Hi-Fi Rush та XDefiant

Зверніть увагу на порядок дій в поп-апах: в першому випадку No-Yes, в другому Yes-No. Здається, світ ще досі не узгодив стандарт для цього елементу. На даний момент, я схиляюсь до рішення писати чіткі назви дій. Тобто замість Yes- Exit, Delete, Buy і т.д.,а замість No- Back, Cancel, тощо. Таким чином, за самими кнопками людина може зрозуміти, передбачити наслідки дій. Я помічав це рішення на різних платформ як от TV, iOS, Playstation.

Цікаво, що для підтвердження надважливої дії, у World of Warcraft та Figma застосовані схожі дизайн-рішення. У WoW, щоб видалити персонажа потрібно ввести слово «DELETE», а у Figma — назву дизайн-команди, щоб підтвердити її видалення.

Два приклади вікон підтвердження: перше з гри World of Warcraft із запитом на видалення персонажа, друге з Figma із запитом на видалення команди UX/UI Course. Вспливаючі вікна підтвердження World of Warcraft та Figma

6. Доступність та Гнучкість

Доступність — це атрибут, якості, які роблять досвід відкритим для всіх("The qualities that make an experience open to all" згідно з Inclusive 101 Guidebook. Microsoft Inclusive Design). Це надважливо та актуально в сучасних реаліях.

Чим більше можливостей налаштувань у грі, тим доступнішою вона може бути для гравців. Та думаю не слід «якоритись» ідеєю створення сотень опцій і категорій, варто шукати нові більш витончені UI рішення, можливо, якась автоматична синхронізація налаштувань ігор та платформи. Чи все ж, якщо налаштувань багато, то мати в грі функцію пошуку, аналогічно як є на IOS, Android, Windows, Call Of Duty, тощо.

Екран налаштувань доступності в грі XDefiant 2024, ліворуч українською мовою, праворуч арабською. Інтерфейси відзеркалені. Скріни налаштувань доступності в XDefiant(2024) українською та арабською мовами

Гнучкість забезпечує ефективну взаємодію як для новачків, так і для досвідчених користувачів. Наприклад, гарячі клавіші, шорткати, макроси, персоналізовані налаштування, тощо. Так, в Resident Evil 4 змінити зброю можна як за допомогою хрестоподібного оверлей-меню, так і за допомогою шорткатів. У цьому меню показані відповідні призначені клавіші (1,2,3,...) — як нагадування про можливість такої взаємодії.

Сцена з гри Resident Evil 4 (2023): персонаж стоїть у темній кімнаті, справа меню вибору зброї з підписаними хоткеями слотів. Resident Evil 4 (2023)

Важливо звернути увагу на "Accessibility by Design«— це підхід у розробці продуктів, коли доступність враховується з самого початку, а не додається пізніше як «опція». Таким чином усувають причини, а не наслідки, це економить час та ресурси розробки. В нагоді стануть стандарти та гайдлайни Web Content Accessibility Guidelines та Xbox Accessibility Guidelines.

На GameGathering Lviv 2025 мав доповідь «Доступність в іграх: чому це покращує досвід для всіх» (Запис на YouTube). У ній розповів про інклюзивний дизайн, доступність, типи порушень, ексклюзії, вдалі та не дуже дизайн-рішення.

7. Естетичний і мінімалістичний дизайн

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

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

Якщо якийсь елемент можна приховати — варто це розглянути. У Kena: Bridge of Spirits HUD майже відсутній: віджети з’являються лише в потрібному контексті, наприклад, під час бою. Це допомагає зберігати увагу гравця та покращує занурення в ігровий світ.

Два скріншоти з гри Kena: Bridge of Spirits. Ліворуч персонаж стоїть на траві перед дерев’яною конструкцією, HUD відсутній, ворогів немає. Праворуч персонаж прицілюється з лука у ворогів, на екрані видно HUD з індикаторами здоров’я та боєприпасів. Kena: Bridge of Spirits (2021)

Варто згадати дієгетичний UI — інтерфейс існує безпосередньо в ігровому світі та має логічне пояснення в лорі. Наприклад, у Dead Space рівень здоровʼя відображається на хребті костюма персонажа, а кількість набоїв — безпосередньо на зброї; у Far Cry 2 — карта й телефон; у Firewatch — карта та компас.

Скріншот Dead Space: персонаж у космічному костюмі в відкритому космосі, на екрані показники кисню та здоров’я на костюмі, індикатор цілі та стан корпусу. Dead Space (2023)

Скріншот Far Cry 2: персонаж тримає карту та GPS-пристрій у руках Far Cry 2 (2008)

Скріншот Firewatch: персонаж тримає карту та компас у руках Firewatch (2016)

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

8. Допомога та документація

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

Залежно від конкретної гри, це реалізується через поступове, крок за кроком навчання у грі, де є контекст (навчання на практиці) та значення (доцільно для життя/місії/цілі персонажа)

Велике спливаюче вікно поверх ігрової сцени з текстом TIRED OF TUTORIALS? UPGRADE NOW TO KOBAYASHI TUTORIAL PREMIUM AND LET US PLAY THE GAME FOR YOU! кнопка OK внизу. Far Cry 3: Blood Dragon (2013)

Tutorial Level у Cuphead — гарне естетичне рішення і цей рівень доступний протягом усього проходження гри.

Екран навчання з інструкціями в стилі ілюстрацій на папері по якому рухається персонаж Cuphead (2017)

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

Інтерфейс меню зліва список з пунктами механіками та текстовим описом справа відповідно до обраного пункту. Clair Obscur: Expedition 33 (2025)

Цікаве рішення в Hi-Fi Rush: можна відпрацювати придбані, доступні комбо у безпечному середовищі без загроз.

Інтерфейс ритмічної гри з нотним треком угорі та підказками комбінацій кнопок зліва. Hi-Fi Rush (2023)

Підсумок

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

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

Практичність нагадала фразу «кращий UI — невидимий UI». До прикладу, автомобільна індустрія: не хочете перемикати світло фар, склоочисники — тримайте автоматичне світло та датчик дощу; набридає щоразу натискати кнопку на брелку, щоб відкрити автівку — будь ласка, безключовий доступ; втомлюється нога тримати педаль газу — тримайте круїз-контроль... Привабливо ? Тоді беріть «гроші в тумбочці» і ми додамо ці опції. Мінімум взаємодій, мінімум UI аби не відволікати від core experience — досвіду керування. А як і це не хочете — поставимо автопілот.

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

Дякую!

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

Теми: ubisoft