Как создаётся кастомизация в World of Tanks

Проблемы интерфейса и внедрение новых элементов.

UX-дизайнер Wargaming Елена Сталыгво написала для DTF колонку, в которой описала процесс работы над системой кастомизации в World of Tanks. Перед ней стояла задача улучшить интерфейс внешнего вида версии 9.21 и внедрить новые типы элементов: тактические номера и декали.

Прежде чем рваться в бой с криками «Сейчас я тут всё переделаю!» и размахивать шашкой, UX-дизайнеру, как правило, нужно провести целый ряд исследований интерфейса и собрать как можно больше информации.

UX-тестирования в нашей лаборатории — один из самых ценных источников для выяснения барьеров, с которыми сталкиваются пользователи. За два года мы провели бесчисленное количество тестов в UX-лаборатории и не останавливаемся на достигнутом: много тестов не бывает.

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

Именно этой задачей я и начала заниматься с 2018 года: тесты — анализ — проектирование — отзывы — тесты — отзывы — анализ — проектирование — тесты… Цепочка была бесконечной, но для меня это идеальный процесс разработки, ведь кастомизация — это довольно непростая функциональность, где сталкиваются 3D-сцена и 2D-интерфейс.

Напомню, что обновление 9.21 включало в себя не только переработку всего интерфейса, но и новые элементы кастомизации:

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

Интерфейс внешнего вида — это по большей части 3D-сцена с танком и несколько статичных окон. Зачастую эти окна могли занимать большую часть экрана и закрывать собой полезное пространство 3D-сцены, особенно это критично для мониторов с небольшим разрешением. К тому же эти интерфейсы были не совсем простыми для понимания и часто игнорировались игроками.

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

Что касается самих интерфейсов, вы будете смеяться, но как UX-дизайнер я убеждена, что интерфейсы — зло. Другими словами, это барьер между человеком и машиной, и зачастую интерфейсы препятствуют выполнению задачи пользователя. Зачем создаются гайды «Как работать с системой», если можно сделать взаимодействие простым и понятным? Именно эта мысль стала для меня главным принципом проектирования и улучшения существующей кастомизации.

Проблему перекрытия окнами 3D-сцены мы также решили: интерфейс кастомизации научился подстраиваться под разрешение экрана и «прятаться», каким бы он ни был, позволяя игроку рассмотреть все детали элементов, нанесённых на танк.

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

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

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

Однажды мне попался слоган компании Defender — «Удобство складывается из мелочей». Эта простая, но точная мысль меня впечатлила — ведь мелочи действительно могут как улучшить, так и испортить впечатление от продукта в целом.

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

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

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

Для взаимодействия с номерами спроектирован «невидимый UX»: номер вводится с клавиатуры прямо на танке без дополнительного интерфейса. Интерфейс номеров — это подчёркивания и полупрозрачные нули на танке, подсказывающие игроку, сколько цифр можно ввести, и начертание шрифта. Ввод и редактирование номера с клавиатуры и пара своевременных подсказок — что может быть проще? Всё остальное сделает система, и поверьте, нагружается она по полной. Мало того, что у нас есть недоступные комбинации цифр, так ещё и существует три разновидности номеров (1-, 2- и 3-значные), а значит, и возможность переключения между ними в любой момент.

В какой-то момент мы обнаружили, что некоторые надписи на ВЛД расположены под углом и перекрываются орудием, — особенно неприятно перекрытие в момент ввода номера с клавиатуры. Наши инженеры научили камеру разворачиваться под нужным углом, а башню — поворачиваться при взаимодействии с номером на ВЛД. Интересно, что многие игроки не замечали этого поведения системы. Как говорится, UX незаметен, но его отсутствие вы заметите сразу.

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

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

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

#опыт #ux #worldoftanks #wargaming