Як створити якісний UI для дитячої гри і протестувати його. Досвід Keiki

Усім привіт! Мене звати Юля Житнік, я — Product Designer у Keiki, компанії з екосистеми Genesis. Наш флагманський продукт — Keiki World, мобільний застосунок з ігровим контентом для розвитку дітей до 5 років.

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

Принципи хорошого дитячого UI

Ніша дитячого контенту стрімко зростає з кожним роком. Згідно з дослідженням Pew Research Center за 2021 рік, 81% дітей у США віком від 0 до 11 років користуються планшетом, 71% — смартфоном. Роком раніше їхня кількість складала 68% та 63% відповідно. Більшість батьків контролюють контент, що споживають діти, та шукають корисні ігри й застосунки. У ніші на стику EdTech та GameDev якраз працює Keiki World.

Інтерфейс користувача, або UI (User Interface) — це зовнішній вигляд продукту, спосіб його спілкування з людиною. Для дитини, як і для дорослого, UI має бути зрозумілим, легким у сприйнятті та створювати позитивний досвід користування продуктом. Насамперед інтерфейс має відповідати основним правилам асоціації D4CR (Designing for Children’s Rights), які передбачають створення безпечного корисного середовища.

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

1. Дружні кольори

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

2. Комплексні підказки

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

3. Гарантована винагорода

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

4. Врахування вікової групи

Створювати гру для широкої вікової групи (наприклад, 2–11 років) — надскладне завдання. Адже рівні навичок дітей 2 та 11 років кардинально відрізняються. Часто особливостями UI для дорослих користувачів є темні кольори, завелика кількість елементів та складність пошуку елементів для взаємодії. Для досвідчених гравців це не проблема, адже вони орієнтуються в іграх інтуїтивно. Малюки ж лише роблять свої перші кроки в дослідженні застосунків.

Як протестувати дитячий UI

Дитячі продукти складні в тестуванні. Кожен малюк потребує особистого підходу, а результат залежить від зацікавленості. На етапі запуску застосунку Keiki World команда проводила перші тести в дитячому садку: просто давали дітям девайси та дивилися, як вони грають. Важливо підмічати будь-які деталі: як дитина тримає девайс, як взаємодіє з ним, «тапає» чи «свайпає». А також, що привертає її увагу, як обирає гру, як швидко приймає рішення, що викликає усмішку, а що — роздуми.

Що врахувати під час тестування з дітьми:

1. Знайома атмосфера. Нестабільне оточення та подразники змушують малюка поводитися неприродно. Краще проводити вдома або в садку, щоби діти не відволікалися на нових людей, приміщення, а були зосереджені на грі.
2. Близька людина поруч. Діти можуть соромитися нових людей, не зможуть відверто відповідати на питання. А іноді можуть закритися в собі та зовсім не йти на контакт.
3. Паузи. Не варто розраховувати на годинне глибинне інтервʼю. Тестування краще розділити на раунди по 15–20 хвилин, щоби діти утримували концентрацію й не нудьгували.
4. Відкриті запитання, невимушене спілкування. Дітям складніше ділитися переживаннями, а на прямі запитання відповідати їм не подобається. Найкраще — попросити дитину просто коментувати свої дії.

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

Як знайти інсайти, щоби покращити UI

Ідея провести редизайн меню застосунку зʼявилася після дослідження конкурентів — у порівнянні з ними інтерфейс Keiki World виглядав трохи застарілим та тьмяним. А користувацьке опитування надихнуло змінити логіку та інформаційну структуру меню.

Слухаючи відповіді маленьких респондентів, може здатися, що в них немає жодної логіки та сенсу. Діти не дають раціональних пояснень, що їм подобається, а що ні. Але можна відшукати корисні інсайти навіть у таких відповідях як «подобається ця картинка, бо тут є літера М. Це моя улюблена літера», «ця картинка мила, бо в Оленя є очі та рот» або «милий слимак обʼївся мармеладками».

Зокрема ми виявили такі проблеми:

1. У попередній версії головного меню ігри розташовувалися в «каруселі». Пошук займав багато часу, вибору передувало тривале гортання.
2. Іконки не передавали механіку гри. А дітям важливо точно знати, що вони обирають — гру з цифрами чи пазл.
3. Активні елементи не варто розміщувати на нижньому краю екрана. Через вагу планшета діти часто опираються зап’ястками на нього.
4. У підказках варто поєднувати аудіоінструкції разом із візуальними для максимального ефекту. Окремо один від одного їх помітити важче.
5. Точки дотику в меню мають бути великими та добре ізольованими, щоби сприяти розвитку дрібної моторики.

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

UI до

UI після

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

Отже, створення UI дитячих застосунків — складна, але цікава робота. Яскраві кольори та великі кнопки — дизайнерські кліше, які насправді не відповідають потребам дітей. Щоби зрозуміти своїх користувачів, варто використовувати будь-яку можливість протестувати продукт на цільовій аудиторії, уважно слухати, спостерігати та шукати інсайти.

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