The Outer Worlds UI (PC version)

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

Главное меню

The Outer Worlds UI (PC version)

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

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

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

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

The Outer Worlds UI (PC version)

Новая игра

The Outer Worlds UI (PC version)

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

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

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

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

  • Не снимать фокус с элемента
  • Добавить возможность продолжить, отличный от клика мыши по элементу (хотя и клик можно оставить)
  • Либо кнопку “Продолжить”, что они и сделали в следующем экране.
The Outer Worlds UI (PC version)

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

The Outer Worlds UI (PC version)

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

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

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

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

The Outer Worlds UI (PC version)

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

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

The Outer Worlds UI (PC version)

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

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

The Outer Worlds UI (PC version)

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

Чарген — Показатели, Навыки, Абилки

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

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

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

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

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

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

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

The Outer Worlds UI (PC version)

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

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

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

Чарген — Внешность

The Outer Worlds UI (PC version)

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

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

Чарген — Имя

The Outer Worlds UI (PC version)

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

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

The Outer Worlds UI (PC version)

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

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

SaveLoad

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

In Game

HUD

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

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

The Outer Worlds UI (PC version)

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

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

Dialogue

The Outer Worlds UI (PC version)

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

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

  1. На чеке скила нет обозначения текущего значения этого скила у персонажа. Хотя бы в тултип засунули это что ли. Или в историю.
  2. Чтобы посмотреть историю нужно нажать специальную кнопку, при этом размер окна истории оставляет желать лучшего. Плюс к этому, это окно закрывается как только диалог продолжается.

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

The Outer Worlds UI (PC version)

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

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

Quest Notification

The Outer Worlds UI (PC version)

Loot

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

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

The Outer Worlds UI (PC version)

Tutorial

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

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

The Outer Worlds UI (PC version)

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

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

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

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

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

Character / Level Up

Summary

The Outer Worlds UI (PC version)

Skills

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

Abilities

The Outer Worlds UI (PC version)

About

The Outer Worlds UI (PC version)

Reputation

The Outer Worlds UI (PC version)

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

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

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

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

Inventory

The Outer Worlds UI (PC version)

Tooltip

The Outer Worlds UI (PC version)

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

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

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

The Outer Worlds UI (PC version)

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

The Outer Worlds UI (PC version)

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

The Outer Worlds UI (PC version)

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

The Outer Worlds UI (PC version)

Journal / Codex

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

Map

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

Companions

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

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

The Outer Worlds UI (PC version)

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

The Outer Worlds UI (PC version)

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

The Outer Worlds UI (PC version)

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

The Outer Worlds UI (PC version)

Global Map

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

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

The Outer Worlds UI (PC version)

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

The Outer Worlds UI (PC version)

Как вариант.

The Outer Worlds UI (PC version)

Vendor

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

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

Вопросы:

  • Почему ограничен доступ?
  • Почему не показывается мой текущий вес?
  • Как сравнить с тем что на мне одето?
The Outer Worlds UI (PC version)

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

Loading Screen

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

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

The Outer Worlds UI (PC version)

Итог

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

6868
40 комментариев

Комментарий недоступен

29
Ответить

Я из за мелких шрифтов игру дропнул. 
А если через ini увеличить интерфейс, то кнопка "продолжить" в обучающем окне уходит за поле зрения и это окно никак не пропустить, потому что по этой кнопке нужно кликать...

6
Ответить

