Сегодня на рынке действительно мало компаний, которые разрабатывают собственные инструменты. А если и разрабатывают, то, как правило, не задумываются об их удобстве. Мы решили пойти другим путём и не просто разработать свой игровой движок, но и сделать его по-настоящему комфортным в работе, максимально приблизив по удобству к Unity/Unreal. 

Немного контекста

Сразу отмечу, что задачи сделать «убийцу» Unity у нас не стояло. VSO зародился на проекте Wildscapes как специализированный игровой редактор. С его помощью гейм-дизайнер настраивал позиции игровых объектов и их параметры. Поэтому в тот момент не было и процесса по доработке интерфейса. Разработчики делали интерфейс для себя: как могли и малыми средствами.

Интерфейс VSO написан на ImGui. Это опенсорсная библиотека, с помощью которой в игру можно интегрировать UI. Как и со всеми готовыми решениями, плюсом был лёгкий старт, а в качестве минусов мы получили проблемы, связанные с поддержкой и преодолением ограничений стороннего продукта.

Функциональность VSO продолжала активно развиваться. Инструмент быстро вышел за пределы одной игры и начал использоваться кросс-проектно. По мере добавления новых фичей про удобство работы пришлось временно забыть. 

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

Мы поняли, что больше не можем мириться с существующим интерфейсом и нужно что-то менять. 

Что мы сделали

Получив зелёный свет, мы привлекли ресурсы Playrix и собрали команду из технических директоров и UI-специалиста, которая взяла на себя ответственность за развитие удобства VSO.

С UI-художником мы провели несколько раундов проработки нового интерфейса, пока, наконец, не остановились на варианте, который вы видели выше.

Я не буду подробно рассказывать про каждую итерацию, но покажу на примерах отличия до/после:

Первым делом мы перенесли названия полей налево. В стандартной теме ImGui сначала идёт значение поля, а уже затем его имя. Это неудобно — приходится водить глазами справа налево, что усложняет поиск. Сама правка в ImGui была простой — всего один параметр. Но так как интерфейс VSO изначально проектировался иначе, возникли проблемные места. Где-то текст накладывался на поля, где-то обрезался, где-то просто уехал. Не повторяйте наших ошибок: делаете новый интерфейс — ставьте названия полей сразу слева.

Следующим пунктом стала правка цветовой схемы. Мы избавились от излишнего контраста, убрали лишние акценты, и интерфейс перестал давить.

Дальше поменяли шрифт. Взяли уже зарекомендовавший себя Inter. Этот опенсорс-шрифт изначально создавался для Figma, сейчас среди прочих им пользуются GitHub и Mozilla. Его главная особенность в том, что он специально разработан для цифровых экранов, поэтому сохраняет хорошую читаемость даже при очень маленьком размере. А нам было важно сэкономить как можно больше места, чтобы с VSO стало возможно работать на одном экране. Полезная площадь пропадала и из-за лишних отступов и рамок. Весь интерфейс был перенасыщен лишним мусором.

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

Последним пунктом мы уменьшили размеры всех UI-элементов, следуя простому правилу: чем меньше, тем лучше, до тех пор, пока сохраняется удобство работы.

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

Цвета behaviour’a

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

Иконки

Отдельным этапом обновления интерфейса стали иконки. К сожалению, символы из библиотеки Material Design не могли решить всех задач, и мы решили нарисовать свои.

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

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

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

Что мы делаем сейчас

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

Сейчас работа с UX/UI в VSO вынесена в отдельный процесс. Мы продолжаем развивать инструмент, добавляя новые фичи и улучшая визуальную составляющую и удобство работы. Для этого собираем фидбек наших сотрудников и на его основе планируем изменения. 

Наша цель — сделать так, чтобы сотрудник, знакомый с Unity или Unreal, увидев VSO, чувствовал себя комфортно. И мы уверены, что у нас это получается. 

Статья написана совместно с @vforvasiliy

Ранее на Хабре мы уже писали о том, как сделали собственный игровой движок VSO, а сегодня расскажем, как мы улучшали его интерфейс и удобство работы с ним. Статья будет полезна всем, кто только начинает разбираться с UX/UI и хочет узнать, как с помощью базовых принципов построения интерфейса сделать работу со своим инструментарием удобнее и эффективнее.