Дизайн интерфейса математической игры для школьников

Миром правит искусственный интеллект, и только школьникам под силу спасти человечество, решая математические задачи.

По сюжету игры люди скрываются в заброшенном метро и передвигаются от станции к станции. В каждой локации игрокам нужно зайти на сервер, чтобы захватить эту станцию и двинуться дальше. Серверы защищены хитрым способом — для входа нужно решить несколько задач, которые выдает компьютер.

Когда игроки добираются до конечной станции, их ждет неожиданная развязка.

Отразили в интерфейсе сценарий математической игры

Сценарий

2021
~ 500 000 ₽

Бюджет

Результат

Рынок онлайн-образования растет

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

Четкого представления об интерфейсе у заказчика еще не было

Нам нужно было вместе найти решения на стыке продукта и интерфейсов. Это не похоже на пошаговое проектирование интерфейса по четкой постановке. Здесь схема другая. Заказчик формирует видение того или иного куска интерфейса, мы визуализируем это, заказчик смотрит и принимает решение — брать или переделать.
1. Сначала мы отрисовали GUI-интерфейс компьютера в каждой локации. Затем поняли, что функционально он дублирует интерфейсные элементы всего игрового поля, и интерфейс компьютера предельно упростился.
Команата. Интерфейс компьютера
Комната. Интерфейс компьютера
2. Изначально заказчик планировал сделать чат внутри игры, а потом решил использовать вместо него Дискорд. Оба варианта мы визуализировали, чтобы проиллюстрировать интерфейсную разницу. В итоге выбрали первый вариант — встроенный чат.
3. Карта серверов сложилась не сразу, перебрали множество цветовых схем и вариантов иконок. Не сразу приняли решение, как игрок перемещается по локациям — просто переходит при клике на интерактивную карту или путешествует на поезде.
Комната. Переход на карту интерфейсов
Комната. Переход на карту интерфейсов
4. Подобрали референсы и предложили несколько вариантов стилистики.
Некоторые референсы

Фиксация сценариев помогает найти нужные решения

Работа не была хаотичной. В самом начале мы подготовили пользовательские сценарии. По ходу работы они менялись и дополнялись, но все равно в любой момент времени у нас были более-менее четкие требования к действиям пользователя. А вот в том, как эти действия отразить в игровом формате, и заключался продуктовый поиск.

Придумали конструктор иллюстраций и отказались от него

Основной интерфейс игры — комната на станции метро, в которой стоят компьютеры. Визуально комнаты на разных станциях должны хотя бы немного различаться. Мы предложили использовать конструктор, состоящий из набора нарисованных объектов: их можно быстро и по-разному расставлять по комнате, менять цвет комнат, угол обзора и источники света.
Конструктор иллюстраций
Конструктор иллюстраций
Заказчику понравился этот вариант: он позволял быстро создавать много разных комнат без дополнительных затрат и графических навыков, а также соответствовал минималистичному стилю, выбранному им вначале.
Конструктор иллюстраций
Конструктор иллюстраций
Впрочем, по ходу работы требования к стилистике поменялись. Комнаты должны выглядеть более интересно, разнообразно, художественно. Нужны визуальные элементы и прорисованные разрушения, чтобы помещения выглядели заброшенными. Тут уже конструктором не обойтись, поэтому мы нашли иллюстратора, который каждый раз будет рисовать комнату с нуля.
Конструктор иллюстраций
Конструктор иллюстраций

Через методичный поиск решений пришли к уверенном результату

В несколько итераций создали структуру, включающую экран монитора компьютера, профиль игрока, сайдбар с постоянными элементами, титры, рассказывающие предысторию игры, хелп-бота.
Все баллы, награды и подсказки, которые игрок получает по ходу игры, складируются у него в инвентаре.
Инвентарь
Инвентарь
Небольшой онбординг рассказывает об основных элементах игры: наводишь на них мышь и получаешь необходимую информацию.
Онбординг
Онбординг
Онбординг
Онбординг
Онбординг
Онбординг
Онбординг
Онбординг
Математические задачи интегрированы в сюжет так: для входа на сервер игроку нужно решить математическую капчу.
Пример математической задачи
Решил — молодец, получи письмо от загадочного Алекса, в котором он расскажет, что нужно делать дальше.
Пример математической задачи
Пример математической задачи

Слово директору

Фактически, мы взяли на себя все UX-задачи компании

~ 500 000 ₽
Бюджет
Результат
Интерфейс образовательной игры — нетипичная задача, а вот подход к ее решению вполне укладывается в нашу методологию.
Наталья Прокофьева
Наталья Прокофьева, генеральный директор «Собаки Павловой»
Другие кейсы