Как (не) надо делать интерфейсы

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

Ну а мы научим хорошему! Дизайн-директор беты Игорь разобрал неудачные игровые интерфейсы и рассказал, как не повторить их ошибки при создании сайтов и приложений.

Ошибка 1. Поломанное погружение

The Witcher 3 — игра с глубоко продуманным лором и персонажами. Каждая механика, каждая деталь, сюжетные повороты — всё вовлекает во вселенную. До тех пор, пока мы не заходим в древо навыков.

Интерфейс состоит из нестилизованных под игру иконок. Они не вызывают ассоциаций ни со средневековым сеттингом, ни с дарк-фэнтези. Если бы мы не знали, что это древо из «Ведьмака», то могли бы заподозрить на его месте любую другую RPG.

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

Важна целостность картинки

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

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

Ошибка 2. «Плоский» обвес

Боёвка в Elden Ring — один из важнейших аспектов игры. При этом интерфейс никак не реагирует на изменение здоровья, что мешает интуитивно понимать, насколько персонаж ранен. Остаётся лишь следить за маленькой полоской HP в углу экрана.

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

Интерфейс — это не набор статичных плашек

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

Крутое интерфейсное решение выкатил Сбер, когда внедрил в свои терминалы «Оплату улыбкой» — функцию, позволяющую через биометрию рассчитаться на кассе. 

Если оплата прошла, интерфейс «улыбается» покупателю в ответ. Если нет — «грустит» и окрашивается в красный. В итоге всё понятно без типичных галочек / крестиков и текста: «Операция прошла / не прошла».

Ещё пример упрощения взаимодействия — обновлённый фонарик в IOS 16. Изменять яркость и ширину луча можно без привычной шкалы с делениями. Её заменили на виртуальный фонарик, по которому нужно свайпать, чтобы менять освещение.

Итог: стало проще контролировать настройки фонарика, потому что яркость и угол освещения наглядно видно через микроанимации на экране.

Ошибка 3. Давящий интерфейс 

Большинство мобилок объединяет одна проблема — отсутствие нормального онбординга. Игры выкатывают 90% своего функционала в первые полчаса, заставляя прокликивать каждую выделенную кнопку. 

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

Дайте пользователю освоиться

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

Например, Binance внедрил у себя два вида интерфейса, между которыми можно переключаться. Lite — для новичков в инвестициях (по умолчанию у всех, кто только установил приложение), там необходимый минимум функций. Pro — для опытных крипто-юзеров с большим количеством опций.

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

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

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

Смотрите глубже

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

Больше полезного — в нашем тг-канале.