Оружейные кейсы CS:GO – основа цифровой экономики шутера. Помимо создателей игры, частью этой экономики являются и сторонние компании, которые предлагают пользователям бесплатные и платные кейсы для улучшения снаряжения.
Skin.Club – одна из таких компаний, заинтересованная в том, чтобы пользователи выигрывали скины в их сервисе. Для этого, механику открытия кейсов, в том числе бесплатных, нужно дорабатывать, делать процесс как можно более вовлекающим, интересным и понятным для игрока.
Автор делится процессом реализации варианта бесплатного кейса для SkinClub.
Проблема
Бесплатные кейсы – не самый желанный артефакт для игроков. Чаще всего в них используются дешевые скины, ради которых не стоит стараться, и игроки это понимают. Поэтому, для вовлечения пользователей решили добавить условно-бесплатные кейсы с завидными скинами. При этом, интерфейс должен остаться простым и понятным.
Задача
Реализовать вариант условно-бесплатного кейса, открыть который можно только с определенным временным интервалом и выполнив все условия. Условия открытия кейса:
- Пополнение баланса на определенную сумму за определенный промежуток времени,
- Указание в нике на платформе Steam названия сервиса.
Этап 1: цветовые схемы
Мы реализовали две цветовые схемы для дизайн макета.
1. С использованием библиотеки из действующего проекта
2. Предложенный вариант стилистики
Для каждой цветовой схемы реализовали 4 состояния исходя из возможного поведения игроков.
1. Обратный отсчет, частичное выполнение условий для открытия кейса
Для стартовой страницы кейса разработали структуру, которая выполняет задачи:
- Подогреть желание пользователя получить приз: разместили изображение кейса вверху слева. Так как левая часть – самая просматриваемая пользователями, мы разместили кейс там и сделали дополнительный акцент на его визуальной привлекательности.
Увеличить доверие пользователя: внизу указали предметы, которые можно получить в кейсе.
- Улучшить навигацию и упростить выполнение условий для открытия кейса: справа вверху разместили ключевую информацию (название, описание, условия получения кейса, таймер времени). Условия выделили цветом, а возле каждого параметра с условиями добавили значок «?». Нажав на него, пользователь получает более подробную информацию.
2. Прошло время холда для открытия кейса, условия не выполнены. Для этого состояния кнопка открытия недоступна
Вместо таймера появилась кнопка открытия кейса, но она не активна, т.к. пользователь не выполнил одно условие. После нажатия на кнопку, игрок с помощью анимации понимает, какое условие не выполнено. Это делает интерфейс отзывчивым и не создает ложного ощущения, что кнопка не нажимается или страница зависла. При этом, рядом с кнопкой указан сопроводительный текст, который сообщает, что сейчас пользователь не может открыть кейс, т.к. не выполнены условия.
3. Прошло время холда для открытия кейса, условия выполнены, можно открыть кейс
После выполнения всех условий, кнопка открытия кейса становится активной. Ключевой акцент в дизайне делается именно на кнопку открытия кейса, т.к. это является основным действием.
4. Кейс открыт, можно забрать приз 🏆
При открытии кейса, на первом плане появляется анимация кейса. Все внимание пользователя приковано к заветному выигрышу, ничего в интерфейсе не отвлекает от предвкушения.
Результат 😎
При таком подходе пользователь четко понимает, какие действия необходимы для получения приза. При этом, в процессе взаимодействия с кейсом, пользователь вовлекается в процесс за счет яркого и эмоционального дизайна.
С учетом того, что одно из условий получения кейса – размещение названия сервиса SkinClub в профиле Steam, это улучшает продвижение SkinClub среди игроков.