В посте я стараюсь показать, как можно улучшить UI UX мобильной игры. Подобные коррекции имели место в 2014, когда я работал помощником продюсера над популярным мобильным шутером SAS 3: Zombie Assault.
Далее, в основном, будут описаны мои “претензии” к одному из интерфейсов игрового магазина, но для начала некоторая затравка на тему, что полезного проекту принесут коррекции:
- улучшат юзабельность всего менеджмента предметов;
- избавят игрока от многочисленных мини-фрустраций, связанных с использованием данного UI;
- усилят момент награждения;
- будут экономить время игрока (забота);
- косвенно увеличат желание игрока вдонатить в игру.
Плюс, некоторые соображения, почему коррекции магазина вообще имеют смысл:
- Менеджмент покупки и апгрейдинга вещей является вторым основным геймплеем после шутерной его части. Он имеет большое значение, потому что внутри магазина игрок тратит много времени, играя, по сути, в мини-игру.
- Магазин — это место, где игрок получает награждения. Здесь тратятся деньги, приобретаются товары – это очень приятно, а все маркетологи знают, что в приятном магазине покупателю приятнее расставаться с деньгами (вот почему в супермаркетах часто играет музыка). Поэтому внутриигровой магазин, как и покупки в нём, должны сопровождаться радующими органы чувств игрока, максимально проработанными элементами: спецэффектами, бекграундами, озвучками, поздравлениями, и т.д.
- Как инструмент ретеншена, магазин влияет на мотивацию игрока. Ему видны горизонты, куда стремиться, что купить в будущем — формируется, как бы, wish-лист. Появляется ожидание и желание, мотивация заходить в игру и зарабатывать валюту.
- Известно, что магазин (в принципе как и вся игра) сам по себе мотивирует игрока на донат всевозможными маркетинговыми и геймплейными приёмами, а это напрямую влияет на прибыльность проекта.
- Следует учитывать, что в магазине происходит “мирный” геймплей, где игрок не спешит, отдыхает между битвами, и потому может внимательнее присматриваться к графическим элементам, замечая недоработки.
Далее, сами пункты “претензий” к ошибкам UI, отмеченные на картинке аляповато, но наглядно. Плюс, соображения по их коррекциям.
1
Окно картинки предмета.
Здесь очень много пустого, неиспользуемого и некрасивого места. Это касается всех изображений брони – от шлемов до ботинков.
Нивелируется элемент награждения при покупке – изображение купленного предмета меньше радует игрока, а серый никакой бекграунд позади картинки может вообще приносить раздражение, печаль.
Нерационально используется ресурс свободного места, отведенного для всех элементов интерфейса, что скорее всего, является багом UX.
Возможные коррекции:
- Перенести параметры предмета и кнопку «UPGRADE» из нижней части окна в правую часть окна картинки предмета. Саму картинку предмета сдвинуть влево. Освободится место внизу, что позволит увеличить прекрасное изображение предмета в полтора-два раза.
- Фон желательно сделать покрасивее. Серый цвет на бекграунде – это слишком уныло, что крайне редко встречается в топовых играх, даже самых хардкорных. Хотя бы тень под предметом прилепить, как минимум, а то висит в пустоте.
2
Текст «PASGT armor pack».
Сообщает о принадлежности предмета к набору. Эта информация лишняя и некрасивая. Лишняя потому, что игроку нигде не объясняется про существование такой штуки, как бонусы от сбора полного набора предметов. Поэтому даже прочитав про принадлежность предмета к сету, он скорее всего не догадается, что можно получить бонус, собрав весь сет.
Некрасивая эта информация потому, что принадлежность набора к сету, как и существование сетов, и так сообщается игроку самими названиями предметов. Логично, что Dragon Boots, Dragon Gloves, Dragon Helm явно принадлежат к одному набору. Название сета дублирует тот же текст в названии предмета, не сообщая ничего нового.
В целом, данный элемент интерфейса не выполняет никакой роли, а бессмысленно болтается на экране “для количества”, это ошибка UI UX.
Возможные коррекции:
- Если не менять все названия сетов, то этот текст лучше убрать из окна предмета.
- Если менять названия сетов на что-то более звучное, по типу “Hardcore Mariner armor pack”, то этот текст можно оставить, он станет продающим и награждающим.
- В окне одевания предметов (Equip Menu) нужно добавить информацию про сбор полных сетов. Внизу, как tooltip, например: “If the full set is equipped, you will get a set bonus”.
3
Кнопка «BACK».
Маленькая, и даже толком не кнопка, а текст. Значит, игрок по ней может не попасть пальцем, а ведь каждая не нажатая игроком кнопка (промах означает неудачу, по восприятию) вызывает мини-фрустрацию.
Такой тип кнопки можно вообще не заметить, так как все больше привыкли к красной кнопке с крестиком “X” где-то вверху экрана.
Возможные коррекции:
- Сделать кнопке типичный бекграунд. Можно вообще подумать над каким-нибудь зелёным цветом, для контраста на фоне всего красного оформления интерфейса.
- Увеличить кнопку, как минимум, в длину. Там и место рядом есть свободное.
4
Кнопка «GET COMPLETE ARMOR PACK» является надоедливым и малофункциональным банером, сильно влияющим на фрустрацию игрока.
Функциональность этой кнопки на всех экранах одинаковая – покупка полного набора премиум-брони. Эта повторяемость быстро обесценивает банер перед игроком, который перестаёт воспринимать и видеть его.
Банер дразнит большинство игроков недостижимой покупкой (15 у.е.), и если видеть его по пять раз в минуту при навигации по магазину, что и происходит, то это вызывает закономерную фрустрацию.
Банер сбивает с толку игрока. В тексте упоминается «armor pack», а это дублирует аналогичную надпись на картинке предмета. Поэтому интуитивно игрок воспринимает банер так, что опция предлагает купить именно тот армор-пак, который упоминается на картинке предмета. Далее игрок кликает по банеру в надежде купить желаемый армор-пак, но по итогу видит совсем другое предложение, и может почувствовать себя обманутым или ошибившимся. Часть таких игроков может отменить планируемую покупку.
Возможные коррекции:
- По моему мнению, этот банер необходимо навсегда удалить из интерфейсов покупки брони. Будет вполне достаточно подобной опции в премиум-разделе магазина.
- Либо, если банер приносит деньги, хотя бы изменить текстовку, чтобы не обманывать игрока.
5
Кнопка «VIEW ALL PREMIUM ITEMS» – не на своём месте.
Вообще, банеры, расположенные по принципу «абы где» — это безвкусно и некрасиво. Функциональность всего UI теряется. Плюс в тексте лишние слова «VIEW ALL», которые легко можно убрать или заменить.
Ещё ошибка проектировки – данная кнопка никак не выделена из общей стилистики меню. Это запутывает игрока, как тех, кто ничего никогда не покупает, так и тех, кто намеренно ищет список премиумов.
Возможные коррекции здесь сложны… Ощущается, скорее, что надо вообще перепроектировать большую часть интерфейса.
6
Отсутствует полоса прокрутки, хотя место на экране свободно. Это заставляет игрока прокручивать список предметов, нажимая прямо на него. Вследствие этого нажимается один из предметов, и окно предмета меняется, хотя игроку это было вовсе не нужно.
Возможные коррекции:
- Либо поместить весь список в пределы одного экрана, изменив шрифты и границы боксов.
- Либо таки реализовать прокрутку рядом с окном магазина брони.
- Либо как-то предотвратить случайное нажатие на предмет при прокрутке.
7
Буквы “Т” и “Н” на названиях предметов. Это баг, просто лишние элементы интерфейса. Не несут ни информации, ни функциональности для игрока – надо удалить их.
8
В двух местах экрана находится большое свободное место, никак не используемое. Скорее всего, баг проектировки интерфейса, и исправить это теперь сложно, без редизайна всего UI магазина.
9
Дешевый и безвкусный трюк – расположить банеры рядом с закладками, чтобы игрок случайно нажимал не то, что нужно. В данном случае закладки магазина настолько малы, и настолько тесно прилегают к рекламным банерам, что избежать ошибочного нажатия на последние можно только после тренировки (3-4 ошибочных нажатия у меня лично).
Это предмет особо сильной фрустрации игроков. Как его исправить, писать не буду, ибо для этого надо менять весь UI.