The Outer Worlds UI (PC version)

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

Михаил Ротфорт:

Классная идея совместить направление названия с направлением корабля.

Павел Турчин:

Отличный динамичный бэкграунд, первое же впечатление: вот мы и отправляемся в странствие к звёздам! Простой UI, не убавить не прибавить.

Михаил Ротфорт:

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

Что сейчас выбрано? Куда нажимать? Что вообще происходит?

Решение может быть следующим:

А еще, в TOW есть отличный арт для туториала, и мне кажется он сюда отлично подошел бы, а так окно выбора сложности выглядит мягко говоря скучно.

Павел Турчин:

Модальное окно выбора сложности в контексте такого главного меню вполне выгодное решение в плане разработки. Фактически, здесь полностью отсутствуют трудозатраты на арт. Полупрозрачная подложка, полупрозрачные кнопки. Привычно, минималистично, хорошо. Хинт Esc расположен в традиционном месте для консолей, в ПК-версии более стандартным было бы использование крестика. Сразу напрашивается вывод, что UI был сделан универсальным для разных платформ. Я бы в ПК-версии крестик всё же вернул. А еще мне кажется не слишком верным делать на этом экране кнопки без подтверждения, а на следующем с подтверждением. Не вполне очевидное поведение.

Михаил Ротфорт:

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

Павел Турчин:

Ну кроме неконсистентности с предыдущим экраном я обратил здесь внимание на вид самих опций. И сразу же пошёл посмотреть, как сделаны все остальные настройки. Тут интересно, что для дискретных опций вида On/Off используется последовательный селектор. Это опять же явно консольное решение. Для UI с мышкой удобней и наглядней было бы применение двух кнопок ( On )(/////Off//////). Так что тут явно виден курс на кроссплатформенность. А вот в опциях при этом была замечена галочка “Вертикальная синхронизация”. Я бы предположил, что это артефакт от ранней стадии разработки. Иначе не объяснить, почему тут тоже не сделать по аналогии с другими опциями. Вообще использовать чекбокс при такой вёрстке очень странно.

Михаил Ротфорт:

Дальше начинается синематик, и вот тут странная история, чтобы его пропустить нужно нажать и удерживать ENTER (опять же ноги у этого решения растут у консоли), а вот если нажать ESC, что в целом логично, если ты хочешь пропустить синематик, то тебя выкинет на главный экран, хорошо что через подтверждение (но кто ж его читает).

Диалоговое окно, кстати, симпатичное, опять же почему не использовали этот арт на первых экранах “Новой Игры”.

Михаил Ротфорт:

Здесь в плане UI ничего интересного, нужно сначала распределить очки, после чего можно будет продолжить нажав кнопку “E”.

Но тут есть отличная механика, если прокачать “Показатель” до максимального или ниже среднего, сумасшедший профессор комментирует это. Причем на каждый параметр у него есть несколько реплик. Например если апнуть интеллект, он скажет что то вроде “Этот парень умнее чем мой навигационный компьютер”.

А если ничего не делать, он начинает подгонять игрока.

Павел Турчин:

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

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

Михаил Ротфорт:

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

Павел Турчин:

Мне хочется отметить здесь слайдер для выбора безымянных опций. Вместо выбора вида Лицо1, Лицо2, Лицо3 слайдер, очевидно, лучше для этого подходит.

Павел Турчин:

Интересно, что здесь есть ограничение знаков и количество символов отображается. Приятная мелочь.

Павел Турчин:

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

Михаил Ротфорт:

Аккуратно и не перегружено. POI маркеры сделаны заметно, несмотря на пестрый сеттинг. Компас направление дает и ладно, но более менее удобно им пользоваться только на открытых локациях.

Подсказка о новом уровне сделана заметно, но не раздражающе.

Михаил Ротфорт:

Хороший диалог, но из проблем я бы выделил следующее:

Я бы предложил не закрывать окно при продолжении диалога и сделать его побольше процентов на 30% по вертикали и процентов на 10% по горизонтали.

Павел Турчин:

Меня здесь заинтересовало решение с историей диалога. Особенно, в плане технической реализации. Действительно, история нужна чуть больше, чем никогда. Так зачем же держать её где-там, под скроллом, если можно подгрузить только, если она понадобится.

Михаил Ротфорт:

Окно появляется автоматически при наведении на объект имеющий лут. Удобное, сразу с тултипом, вся как у людей. Есть одна минорная проблема: “взять все” очень долгий, пользоваться им мягко говоря не хочется, проще закликать и собрать по одному предмету.

Михаил Ротфорт:

Общий: как ходить, бегать, прыгать и вот это вот все.

Про фичи: стена текста, но оформление отличное, связанное с лорной компанией которая предоставляет эту самую фичу.

Павел Турчин:

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

Отдельно хочется остановиться, что такие же экраны появляются между страницами левелапа (почему-то не чаргена) и это здорово упрощает понимание процесса развития персонажа.

Summary

Skills

Abilities

About

Reputation

Михаил Ротфорт:

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

Павел Турчин:

Конечно же, это основные и наиболее проработанные интерфейсы и тут я могу обратить внимание только на положительные стороны, которые уже встречались в чаргене, а именно, фокус на описании.

Михаил Ротфорт:

Для того что сравнить один предмет с другим, его нужно тегнуть с помощью клавиши “C” (при этом на иконке предмета появится соответствующий знак <=>) и навестись на любой другой предмет того же типа. В случае если типы не совпадают, то и сравнения не будет.

А еще на скрине ниже можно заметить классную фичу, на фоне тултипа можно разглядеть логотопы компаний, которым принадлежат предметы, мелочь, а приятно.

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

Помимо этого можно предмет “Осмотреть”

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

Михаил Ротфорт:

Инвентарь, такой же как и у основного персонажа, только из фильтров остались только оружие и броня.

Способности, также похожи на способности персонажа, с той разницей что их меньше.

Общее, и тут же настраивается AI компаньона.

Выбор компаньон

Михаил Ротфорт:

Красивая, слов нет. Понятно куда тебе нужно. Но иконка корабля - fail. Я ее теряю постоянно.

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

Как вариант.

Михаил Ротфорт:

Вопросы:

Со сравнением с текущей экипировкой несколько сложнее. Самым очевидным решением видится отдельная кнопка, так для сравнения игра просит нажать “C”, а для сравнение с текущим, можно было бы сделать удержание “С”. Но вопрос как сравнить оружие, которых у персонажа 4 слота, тогда удержание не подойдет, и нужно выделить отдельную клавишу под это дело.

Выполнен просто но со вкусом, вместо скринов с локации, нам показывают плакаты корпораций, и их довольно много.

А в нижней части хинты и анимация.

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