Тендеры и лиды
Информация
«А где здесь кнопка назад?», «Ой, а где я?», «Мини ап загрузился или еще нет?», «Как посмотреть страницу инкогнито?» и другие приключения пользователя в Telegram Mini App.
Руководитель компании ChatLabs Владислав Деханд делится опытом, как создать Telegram Mini App и не переделывать дизайн — с примерами реальных UI- и UX-решений для продаж и конверсий.
Пользователи быстро закрывают приложение, не заходят повторно, не выполняют целевые действия? Разбираемся, почему из-за дизайна в мини-ап падают MAU (Monthly Active Users), продажи (Paying Users), продолжительность сессии (Average Session Length) и другие метрики.
Mini App Telegram — это не сайт и не нативное приложение. Это отдельная среда, с которой нужно уметь работать. Технические особенности Телеграм диктуют правила UX и UI-дизайна.
Если дизайн мини-приложения в Телеграм не продуман, есть риск потратить деньги впустую и не достичь желаемого эффекта. Основные проблемы в юзабилити и дизайне мини апп:
Чтобы не пришлось тратить время и деньги, лучше на старте закладывать правильную структуру. ChatLabs занимается разработкой Telegram Mini App (TMA) с 2022 года. Ниже делимся накопленным опытом, рабочими приемами UI- и UX-дизайна мини-приложений, правилами прототипирования и тестирования юзабилити. А еще собрали все стадии и нюансы разработки в полезном чек-листе: скачивайте pdf в 1 клик, делитесь с коллегами и создавайте высококонверсионные проекты без проблем с UI, UX и масштабированием!
Разработка мини-приложений в Телеграм — это и не веб, и не мобильные приложения. Аналогично и с Mini App для MAX, VK и иных платформ.
Здесь важно вписать UX-сценарии в контекст мессенджера, создать эффект бесшовного перехода и упростить пользовательский путь. При этом важно учесть ограничения платформы (Телеграм, Макс, Вк) и технические нюансы реализации проекта.
Mini App доступен только с платформы Телеграм. Сценарии запуска и завершения отличаются от привычной вкладки в браузере.
Это важно учитывать не только при проектировании дизайна, но и когда планируете рекламу на мини-приложение со сторонних источников:
К примеру, у части пользователей мини-приложение не откроется просто потому, что не установлен Telegram. Один из способов решить подобную проблему — работать с аудиторией, которая уже есть в Телеграм. В кейсе SOKOLOV рассказывали, как ювелирный бренд запустил реферальную программу с розыгрышем и набрал 14 000+ подписчиков на текущей аудитории в Telegram-канале.
Визуал и наполнение TMA нужно проектировать так, чтобы у человека не было диссонанса с тем, что он видел в мессенджере. В идеальном сценарии — иллюзия бесшовного перехода: как будто не открывается приложение на стороне, а реально часть мессенджера.
В мини-приложениях Телеграм нет привычной системной навигации. В частности:
Выбор настроек (нажатие на три точки в верхнем углу) ограничен. После тапа на три точки в меню Телеграм появляются «Показать бота», «Обновить страницу», «Условия использования», «Полноэкранный режим» (с конца 2024), «Добавить на главный экран» (с конца 2024), «Поделиться», «Настройки».
В браузере, к примеру, будут доступны «Вкладка инкогнито», «Масштаб», «Закладки», «Недавние вкладки», «Найти на странице». Это влияет на паттерны поведения, а значит — механики вовлечения и удержания.
При проектировании дизайна Mini App Telegram стоит учитывать сценарии запуска и завершения. Плюс мини-аппов в Телеграме — работа с идентификатором аккаунта (Telegram ID). Благодаря этому легко сохраняются:
Если человек заходит в мини-приложение с одного и того же аккаунта, но на разных устройствах (ПК, планшет, смартфон), везде будет подтягиваться прогресс. Это особенно актуально для магазинов в Телеграм.
В мини-приложениях Телеграм доступны Day and Night modes или кастомные темы. Вне зависимости от выбора стоит учитывать: и светлые, и темные режимы должны создавать ощущение бесшовной интеграции и продолжения мессенджера. Как будто бы человек вообще не выходит из Телеграма. Но здесь все зависит от конфигурации проекта.
К примеру, для утилитарных мини-приложений, где предусмотрены частый вход и минимум действий (заметки, трекер привычек) лучше подойдет стандартный интерфейс. Для вовлекающих проектов — игр, тапалок, кликеров — можно делать кастомные темы, не связанные с Телеграм.
Для быстрого создания интерфейсов используют UI Kits (User Interface Kit, юай киты):
Библиотека Telegram UI предоставляет готовые React-компоненты для создания TMA:
В обновлении ноября 2024 года появился Full-screen Mode — полноэкранный режим, доступный при горизонтальной (альбомной) и вертикальной (портретной) ориентации. Полноэкранный режим позволяет:
Full-screen Mode в дизайне мини-приложений используют, когда взаимодействие достаточно долгое и подразумевает максимальное погружение (вовлечение, включение). Как правило, Mini App с фулл-мод заказывают для игр, тапалок, кликеров.
Неполноэкранный (стандартный) режим подразумевает наличие верхней «шторки», где размещены название мини-приложения в Телеграм и описание. При проектировании и разработке можно покрасить ее в цвет приложения, чтобы создать ощущение как будто она дефолтная от Телеграм.
«Клиенты часто просят дублировать кнопку «Назад» в самом интерфейсе мини-приложения, т.е. в дополнение к верхней системной. Опыт ChatLabs показывает, что подобный ход излишний. Получается дублирование кнопки «Назад»: она и в интерфейсе Mini App, и системная».
Роберт Михалюк
Бизнес-аналитик компании ChatLabs
Среда WebView накладывает ограничения на сценарии взаимодействия с мини-приложением и проектирование логики TMA. Mini App в Telegram работает ровно столько, сколько открыто (пока человек им пользуется). Как только пользователь закрывает мини-апп или переключается на другой экран, TMA прекращает работать и потреблять ресурсы устройства.
Этим игры в Телеграм отличаются от браузерных. Если страница открыта в браузере (даже в фоновой вкладке), она все равно «живет». Значит:
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13201 тендер
проведено за восемь лет работы нашего сайта.
Особенность Mini App в Telegram — в отсутствии подобных фоновых функций. Это ограничивает маркетологов и разработчиков. Например, нельзя реализовать сложные UX-сценарии с периодическими проверками или триггерами.
Важно учитывать, что движок Телеграм не поддерживает часть функций, которые доступны в браузере. В результате сложные UI и UX-сценарии могут «ломаться». Проблемы возникают, если нужны:
Частично опытные разработчики могут решить перечисленные проблемы:
В области мобильного гейминга возникал вопрос: не запускаются игры внутри Telegram на старых устройствах (варианты — не открываются, открываются и не работают). После обновления 2024 г. программисты получили возможность взаимодействовать с аппаратными характеристиками гаджетов — мощностью и объемом памяти. Это позволяет автоматически настраивать параметры в зависимости от ресурсов устройства.
Также в обновлении 2024 года появился лоадер мини-приложения. На экран Mini App можно добавить логотип, значок и иные изображения: они отображаются перед началом загрузки приложения.
Для тех кто собирается создать Mini App, в Telegram разработали Design Guidelines — набор принципов для проектирования приложений. В ChatLabs дополнили гайдлайн Телеграма рекомендациями из опыта:
С аналогичными ограничениями сталкиваются разработчики, которые создают VK Mini Apps или MAX Mini App для отечественных мессенджеров. На платформе Макс предлагают готовую библиотеку MAX UI с компонентами для мини-приложений в MAX, сторонних суперприложений или standalone-приложений. Компоненты библиотеки MAX UI мимикрируют под нативные компоненты Android и iOS, умеют поддерживать светлую и темную темы оформления. Для кастомизации компонентов в MAX предусмотрели API.
Каждый мини-ап в Телеграм имеет уникальную ссылку, которую можно разместить в различных каналах. Это могут быть:
Пользователь откроет мини-апп в Телеграм даже в случае, если раньше не был подписан на бота. На входе в Telegram Mini App человек должен сразу понять, где он, для чего это приложение и что делать. Основные приемы онбординга и погружения:
В мини приложения в Телеграме не стоит добавлять многоуровневую навигацию. Задача — не перегружать, максимально упрощать.
В интерфейсе мини-приложения можно заложить шкалу с прогрессом: шаг 1, 2, 3, 4, 5. Структура взаимодействия выглядит логичной: 1 шаг = 1 действие. Человек видит шаг, на котором находится, сколько этапов впереди.
Сегментация на входе (после запуска Telegram Mini App) поможет в будущем сделать кастомный маршрут, соответствующий интересам потребителя. Варианты, как сегментировать аудиторию мини приложения в Телеграм, Макс или Вк, могут быть разными. Например:
Подход позволяет предоставить персонализированный опыт и увеличить глубину взаимодействия.
UX-сценарий мини-приложения зависит от ниши. В онлайн-обучении, инфобизнесе, психологии, коммьюнити-сервисах стоит предусмотреть основной CTA и промежуточные на пути достижения.
В UX-сценарии можно заложить интерактивные элементы:
Список зависит специфики ниши и целевой аудитории. Но цепочка действий позволяет закрыть всю воронку бренда, а не только задачи интернет-маркетолога.
Пускай человек в ходе взаимодействия с мини-приложением в Telegram или MAX выполнил задачи: подписался на Telegram-канал, оставил отзыв на сайте, купил товар и отсканировал чек, вовлекся в обсуждения в социальной сети Вконтакте. Одна воронка с геймификацией в Телеграм закрыла задачи SMM, бренд-маркетолога, интернет-маркетолога, PR-специалиста, руководителя отдела продаж.
В 2024 году появилась возможность разместить иконку на главном экране. Опция «Add to Home Screen» позволяет запускать игры и сервисы в одно касание. Значит, человеку не нужно: заходить в Телеграм, искать мини-приложение в списке, открывать. Это положительно влияет на возвращаемость и удержание (Retention Rate).
Разработка Mini App Telegram в идеале предусматривает максимальное вовлечение и персонализацию. В UX-сценарии Телеграм закладывают интерактивные механики, которые могут заинтересовать и мотивировать человека. Например, в дизайне и юзабилити можно предусмотреть:
Важно, чтобы UX-сценарии не были сложными и перегруженными. Поэтому в ChatLabs рекомендуют делать упор на микродействия и разбивку логики на мелкие шаги.
Мини-приложение — формат, который доступен не только в Телеграм, но и в MAX, VK и на иных платформах. Mini App для бизнеса становится точкой входа в продукт, а не просто очередной «фичей для бота». При правильной воронке можно получать пользователей из любой внешней среды: email-рассылка, рекламные баннеры, UGC-контент, ссылки в статьях на сайте. Телеграм (равно как MAX или VK) в таком случае работает как среда авторизации и доставки.
Дизайн Telegram Mini Apps подразумевает бриф и знакомство с проектом, UX-прототип с оценкой удобства и цепочки действий, нативный и простой UI-интерфейс в стиле Telegram. После разработки и тестирования могут потребоваться доработки: например, для масштабирования мини-приложения или изменения бизнес-логики в нем. Поэтому важно выбирать подрядчика, который умеет работать с Mini Apps и на старте закладывает возможности масштабирования.
Больше про продающий дизайн и конвертящие мини-апы можно найти в Телеграм-канале. Примеры реальных проектов для вдохновения и изучения представлены в разделе «Кейсы».