Хм. Нас действительно никоим образом не напряг размер шрифта. Полагаю, тут важно, на каком экране играть. Но, если вообще порассуждать о размере шрифта, то тут палка о двух концах. Да, есть минимальный размер кегля, и вообще, даже размер иконок. Если всё делать крупным, то начинаются проблемы с длиннющими скроллами, что плохо для консолей, и правилами соседства элементов, что мешает смысловому делению блоков. Так что бесконечно растить шрифт не получится. Можно было бы сказать: ну давайте сделаем крупно там, где это можно. Тогда мы выхватим другую неочевидную проблему, экраны интерфейсов превратятся в зоопарк с бессистемными сущностями, которые надо делать и поддеживать. Те же описания где-то были бы крупные, где-то мелкие. Это сложно поддерживать, вёрстка будет разваливаться, разработка удлиняться. А если пытаться делать системно, но, например, сказать, что вот описания у нас будут всегда 18 кеглем, а всё остальное по мере необходимости, то получится каша из размеров элементов в пределах одного экрана и это мало того, что будет странно выглядеть, но еще и может нарушить информационную иерархию, акценты и восприятие в целом. А поскольку, у разработчиков явно не было лишних полгода на эксперименты, то они избрали наиболее надёжный путь. Думаю, это было так: пусть у нас будет дизайн-система с размерами шрифтов и иконок, основанная на самом насыщенном экране. Не могу их за это осуждать.
Единственное, с чем соглашусь, это с низкой контрастностью описания. Тут, пожалуй, можно лучше. Но с оговоркой, что зато взгляду проще цепляться за самое важное: название, прайс, вес, боевые характеристики. А всё лорное описание, это второстепенно.

2
Ответить

все ок там со шрифтами, о чем ты?

2
Ответить

«А ты точно дизайнер интерфейса?» Ладно, я заметил, что цель "прокачать скилл".
Ну, качайте. Так вот интерфейс это не от слова картинки. Это от слова взаимодействие. То что там башка торчит из-за рамки —да пофиг вообще.

Важные вещи
1. Шизофреничный скролл, который на самом деле странички, но нарисован скролл. Умные люди делают и то и другое сразу, тут — ни рыба, ни мясо.
2. Отсутствие сортировки инвентаря. Просто как понятия. Я бы уже текстовому окну с поиском радовался.
3. Автосортировки тоже нет. Понять, есть у меня апгрейд, или расходник — невозможно.
4. Интерфейс это то, как мне в кузнице надо переключить 15 вкладок, чтобы одно оружие обслужить. Я его даже выбрать не могу. Спасибо хоть подсвечено  что у меня в руках.
5. Хотя , почему это надо было отмечать рамочками в инвентаре, а не положить в отдельные слоты экипировки?
6. Напарники, выбранные на миссию отмечены маленькой желтой точечкой. Да, это всё. Ни анимации, ни визуального отличия от запасных.
7. Отдельное спасибо за непереназначаемые кнопки карты, инвентаря, персонажа и всего остального. Если это так важно, могли бы просто огромную ( с маленькими буквами) всплывающую плашку добавить "привет, я консольный порт".
8. Не менее специальный приз человеку, который решил, что снять броню с напарника на корабле нельзя. Поменять можно. Но смотреть на него в подштанниках положено только на миссии.
9. Хоткеев для расходников тоже нет. Безусловно, единый медпакет это инновационно и даже порой полезно. Но не когда у меня баф на 15 секунд, баф на 2 минуты и собственно аптечка, которую надо жрать по обстоятельствам и это единственный способ их зохавать без открытия инвентаря.
10. Если уж вы настойчиво предлагаете мне жать активную паузу для изучения врага, можно ему кроме смехуечков в описание добавить уязвимости и сопротивления?

И это только то что наболело.
з.ы. «Вешает дот на существо и наносит ему урон в размере 25 в секунду в течении 5 секунд». Во первых, я не понимаю, как на существо можно повесить дот, это же памятник, то есть укрепленная точка для обороны. Во-вторых, вешает и наносит это у вас разные сущности? А выглядит, как будто разные. В-третьих, вы уверены что в размере, а не в объеме? Короче, от канцеляризмов надо избавляться. Чистота речи, особенно в справочных материалах ни чуть не менее важна чем чистота картинки.
"Ожог: 25 урона в секунду, длительность 5 секунд".
И это, отстаньте вы от цветокодирования и иконок. Поверьте, я переживу без третьего слова "плазменный" на экране.

21
Ответить

Так есть сортировка. На кнопку S. Точно можно сортировать по цене и весу

Ответить

Какая-то мелкая критика вместо предложений что можно было сделать принципиально по другому
Начал читать и дропнул
Не интересно

18
Ответить