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

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

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

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

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

Сценарий

2021

~ 500 000 ₽

Бюджет

Результат

Финальные макеты

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

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

Открывающие титры игры

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

Нам нужно было вместе найти решения на стыке продукта и интерфейсов. Это не похоже на пошаговое проектирование интерфейса по четкой постановке. Здесь схема другая. Заказчик формирует видение того или иного куска интерфейса, мы визуализируем это, заказчик смотрит и принимает решение — брать или переделать.

1. Сначала мы отрисовали GUI-интерфейс компьютера в каждой локации. Затем поняли, что функционально он дублирует интерфейсные элементы всего игрового поля, и интерфейс компьютера предельно упростился.

Комната. Интерфейс компьютера

2. Изначально заказчик планировал сделать чат внутри игры, а потом решил использовать вместо него Дискорд. Оба варианта мы визуализировали, чтобы проиллюстрировать интерфейсную разницу. В итоге выбрали первый вариант — встроенный чат.

3. Карта серверов сложилась не сразу, перебрали множество цветовых схем и вариантов иконок. Не сразу приняли решение, как игрок перемещается по локациям — просто переходит при клике на интерактивную карту или путешествует на поезде.

Комната. Переход на карту интерфейсов

4. Подобрали референсы и предложили несколько вариантов стилистики.

Некоторые референсы

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

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

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

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

Конструктор иллюстраций

Заказчику понравился этот вариант: он позволял быстро создавать много разных комнат без дополнительных затрат и графических навыков, а также соответствовал минималистичному стилю, выбранному им вначале.

Конструктор иллюстраций

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

Конструктор иллюстраций

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

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

Все баллы, награды и подсказки, которые игрок получает по ходу игры, складируются у него в инвентаре.